shit

package.json

@@ -14,12 +14,15 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.6.2",
     "echarts": "^5.4.3",
+    "element-plus": "^2.4.3",
+    "pinia": "^2.1.7",
     "postcss-pxtorem": "^5.1.1",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "postcss-pxtorem": "^6.0.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",

src/App.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-// @ts-ignore
-import Header from "@/components/Header.vue"
-const zz3 = 565
-
 
 
 </script>
 <template>
   <!-- <div>sadas</div> -->
   <div class="main-box">
-    <Header></Header>
     <router-view></router-view>
   </div>
 </template>

src/api.js

@@ -1,5 +1,6 @@
 
 import axios from "axios";
+import { ElMessage } from 'element-plus'
 // 创建axios 实例
 const instacne = axios.create({
     baseURL: "https://crmeb-test.shop.lihaink.cn/",
@@ -21,6 +22,16 @@ instacne.interceptors.request.use(
 // 响应拦截
 instacne.interceptors.response.use(
     (res) => {
+
+        console.log(res.data)
+        if (res.data.status != 200) {
+            ElMessage({
+                message: res.data.message,
+                type: 'warning',
+            })
+            return Promise.reject(res.data.message);
+
+        }
         // 对响应的数据做什么
         return res.data;
     },
@@ -92,6 +103,48 @@ export function take_order_listApi(params) {
 export function take_order_count_titleApi(params) {
     return instacne.get('/api/dataview/take_order_count_title', { params })
 }
-// 
-// /api/dataview/take_order_count_title?areaCode=510524&streetCode=510524100&status&page=1&limit=20
 
+
+export function financial_record_titleApi(params) {
+    return instacne.get('/api/dataview/financial_record_title', { params })
+}
+
+
+
+export function financial_recordApi(params) {
+    return instacne.get('/api/dataview/financial_record', { params })
+}
+
+export function product_status_filterApi(params) {
+    return instacne.get('/api/dataview/product_status_filter', { params })
+}
+
+
+export function financial_record_detailApi(params) {
+    return instacne.get('/api/dataview/financial_record_detail/1', { params })
+}
+export function financial_record_detailApi2(params) {
+    return instacne.get('/api/dataview/financial_record_detail/2', { params })
+}
+
+
+
+export function bill_listApi(params) {
+    return instacne.get('/api/dataview/bill_list', { params })
+}
+
+export function withdraw_listApi(params) {
+    return instacne.get('/api/dataview/withdraw_list', { params })
+}
+
+export function street_currday_order_countApi(params) {
+    return instacne.get('/api/dataview/street_currday_order_count', { params })
+}
+export function loginApi(params) {
+    return instacne.post('/api/dataview/login', params)
+}
+//
+////api/dataview/login  {
+//     "account": "泸县",
+//     "password": "luxian"
+// }

src/components/header.vue

@@ -82,6 +82,7 @@ import MapLoader from "@/view/utils/position.js"
 
 
 
+
 let area = ref('')
 
 const u = (name) => {
@@ -154,7 +155,8 @@ const offAreaList = (name) => {
 }
 const out = () => {
     //@ts-ignore
-    window.open("about:blank", "_top").close()
+    // window.open("about:blank", "_top").close()
+    router.replace('/login')
 }
 const updateTime = () => {
     var date = new Date();

src/components/index/bottomCenter.vue

@@ -4,30 +4,56 @@
     <div style="height:5vh;"></div>
     <div class="towns">
         <div class="town-li act">{{ area.area_name }} </div>
-        <div class="town-li" v-for="(item, index) in streetList">{{ item.street_name }}</div>
+
-        <div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
+        <div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
+            v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
+        </div>
+
+
+        <div id="transactionUsers" v-if="showChart" style="width: 100%;height: 30vh;">
+
+
+        </div>
     </div>
 </template>
 <script setup>
 import { ref, reactive, onMounted, defineProps } from "vue"
 import * as echarts from 'echarts';
 import { getUserTradeCountApi } from "@/api.js"
-import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";
 
 const props = defineProps({
     areaCodes: Object,
 })
 
+
+const hdClick = (code) => {
+    props.areaCodes.streetCode = code
+    init()
+}
+
 const streetList = reactive([])
 const area = reactive({
     "area_code": "",
     "area_name": ""
 })
 
+
+const init = () => {
+
     getUserTradeCountApi(props.areaCodes).then(res => {
+
+        showChart.value = false
+        option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
+        option.series[0].data.splice(0, option.series[0].data.length)
+        option.series[1].data.splice(0, option.series[1].data.length)
+        option.series[2].data.splice(0, option.series[2].data.length)
+
+        if (!streetList.length) {
+
             res.data.streetList.forEach(item => {
                 streetList.push(item)
             })
+        }
         area.area_name = res.data.area.area_name
         res.data.userTradeCountList.forEach(item => {
 
@@ -38,10 +64,20 @@ getUserTradeCountApi(props.areaCodes).then(res => {
             option.series[2].data.push(item.payOrderUser)
 
         })
+        showChart.value = true
+        setTimeout(() => {
 
             initCharts('transactionUsers', option)
 
+
+
+        }, 10)
+
+
     })
+}
+
+
 
 const initCharts = (tag, option) => {
     var chartDom = document.getElementById(tag);
@@ -49,9 +85,9 @@ const initCharts = (tag, option) => {
     myChart.setOption(option);
 }
 
+const showChart = ref(false)
 
-
+const option = reactive({
-let option = {
     color: ['#015989', '#583936', '#416979'],
     title: {
         text: ''
@@ -76,14 +112,8 @@ let option = {
         textStyle: {
             color: "white"
         }
-        //   data: ['访客人数','下单人数','支付人数']
-
     },
-    // toolbox: {
+
-    //   feature: {
-    //     saveAsImage: {}
-    //   }
-    // },
     grid: {
         left: '3%',
         right: '4%',
@@ -201,9 +231,11 @@ let option = {
 
 
     ]
-}
+})
-
 
+onMounted(() => {
+    init()
+})
 
 </script>
 <style lang="scss">
@@ -213,6 +245,7 @@ let option = {
     box-sizing: border-box;
     padding: 1vh 1vw;
     flex-wrap: wrap;
+    position: relative;
 
     .town-li {
         margin-top: 10px;
@@ -224,6 +257,7 @@ let option = {
         // margin-left: 2vw;
         justify-content: fl;
         margin-left: 2vw;
+        cursor: pointer;
     }
 
     .act {

src/components/townDetail/bottomleft.vue

@@ -1,476 +1,157 @@
 <template>
-    <div class="root">
+    <!-- <div style="background-color: red;position: relative;z-index: 9999; height: 10vh; cursor: pointer;">sadsad</div> -->
-        <div class="container-shell">
+    <div class="users center" id="orderAmount"></div>
-            <div class="container-shell-title">jessibuca demo player <span class="tag-version" v-if="version">({{
+    <img class="img-cls" src="/static/town/DRDDJE.png" alt="">
-                version
-            }})</span></div>
-            <div id="container" style="width: 200px;height: 200px;" ref="container"></div>
-            <div class="input">
-                <span>缓冲(秒):</span>
-                <input style="width: 50px" type="number" ref="buffer" value="0.2" @change="changeBuffer" />
-                <input type="checkbox" v-model="isDebug" ref="isDebug" @change="restartPlay" /><span>开启日志</span>
-
-            </div>
-
-            <div class="input">
-                <div>
-                    <input type="checkbox" v-model="isFlv" @change="restartPlay()" /><span>设置Flv格式</span>
-                    <input type="checkbox" v-model="controlAutoHide" @change="restartPlay()" /><span>控制栏自动隐藏(移动端不支持)</span>
-                </div>
-
-            </div>
-            <div class="input">
-                <span>解码器：</span>
-                <input type="checkbox" v-model="useMSE" ref="vod" @change="restartPlay('mse')" /><span>MediaSource</span>
-                <input type="checkbox" v-model="useWCS" ref="vod" @change="restartPlay('wcs')" /><span>webcodecs</span>
-                <input type="checkbox" v-model="useWasm" ref="vod" @change="restartPlay('wasm')" /><span>wasm</span>
-            </div>
-            <div class="input">
-                <div>输入URL：</div>
-                <input placeholder="支持ws-raw/ws-flv/http-flv协议" type="input" autocomplete="on" ref="playUrl" value="" />
-                <button v-if="!playing" @click="play">播放</button>
-                <button v-else @click="pause">停止</button>
-            </div>
-            <div class="input" v-if="loaded" style="line-height: 30px">
-                <button @click="destroy">销毁</button>
-                <button v-if="quieting" @click="cancelMute">取消静音</button>
-                <template v-else>
-                    <button @click="mute">静音</button>
-                    音量
-                    <select v-model="volume" @change="volumeChange">
-                        <option value="1">100</option>
-                        <option value="0.75">75</option>
-                        <option value="0.5">50</option>
-                        <option value="0.25">25</option>
-                    </select>
 </template>
-                <span>旋转</span>
+<style lang="scss" scoped>
-                <select v-model="rotate" @change="rotateChange">
+.img-cls {
-                    <option value="0">0</option>
+    width: 98%;
-                    <option value="90">90</option>
+    height: 45vh;
-                    <option value="270">270</option>
+    position: absolute;
-                </select>
+    top: 50%;
-
+    left: 50%;
-                <button @click="fullscreen">全屏</button>
+    transform: translate(-50%, -50%);
-                <button @click="screenShot">截图</button>
-                <div style="line-height: 30px">
-                    <input type="checkbox" ref="operateBtns" v-model="showOperateBtns"
-                        @change="restartPlay" /><span>操作按钮</span>
-                    <input type="checkbox" ref="operateBtns" v-model="showBandwidth" @change="restartPlay" /><span>网速</span>
-                    <span v-if="fps" style="margin-left: 10px">FPS：{{ fps }}</span>
-                </div>
-            </div>
-            <div class="input" v-if="loaded">
-                <input type="checkbox" ref="offscreen" v-model="useOffscreen"
-                    @change="restartPlay('offscreen')" /><span>离屏渲染</span>
-
-                <select v-model="scale" @change="scaleChange">
-                    <option value="0">完全填充(拉伸)</option>
-                    <option value="1">等比缩放</option>
-                    <option value="2">完全填充(未拉伸)</option>
-                </select>
-                <button v-if="!playing" @click="clearView">清屏</button>
-                <template v-if="playing">
-                    <select v-model="recordType">
-                        <option value="webm">webm</option>
-                        <option value="mp4">mp4</option>
-                    </select>
-                    <button v-if="!recording" @click="startRecord">录制</button>
-                    <button v-if="!recording" @click="stopAndSaveRecord">暂停录制</button>
-                </template>
-
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import { VERSION } from "./version";
-
-function isMobile() {
-    return (/iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
 }
 
-function isPad() {
+.users {
-    return (/ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase()));
+    margin-top: 4.5vh;
+    position: absolute;
+    width: 98%;
+    height: 35vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    z-index: 9999;
+
 }
 
-export default {
+.center {
-    name: "DemoPlayer",
+    position: absolute;
-    jessibuca: null,
+    top: 50%;
-    props: {},
+    left: 50%;
-    data() {
+    transform: translate(-50%, -50%);
-        return {
+}
-            version: '',
+</style>
-            wasm: false,
+<script setup>
-            playing: false,
+
-            quieting: true,
+import * as echarts from 'echarts';
-            loaded: false, // mute
+import { street_currday_order_countApi } from "@/api.js"
-            showOperateBtns: true,
+import { ref, reactive } from "vue"
-            showBandwidth: true,
+import { areaObj } from '../../store';
-            hotKey: true,
+const areaStore = areaObj()
-            err: "",
+
-            speed: 0,
+street_currday_order_countApi(
-            performance: "",
+
-            fps: '',
+    { ...areaStore.area }
-            volume: 1,
+
-            rotate: 0,
+).then(res => {
-            useWCS: false,
+
-            useMSE: false,
+    res.data.forEach(item => {
-            useWasm: true,
+        orderAmount.series[0].data.push(item.yesterdayAmount)
-            useOffscreen: false,
+        orderAmount.series[1].data.push(item.todayAmount)
-            recording: false,
+    })
-            isDebug: true,
+
-            recordType: 'webm',
+    initCharts('orderAmount', orderAmount)
-            scale: 0,
+
-            vConsole: null,
+})
-            controlAutoHide: true,
+
-            isFlv: false,
+
-        };
+
+const orderAmount = reactive({
+    color: [
+        new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: '#57D3ED' },
+            { offset: 0, color: 'transparent' },
+        ])
+        , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: '#4156C2' },
+            { offset: 0, color: 'transparent' },
+        ])
+    ],
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
     },
-    mounted() {
+    // color: transparent;
-        if ((isMobile() || isPad()) && window.VConsole) {
+
-            this.vConsole = new window.VConsole();
+    legend: {
+        textStyle: {
+            color: "white"
         }
-        this.version = VERSION === '#VERSION#' ? '' : VERSION;
+
-        this.create();
-        window.onerror = (msg) => (this.err = msg);
     },
-    unmounted() {
+    grid: {
-        if (this.$options && this.$options.jessibuca) {
+        left: '3%',
-            this.$options.jessibuca.destroy();
+        right: '4%',
-        }
+        bottom: '3%',
-        this.vConsole.destroy();
+        containLabel: true
     },
-    methods: {
+    xAxis: [
-        create(options) {
-            options = options || {};
-            const jessibuca = new window.Jessibuca(
-                Object.assign(
         {
-                        container: this.$refs.container,
+            type: 'category',
-                        // videoBuffer: Number(this.$refs.buffer.value), // 缓存时长
+            data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
-                        isResize: false,
-                        useWCS: this.useWCS,
-                        useMSE: this.useMSE,
-                        wcsUseVideoRender: this.useWCS,
-                        text: "",
-                        // background: "bg.jpg",
-                        loadingText: "疯狂加载中...",
-                        // hasAudio:false,
-                        debug: this.isDebug,
-                        hotKey: true,
-                        // hasAudio:false,
-                        controlAutoHide: this.controlAutoHide,
-                        supportDblclickFullscreen: true,
-                        showBandwidth: this.showBandwidth, // 显示网速
-                        operateBtns: {
-                            fullscreen: this.showOperateBtns,
-                            screenshot: this.showOperateBtns,
-                            record: this.showOperateBtns,
-                            play: this.showOperateBtns,
-                            audio: this.showOperateBtns,
-                        },
-                        forceNoOffscreen: !this.useOffscreen,
-                        isNotMute: true,
-                        timeout: 10,
-                        recordType: 'mp4',
-                        isFlv: this.isFlv,
-                    },
-                    options
-                )
-            );
-
-            this.$options.jessibuca = jessibuca;
-            var _this = this;
-            jessibuca.on("load", function () {
-                console.log("on load");
-            });
-
-            jessibuca.on("log", function (msg) {
-                console.log("on log", msg);
-            });
-            jessibuca.on("record", function (msg) {
-                console.log("on record:", msg);
-            });
-            jessibuca.on("pause", function () {
-                console.log("on pause");
-                _this.playing = false;
-            });
-            jessibuca.on("play", function () {
-                console.log("on play");
-                _this.playing = true;
-            });
-            jessibuca.on("fullscreen", function (msg) {
-                console.log("on fullscreen", msg);
-            });
-
-            jessibuca.on("mute", function (msg) {
-                console.log("on mute", msg);
-                _this.quieting = msg;
-            });
-
-            jessibuca.on("mute", function (msg) {
-                console.log("on mute2", msg);
-            });
-
-            jessibuca.on("audioInfo", function (msg) {
-                console.log("audioInfo", msg);
-            });
-
-            jessibuca.on("bps", function (bps) {
-                // console.log('bps', bps);
-            });
-            // let _ts = 0;
-            // this.jessibuca.on("timeUpdate", function (ts) {
-            //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
-            //     _ts = ts;
-            // });
-
-            jessibuca.on("videoInfo", function (info) {
-                console.log("videoInfo", info);
-            });
-
-            jessibuca.on("error", function (error) {
-                console.log("error", error);
-            });
-
-            jessibuca.on("timeout", function () {
-                console.log("timeout");
-            });
-
-            jessibuca.on('start', function () {
-                console.log('frame start');
-            })
-
-            jessibuca.on("performance", function (performance) {
-                var show = "卡顿";
-                if (performance === 2) {
-                    show = "非常流畅";
-                } else if (performance === 1) {
-                    show = "流畅";
         }
-                _this.performance = show;
+    ],
-            });
+    yAxis: [
-            jessibuca.on('buffer', function (buffer) {
+        {
-                console.log('buffer', buffer);
+            type: 'value',
-            })
+            splitLine: {
-
+                show: true,
-            jessibuca.on('stats', function (stats) {
+                lineStyle: {
-                console.log('stats', stats);
+                    type: 'dashed',//背景色为虚线,
-                _this.fps = stats.fps;
+                    color: '#256980'
-            })
-
-            jessibuca.on('kBps', function (kBps) {
-                console.log('kBps', kBps);
-            });
-
-            // jessibuca.on("play", () => {
-            //     this.playing = true;
-            //     this.loaded = true;
-            //     this.quieting = jessibuca.isMute();
-            // });
-
-            jessibuca.on('recordingTimestamp', (ts) => {
-                console.log('recordingTimestamp', ts);
-            })
-
-            jessibuca.on('playToRenderTimes', (times) => {
-                console.log(times);
-            })
-
-            // this.play();
-            // console.log(this.jessibuca);
-        },
-        play() {
-            // this.jessibuca.onPlay = () => (this.playing = true);
-
-
-            if (this.$refs.playUrl.value) {
-                this.$options.jessibuca.play(this.$refs.playUrl.value).then(() => {
-                    console.log('play success');
-                    this.playing = true;
-                    this.loaded = true;
-                    this.quieting = jessibuca.isMute();
-                }).catch((err) => {
-                    console.log('play error', err);
-                });
                 }
-        },
-        mute() {
-            this.$options.jessibuca.mute();
-        },
-        cancelMute() {
-            this.$options.jessibuca.cancelMute();
-        },
-
-        pause() {
-            this.$options.jessibuca.pause().then(() => {
-                console.log('pause success');
-                this.playing = false;
-                this.err = "";
-                this.performance = "";
-            }).catch((err) => {
-                console.log('pause error', err);
-            });
-
-        },
-        volumeChange() {
-            this.$options.jessibuca.setVolume(this.volume);
-        },
-        rotateChange() {
-            this.$options.jessibuca.setRotate(this.rotate);
-        },
-        destroy() {
-            if (this.$options.jessibuca) {
-                this.$options.jessibuca.destroy();
-            }
-            this.create();
-            this.playing = false;
-            this.loaded = false;
-            this.performance = "";
-        },
-
-        fullscreen() {
-            this.$options.jessibuca.setFullscreen(true);
-        },
-
-        clearView() {
-            this.$options.jessibuca.clearView();
-        },
-
-        startRecord() {
-            const time = new Date().getTime();
-            this.$options.jessibuca.startRecord(time, this.recordType);
-        },
-
-        stopAndSaveRecord() {
-            this.$options.jessibuca.stopRecordAndSave();
-        },
-
-
-        screenShot() {
-            this.$options.jessibuca.screenshot();
-        },
-
-
-        restartPlay(type) {
-
-            if (type === 'mse') {
-                this.useWCS = false;
-                this.useOffscreen = false;
-                this.useWasm = false;
-            } else if (type === 'wcs') {
-                this.useMSE = false
-                this.useWasm = false;
-            } else if (type === 'offscreen') {
-                this.useMSE = false
-            } else if (type === 'wasm') {
-                this.useWCS = false;
-                this.useMSE = false;
-                this.useOffscreen = false;
             }
 
-            this.destroy();
-            setTimeout(() => {
-                this.play();
-            }, 100)
         },
 
-        changeBuffer() {
+    ],
-            // this.$options.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
+    series: [
+        {
+            name: '昨日订单额',
+            type: 'bar',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [],
+            // itemStyle: {
+            //     borderWidth: 1,
+            //     borderColor: "#384FB4",
+            // },
+
+            backgroundStyle: {
+                color: ['red']
+            }
+        },
+        {
+            name: '今日订单额',
+            type: 'bar',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [],
+
         },
 
-        scaleChange() {
+
-            this.$options.jessibuca.setScaleMode(this.scale);
+    ]
-        },
+
-    },
+
-};
+
+
+
+})
+
+const initCharts = (tag, option) => {
+    var chartDom = document.getElementById(tag);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(option);
+}
+
+
+
+
 </script>
-
-<style>
-.page {
-    background: url(/bg.jpg);
-    background-repeat: no-repeat;
-    background-position: top;
-}
-</style>
-<style scoped>
-.root {
-    display: flex;
-    place-content: center;
-    margin-top: 3rem;
-}
-
-.container-shell {
-    position: relative;
-    backdrop-filter: blur(5px);
-    background: hsla(0, 0%, 50%, 0.5);
-    padding: 30px 4px 10px 4px;
-    /* border: 2px solid black; */
-    width: auto;
-    position: relative;
-    border-radius: 5px;
-    box-shadow: 0 10px 20px;
-}
-
-.container-shell-title {
-    position: absolute;
-    color: darkgray;
-    top: 4px;
-    left: 10px;
-    text-shadow: 1px 1px black;
-}
-
-.tag-version {}
-
-#container {
-    background: rgba(13, 14, 27, 0.7);
-    width: 640px;
-    height: 398px;
-}
-
-.input {
-    display: flex;
-    align-items: center;
-    margin-top: 10px;
-    color: white;
-    place-content: stretch;
-}
-
-.input2 {
-    bottom: 0px;
-}
-
-.input input[type='input'] {
-    flex: auto;
-}
-
-.err {
-    position: absolute;
-    top: 40px;
-    left: 10px;
-    color: red;
-}
-
-.option {
-    position: absolute;
-    top: 4px;
-    right: 10px;
-    display: flex;
-    place-content: center;
-    align-items: center;
-    font-size: 12px;
-}
-
-.option span {
-    color: white;
-}
-
-
-@media (max-width: 720px) {
-    #container {
-        width: 90vw;
-        height: 52.7vw;
-    }
-}
-</style>

src/components/townDetail/topCenter.vue

@@ -307,10 +307,24 @@
         opacity: 0;
     }
 }
+@keyframes jump {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
 </style>
 <script setup>
 import { getProductCountApi } from "@/api.js"
 import { ref, reactive, defineProps } from "vue"
+import Remake from "@/components/Remake.vue"
 
 const props = defineProps({
     code: Object,

src/components/townDetail/topLeft.vue

@@ -0,0 +1,147 @@
+<template>
+    <img class="img-cls" src="/static/town/YHSJ.png" alt="">
+    <div class="user center" id="user"></div>
+</template>
+<style lang="scss" scoped>
+.img-cls {
+    width: 98%;
+    height: 45vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.user {
+    position: absolute;
+    width: 98%;
+    height: 40vh;
+
+
+}
+</style>
+<script setup>
+import * as echarts from 'echarts';
+import { onMounted } from "vue"
+
+
+
+
+
+
+
+const userChartOption = {
+    color: [
+        new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: 'transparent' },
+            { offset: 0, color: '#0081C3' },
+        ])
+        , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: 'transparent' },
+            { offset: 0, color: '#3E54BF' },
+        ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 1, color: 'transparent' },
+            { offset: 0, color: '#4DBFD9' },
+        ]),
+    ],
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        },
+    },
+    // color: transparent;
+
+    legend: {
+        textStyle: {
+            color: "white"
+        }
+
+
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    type: 'dashed',//背景色为虚线,
+                    color: '#256980'
+                }
+            }
+
+        },
+
+    ],
+    series: [
+        {
+            name: '新增用户数量',
+            type: 'bar',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390, 330, 320],
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: "#384FB4",
+            },
+
+            backgroundStyle: {
+                color: ['red']
+            }
+        },
+        {
+            name: '访问用户数量',
+            type: 'bar',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: "#3E54BF",
+            },
+        },
+        {
+            name: '累计用户数量',
+            type: 'bar',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: "#4EC1DB",
+            },
+        },
+
+    ]
+}
+
+const initCharts = (tag, option) => {
+    var chartDom = document.getElementById(tag);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(option);
+}
+onMounted(() => {
+
+    document.getElementById("user").removeAttribute('_echarts_instance_');
+
+    initCharts('user', userChartOption)
+
+
+})
+
+</script>

src/components/townDetail/topRight.vue

@@ -0,0 +1,140 @@
+<template>
+    <img class="img-cls" src="/static/town/DDSJ.png" alt="">
+    <div class="order-data">
+        <div class="tit">
+            <div style="display: flex;align-items: center;">
+                <div class="gradient-circle">
+                </div>
+                日订单数据
+            </div>
+            <div style="display: flex;align-items: center;">
+                <div class="gradient-circle">
+                </div>
+                日订单数据
+            </div>
+        </div>
+        <div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
+        <div style="width: 100%;height: 50%;" id="orderData2"></div>
+
+    </div>
+</template>
+<style lang="scss" scoped>
+.img-cls {
+    width: 98%;
+    height: 45vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.order-data {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-right: 1vw;
+    position: relative;
+
+    .tit {
+        position: absolute;
+        color: white;
+        // background-color: #fff;
+        top: 6vh;
+        width: 100%;
+        font-size: 10px;
+        display: flex;
+        justify-content: space-around;
+
+        .gradient-circle {
+            width: 10px;
+            height: 10px;
+            background: radial-gradient(at top left, transparent, #029BE9);
+            border-radius: 50%;
+        }
+    }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts';
+import { onMounted } from "vue"
+
+
+const orderData = {
+
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {},
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'value',
+        boundaryGap: [0, 0.01],
+        splitLine: {
+            show: true,
+            lineStyle: {
+                type: 'dashed',//背景色为虚线,
+                color: '#256980'
+            }
+        }
+    },
+    yAxis: {
+        type: 'category',
+        data: ['当日订单数', '当月订单数'],
+
+    },
+    series: [
+        {
+            barWidth: 15,
+            barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
+            barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
+            data: [120, 200],
+            type: 'bar',
+            itemStyle: {
+                normal: {
+                    color: function (params) {
+                        var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                            { offset: 1, color: '#0298E5' },
+                            { offset: 0, color: 'transparent' },
+                        ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                            { offset: 1, color: '#4358C8' },
+                            { offset: 0, color: 'transparent' },
+                        ])];
+                        return colorList[params.dataIndex]
+                    },
+                    borderColor: ['blue']
+
+                },
+                borderWidth: 2,
+                borderColor: "red",
+            },
+
+        }
+    ]
+}
+
+
+
+
+// 图表
+const initCharts = (tag, option) => {
+    var chartDom = document.getElementById(tag);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(option);
+}
+onMounted(() => {
+    document.getElementById("orderData").removeAttribute('_echarts_instance_');
+    document.getElementById("orderData2").removeAttribute('_echarts_instance_');
+
+    initCharts('orderData', orderData)
+    initCharts('orderData2', orderData)
+
+})
+</script>

src/components/townDetail/version.js

@@ -1 +0,0 @@
-export const VERSION = '#VERSION#'

src/main.js

@@ -2,11 +2,20 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import dataV from '@jiaminghi/data-view'
 import router from "./router";
+import ElementPlus from 'element-plus'
+
+
+import {
+    createPinia
+} from 'pinia'
+import 'element-plus/dist/index.css'
 // import '@/components/townDetail/test.js'
 
 import 'amfe-flexible'
-
+const pinia = createPinia()
 const app = createApp(App)
 app.use(router)
 app.use(dataV)
+app.use(pinia)
+app.use(ElementPlus)
 app.mount('#app')

src/router/index.js

@@ -3,9 +3,16 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
+        name: 'home',
+        component: () => import('@/view/home.vue'),
+        redirect: "/index",
+        children: [
+            {
+                path: '/index',
                 name: 'index',
                 component: () => import('@/view/index.vue'),
             },
+
             {
                 path: '/townDetail',
                 name: 'townDetail',
@@ -38,6 +45,16 @@ const routes = [
             },
 
 
+        ]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('@/view/login.vue'),
+    },
+
+
+
 ]
 
 const router = createRouter({

src/store/index.js

@@ -0,0 +1,19 @@
+import {
+    defineStore
+} from 'pinia'
+
+export const areaObj = defineStore('counter', {
+    state: () => ({
+        area: {
+            areaCode: 510524,
+            streetCode: 51052410
+
+        }
+    }),
+    getters: {},
+    actions: {
+        changeArea(obj) {
+            this.area = obj
+        }
+    }
+})

src/view/Businesses.vue

@@ -4,8 +4,8 @@
             <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
             <div class="content">
                 <div class="btns">
-                    <div class="btn " :class="!status ? 'act-btn' : ''" @click="changeTable(0)">正常开启的商户</div>
+                    <div class="btn " :class="status ? 'act-btn' : ''" @click="changeTable(1)">正常开启的商户</div>
-                    <div class="btn" :class="status ? 'act-btn' : ''" @click="changeTable(1)">已关闭的商户</div>
+                    <div class="btn" :class="!status ? 'act-btn' : ''" @click="changeTable(0)">已关闭的商户</div>
                 </div>
                 <div class="table" v-if="configs.data.length">
                     <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
@@ -62,14 +62,14 @@ const addConfigData = (data) => {
         if (i % 2 == 0) {
             configs.data.push(
                 [
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_id}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark || '--'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>sd</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.margin}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status ? '开启' : '关闭'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`,
@@ -78,14 +78,14 @@ const addConfigData = (data) => {
         } else {
             configs.data.push(
                 [
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_id}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark || "--"}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.margin}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.status ? '开启' : '关闭'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
@@ -123,7 +123,7 @@ const configs = reactive({
     ]
 })
 onMounted(() => {
-    changeTable(0)
+    changeTable(1)
 })
 </script>
 

src/view/commodity.vue

@@ -10,10 +10,11 @@
                 </div>
                 <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
                     v-if="!ShwostoreType">
-                    <div @click="initProduct(6)" class="manageBtn " :class="{actmanageBtn:type==6}">出售中商品</div>
+                    <div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
-                    <div @click="initProduct(1)" class="manageBtn"  :class="{actmanageBtn:type==1}" >仓库中商品</div>
+                        :class="{ actmanageBtn: type == item.type }">{{ item.name }}</div>
+                    <!-- <div @click="initProduct(1)" class="manageBtn" :class="{ actmanageBtn: type == 1 }">仓库中商品</div>
                     <div @click="initProduct(2)" class="manageBtn" :class="{ actmanageBtn: type == 2 }">待审核商品</div>
-                    <div @click="initProduct(3)" class="manageBtn" :class="{actmanageBtn:type==3}">审核未通过商品</div>
+                    <div @click="initProduct(3)" class="manageBtn" :class="{ actmanageBtn: type == 3 }">审核未通过商品</div> -->
                 </div>
                 <div class="table" v-if="ShwostoreType && configs.data.length">
                     <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
@@ -29,12 +30,13 @@
 
 <script setup>
 import { ref, reactive, onMounted } from "vue"
-import { getProductCategoryListApi,getProductListApi } from "@/api.js"
+import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
-import { init } from "echarts";
+import { areaObj } from "../store";
+const areaStore = areaObj()
+
 getProductCategoryListApi(
     {
-        areaCode: 510524,
+        ...areaStore.area
-        streetCode: 510524100
     }
 ).then(res => {
     a(configs, res.data)
@@ -42,18 +44,17 @@ getProductCategoryListApi(
 
 
 
-let type=ref(6)
+let type = ref(1)
 const initProduct = (num) => {
-
-
     configs2.data.splice(0, configs2.data.length)
     type.value = num
     getProductListApi({
-        areaCode: 510524,
+        ...areaStore.area,
-        streetCode: 510524100,
         limit: 50,
         type: type.value
     }).then(res => {
+
+        console.log(res.data.list)
         a(configs2, res.data.list, true)
     })
 
@@ -61,8 +62,16 @@ const initProduct=(num)=>{
 }
 
 
+let proFilterList = reactive([])
 
-
+product_status_filterApi({
+    ...areaStore.area,
+}).then(res => {
+    res.data.forEach(item => {
+        proFilterList.push(item)
+    })
+})
+const value = ref(2)
 
 const tableClick = (e) => {
     if (e.ceil) {
@@ -88,31 +97,24 @@ const tableClick = (e) => {
 
 const ShwostoreType = ref(true)
 
-const hdClick = (b) => {
-    console.log(b)
-}
-
 const a = (aaa, data, flag) => {
     if (flag) {
-    console.log(455454)
 
         data.forEach((item, i) => {
             if (i % 2 == 0) {
                 aaa.data.push(
                     [
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.product_id}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >
                             <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
-                            
-                            
                             </div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant?.mer_name || '--'}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.storeCategory?.cate_name || '--'}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.price}</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.attrValue[0].sales}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.attrValue[0].stock}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
                     ]
@@ -120,17 +122,24 @@ const a = (aaa, data,flag) => {
             } else {
                 aaa.data.push(
                     [
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.product_id}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
                                <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.store_name}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.storeCategory?.cate_name || '--'}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.price}</div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.attrValue[0].sales}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.attrValue[0].stock}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                            
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                            
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                            <el-button type="warning" disabled>Warning</el-button>
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.star}</div>`,
+                            
+                            
+                            
+                            </div>`,
                         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
                     ]
                 )
@@ -139,6 +148,7 @@ const a = (aaa, data,flag) => {
     }
 
     else {
+
         data.forEach((item, i) => {
             if (i % 2 == 0) {
                 aaa.data.push(
@@ -222,9 +232,8 @@ const configs2 = reactive({
     ]
 })
 onMounted(() => {
-    initProduct(6)
+    initProduct(1)
-    // a(configs2)
+
-    // a(configs)
 })
 </script>
 

src/view/finance.vue

@@ -7,13 +7,14 @@
                     <div style="display: flex;">
                         <div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
                         <div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
-                        <div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2)">账单管理</div>
+                        <div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2, 1)">账单管理</div>
                     </div>
                     <div style="margin-right: 0vw;">
                         <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
                             v-if="headerIndex == 2">
-                            <div class="manageBtn actmanageBtn ">日账单</div>
+                            <div class="manageBtn " :class="{ actmanageBtn: billType == 1 }" @click="changeBill(1)">日账单
-                            <div class="manageBtn">月账单</div>
+                            </div>
+                            <div class="manageBtn" :class="{ actmanageBtn: billType == 2 }" @click="changeBill(2)">月账单</div>
                         </div>
                     </div>
                 </div>
@@ -24,10 +25,11 @@
 
                 <div class="table" v-if="true">
                     <dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
-                        style="width:95vw;height:100%" />
+                        style="width:95vw;height:78vh" />
-                    <dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs1" v-if="headerIndex == 1 && configs1.data.length"
-                    <dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
+                        style="width:95vw;height:78vh" />
-                        style="width:95vw;height:100%" />
+                    <dv-scroll-board :config="configs2" v-if="headerIndex == 2 && configs2.data.length" @click='hdClick3'
+                        style="width:95vw;height:68vh" />
                 </div>
 
                 <Transition>
@@ -38,23 +40,24 @@
                         <div class="pop-content">
                             <div class="pop-content-head">
                                 <span class="gradient-text">日账单
-                                    <span style="font-size: 10px;">2011.11-06</span>
+                                    <span style="font-size: 10px;">{{ detailData.date }}</span>
                                 </span>
                                 <span class="off" @click="showPop = false"> 关闭</span>
                             </div>
 
                             <div class="pop-li">
-                                订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
+                                订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">{{ detailData.income.number
-                                <span>2笔</span>
+                                }}</span>元</span>
+                                <span>{{ detailData.income.count }}</span>
                             </div>
                             <div style="display: flex;justify-content: space-between;" class="pop-li">
 
-                                <div>
+                                <div v-for="item in detailData.income.data">
-                                    订单支付： <span style="margin: 0 .5vw;"><span class="price"
+                                    {{ item[0] }} <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        item[1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ item[2] }}</span>
                                 </div>
-                                <div>
+                                <!-- <div>
                                     返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
                                             style="color: white;">16.6</span>元</span>
                                     <span>2笔</span>
@@ -62,13 +65,16 @@
                                 <div>
                                     返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
                                     <span>2笔</span>
-                                </div>
+                                </div> -->
                             </div>
                             <div class="pop-li" style="margin-top: 3vh;">
-                                充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
+                                充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
+                                }}</span>元</span> <span>{{
+    detailData.bill.count }}</span>
                             </div>
                             <div class="pop-li" style="margin-top: 3vh;">
-                                支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
+                                支出总金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.expend.number
+                                }}</span>元</span> <span>{{ detailData.expend.count }}</span>
                             </div>
 
 
@@ -76,19 +82,19 @@
                             <div style="display: flex;justify-content: space-between;" class="pop-li">
 
                                 <div>
-                                    应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
+                                    应付商户金额 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        detailData.expend.data[0][1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ detailData.expend.data[0][2] }}</span>
                                 </div>
                                 <div>
-                                    佣金 <span style="margin: 0 .5vw;"><span class="price"
+                                    佣金 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        detailData.expend.data[1][1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ detailData.expend.data[1][2] }}</span>
                                 </div>
                                 <div>
-                                    返回手续费 <span style="margin: 0 1vw;"><span class="price"
+                                    返回手续费 <span style="margin: 0 1vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        detailData.expend.data[2][1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ detailData.expend.data[2][2] }}</span>
                                 </div>
                             </div>
 
@@ -98,14 +104,14 @@
                             <div style="display: flex;justify-content: space-between;" class="pop-li">
 
                                 <div>
-                                    优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
+                                    优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        detailData.expend.data[3][1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ detailData.expend.data[3][2] }}</span>
                                 </div>
                                 <div>
-                                    会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
+                                    会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                            style="color: white;">16.6</span>元</span>
+                                        detailData.expend.data[4][1].slice(0, -1) }}</span>元</span>
-                                    <span>2笔</span>
+                                    <span>{{ detailData.expend.data[4][2] }}</span>
                                 </div>
                                 <div style="opacity: 0;">
                                     返回手续费 <span style="margin: 0 1vw;"><span class="price"
@@ -114,7 +120,7 @@
                                 </div>
                             </div>
                             <div class="pop-li" style="margin-top: 3vh;">
-                                平台手续费收入总金额: <span class="price">16.6 </span> 元
+                                平台手续费收入总金额: <span class="price">{{ detailData.charge.number }} </span> 元
                             </div>
                         </div>
                     </div>
@@ -132,7 +138,13 @@
 import { ref, reactive, onMounted } from "vue"
 import { useRouter } from 'vue-router'
 import Bill from "@/components/Bill.vue"
+import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
+const billType = ref(1)
+const changeBill = (num) => {
+    billType.value = num
+    changeTable(2, num)
 
+}
 
 const billList = reactive([
     {
@@ -207,81 +219,67 @@ const billList = reactive([
     },
 ])
 
+financial_record_titleApi(
+    {
+        areaCode: 510524,
+        streetCode: 510524100
 
 
+    }
+
+).then(res => {
+    res.data.stat.forEach((item, i) => {
+        billList[i].num = item.count
+
+
+    })
+})
+const changeTable = (type, num) => {
+
+    if (type == 0) {
+        configs.data.splice(0, configs.data.length)
+        withdraw_listApi(
+            {
+                areaCode: 510524,
+                streetCode: 510524100,
+                limit: 50,
+            }
+        ).then(res => {
+            addDta(res.data.list)
+        })
+    }
+    if (type == 1) {
+        configs1.data.splice(0, configs1.data.length)
+        bill_listApi(
+            {
+                areaCode: 510524,
+                streetCode: 510524100,
+                limit: 50,
+            }
+        ).then(res => {
+            addDta(res.data.list)
+        })
+    }
+
+    if (type == 2) {
+        configs2.data.splice(0, configs2.data.length)
+        financial_recordApi({
+            areaCode: 510524,
+            streetCode: 510524100,
+            limit: 50,
+            type: num
+        }).then(res => {
+            billData = res.data.list
+            addDta(res.data.list)
+        })
+
+    }
 
-const route = useRouter()
-const ShwostoreType = ref(false)
-const changeTable = (type) => {
     headerIndex.value = type
     addConfigHead()
-    a(configList[headerIndex.value], congigData[headerIndex.value])
+    // a(configList[headerIndex.value], congigData[headerIndex.value])
-}
-const congigData = reactive(
-    [
-        {
-            d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,],
-            q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,]
-        },
-        {
-            d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-            ],
-            q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-            ]
-        },
-        {
-            d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
-            ],
-            q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
-            ]
 }
 
-    ]
-
-
-)
 const hdClick = (e) => {
     if (e.columnIndex == 10) {
         // route.push('/storeLogin')
@@ -291,21 +289,113 @@ const hdClick = (e) => {
 }
 
 
+const addDta = (data) => {
 
-const a = (aaa, data) => {
+    data.reverse().forEach((item, i) => {
-    for (let i = 0; i < 100; i++) {
+        if (headerIndex.value == 0) {
             if (i % 2 == 0) {
-            aaa.data.push(data.d)
+                configs1.data.push(
+
+                    [
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
+                    ],
+                )
             } else {
-            aaa.data.push(data.q)
+                configs1.data.push(
+                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
+
+                    ]
+                )
             }
         }
+
+
+
+        if (headerIndex.value == 1) {
+
+            if (i % 2 == 0) {
+
+                configs1.data.push(
+
+                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.uid}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.nickname}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
+                    ],
+                )
+            } else {
+                configs1.data.push(
+                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
+
+                    ]
+                )
             }
+
+
+
+        }
+        if (headerIndex.value == 2) {
+
+            if (i % 2 == 0) {
+
+                configs2.data.push(
+
+                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.time}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.income}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.expend}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.charge}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
+                    ],
+                )
+            } else {
+                configs2.data.push(
+                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.time}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.income}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.expend}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.charge}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
+                    ]
+                )
+            }
+
+        }
+
+
+    })
+
+
+
+}
+
+
+
+
 const configs = reactive({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
     oddRowBGC: '',
     evenRowBGC: "",
     rowNum: 20,
+    columnWidth: [],
     header: [
     ],
     data: [
@@ -355,10 +445,40 @@ const addConfigHead = () => {
 }
 
 
+
+let billData = []
 // 详情弹窗
 const showPop = ref(false)
+
+const detailData = reactive({})
+
 const hdClick3 = (e) => {
     if (e.columnIndex == 5) {
+
+        if (billType.value == 1) {
+            financial_record_detailApi(
+                { areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
+            ).then(res => {
+
+                for (let key in res.data) {
+                    detailData[key] = res.data[key]
+                }
+
+            })
+        }
+        if (billType.value == 2) {
+            financial_record_detailApi2(
+                { areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
+            ).then(res => {
+
+                for (let key in res.data) {
+                    detailData[key] = res.data[key]
+                }
+
+            })
+        }
+
+
         showPop.value = true
     }
 
@@ -367,8 +487,15 @@ const hdClick3 = (e) => {
 
 
 onMounted(() => {
-    a(configs, congigData[headerIndex.value])
+    changeTable(0)
     addConfigHead()
+    financial_recordApi({
+        areaCode: 510524,
+        streetCode: 510524100,
+        limit: 50
+    }).then(res => {
+        addDta(res.data.list)
+    })
 })
 </script>
 
@@ -439,7 +566,6 @@ onMounted(() => {
 
     .table {
         width: 100%;
-        height: 60vh;
         margin-top: 2vh;
     }
 }

src/view/home.vue

@@ -0,0 +1,13 @@
+<template>
+    <Header></Header>
+    <router-view></router-view>
+</template>
+
+
+<script setup>
+import Header from "@/components/Header.vue"
+
+
+
+</script>
+

src/view/index.vue

@@ -27,8 +27,6 @@
 <script setup>
 
 import { onMounted } from 'vue';
-import * as echarts from 'echarts';
-import option from "./option"
 import { ref, reactive } from "vue"
 import topLeft from "@/components/index/topLeft.vue"
 import topCenter from "@/components/index/topCenter.vue"
@@ -37,28 +35,19 @@ import bottomLeft from "@/components/index/bottomLeft.vue"
 import bottomCenter from "@/components/index/bottomCenter.vue"
 import bottomRight from "@/components/index/bottomRight.vue"
 
+import { areaObj } from '@/store/index.js'
+const areaStore = areaObj()
+
 const areaCodes = reactive({
-    areaCode: 510524,
+    ...areaStore.area
-    streetCode: 510524100
 })
 
 const loading = ref(false)
 
 
-// 图表
-// const initCharts = (tag, option) => {
-//     var chartDom = document.getElementById(tag);
-//     var myChart = echarts.init(chartDom);
-//     myChart.setOption(option);
-// }
 
 
-onMounted(() => {
-    // console.log(option.transactionUsers)
 
-    // initCharts('transactionUsers', option.transactionUsers)
-
-})
 </script>
 <style lang="scss">
 @keyframes jump {

src/view/login.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="login-box">
+        <div class="form">
+            <div class="content">
+                <div style="position: relative;margin-bottom: 3VH;">
+                    <img src="/static/login/ZH.png" alt="" class="accont-icon">
+                    <input class="ipt" type="text" placeholder="请输入账号" v-model="account">
+                    <div style="color: red;" v-show="isAccount">请输入账号</div>
+                </div>
+                <div style="position: relative;margin-bottom: 3VH;">
+                    <img src="/static/login/MM.png" alt="" class="accont-icon" style="">
+                    <input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
+                    <div style="color: red;" v-show="isPassword">请输入密码</div>
+                    <img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
+                    <img src="/static/login/BKH.png" v-else @click="show = true" class="show">
+                </div>
+                <div style="background-color: red;position: relative;">
+                    <img src="/static/login/DL.png" class="btn" alt="" @click="submit">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.login-box {
+    width: 100vw;
+    height: 100vh;
+    background-image: url('/static/login/bg.png');
+    background-size: 100% 100%;
+    overflow: hidden;
+}
+
+.form {
+    width: 35vw;
+    height: 45vh;
+    position: absolute;
+    top: 25vh;
+    right: 10vw;
+    box-sizing: border-box;
+    background: url("/static/login/DLBG.png");
+    background-size: 100% 100%;
+
+    .content {
+        position: absolute;
+        top: 13vh;
+        // background-color: red;
+        left: 10vw;
+
+        .ipt {
+            border: 1px solid #194FA3;
+            padding: 1vh 2vw;
+            background-color: #123266;
+            width: 13VW;
+            outline: none;
+            -webkit-user-select: auto;
+            caret-color: #fff;
+            color: white;
+        }
+
+        input[type="password"]::-ms-reveal {
+            display: none
+        }
+
+        .btn {
+            width: 7vw;
+            cursor: pointer;
+            // margin: 0 auto;
+            position: absolute;
+            background-color: #fff;
+            left: 50%;
+            transform: translateX(-50%);
+
+        }
+
+        .accont-icon {
+            width: 0.8vw;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: .5vw;
+
+        }
+
+        .show {
+
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: .5vw;
+            width: 1vw;
+            cursor: pointer;
+        }
+    }
+
+
+}
+</style>
+<script setup>
+import { ref, reactive } from "vue"
+import { useRouter } from "vue-router";
+import { loginApi } from "@/api.js"
+const router = useRouter()
+const show = ref(false)
+const account = ref('')
+const password = ref('')
+const isAccount = ref(false)
+const isPassword = ref(false)
+
+
+
+const submit = () => {
+
+    if (!account.value) {
+        isAccount.value = true;
+        return
+    }
+    else isAccount.value = false;
+    if (!password.value) {
+        isPassword.value = true;
+
+        return
+    }
+    else isPassword.value = false;
+
+
+    loginApi({
+        account: account.value,
+        password: password.value
+    }).then(res => {
+
+
+        console.log(res)
+
+        localStorage.setItem("TRADE_USER", res.token)
+        // if (res.role_type == 0) {
+        //     router.replace('/')
+        // }
+        // else if (res.role_type == 1) {
+        //     router.replace('/detail')
+
+
+        // }
+
+
+    })
+    return
+
+
+
+    // alert(isAccount.value)
+
+}
+
+
+
+</script>

src/view/order.vue

@@ -4,6 +4,7 @@
             <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
             <div class="content">
                 <div class="btns">
+
                     <div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
                     <div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
                     <div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
@@ -13,20 +14,20 @@
                     <div style="color: white;display: flex;">
                         <Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
 
-                        <div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
+                        <!-- <div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
                             <Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
 
 
                 <div class="table" v-if="configs.data.length">
                     <dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
-                        style="width:95vw;height:100%" />
+                        style="width:95vw;height:70vh" />
                     <dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick'
-                        style="width:95vw;height:100%" />
+                        style="width:95vw;height:77vh" />
                     <dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
-                        style="width:95vw;height:100%" />
+                        style="width:95vw;height:89vh" />
                 </div>
 
             </div>
@@ -41,6 +42,8 @@ import { ref, reactive, onMounted } from "vue"
 import Bill from "@/components/Bill.vue"
 import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi, take_order_count_titleApi } from "@/api.js"
 
+const value = ref(1)
+
 const billList = reactive([
     {
         icon: "DD",
@@ -78,6 +81,28 @@ const billList1 = reactive([
 ])
 
 
+const orderStatus = (status) => {
+    if (status == 0) return "待发货"
+    if (status == 1) return "待收货"
+    if (status == 2) return "待评价"
+    if (status == 3) return "已完成"
+    if (status == 9) return "拼团中"
+    if (status == 10) return "待付尾款"
+    if (status == 11) return "尾款超时未付"
+    if (status == -1) return "已退款"
+}
+
+const payType = (type) => {
+    if (type == 0) return "余额支付"
+    if (type == 1) return "微信支付"
+    if (type == 2) return "小程序支付"
+    if (type == 3) return "h5支付"
+    if (type == 4) return "支付宝支付"
+    if (type == 5) return "支付宝扫码支付"
+    if (type == 6) return "微信扫码支付"
+    if (type == 8) return "信用购-先货后款"
+}
+
 
 
 const btnFlag = reactive([true, false, false])
@@ -192,7 +217,6 @@ const tableHdClick = (e) => {
 const addConfigData = (data) => {
     data.forEach((item, i) => {
 
-
         if (i % 2 == 0) {
             configs.data.push(
                 [
@@ -215,7 +239,7 @@ const addConfigData = (data) => {
                         <div
                             style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
                             <span>总单号：</span>
-                            <span>35356565656565</span>
+                            <span>${item.groupOrder.group_order_sn}</span>
                         </div>
                         <div
                             style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
@@ -226,7 +250,7 @@ const addConfigData = (data) => {
                         <div
                             style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
                             <span>商品总价</span>
-                            <span>2023.11.214</span>
+                            <span>${item.total_price}</span>
                         </div>
                         <div
                             style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
@@ -238,27 +262,27 @@ const addConfigData = (data) => {
                             <span>用户备注</span>
                             <span>2023.11.214</span>
                         </div>
-
                         <div
                             style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
                             <span>商家备注</span>
                             <span>2023.11.214</span>
                         </div>
-
-
                     </div>
-
-                
                         </div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user.nickname}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
+
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
+                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                        <span>${item.orderProduct[0].cart_info.product.unit_name}    </span>
+                        </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.pay_type}</div>`,
                 ]
             )
         } else {
@@ -275,7 +299,7 @@ const addConfigData = (data) => {
                         top:50%;
                        left:0    
                         '> 
-                        </div>      1111</div>
+                        </div>       ${item.order_sn}</div>
                     
                     <div class='card' id='card${i}'
                     style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
@@ -318,15 +342,23 @@ const addConfigData = (data) => {
 
                     
                     </div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
+                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                        <span>${item.orderProduct[0].cart_info.product.unit_name}    </span>
+                        
+                        
+                        
+                        
+                        </div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cost}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${orderStatus(item.status)}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`,
                 ]
 
 
@@ -407,12 +439,20 @@ const addConfigData2 = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'     '>
+                        <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
+                        <span>
+                            ${item.refundProduct[0].product.cart_info.product.store_name}
+                            </span>
+                            <span>
+                            ${item.refundProduct[0].product.cart_info.product.unit_name}
+                            </span>
+                        </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
                         
                         <sapn> ${item.status}    </span>
                         <sapn>退款原因： ${item.refund_message}    </span>
-                        <sapn>状态变更时间 ${item.status_tiem}    </span>
+                        <sapn>状态变更时间 ${item.status_time}    </span>
                         
                         
                         
@@ -481,11 +521,23 @@ const addConfigData2 = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'     '>
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>   <sapn> ${item.status}    </span>
+                        <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
+                        <span>
+                            ${item.refundProduct[0].product.cart_info.product.store_name}
+                            </span>
+                            <span>
+                            ${item.refundProduct[0].product.cart_info.product.unit_name}
+                            </span>
+                        </div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>   
+                        <sapn> ${item.status}    </span>
                         <sapn>退款原因： ${item.refund_message}    </span>
-                        <sapn>状态变更时间 ${item.status_tiem}    </span></div>`,
+                        <sapn>状态变更时间 ${item.status_time}    </span>
+                            
+                            
+                            </div>`,
 
                 ]
 
@@ -569,13 +621,9 @@ const addConfigData3 = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
-                        
                         <sapn> ${item.status}    </span>
                         <sapn>退款原因： ${item.refund_message}    </span>
                         <sapn>状态变更时间 ${item.status_tiem}    </span>
-                        
-                        
-                        
                         </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
@@ -596,8 +644,7 @@ const addConfigData3 = (data) => {
                         top:50%;
                        left:0    
                         '> 
-                        </div>      ${item.refund_order_sn}</div>
+                        </div>       ${item.order_sn}</div>
-                    
                     <div class='card' id='card${i}'
                     style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
 
@@ -639,7 +686,7 @@ const addConfigData3 = (data) => {
 
                     
                     </div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
@@ -672,6 +719,8 @@ const configs = reactive({
     oddRowBGC: '',
     evenRowBGC: "",
     rowNum: 20,
+
+    columnWidth: [250, 170, 170, 170, 170, 500, 170, 170, 170, 200],
     header: [
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
@@ -681,7 +730,7 @@ const configs = reactive({
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
-        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单数属地</div>`,
+        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
     ],
     data: [
@@ -689,6 +738,8 @@ const configs = reactive({
 })
 
 const configs2 = reactive({
+    columnWidth: [300, 150, 150, 150, 150, 150, 600, 600],
+
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
     oddRowBGC: '',
     evenRowBGC: "",
@@ -710,6 +761,8 @@ const configs3 = reactive({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
     oddRowBGC: '',
     evenRowBGC: "",
+    columnWidth: [300, 150, 150, 150, 150, 150, 600, 150, 150, 150],
+
     rowNum: 20,
     header: [
         `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
@@ -757,6 +810,7 @@ onMounted(() => {
             width: 100%;
             height: 100%;
             padding: 2vw;
+            // box-sizing: border-box;
         }
 
     }
@@ -790,7 +844,6 @@ onMounted(() => {
 
     .table {
         width: 100%;
-        height: 70vh;
         margin-top: 3vh;
     }
 }
@@ -803,6 +856,7 @@ onMounted(() => {
 
 :deep(.header-item) {
     padding: 0 !important;
+    // justify-content: space-between;
 }
 
 

src/view/townDetail.vue

@@ -1,145 +1,21 @@
 <template>
     <div class="top box">
-
-
         <div class="l">
-            <img class="img-cls" src="/static/town/YHSJ.png" alt="">
+            <topLeft></topLeft>
-            <div class="user center" id="user"></div>
         </div>
         <div class="c" id="">
-
             <topCenter :code="route.query.code"></topCenter>
-
-            <!-- <div class="product-list">
-                <div class="product" style="">
-                    <div class="bg">
-                        <img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
-                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
-                        <div class="bubble"></div>
-                        <div class="bubble1"></div>
-                        <div class="bubble2"></div>
         </div>
-                    <div class="product-content">
-                        <div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
-                        <div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
-                        <img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
-                        <div style="margin-top: 2vh;position: relative;"> <span
-                                style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
-                        <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                昨日数据： 0.0
-                            </div>
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                周环比: 10%
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="product" style="">
-                    <div class="bg">
-                        <img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
-                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
-                        <div class="bubble"></div>
-                        <div class="bubble1"></div>
-                        <div class="bubble2"></div>
-                    </div>
-                    <div class="product-content">
-                        <div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
-                        <div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
-                        <img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
-
-                        <div style="margin-top: 2vh;position: relative;"> <span
-                                style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
-                        <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                昨日数据： 0.0
-                            </div>
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                周环比: 10%
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="product" style="">
-                    <div class="bg">
-                        <img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
-                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
-                        <div class="bubble"></div>
-                        <div class="bubble1"></div>
-                        <div class="bubble2"></div>
-                    </div>
-                    <div class="product-content">
-                        <div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
-                        <div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
-                        <img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
-                        <div style="margin-top: 2vh;position: relative;"> <span
-                                style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
-                        <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                昨日数据： 0.0
-                            </div>
-                            <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
-                                <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
-                                &nbsp;
-                                周环比: 10%
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="Views">
-                <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
-                <div class="view-content">
-                    <div>昨日数据：3333</div>
-                    <div style="display: flex;align-items: center;">当前浏览量：
-                        <Remake :num="517854" /> 人正在浏览
-                    </div>
-                    <div>周环比：32%</div>
-                </div>
-            </div> -->
-        </div>
-
         <div class="r">
-
+            <topRight></topRight>
-            <img class="img-cls" src="/static/town/DDSJ.png" alt="">
-            <div class="order-data">
-                <div class="tit">
-                    <div style="display: flex;align-items: center;">
-                        <div class="gradient-circle">
-                        </div>
-                        日订单数据
-                    </div>
-                    <div style="display: flex;align-items: center;">
-                        <div class="gradient-circle">
-                        </div>
-                        日订单数据
-                    </div>
-                </div>
-                <div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
-                <div style="width: 100%;height: 50%;" id="orderData2"></div>
-
-            </div>
-
         </div>
 
 
     </div>
     <div class="bottom box">
         <div class="l">
-            <div class="user center" id="orderAmount"></div>
+
-            <img class="img-cls" src="/static/town/DRDDJE.png" alt="">
+            <bottomleft></bottomleft>
-            <!-- <bottomleft></bottomleft> -->
         </div>
         <div class="c">
             <img class="img-cls" src="/static/town/CJYH.png" alt="">
@@ -155,46 +31,13 @@
 import { onMounted } from 'vue';
 import * as echarts from 'echarts';
 import option from "./option"
-import { ref, reactive } from "vue"
-import Remake from "@/components/Remake.vue"
 import bottomRight from "@/components/townDetail/bottomRight.vue"
 import bottomleft from "@/components/townDetail/bottomleft.vue"
-import { getProductCountApi } from "@/api.js"
 import { useRoute } from 'vue-router';
 import topCenter from "@/components/townDetail/topCenter.vue"
-
+import topLeft from "@/components/townDetail/topLeft.vue"
-
+import topRight from "@/components/townDetail/topRight.vue"
-
 const route = useRoute()
-
-
-
-
-
-
-
-
-const addFn = (data) => {
-    let list = []
-    data.forEach((item, i) => {
-        list.push(
-            [
-                `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
-                `<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
-                `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
-                `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:  ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
-                `<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
-                     <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
-                 </div>`,
-
-            ],
-
-
-        )
-    })
-    return list
-}
-
 // 图表
 const initCharts = (tag, option) => {
     var chartDom = document.getElementById(tag);
@@ -203,16 +46,10 @@ const initCharts = (tag, option) => {
 }
 
 onMounted(() => {
-    document.getElementById("orderData").removeAttribute('_echarts_instance_');
+
-    document.getElementById("orderData2").removeAttribute('_echarts_instance_');
-    document.getElementById("user").removeAttribute('_echarts_instance_');
-    document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
     document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
-    initCharts('user', option.userChartOption)
-    initCharts('orderAmount', option.orderAmount)
     initCharts('transactionUsers', option.transactionUsersTown)
-    initCharts('orderData', option.orderData)
+
-    initCharts('orderData2', option.orderData)
 
 })
 
@@ -220,20 +57,6 @@ onMounted(() => {
 
 
 <style lang="scss" scoped>
-@keyframes jump {
-    0% {
-        transform: translateY(0);
-    }
-
-    50% {
-        transform: translateY(-10px);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
-
 .box {
     width: 100vw;
     height: 47vh;
@@ -253,14 +76,9 @@ onMounted(() => {
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
-
+        padding-top: 6vh;
-        .user {
-            position: absolute;
-            width: 98%;
-            height: 35vh;
 
 
-        }
 
     }
 
@@ -335,31 +153,7 @@ onMounted(() => {
         position: relative;
         // background-color: RED;
 
-        .order-data {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            padding-right: 1vw;
-            position: relative;
 
-            .tit {
-                position: absolute;
-                color: white;
-                // background-color: #fff;
-                top: 6vh;
-                width: 100%;
-                font-size: 10px;
-                display: flex;
-                justify-content: space-around;
-
-                .gradient-circle {
-                    width: 10px;
-                    height: 10px;
-                    background: radial-gradient(at top left, transparent, #029BE9);
-                    border-radius: 50%;
-                }
-            }
-        }
 
     }
 }