工程大屏2

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

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "currency-data-visualization'",
+  "name": "rongtong-medical-manage-web",
   "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -2028,6 +2028,14 @@
       "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
       "dev": true
     },
+    "qs": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-3.0.0.tgz?cache=0&sync_timestamp=1616914967500&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-pkg%2Fdownload%2Fread-pkg-3.0.0.tgz",
@@ -2139,6 +2147,16 @@
       "integrity": "sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/slice-ansi/download/slice-ansi-4.0.0.tgz?cache=0&sync_timestamp=1618554945131&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslice-ansi%2Fdownload%2Fslice-ansi-4.0.0.tgz",

src/api/project.js

@@ -0,0 +1,40 @@
+import request from 'utils/request'
+
+/** *** 工程大屏 *****/
+
+//  工程大屏--获取设备状态数据
+export function getDeviceStatusDataOfProjectScreen (object) {
+  return request({
+    url: '/datashow/standard/patrol/getDeviceIndicatorByState',
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}
+//  工程大屏--获取设备类型数据
+export function getDeviceTypeDataOfProjectScreen (object) {
+  return request({
+    url: '/datashow/standard/patrol/getDeviceIndicatorBySys',
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}
+//  工程大屏--获取基础数据
+export function getBaseDataOfProjectScreen (object) {
+  return request({
+    url: '/datashow/standard/patrol/getDeviceIndicatorInfo2',
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}
+//  工程大屏--获取巡检任务、维保任务数据
+export function getTaskDataOfProjectScreen (object) {
+  return request({
+    url: '/datashow/standard/patrol/getPatrolTaskIndicator',
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}

src/api/quality.js

@@ -2,19 +2,19 @@ import request from 'utils/request'
 
 /** *** 品质大屏 *****/
 
-//  品质大屏--获取安防巡逻概览数据
-export function getSecurityDataOfQualityScreen (object) {
+//  品质大屏--获取安防巡逻概览、品质核查概览、巡逻任务状态数据
+export function getInfoOfQualityScreen (object) {
   return request({
-    url: '/datashow/deviceMaintenanceRoutingInspection/getPatrolTask',
+    url: '/datashow/standard/patrol/getPatrolTaskIndicator',
     method: 'get',
     params: object,
     type: 'JSON'
   })
 }
-//  品质大屏--获取巡逻任务数据
-export function getPatrolDataOfQualityScreen (object) {
+//  品质大屏--获取安防巡逻完成率、安防巡逻及时率、品质核查完成率数据
+export function getDataOfQualityScreen (object) {
   return request({
-    url: '/datashow/taskDistribution/queryTaskDescributionByCom',
+    url: '/datashow/standard/patrol/getPatrolTaskIndicatorByMonths',
     method: 'get',
     params: object,
     type: 'JSON'
@@ -29,12 +29,3 @@ export function getQuestionDataOfQualityScreen (object) {
     type: 'JSON'
   })
 }
-//  品质大屏--获取品质核查概览数据
-export function getQualityDataOfQualityScreen (object) {
-  return request({
-    url: '/datashow/verification/getVerification',
-    method: 'get',
-    params: object,
-    type: 'JSON'
-  })
-}

src/assets/css/public.scss

@@ -1,3 +1,5 @@
+@import 'storeColor';
+
 .module-container{
   width: 100%;
   height: 100%;
@@ -8,15 +10,15 @@
   justify-content: flex-end;
   margin-bottom: 10px;
   .el-input__inner{
-    color: #51c1ff;
-    border-color: #51c1ff;
+    color: $filter-color;
+    border-color: $filter-color;
     background-color: #092435;
   }
   .el-input__inner:hover{
-    border-color: #51c1ff;
+    border-color: $filter-color;
   }
   .el-select__caret{
-    color: #51c1ff!important;
+    color: $filter-color!important;
   }
 }
 .el-pagination{
@@ -107,7 +109,7 @@
       height: 100%;
       overflow: auto;
       .project-info-title{
-        color: #46aefd;
+        color: $primary-color;
         font-size: 22px;
         line-height: 40px;
       }
@@ -126,20 +128,20 @@
       height: calc(50% - 10px);
       float: left;
       margin: 5px;
-      padding: 15px 5px 15px 20px;
+      padding:15px 20px;
       box-sizing: border-box;
       background-color: rgba(116,134,141,.1);
       cursor: pointer;
       .base-info-title{
         width: 100%;
-        height: 20px;
+        height: 4vh;
         float: left;
-        color: #46aefd;
-        font-size: 16px;
-        line-height: 20px;
+        color: $primary-color;
+        font-size: 2.2vh;
+        line-height: 4vh;
         background-position: right center;
         background-repeat: no-repeat;
-        background-size: 20px;
+        background-size: 3vh;
       }
       .base-info-icon1{
         background-image: url('../images/base_icon1.png');
@@ -161,23 +163,22 @@
       }
       .base-info-data{
         width: 100%;
-        height: calc(100% - 80px);
+        height: calc(100% - 6vh);
+        box-sizing: border-box;
+        padding: 10px 0;
         float: left;
         display: flex;
         align-items: center;
         color: #ffffff;
-        font-size: 32px;
-        margin: 18px 0 12px 0;
+        font-size: 5.6vh;
+        overflow: hidden;
       }
       .base-info-tip{
         width: 100%;
-        padding-right: 10px;
-        box-sizing: border-box;
-        height: 36px;
         float: left;
-        color: #46aefd;
-        font-size: 12px;
-        line-height: 18px;
+        color: $primary-color;
+        font-size: 1.6vh;
+        line-height: 3vh;
         word-break: break-all;
         span{
           color: #ffffff;
@@ -212,7 +213,7 @@
         flex: 1;
         margin-right: 10px;
         .warning-info-data-title{
-          color: #46aefd;
+          color: $primary-color;
           font-size: 16px;
           margin-bottom: 5px;
           line-height: 22px;

src/assets/css/storeColor.scss

@@ -0,0 +1,3 @@
+$primary-color: #46AEFD;
+$filter-color: #51c1ff;
+$warning-color: #FABC67;

src/components/menuHeader/index.vue

@@ -13,7 +13,7 @@ export default {
   name: 'MenuHeader',
   computed: {
     title () {
-      return this.$route.name
+      return this.$route.meta.name
     }
   },
   mounted () {

src/router/index.js

@@ -16,19 +16,35 @@ export const routers = createRouter({
       children: [
         {
           path: '/404',
-          name: '页面不存在',
-          component: defineAsyncComponent(() => import('../views/error/404.vue'))
+          name: '404',
+          component: defineAsyncComponent(() => import('../views/error/404.vue')),
+          meta: {
+            name: '页面不存在'
+          }
         },
         {
           path: '/EngineeringScreen',
-          name: '智慧物业工程大屏',
-          component: defineAsyncComponent(() => import('../views/engineeringScreen/index.vue'))
+          name: 'EngineeringScreen',
+          component: defineAsyncComponent(() => import('../views/engineeringScreen/index.vue')),
+          meta: {
+            name: '智慧物业工程大屏'
+          }
         },
         {
           path: '/QualityScreen',
-          name: '智慧物业品质大屏',
+          name: 'QualityScreen',
           component: defineAsyncComponent(() => import('../views/qualityScreen/index.vue')),
           meta: {
+            name: '智慧物业品质大屏',
+            menuList: []
+          }
+        },
+        {
+          path: '/ProjectScreen',
+          name: 'ProjectScreen',
+          component: defineAsyncComponent(() => import('../views/projectScreen/index.vue')),
+          meta: {
+            name: '智慧物业工程大屏',
             menuList: []
           }
         }

src/store/index.js

@@ -3,6 +3,14 @@ import { createStore } from 'vuex'
 export const store = createStore({
   state () {
     return {
+      //  主色
+      primaryColor: '#46AEFD',
+      //  次色
+      secondaryColor: '#44F5F6',
+      //  警告色
+      warningColor: '#FABC67',
+      //  警告色
+      shadowColor: '#4DB2FF',
       menuList: []
     }
   }

src/utils/request.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { getToken } from 'utils/store'
 import { routers } from 'router/index'
 import { ElNotification } from 'element-plus'
+import qs from 'qs'
 
 const request = axios.create({
   baseURL: import.meta.env.PROD ? import.meta.env.VITE_BASE_API : '',
@@ -24,6 +25,9 @@ request.interceptors.request.use(config => {
         ...config.data
       }
     } else if (config.method == 'get') {
+      config.paramsSerializer = function (params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
       config.params = {
         ...config.params,
         _t: Date.parse(new Date()) / 1000
@@ -58,7 +62,7 @@ request.interceptors.response.use(
   error => {
     // 处理请求错误
     const response = error.response
-    if (response != undefined && response.data) {
+    if (response != undefined && response.data && response.status == 200) {
       ElNotification({
         title: '请求出错',
         message: response.data.message,

src/views/projectScreen/index.vue

@@ -0,0 +1,672 @@
+<template>
+  <div class="module-container">
+    <el-row>
+      <el-col
+        :span="24"
+        class="filter-container"
+      >
+        <el-cascader
+          v-model="project"
+          clearable
+          size="small"
+          :options="projectList"
+          :props="projectProps"
+          @change="filterCharts"
+        />
+      </el-col>
+    </el-row>
+    <el-row
+      :gutter="15"
+      class="content-container"
+    >
+      <el-col :span="8">
+        <el-row class="two-third-container">
+          <dataContainer title="设备状态">
+            <div
+              id="deviceStatus"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="电梯故障率">
+            <div
+              id="elevatorRatio"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-row class="two-third-container">
+          <dataContainer title="基础数据">
+            <div class="base-info-container">
+              <div class="base-info-card">
+                <div class="base-info-title base-info-icon1">
+                  在管设备
+                </div>
+                <div class="base-info-data">
+                  {{ baseInfoOption.deviceNum }}
+                </div>
+                <div class="base-info-tip">
+                  在管项目
+                  <span>{{ baseInfoOption.projectNum }}</span>
+                  个&nbsp;&nbsp;&nbsp;&nbsp;在管机房
+                  <span>{{ baseInfoOption.dpaNum }}</span>
+                  个
+                </div>
+              </div>
+              <div class="base-info-card">
+                <div class="base-info-title base-info-icon2">
+                  设备完好率
+                </div>
+                <div class="base-info-data">
+                  {{ baseInfoOption.runningRate }}%
+                </div>
+              </div>
+              <div class="base-info-card">
+                <div class="base-info-title base-info-icon3">
+                  巡检完成率
+                </div>
+                <div class="base-info-data">
+                  {{ baseInfoOption.maintenance }}%
+                </div>
+              </div>
+              <div class="base-info-card">
+                <div class="base-info-title base-info-icon4">
+                  维保完成率
+                </div>
+                <div class="base-info-data">
+                  {{ baseInfoOption.inspection }}%
+                </div>
+              </div>
+            </div>
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="巡检任务">
+            <div
+              id="patrolTask"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-row class="two-third-container">
+          <dataContainer title="设备类型">
+            <div
+              id="deviceType"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="维保任务">
+            <div
+              id="maintenanceTask"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataContainer from 'comps/dataContainer/index.vue'
+import matchSize from 'utils/matchSize'
+import * as echarts from 'echarts'
+import {
+  getProjectDictionary
+} from 'api/dictionary'
+import {
+  getDeviceStatusDataOfProjectScreen,
+  getBaseDataOfProjectScreen,
+  getDeviceTypeDataOfProjectScreen,
+  getTaskDataOfProjectScreen
+} from 'api/project'
+import { getStore } from '../../utils/store'
+export default {
+  name: 'ProjectScreen',
+  components: {
+    dataContainer
+  },
+  mixins: [
+    matchSize
+  ],
+  props: {
+    resizeHeight: {
+      type: Number,
+      default: 500
+    }
+  },
+  data () {
+    return {
+      project: [null],
+      projectList: [],
+      projectProps: {
+        label: 'projectName',
+        value: 'projectId'
+      },
+      filterForm: {
+        companyId: 249,
+        areaId: '',
+        projectId: '',
+        projectName: ''
+      },
+      colorList: ['#87c9fa', '#b7e9ff', '#007afc', '#4aa1ff', '#71b5ff', '#26baff', '#e8f5ff', '#299ff6'],
+      chartsList: ['deviceStatus', 'elevatorRatio', 'patrolTask', 'deviceType', 'maintenanceTask'],
+      baseInfoOption: {
+        deviceNum: 0,
+        projectNum: 0,
+        dpaNum: 0,
+        runningRate: 0,
+        maintenance: 0,
+        inspection: 0
+      },
+      deviceStatusOption: [
+        { name: '维修中', key: 'repairNum' },
+        { name: '关机中', key: 'normalClosedNum' },
+        { name: '维保中', key: 'maintainNum' },
+        { name: '故障中', key: 'faultNum' },
+        { name: '停机中', key: 'stopNum' },
+        { name: '运行中', key: 'runningNum' }
+      ],
+      taskOption: [
+        { name: '未完成', key: 'unFinishNum' },
+        { name: '已销单', key: 'auditNum' },
+        { name: '过期', key: 'expireNum' },
+        { name: '未派单', key: 'waitingNum' }
+      ]
+    }
+  },
+  mounted () {
+    this.filterForm.companyId = getStore({ name: 'companyIdScreen', type: 'session' }) || 249
+    getProjectDictionary({
+      companyId: getStore({ name: 'companyIdScreen', type: 'session' }) || 249
+    }).then(res => {
+      if (res.status == 200) {
+        this.projectList = res.data
+        this.projectList.unshift({
+          projectId: null,
+          projectName: '全部项目'
+        })
+      }
+    })
+    this.getScreenData()
+    // setInterval(() => {
+    //   this.getScreenData()
+    // }, 60000)
+  },
+  methods: {
+    //  选取项目过滤图表
+    filterCharts (value) {
+      this.filterForm = {
+        companyId: getStore({ name: 'companyIdScreen', type: 'session' }) || 249,
+        areaId: '',
+        projectId: '',
+        projectName: ''
+      }
+      if (value && value.length && value[0]) {
+        const projectOption = this.projectList.find(item => item.projectId == value)
+        this.filterForm = {
+          companyId: projectOption.companyId,
+          areaId: projectOption.areaId,
+          projectId: projectOption.projectId,
+          projectName: projectOption.projectName
+        }
+      }
+      this.getScreenData()
+    },
+    //  获取数据可视化数据
+    getScreenData () {
+      this.getDeviceStatusData()
+      this.getElevatorData()
+      this.getBaseData()
+      this.getDeviceTypeData()
+      this.getTaskData()
+    },
+    //  获取设备状态数据
+    getDeviceStatusData () {
+      const that = this
+      getDeviceStatusDataOfProjectScreen({
+        ...this.filterForm,
+        lpCategory: 1
+      }).then(res => {
+        if (res.status == 200) {
+          const myChart = echarts.init(document.getElementById('deviceStatus'))
+          myChart.clear()
+          myChart.off('click')
+          myChart.off('legendselectchanged')
+          myChart.setOption({
+            color: that.colorList,
+            title: {
+              text: '状态总数',
+              subtext: JSON.stringify(res.data.totalNum),
+              textStyle: {
+                color: that.$store.state.primaryColor,
+                fontSize: 18 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio
+              },
+              subtextStyle: {
+                fontSize: 24 * that.sizeRatio,
+                color: '#FFFFFF',
+                lineHeight: 32 * that.sizeRatio
+              },
+              left: 'center',
+              top: '34%'
+            },
+            legend: {
+              icon: 'circle',
+              bottom: 20 * that.sizeRatio,
+              left: 'center',
+              orient: 'horizontal',
+              itemWidth: 14 * that.sizeRatio,
+              formatter: function (name) {
+                return '{nam|' + name + ' }\n{val|' + res.data[that.deviceStatusOption.find(item => item.name == name).key] + '}'
+              },
+              textStyle: {
+                rich: {
+                  nam: {
+                    align: 'center',
+                    fontSize: 14 * that.sizeRatio,
+                    lineHeight: 24 * that.sizeRatio,
+                    color: that.$store.state.primaryColor
+                  },
+                  val: {
+                    align: 'center',
+                    fontSize: 16 * that.sizeRatio,
+                    color: that.$store.state.warningColor
+                  }
+                }
+              }
+            },
+            series: [
+              {
+                name: '设备状态',
+                type: 'pie',
+                radius: ['35%', '50%'],
+                center: ['50%', '40%'],
+                minAngle: 1,
+                roseType: 'radius',
+                label: {
+                  formatter: '{b}: {c}'
+                },
+                labelLine: {
+                  normal: {
+                    length: 20,
+                    length2: 20,
+                    maxSurfaceAngle: 180
+                  }
+                },
+                itemStyle: {
+                  shadowColor: that.$store.state.shadowColor,
+                  shadowBlur: 8
+                },
+                data: that.deviceStatusOption.map((item, index) => {
+                  return {
+                    name: item.name,
+                    value: res.data[item.key]
+                  }
+                }).sort((a, b) => {
+                  return b.value - a.value
+                }).map((item, index) => {
+                  return {
+                    name: item.name,
+                    value: item.value,
+                    label: {
+                      color: that.colorList[index],
+                      fontSize: 14 * that.sizeRatio
+                    }
+                  }
+                })
+              }
+            ]
+          })
+        }
+      })
+    },
+    //  获取基础数据
+    getBaseData () {
+      getBaseDataOfProjectScreen({
+        ...this.filterForm,
+        lpCategory: 1
+      }).then(res => {
+        if (res.status == 200) {
+          this.baseInfoOption = {
+            deviceNum: res.data.deviceIndicator.totalNum,
+            projectNum: res.data.projectNum,
+            dpaNum: res.data.dpaNum,
+            runningRate: res.data.deviceIndicator.runningRate,
+            maintenance: res.data.patrolTaskInidcators.find(site => site.lpCategory == 1).finishRate,
+            inspection: res.data.patrolTaskInidcators.find(site => site.lpCategory == 2).finishRate
+          }
+        }
+      })
+    },
+    //  获取设备类型数据
+    getDeviceTypeData () {
+      const that = this
+      getDeviceTypeDataOfProjectScreen({
+        ...this.filterForm,
+        lpCategory: 1
+      }).then(res => {
+        if (res.status == 200) {
+          const otherData = res.data.reduce((total, item, index) => {
+            return index > 6 ? total + item.totalNum : total
+          }, 0)
+          res.data = res.data.slice(0, 7)
+          res.data.push({
+            sysName: '其他',
+            totalNum: otherData
+          })
+          const totalNum = res.data.reduce((total, item) => {
+            return total + item.totalNum
+          }, 0)
+          const myChart = echarts.init(document.getElementById('deviceType'))
+          myChart.clear()
+          myChart.off('click')
+          myChart.off('legendselectchanged')
+          myChart.setOption({
+            color: that.colorList,
+            title: {
+              text: '类型总数',
+              subtext: JSON.stringify(totalNum),
+              textStyle: {
+                color: that.$store.state.primaryColor,
+                fontSize: 18 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio
+              },
+              subtextStyle: {
+                fontSize: 24 * that.sizeRatio,
+                color: '#FFFFFF',
+                lineHeight: 32 * that.sizeRatio
+              },
+              left: 'center',
+              top: '34%'
+            },
+            legend: {
+              icon: 'circle',
+              bottom: 20 * that.sizeRatio,
+              left: 'center',
+              orient: 'horizontal',
+              itemWidth: 14 * that.sizeRatio,
+              formatter: function (name) {
+                return '{nam|' + name + ' }\n{val|' + res.data.find(site => site.sysName == name).totalNum + '}'
+              },
+              textStyle: {
+                rich: {
+                  nam: {
+                    align: 'center',
+                    fontSize: 14 * that.sizeRatio,
+                    lineHeight: 24 * that.sizeRatio,
+                    color: that.$store.state.primaryColor
+                  },
+                  val: {
+                    align: 'center',
+                    fontSize: 16 * that.sizeRatio,
+                    color: that.$store.state.warningColor
+                  }
+                }
+              }
+            },
+            series: [
+              {
+                name: '设备状态',
+                type: 'pie',
+                radius: ['35%', '50%'],
+                center: ['50%', '40%'],
+                minAngle: 1,
+                roseType: 'radius',
+                label: {
+                  formatter: '{b}: {c}'
+                },
+                labelLine: {
+                  normal: {
+                    length: 20,
+                    length2: 20,
+                    maxSurfaceAngle: 180
+                  }
+                },
+                itemStyle: {
+                  shadowColor: that.$store.state.shadowColor,
+                  shadowBlur: 8
+                },
+                data: res.data.map((item, index) => {
+                  return {
+                    name: item.sysName,
+                    value: item.totalNum,
+                    label: {
+                      color: that.colorList[index],
+                      fontSize: 14 * that.sizeRatio
+                    }
+                  }
+                })
+              }
+            ]
+          })
+        }
+      })
+    },
+    //  获取巡检任务、维保任务数据
+    getTaskData () {
+      const that = this
+      for (let i = 1; i <= 2; i++) {
+        getTaskDataOfProjectScreen({
+          ...this.filterForm,
+          lpCategory: i
+        }).then(res => {
+          if (res.status == 200 && res.data.length) {
+            const myChart = echarts.init(document.getElementById(i == 1 ? 'patrolTask' : 'maintenanceTask'))
+            myChart.clear()
+            myChart.off('click')
+            myChart.off('legendselectchanged')
+            myChart.setOption({
+              color: that.colorList,
+              title: {
+                text: '任务总数',
+                subtext: JSON.stringify(res.data[0].totalNum),
+                textAlign: 'center',
+                textStyle: {
+                  color: that.$store.state.primaryColor,
+                  fontSize: 16 * that.sizeRatio,
+                  lineHeight: 20 * that.sizeRatio
+                },
+                subtextStyle: {
+                  fontSize: 20 * that.sizeRatio,
+                  color: '#FFFFFF',
+                  lineHeight: 24 * that.sizeRatio
+                },
+                left: '37%',
+                top: '38%'
+              },
+              legend: {
+                icon: 'circle',
+                right: 40 * that.sizeRatio,
+                top: 'center',
+                orient: 'vertical',
+                itemWidth: 14 * that.sizeRatio,
+                formatter: function (name) {
+                  return '{nam|' + name + ' }\n{val|' + res.data[0][that.taskOption.find(item => item.name == name).key] + '}'
+                },
+                textStyle: {
+                  rich: {
+                    nam: {
+                      align: 'center',
+                      fontSize: 14 * that.sizeRatio,
+                      lineHeight: 24 * that.sizeRatio,
+                      color: that.$store.state.primaryColor
+                    },
+                    val: {
+                      align: 'center',
+                      fontSize: 16 * that.sizeRatio,
+                      color: that.$store.state.warningColor
+                    }
+                  }
+                }
+              },
+              series: [
+                {
+                  name: '设备状态',
+                  type: 'pie',
+                  radius: ['40%', '68%'],
+                  center: ['38%', '50%'],
+                  minAngle: 1,
+                  roseType: 'radius',
+                  label: {
+                    formatter: '{b}: {c}'
+                  },
+                  labelLine: {
+                    normal: {
+                      length: 20,
+                      length2: 20,
+                      maxSurfaceAngle: 180
+                    }
+                  },
+                  itemStyle: {
+                    shadowColor: that.$store.state.shadowColor,
+                    shadowBlur: 8
+                  },
+                  data: that.taskOption.map((item, index) => {
+                    return {
+                      name: item.name,
+                      value: res.data[0][item.key],
+                      label: {
+                        color: that.colorList[index],
+                        fontSize: 14 * that.sizeRatio
+                      }
+                    }
+                  })
+                }
+              ]
+            })
+          }
+        })
+      }
+    },
+    //  获取电梯故障率数据
+    getElevatorData () {
+      const elevatorList = [{
+        name: '未完成',
+        value: 40
+      }, {
+        name: '已销单',
+        value: 30
+      }, {
+        name: '过期',
+        value: 20
+      }, {
+        name: '未派单',
+        value: 10
+      }]
+      const that = this
+      const myChart = echarts.init(document.getElementById('elevatorRatio'))
+      myChart.clear()
+      myChart.setOption({
+        color: that.colorList,
+        title: {
+          text: '任务总数',
+          subtext: '0',
+          textAlign: 'center',
+          textStyle: {
+            color: that.$store.state.primaryColor,
+            fontSize: 16 * that.sizeRatio,
+            lineHeight: 20 * that.sizeRatio
+          },
+          subtextStyle: {
+            fontSize: 20 * that.sizeRatio,
+            color: '#FFFFFF',
+            lineHeight: 24 * that.sizeRatio
+          },
+          left: '37%',
+          top: '38%'
+        },
+        legend: {
+          icon: 'circle',
+          right: 40 * that.sizeRatio,
+          top: 'center',
+          orient: 'vertical',
+          itemWidth: 14 * that.sizeRatio,
+          formatter: function (name) {
+            return '{nam|' + name + ' }\n{val|' + elevatorList.find(item => item.name == name).value + '}'
+          },
+          textStyle: {
+            rich: {
+              nam: {
+                align: 'center',
+                fontSize: 14 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio,
+                color: that.$store.state.primaryColor
+              },
+              val: {
+                align: 'center',
+                fontSize: 16 * that.sizeRatio,
+                color: that.$store.state.warningColor
+              }
+            }
+          }
+        },
+        series: [
+          {
+            name: '设备状态',
+            type: 'pie',
+            radius: ['40%', '68%'],
+            center: ['38%', '50%'],
+            minAngle: 1,
+            roseType: 'radius',
+            label: {
+              formatter: '{b}: {c}'
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 20,
+                maxSurfaceAngle: 180
+              }
+            },
+            itemStyle: {
+              shadowColor: that.$store.state.shadowColor,
+              shadowBlur: 8
+            },
+            data: elevatorList.map((item, index) => {
+              return {
+                name: item.name,
+                value: item.value,
+                label: {
+                  color: that.colorList[index],
+                  fontSize: 14 * that.sizeRatio
+                }
+              }
+            })
+          }
+        ]
+      })
+    },
+    //  重绘图表尺寸
+    resizeCharts () {
+      try {
+        this.chartsList.forEach(item => {
+          echarts.init(document.getElementById(item)).resize()
+        })
+      } catch (e) {
+        console.log('当前挂载实例未成功，三秒倒计时后重启')
+        setTimeout(() => {
+          this.resizeCharts()
+        }, 3000)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import '../../assets/css/storeColor';
+  .base-info-data{
+    height: calc(100% - 56px);
+  }
+  .base-info-tip{
+    margin-top: -4vh;
+  }
+</style>

src/views/qualityScreen/index.vue

@@ -28,7 +28,7 @@
                   任务总数
                 </div>
                 <div class="base-info-data">
-                  {{ securityInfoOption.TotalTaskNum }}
+                  {{ securityInfoOption.totalNum }}
                 </div>
               </div>
               <div class="base-info-card">
@@ -36,7 +36,7 @@
                   任务完成数
                 </div>
                 <div class="base-info-data">
-                  {{ securityInfoOption.FinishedTaskNum }}
+                  {{ securityInfoOption.finishNum }}
                 </div>
               </div>
               <div class="base-info-card">
@@ -44,7 +44,7 @@
                   完成率
                 </div>
                 <div class="base-info-data">
-                  {{ securityInfoOption.FinishedPer }}%
+                  {{ securityInfoOption.finishRate }}%
                 </div>
               </div>
               <div class="base-info-card">
@@ -52,7 +52,7 @@
                   逾期率
                 </div>
                 <div class="base-info-data">
-                  {{ securityInfoOption.ExpirePer }}%
+                  {{ securityInfoOption.expireRate }}%
                 </div>
               </div>
             </div>
@@ -98,7 +98,7 @@
                     {{ site.label }}
                   </div>
                   <div class="patrol-info-num">
-                    {{ item.info[site.code] }}
+                    {{ item.info ? item.info[site.code] : '' }}
                   </div>
                 </div>
               </div>
@@ -123,7 +123,7 @@
                   任务总数
                 </div>
                 <div class="base-info-data">
-                  {{ qualityInfoOption.TotalTaskNum }}
+                  {{ qualityInfoOption.totalNum }}
                 </div>
               </div>
               <div class="base-info-card">
@@ -131,7 +131,7 @@
                   任务完成数
                 </div>
                 <div class="base-info-data">
-                  {{ qualityInfoOption.FinishedTaskNum }}
+                  {{ qualityInfoOption.finishNum }}
                 </div>
               </div>
               <div class="base-info-card">
@@ -139,7 +139,7 @@
                   完成率
                 </div>
                 <div class="base-info-data">
-                  {{ qualityInfoOption.FinishedPer }}%
+                  {{ qualityInfoOption.finishRate }}%
                 </div>
               </div>
               <div class="base-info-card">
@@ -147,7 +147,7 @@
                   逾期率
                 </div>
                 <div class="base-info-data">
-                  {{ qualityInfoOption.ExpirePer }}%
+                  {{ qualityInfoOption.expireRate }}%
                 </div>
               </div>
             </div>
@@ -174,11 +174,11 @@ import {
   getProjectDictionary
 } from 'api/dictionary'
 import {
-  getSecurityDataOfQualityScreen,
-  getPatrolDataOfQualityScreen,
-  getQuestionDataOfQualityScreen,
-  getQualityDataOfQualityScreen
+  getInfoOfQualityScreen,
+  getDataOfQualityScreen,
+  getQuestionDataOfQualityScreen
 } from 'api/quality'
+import { getStore } from '../../utils/store'
 export default {
   name: 'QualityScreen',
   components: {
@@ -202,40 +202,42 @@ export default {
         value: 'projectId'
       },
       filterForm: {
-        companyId: localStorage.companyId || 281,
+        companyId: 249,
         areaId: '',
         projectId: '',
         projectName: ''
       },
+      chartsList: ['securityComplete', 'securityTimely', 'questionTrack', 'qualityComplete'],
       securityInfoOption: {
-        ExpirePer: 0,
-        FinishedPer: 0,
-        FinishedTaskNum: 0,
-        TotalTaskNum: 0
+        totalNum: 0,
+        finishNum: 0,
+        finishRate: 0,
+        expireRate: 0
       },
       qualityInfoOption: {
-        ExpirePer: 0,
-        FinishedPer: 0,
-        FinishedTaskNum: 0,
-        TotalTaskNum: 0
+        totalNum: 0,
+        finishNum: 0,
+        finishRate: 0,
+        expireRate: 0
       },
       patrolInfoOption: [
-        { label: '秩序', code: 'inspectionTask', info: {} },
-        { label: '环境', code: 'inspectionTask', info: {} },
-        { label: '客服', code: 'inspectionTask', info: {} },
-        { label: '工程', code: 'inspectionTask', info: {} }
+        { label: '秩序', info: {} },
+        { label: '环境', info: {} },
+        { label: '客服', info: {} },
+        { label: '工程', info: {} }
       ],
       patrolInfoCode: [
-        { label: '完成', code: 'finished' },
-        { label: '未完成', code: 'finished' },
-        { label: '已过期', code: 'finished' },
-        { label: '未派单', code: 'finished' }
+        { label: '完成', code: 'finishNum' },
+        { label: '未完成', code: 'unFinishNum' },
+        { label: '已过期', code: 'expireNum' },
+        { label: '未派单', code: 'waitingNum' }
       ]
     }
   },
   mounted () {
+    this.filterForm.companyId = getStore({ name: 'companyIdScreen', type: 'session' }) || 249
     getProjectDictionary({
-      companyId: localStorage.companyId || 281
+      companyId: this.filterForm.companyId
     }).then(res => {
       if (res.status == 200) {
         this.projectList = res.data
@@ -254,7 +256,7 @@ export default {
     //  选取项目过滤图表
     filterCharts (value) {
       this.filterForm = {
-        companyId: localStorage.companyId || 281,
+        companyId: getStore({ name: 'companyIdScreen', type: 'session' }) || 249,
         areaId: '',
         projectId: '',
         projectName: ''
@@ -277,17 +279,29 @@ export default {
       this.getQuestionData()
       this.getQualityData()
     },
-    //  获取安防巡逻概览数据
+    //  获取安防巡逻概览、安防巡逻完成率、安防巡逻及时率数据
     getSecurityData () {
-      getSecurityDataOfQualityScreen(this.filterForm).then(res => {
+      getInfoOfQualityScreen({
+        ...this.filterForm,
+        lpCategory: 4,
+        sysName: ['安防']
+      }).then(res => {
+        if (res.status == 200 && res.data.legend) {
+          this.securityInfoOption = res.data[0]
+        }
+      })
+      getDataOfQualityScreen({
+        ...this.filterForm,
+        lpCategory: 4,
+        sysName: '安防'
+      }).then(res => {
         if (res.status == 200) {
-          this.securityInfoOption = res.data.row1
           const myChart1 = echarts.init(document.getElementById('securityComplete'))
           myChart1.clear()
           const myChart2 = echarts.init(document.getElementById('securityTimely'))
           myChart2.clear()
           myChart1.setOption({
-            color: ['#FABC67'],
+            color: [this.$store.state.warningColor],
             grid: {
               top: 60,
               left: 30,
@@ -298,22 +312,24 @@ export default {
               textStyle: {
                 fontSize: 14,
                 lineHeight: 14,
-                color: '#46AEFD'
+                color: this.$store.state.primaryColor
               },
               data: ['完成率']
             },
             xAxis: [
               {
                 type: 'category',
-                data: res.data.row2.XDate,
+                data: res.data.map(site => {
+                  return site.indicatorDay
+                }),
                 axisLabel: {
                   interval: 0,
-                  color: '#46AEFD',
+                  color: this.$store.state.primaryColor,
                   fontSize: 10
                 },
                 axisLine: {
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisPointer: {
@@ -325,10 +341,11 @@ export default {
               {
                 type: 'value',
                 name: '%/月份',
+                max: 100,
                 axisLine: {
                   show: true,
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisLabel: {
@@ -347,12 +364,14 @@ export default {
                 name: '完成率',
                 type: 'line',
                 yAxisIndex: 0,
-                data: res.data.row2.YData1
+                data: res.data.map(site => {
+                  return site.finishRate || 0
+                })
               }
             ]
           })
           myChart2.setOption({
-            color: ['#44F5F6'],
+            color: [this.$store.state.secondaryColor],
             grid: {
               top: 60,
               left: 30,
@@ -363,22 +382,24 @@ export default {
               textStyle: {
                 fontSize: 14,
                 lineHeight: 14,
-                color: '#46AEFD'
+                color: this.$store.state.primaryColor
               },
               data: ['及时完成率']
             },
             xAxis: [
               {
                 type: 'category',
-                data: res.data.row2.XDate,
+                data: res.data.map(site => {
+                  return site.indicatorDay
+                }),
                 axisLabel: {
                   interval: 0,
-                  color: '#46AEFD',
+                  color: this.$store.state.primaryColor,
                   fontSize: 10
                 },
                 axisLine: {
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisPointer: {
@@ -390,10 +411,11 @@ export default {
               {
                 type: 'value',
                 name: '%/月份',
+                max: 100,
                 axisLine: {
                   show: true,
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisLabel: {
@@ -412,7 +434,9 @@ export default {
                 name: '及时完成率',
                 type: 'line',
                 yAxisIndex: 0,
-                data: res.data.row2.YData2
+                data: res.data.map(site => {
+                  return site.finishIntimeRate || 0
+                })
               }
             ]
           })
@@ -421,22 +445,26 @@ export default {
     },
     //  获取巡逻任务数据
     getPatrolData () {
-      getPatrolDataOfQualityScreen(this.filterForm).then(res => {
+      getInfoOfQualityScreen({
+        ...this.filterForm,
+        lpCategory: 4,
+        sysName: ['秩序', '环境', '客服', '工程']
+      }).then(res => {
         if (res.status == 200) {
           this.patrolInfoOption.forEach(item => {
-            item.info = res.data[item.code]
+            item.info = res.data.find(site => site.sysName == item.label)
           })
         }
       })
     },
-    //  获取安防巡逻概览数据
+    //  获取问题追踪数据
     getQuestionData () {
       getQuestionDataOfQualityScreen(this.filterForm).then(res => {
         if (res.status == 200) {
           const myChart1 = echarts.init(document.getElementById('questionTrack'))
           myChart1.clear()
           myChart1.setOption({
-            color: ['#46AEFD', '#FABC67'],
+            color: [this.$store.state.primaryColor, this.$store.state.warningColor],
             grid: {
               top: 60,
               left: 30,
@@ -447,7 +475,7 @@ export default {
               textStyle: {
                 fontSize: 14,
                 lineHeight: 14,
-                color: '#46AEFD'
+                color: this.$store.state.primaryColor
               },
               data: ['问题跟踪数量', '完成率']
             },
@@ -457,12 +485,12 @@ export default {
                 data: res.data.month,
                 axisLabel: {
                   interval: 0,
-                  color: '#46AEFD',
+                  color: this.$store.state.primaryColor,
                   fontSize: 10
                 },
                 axisLine: {
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisPointer: {
@@ -477,7 +505,7 @@ export default {
                 axisLine: {
                   show: true,
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisLabel: {
@@ -492,10 +520,11 @@ export default {
               }, {
                 type: 'value',
                 name: '%',
+                max: 100,
                 axisLine: {
                   show: true,
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisLabel: {
@@ -527,15 +556,25 @@ export default {
         }
       })
     },
-    //  获取品质核查概览数据
+    //  获取品质核查概览、品质核查完成率数据
     getQualityData () {
-      getQualityDataOfQualityScreen(this.filterForm).then(res => {
+      getInfoOfQualityScreen({
+        ...this.filterForm,
+        lpCategory: 7
+      }).then(res => {
+        if (res.status == 200 && res.data.legend) {
+          this.qualityInfoOption = res.data[0]
+        }
+      })
+      getDataOfQualityScreen({
+        ...this.filterForm,
+        lpCategory: 7
+      }).then(res => {
         if (res.status == 200) {
-          this.qualityInfoOption = res.data.row1
-          const myChart1 = echarts.init(document.getElementById('qualityComplete'))
-          myChart1.clear()
-          myChart1.setOption({
-            color: ['#FABC67'],
+          const myChart = echarts.init(document.getElementById('qualityComplete'))
+          myChart.clear()
+          myChart.setOption({
+            color: [this.$store.state.warningColor],
             grid: {
               top: 60,
               left: 30,
@@ -546,22 +585,24 @@ export default {
               textStyle: {
                 fontSize: 14,
                 lineHeight: 14,
-                color: '#46AEFD'
+                color: this.$store.state.primaryColor
               },
               data: ['完成率']
             },
             xAxis: [
               {
                 type: 'category',
-                data: res.data.row2.XDate,
+                data: res.data.map(site => {
+                  return site.indicatorDay
+                }),
                 axisLabel: {
                   interval: 0,
-                  color: '#46AEFD',
+                  color: this.$store.state.primaryColor,
                   fontSize: 10
                 },
                 axisLine: {
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisPointer: {
@@ -573,10 +614,11 @@ export default {
               {
                 type: 'value',
                 name: '%/月份',
+                max: 100,
                 axisLine: {
                   show: true,
                   lineStyle: {
-                    color: '#46AEFD'
+                    color: this.$store.state.primaryColor
                   }
                 },
                 axisLabel: {
@@ -595,7 +637,9 @@ export default {
                 name: '完成率',
                 type: 'line',
                 yAxisIndex: 0,
-                data: res.data.row2.YData3
+                data: res.data.map(site => {
+                  return site.finishRate || 0
+                })
               }
             ]
           })
@@ -605,10 +649,9 @@ export default {
     //  重绘图表尺寸
     resizeCharts () {
       try {
-        echarts.init(document.getElementById('securityComplete')).resize()
-        echarts.init(document.getElementById('securityTimely')).resize()
-        echarts.init(document.getElementById('questionTrack')).resize()
-        echarts.init(document.getElementById('qualityComplete')).resize()
+        this.chartsList.forEach(item => {
+          echarts.init(document.getElementById(item)).resize()
+        })
       } catch (e) {
         console.log('当前挂载实例未成功，三秒倒计时后重启')
         setTimeout(() => {
@@ -621,20 +664,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .base-info-card{
-    padding-right: 20px!important;
-    cursor: default!important;
-    .base-info-title{
-      font-size: 2.2vh!important;
-      height: 4vh!important;
-      line-height: 4vh!important;
-      background-size: 3vh!important;
-    }
-    .base-info-data{
-      font-size: 5.6vh!important;
-      overflow: hidden;
-    }
-  }
+  @import '../../assets/css/storeColor';
   .patrol-container{
     width: 100%;
     height: 100%;
@@ -651,13 +681,13 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #46aefd;
+        color: $primary-color;
         font-size: 1.8vh!important;
         .patrol-title-icon{
           width: 12px;
           height: 12px;
           transform: rotateZ(45deg)skew(0, 0);
-          background-color: #46aefd;
+          background-color: $primary-color;
           margin-right: 10px;
         }
       }
@@ -671,13 +701,13 @@ export default {
           height: 50%;
           display: flex;
           align-items: center;
-          color: #46aefd;
+          color: $primary-color;
           font-size: 1.2vh!important;
           .patrol-info-icon{
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background-color: #46aefd;
+            background-color: $primary-color;
             margin-right: 8px;
           }
         }
@@ -688,7 +718,7 @@ export default {
           box-sizing: border-box;
           display: flex;
           align-items: center;
-          color: #FABC67;
+          color: $warning-color;
           font-size: 1.1vh!important;
         }
       }

vite.config.js

@@ -32,15 +32,15 @@ export default ({ command, mode }) => {
             rewrite: (path) => path.replace(/^\/landcrm/, '/landcrm')
           },
           '/neikong': {
-            target: 'https://wuye.djchina.com/',
-            // target: 'https://ebeitest.wuyeface.com:1188/',
+            // target: 'https://wuye.djchina.com/',
+            target: 'https://ebeitest.wuyeface.com:1188/',
             changeOrigin: true,
             ws: true,
             rewrite: (path) => path.replace(/^\/neikong/, '/neikong')
           },
           '/datashow': {
-            target: 'https://wuye.djchina.com/',
-            // target: 'https://ebeitest.wuyeface.com:1188/',
+            // target: 'https://wuye.djchina.com/',
+            target: 'https://ebeitest.wuyeface.com:1188/',
             changeOrigin: true,
             ws: true,
             rewrite: (path) => path.replace(/^\/datashow/, '/datashow')