Signed-off-by: liuboyan <632697560@qq.com>

新需求

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "golden-eagle-manage-web",
+  "name": "currency-data-visualization'",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite preview"
   },

src/api/engineering.js

@@ -47,6 +47,24 @@ export function getBaseInfoRatioOfEngineering (object) {
     type: 'JSON'
   })
 }
+//  工程大屏--获取基础图表数据
+export function getBaseInfoChartsDataOfEngineering (object) {
+  return request({
+    url: '/datashow/engineScreenPenetrate/getDeviceNumList',
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}
+//  工程大屏--获取基础数据比率图表数据
+export function getBaseInfoRatioChartsDataOfEngineering (object) {
+  return request({
+    url: '/datashow/engineScreenPenetrate/getTaskFinishRate',
+    method: 'post',
+    data: object,
+    type: 'JSON'
+  })
+}
 //  工程大屏--获取巡检任务数据
 export function getPatrolTaskDataOfEngineering (object) {
   return request({

src/views/engineeringScreen/index.vue

@@ -46,7 +46,10 @@
       <el-col :span="8">
         <el-row class="two-third-container">
           <dataContainer title="基础数据">
-            <div class="base-info-card">
+            <div
+              class="base-info-card"
+              @click="getChartData(1)"
+            >
               <div class="base-info-title base-info-icon1">
                 在管设备
               </div>
@@ -61,7 +64,10 @@
                 个
               </div>
             </div>
-            <div class="base-info-card">
+            <div
+              class="base-info-card"
+              @click="getChartData(2)"
+            >
               <div class="base-info-title base-info-icon2">
                 设备完好率
               </div>
@@ -69,7 +75,10 @@
                 {{ baseInfoOption.intactRate }}%
               </div>
             </div>
-            <div class="base-info-card">
+            <div
+              class="base-info-card"
+              @click="getChartData(3)"
+            >
               <div class="base-info-title base-info-icon3">
                 巡检完成率
               </div>
@@ -77,7 +86,10 @@
                 {{ baseInfoOption.patrolFinishRate }}%
               </div>
             </div>
-            <div class="base-info-card">
+            <div
+              class="base-info-card"
+              @click="getChartData(4)"
+            >
               <div class="base-info-title base-info-icon4">
                 维保完成率
               </div>
@@ -232,77 +244,83 @@
             </template>
           </el-table-column>
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="projectName"
             label="所属项目"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="addressName"
             label="机房"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="sysName"
             label="所属系统"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="patrolRuleName"
             label="计划名称"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="userName"
             label="巡检人员"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="fullStartDate"
             label="开始时间"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="fullEndDate"
             label="结束时间"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="submitDate"
             label="提交时间"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="taskStateName"
             label="巡检状态"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="handleStateName"
             label="审核状态"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="workingTime"
             label="工时（分钟）"
             align="center"
           />
           <el-table-column
-            v-if="tableOption.type == 'patrolTask' || 'maintenanceTask'"
+            v-if="tableOption.type == 'patrolMaintenanceTask'"
             prop="serverTime"
             label="同步时间"
             align="center"
           />
+          <el-table-column
+            v-if="tableOption.type == 'deviceTask'"
+            prop="projectName"
+            label="所属项目"
+            align="center"
+          />
           <el-table-column
             v-if="tableOption.type == 'deviceTask'"
             prop="addressName"
@@ -374,6 +392,28 @@
         </el-button>
       </div>
     </el-drawer>
+    <el-drawer
+      v-model="chartsOption.display"
+      :title="chartsOption.title"
+      size="90%"
+      custom-class="table-dialog"
+    >
+      <div class="drawer-body">
+        <div
+          id="chartsContainer"
+          class="charts-container"
+          style="background-color: #ffffff;"
+        />
+      </div>
+      <div class="drawer-footer">
+        <el-button
+          size="medium"
+          @click="chartsOption.display = false"
+        >
+          取 消
+        </el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -389,6 +429,8 @@ import {
   getDeviceTypeDataOfEngineering,
   getBaseInfoDataOfEngineering,
   getBaseInfoRatioOfEngineering,
+  getBaseInfoChartsDataOfEngineering,
+  getBaseInfoRatioChartsDataOfEngineering,
   getPatrolTaskDataOfEngineering,
   getTaskListOfEngineering,
   getWarningInfoDataOfEngineering,
@@ -466,6 +508,10 @@ export default {
         loading: false,
         display: false,
         data: []
+      },
+      chartsOption: {
+        title: '',
+        display: false
       }
     }
   },
@@ -817,7 +863,7 @@ export default {
                 taskState: params.name == '过期' ? 2 : 7
               }
               this.tableOption.title = params.name == '过期' ? '过期任务' : '审核关闭任务'
-              this.tableOption.type = 'patrolTask'
+              this.tableOption.type = 'patrolMaintenanceTask'
               this.tableOption.pageIndex = 1
               this.tableOption.data = []
               this.tableOption.display = true
@@ -1044,7 +1090,7 @@ export default {
                 taskState: params.name == '过期' ? 2 : 7
               }
               this.tableOption.title = params.name == '过期' ? '过期任务' : '审核关闭任务'
-              this.tableOption.type = 'maintenanceTask'
+              this.tableOption.type = 'patrolMaintenanceTask'
               this.tableOption.pageIndex = 1
               this.tableOption.data = []
               this.tableOption.display = true
@@ -1075,6 +1121,144 @@ export default {
         }
       })
     },
+    //  获取图表数据
+    getChartData (type) {
+      if (this.project) {
+        return false
+      }
+      if (type == 1) {
+        this.chartsOption.display = true
+        this.chartsOption.title = '在管设备'
+        getBaseInfoChartsDataOfEngineering({
+          ...this.filterForm
+        }).then(res => {
+          if (res.status == 200) {
+            const myChart = echarts.init(document.getElementById('chartsContainer'))
+            myChart.clear()
+            myChart.setOption({
+              color: ['#286be0'],
+              legend: {
+                top: '4%',
+                data: ['设备数量']
+              },
+              grid: {
+                left: '5%',
+                right: '5%',
+                top: '10%',
+                bottom: '5%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'category',
+                data: res.data.map(item => {
+                  return item.projectName
+                })
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [{
+                name: '设备数量',
+                type: 'bar',
+                data: res.data.map(item => {
+                  return item.deviceNum
+                })
+              }]
+            })
+          }
+        })
+      } else if (type == 3 || type == 4) {
+        this.chartsOption.display = true
+        this.chartsOption.title = type == 3 ? '巡检完成率' : '维保完成率'
+        getBaseInfoRatioChartsDataOfEngineering({
+          ...this.filterForm,
+          lpCategory: type == 3 ? 1 : 2
+        }).then(res => {
+          if (res.status == 200) {
+            const myChart = echarts.init(document.getElementById('chartsContainer'))
+            myChart.clear()
+            const sourceType = res.data.map(item => {
+              return item.projectName
+            })
+            sourceType.unshift('ratio')
+            const sourceData1 = res.data.map(item => {
+              return item.finishRate
+            })
+            sourceData1.unshift('完成率')
+            const sourceData2 = res.data.map(item => {
+              return item.unFinishRate
+            })
+            sourceData2.unshift('未完成率')
+            myChart.setOption({
+              color: ['#286be0', '#87c9fa'],
+              legend: {
+                top: res.data.length > 6 ? 'middle' : '4%',
+                left: res.data.length <= 6 ? 'center' : '1%',
+                orient: res.data.length > 6 ? 'vertical' : 'horizontal'
+              },
+              dataset: {
+                source: [
+                  sourceType,
+                  sourceData1,
+                  sourceData2
+                ]
+              },
+              tooltip: {
+                trigger: 'item',
+                formatter: '{b}：{d}%'
+              },
+              series: res.data.map((item, index) => {
+                return {
+                  type: 'pie',
+                  radius: res.data.length <= 9 ? '30%' : (100 / Math.ceil(res.data.length / 3) - 4) + '%',
+                  center: [
+                    100 / 6 * ((index % 3) * 2 + 1) + '%',
+                    50 / Math.ceil(res.data.length / 3) * (Math.floor(index / 3) * 2 + 1) + '%'
+                  ],
+                  encode: {
+                    itemName: 'ratio',
+                    value: item.projectName
+                  },
+                  label: {
+                    position: 'inner',
+                    fontSize: 14,
+                    color: '#ffffff',
+                    formatter: '{d}%'
+                  },
+                  markPoint: {
+                    symbol: 'roundRect',
+                    itemStyle: {
+                      color: 'transparent'
+                    },
+                    tooltip: {
+                      show: false
+                    },
+                    data: [
+                      {
+                        name: item.triangle,
+                        x: 100 / 6 * ((index % 3) * 2 + 1) + '%',
+                        y: 50 / Math.ceil(res.data.length / 3) * (Math.floor(index / 3 + 1) * 2) - 4 + '%',
+                        label: {
+                          normal: {
+                            show: true,
+                            width: '33%',
+                            align: 'center',
+                            formatter: item.projectName,
+                            color: '#000000',
+                            fontSize: 18,
+                            fontWeight: 'bold'
+                          }
+                        }
+                      }
+                    ]
+                  }
+                }
+              })
+            })
+          }
+        })
+      }
+    },
     resizePage () {
       this.$nextTick(() => {
         echarts.init(document.getElementById('deviceStatus')).resize()
@@ -1082,6 +1266,11 @@ export default {
         echarts.init(document.getElementById('patrolTask')).resize()
         echarts.init(document.getElementById('deviceTask')).resize()
         echarts.init(document.getElementById('maintenanceTask')).resize()
+        try {
+          echarts.init(document.getElementById('chartsContainer')).resize()
+        } catch (e) {
+          console.log('--')
+        }
       })
     }
   }
@@ -1116,6 +1305,7 @@ export default {
     box-sizing: border-box;
     float: left;
     background-color: rgba(116,134,141,.1);
+    cursor: pointer;
     .base-info-title{
       width: 100%;
       height: 30px;

vite.config.js

@@ -25,7 +25,6 @@ export default ({ command, mode }) => {
         port: 3001,
         proxy:{
           '/landcrm': {
-            // target: 'http://114.215.254.174:8050/',
             // target: 'https://ebeitest.wuyeface.com:1188/',
             target: 'http://172.18.0.23/',
             changeOrigin: true,