控制台

src/views/controlPlatform/control.vue

@@ -98,13 +98,13 @@
         <el-col :span="12">
           <el-card style="height: 393px">
             <div style="display: flex;justify-content: space-between">
-              <div class="controlSpan_middle">
+              <div class="controlSpan_middle1">
                 访客数据（今日）
               </div>
             </div>
-            <el-divider class="chosenOne-divider"/>
-            <div id="echarts-visitor" class="span_1" style="margin-top: -20px">
-              <div id="dataCharts_visitor" ref="chart_data" style="height: 350px"/>
+            <el-divider class="chosenOne-divider1"/>
+            <div id="echarts-visitor1" class="span_1" style="margin-top: -20px">
+              <div id="dataCharts_visitor1" ref="chart_data" style="height: 350px"/>
             </div>
           </el-card>
         </el-col>
@@ -161,12 +161,12 @@ export default {
   data() {
     return {
       // 图表
-      //折线图
+      // 折线图
       myChartRegistrationTime: undefined,
       // 柱状图
       myChartAverage: undefined,
       // 饼图1
-      myChartGender:undefined,
+      myChartGender: undefined,
       stopTimer: false,
       sumUpdateList: [],
       dataList: [],
@@ -179,9 +179,14 @@ export default {
       FqNumList: [],
 
       // 饼图1
-      PtypeList:[{
-        value:'',
-        name:''
+      PtypeList: [{
+        value: '',
+        name: ''
+      }],
+      // 饼图2
+      PtypeList1: [{
+        value: '',
+        name: ''
       }],
       isShow: true,
       isShow2: false,
@@ -350,23 +355,7 @@ export default {
     // 饼图1
     getPtypeList() {
       findCountIdByPtype().then(res => {
-        this.PtypeList=[]
-        // let name=''
-        // console.log('res', res.data)
-        // res.data.forEach(item =>{
-        //
-        //   if (item.ptype === '1'){
-        //     name='设备库'
-        //   }
-        //   if (item.ptype === '2'){
-        //     name='工序库'
-        //   }
-        //   console.log('item.sum', item.sum)
-        //   this.PtypeList.push({
-        //     name: name,
-        //     value: item.sum
-        //   })
-        // })
+        this.PtypeList = []
 
         const renamedData = res.data.map(item => ({
           ...item,
@@ -381,14 +370,15 @@ export default {
     getUpdateList() {
       findCountIdByPtype1CreateDate().then(res => {
         console.log('---res---', res)
-        // this.PtypeList=[]
-        // const renamedData = res.data.map(item => ({
-        //   ...item,
-        //   name: item.ptype === '1' ? '设备库' : (item.ptype === '2' ? '工序库' : item.ptype),
-        //   value: item.sum,
-        // }));
-        // this.PtypeList = renamedData
-        // this.updateVisitorData()
+        this.PtypeList1 = []
+        const renamedData1 = res.data.map(item => ({
+          ...item,
+          name: item.time,
+          value: item.sum
+        }))
+        this.PtypeList1 = renamedData1
+        console.log('this.PtypeList1', this.PtypeList1)
+        this.updateVisitorData1()
       })
     },
     handleClick(row) {
@@ -582,6 +572,54 @@ export default {
         ]
       }
       this.myChartGender.setOption(optionEnter)
+    },
+    /** 访客数据(饼状图)1
+     * */
+    getVisitorData1() {
+      this.myChartGender = echarts.init(document.getElementById('dataCharts_visitor1'))
+      this.updateVisitorData1()
+    },
+    updateVisitorData1() {
+      const optionEnter = {
+        tooltip: {
+          trigger: 'item'
+        },
+        color: ['#46BCF3', '#C760F2'],
+        grid: {
+          top: 0,
+          bottom: 20,
+          left: 20,
+          right: 20,
+          containLabel: true
+        },
+        legend: {
+          left: 'center',
+          bottom: 18,
+          // 图例之间的间距
+          itemGap: 20,
+          // 图标高度
+          itemHeight: 12,
+          textStyle: {
+            // 字体大小
+            fontSize: 13
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: '50%',
+            data: this.PtypeList1,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      this.myChartGender.setOption(optionEnter)
     }
   }
 }