数据对接

src/components/HomeStatics/countPage.vue

@@ -5,7 +5,7 @@
             <div class="bgClass">
                 <img class="imgClass" src="@/assets/images/home/路径 9@2x.png" />
                 <div class="bgTitle">客流数</div>
-                <div class="countClass">1784</div>
+                <div class="countClass">{{ people }}</div>
                 <div class="unitClass">人</div>
             </div>
             <div class="bgClass1">
@@ -19,10 +19,33 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
+import moment from 'moment';
+import { getCountData } from '@/api/gpsData';
 
+const people = ref(0)
+
+const getCountDataList = () => {
+    var startDate = moment(new Date()).format('YYYY-MM-DD');
+    var dateTime = new Date()
+    dateTime = dateTime.setDate(dateTime.getDate() + 1);
+    dateTime = new Date(dateTime);
+    var endDate = moment(dateTime).format('YYYY-MM-DD')
+    var obj = {
+        params: {
+            starttime: startDate,
+            endtime: endDate
+        }
+    }
+    console.log(obj)
+    getCountData(obj).then(res=>{
+        console.log(res)
+        people.value = res.data.totalin
+    })
+}
 
 onMounted(() => {
     // getList();
+    getCountDataList();
 });
 </script>
 <style scoped lang="scss">
@@ -93,6 +116,7 @@ onMounted(() => {
     text-align: right;
     font-style: normal;
     text-transform: none;
+    width:5vw
 }
 
 .unitClass {

src/components/HomeStatics/pieEcharts.vue

@@ -6,8 +6,48 @@
 </template>
 <script setup name="Index" lang="ts">
 import * as echarts from 'echarts';
+import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
+import { getDicts } from '@/api/system/dict/data'
 
 const piechart = ref();
+const carTypeList = ref([]);
+const bussinessTypeList = ref([]);
+const dataList = ref([])
+
+
+const initData = async () => {
+    console.log(11111)
+    const carTotal = await listCarInfo({pageSize:1000});
+    var total = carTotal.total
+    const data = await getDicts('tbl_car_type')
+    carTypeList.value = data.data
+    console.log(carTypeList.value)
+    for (var index in carTypeList.value) {
+        console.log(carTypeList.value[0])
+        var obj = {
+           pageSize:1000,
+           carType:carTypeList.value[index].dictValue
+        }
+        console.log(obj)
+        const res = await listCarInfo(obj);
+        total = total - res.total
+        var cObj = {
+            name:'客车'+ carTypeList.value[index].dictLabel,
+            value:res.total
+        }
+        dataList.value.push(cObj)
+    }
+    dataList.value.push({name:'其它',value:total});
+    drawEchart();
+}
+
+const getDictsData = (param, obj) => {
+    getDicts(param).then(res => {
+        obj.value = res.data;
+        console.log(carTypeList.value)
+    })
+}
+
 
 const drawEchart = () => {
     let echartsObj = echarts.init(piechart.value, "macarons");
@@ -15,66 +55,42 @@ const drawEchart = () => {
     var option = {
         series: [
             {
+                color: [
+                    new echarts.graphic.LinearGradient(
+                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                        [
+                            { offset: 1, color: '#B558F6' },
+                            { offset: 0, color: '#DB91FB' }
+                        ]
+                    ),
+                    new echarts.graphic.LinearGradient(
+                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                        [
+                            { offset: 1, color: '#FFE400 ' },
+                            { offset: 0, color: '#FEC400' }
+                        ]
+                    ),
+                    new echarts.graphic.LinearGradient(
+                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                        [
+                            { offset: 1, color: '#53E7C8' },
+                            { offset: 0, color: '#29CB97 ' }
+                        ]
+                    ),
+                    new echarts.graphic.LinearGradient(
+                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                        [
+                            { offset: 1, color: '#FB9199 ' },
+                            { offset: 0, color: '#F65860 ' }
+                        ]
+                    )
+                ],
                 name: 'Nightingale Chart',
                 type: 'pie',
                 radius: '55%',
                 center: ['50%', '50%'],
                 roseType: 'radius',
-                data: [
-                    {
-                        value: 40, name: 'rose 1', itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                                    [
-                                        { offset: 1, color: '#B558F6' },
-                                        { offset: 0, color: '#DB91FB' }
-                                    ]
-                                ),
-                            }
-                        }
-                    },
-
-                    {
-                        value: 38, name: 'rose 2', itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                                    [
-                                        { offset: 1, color: '#FFE400 ' },
-                                        { offset: 0, color: '#FEC400' }
-                                    ]
-                                ),
-                            }
-                        }
-                    },
-                    {
-                        value: 32, name: 'rose 3', itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                                    [
-                                        { offset: 1, color: '#53E7C8' },
-                                        { offset: 0, color: '#29CB97 ' }
-                                    ]
-                                ),
-                            }
-                        }
-                    },
-                    {
-                        value: 30, name: 'rose 4', itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                                    [
-                                        { offset: 1, color: '#FB9199 ' },
-                                        { offset: 0, color: '#F65860 ' }
-                                    ]
-                                ),
-                            }
-                        }
-                    }
-                ]
+                data: dataList.value
             }
         ]
     };
@@ -97,7 +113,8 @@ const getRecentDays = () => {
 
 
 onMounted(() => {
-    drawEchart();
+    // drawEchart();
+    initData();
 })
 </script>
 <style>

src/views/index.vue

@@ -21,7 +21,7 @@ import stationPie from '@/components/HomeStatics/stationPie.vue';
 import warnTable from '@/components/HomeStatics/warnTable.vue';
 
 
-const showMarket =ref(false);
+const showMarket =ref(true);
 const darkType =ref(true);
 
 onMounted(() => {