1

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

src/api/dictionary.js

@@ -11,3 +11,12 @@ export function getProjectDictionary (object) {
     type: 'JSON'
   })
 }
+//  字典--获取项目树形结构数据
+export function getProjectTreeDictionary (object) {
+  return request({
+    url: `/neikong/company/getDetailsByUserId`,
+    method: 'get',
+    params: object,
+    type: 'JSON'
+  })
+}

src/assets/css/public.scss

@@ -31,6 +31,10 @@
   height: 100%;
   overflow: hidden;
 }
+.charts-container-half{
+  width: 50%;
+  float: left;
+}
 
 .table-dialog {
   .el-drawer__header {
@@ -126,7 +130,7 @@
     background-image: url("../images/base_info_bg.png");
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: contain;
   }
   .base-info-container{
     width: 100%;
@@ -297,4 +301,7 @@
   color: $primary-color!important;
   font-size: 1.5vh;
   background-color: #30313380!important;
+  .el-popper__arrow{
+    background-color: #30313380!important;
+  }
 }

src/views/comprehensiveScreen/index.vue

@@ -0,0 +1,853 @@
+<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="one-third-container">
+          <dataContainer title="经营指标">
+            <div
+              id="operatingIndicators1"
+              class="charts-container charts-container-half"
+            />
+            <div
+              id="operatingIndicators2"
+              class="charts-container charts-container-half"
+            />
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="满意度分析">
+            <div
+              id="satisfactionAnalysis"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="品质核查完成率">
+            <div
+              id="qualityComplete"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-row class="two-third-container">
+          <dataContainer title="安防巡逻概览" />
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="监控系统">
+            <div
+              id="securityComplete"
+              class="charts-container"
+            />
+          </dataContainer>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-row class="one-third-container">
+          <dataContainer title="400报事系统">
+            <div
+              id="reportingSystem1"
+              class="charts-container charts-container-half"
+            />
+            <div
+              id="reportingSystem2"
+              class="charts-container charts-container-half"
+            />
+          </dataContainer>
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="FM设备管理系统" />
+        </el-row>
+        <el-row class="one-third-container">
+          <dataContainer title="安防巡逻">
+            <div
+              id="questionTraqck"
+              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 {
+  getProjectTreeDictionary
+} from 'api/dictionary'
+import {
+} from 'api/quality'
+import { getStore } from '../../utils/store'
+export default {
+  name: 'ComprehensiveScreen',
+  components: {
+    dataContainer
+  },
+  mixins: [
+    matchSize
+  ],
+  props: {
+    resizeHeight: {
+      type: Number,
+      default: 500
+    }
+  },
+  data () {
+    return {
+      project: [null],
+      projectList: [],
+      projectProps: {
+        label: 'projectName',
+        value: 'projectId'
+      },
+      filterForm: {
+        companyId: '',
+        areaId: '',
+        projectId: '',
+        projectName: ''
+      },
+      colorList: ['#87c9fa', '#b7e9ff', '#007afc', '#4aa1ff', '#71b5ff', '#26baff', '#e8f5ff', '#299ff6'],
+      chartsList: ['operatingIndicators1', 'operatingIndicators2', 'satisfactionAnalysis', 'qualityComplete', 'reportingSystem1', 'reportingSystem2']
+    }
+  },
+  mounted () {
+    this.filterForm.companyId = getStore({ name: 'companyIdScreen' })
+    getProjectTreeDictionary({
+      companyId: this.filterForm.companyId,
+      userId: getStore({ name: 'userIdScreen' })
+    }).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' }),
+        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.getOperatingIndicatorsData()
+      this.getSatisfactionAnalysisData()
+      this.getQualityCompleteData()
+      this.getReportingSystemData()
+    },
+    //  获取经营指标数据
+    getOperatingIndicatorsData () {
+      const that = this
+      const demoData1 = [{
+        name: '基础物业',
+        value: 74
+      }, {
+        name: '地产业务',
+        value: 20
+      }, {
+        name: '多种经营',
+        value: 6
+      }]
+      const demoData2 = [{
+        name: '人力成本',
+        value: 71
+      }, {
+        name: '能源消耗',
+        value: 12
+      }, {
+        name: '保洁绿化外包',
+        value: 7
+      }, {
+        name: '其它',
+        value: 10
+      }]
+      const myChart1 = echarts.init(document.getElementById('operatingIndicators1'))
+      myChart1.clear()
+      const myChart2 = echarts.init(document.getElementById('operatingIndicators2'))
+      myChart2.clear()
+      myChart1.setOption({
+        color: that.colorList,
+        title: {
+          text: '收入分析',
+          textStyle: {
+            color: that.$store.state.primaryColor,
+            fontSize: 18 * that.sizeRatio,
+            lineHeight: 24 * that.sizeRatio
+          },
+          left: 'center',
+          top: 0
+        },
+        legend: {
+          icon: 'circle',
+          top: 'center',
+          right: 16 * that.sizeRatio,
+          orient: 'vertical',
+          itemWidth: 8 * that.sizeRatio,
+          formatter: function (name) {
+            return '{nam|' + name + ' }\n{val|' + demoData1.find(item => item.name == name).value + '%}'
+          },
+          textStyle: {
+            rich: {
+              nam: {
+                fontSize: 14 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio,
+                color: that.$store.state.primaryColor
+              },
+              val: {
+                fontSize: 16 * that.sizeRatio,
+                color: that.$store.state.warningColor
+              }
+            }
+          }
+        },
+        series: [{
+          name: '收入分析',
+          type: 'pie',
+          radius: ['35%', '50%'],
+          center: ['32%', '50%'],
+          minAngle: 1,
+          roseType: 'radius',
+          label: {
+            position: 'inside',
+            fontSize: 16 * that.sizeRatio,
+            color: that.$store.state.warningColor,
+            formatter: '{d}%'
+          },
+          labelLayout: {
+            hideOverlap: false
+          },
+          itemStyle: {
+            color: (params) => {
+              return that.colorList[params.dataIndex]
+            },
+            shadowColor: that.$store.state.shadowColor,
+            shadowBlur: 8
+          },
+          data: demoData1.map((item, index) => {
+            return {
+              name: item.name,
+              value: item.value
+            }
+          })
+        }]
+      })
+      myChart2.setOption({
+        color: that.colorList,
+        title: {
+          text: '支出分析',
+          textStyle: {
+            color: that.$store.state.primaryColor,
+            fontSize: 18 * that.sizeRatio,
+            lineHeight: 24 * that.sizeRatio
+          },
+          left: 'center',
+          top: 0
+        },
+        legend: {
+          icon: 'circle',
+          top: 'center',
+          right: 0,
+          orient: 'vertical',
+          itemWidth: 8 * that.sizeRatio,
+          formatter: function (name) {
+            return '{nam|' + name + ' }\n{val|' + demoData2.find(item => item.name == name).value + '%}'
+          },
+          textStyle: {
+            rich: {
+              nam: {
+                fontSize: 14 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio,
+                color: that.$store.state.primaryColor
+              },
+              val: {
+                fontSize: 16 * that.sizeRatio,
+                color: that.$store.state.warningColor
+              }
+            }
+          }
+        },
+        series: [{
+          name: '支出分析',
+          type: 'pie',
+          radius: ['35%', '50%'],
+          center: ['32%', '50%'],
+          minAngle: 1,
+          roseType: 'radius',
+          label: {
+            position: 'inside',
+            fontSize: 16 * that.sizeRatio,
+            color: that.$store.state.warningColor,
+            formatter: '{d}%'
+          },
+          labelLayout: {
+            hideOverlap: false
+          },
+          itemStyle: {
+            color: (params) => {
+              return that.colorList[params.dataIndex]
+            },
+            shadowColor: that.$store.state.shadowColor,
+            shadowBlur: 8
+          },
+          data: demoData2.map((item, index) => {
+            return {
+              name: item.name,
+              value: item.value
+            }
+          })
+        }]
+      })
+    },
+    //  获取满意度分析数据
+    getSatisfactionAnalysisData () {
+      const demoData = [{
+        name: '2020/09',
+        value: 71
+      }, {
+        name: '2020/10`',
+        value: 42
+      }, {
+        name: '2020/11',
+        value: 69
+      }, {
+        name: '2020/12',
+        value: 69
+      }, {
+        name: '2021/01',
+        value: 69
+      }, {
+        name: '2021/02',
+        value: 69
+      }, {
+        name: '2021/03',
+        value: 69
+      }, {
+        name: '2021/04',
+        value: 69
+      }, {
+        name: '2021/05',
+        value: 69
+      }, {
+        name: '2021/06',
+        value: 69
+      }, {
+        name: '2021/07',
+        value: 69
+      }, {
+        name: '2021/08',
+        value: 69
+      }]
+      const myChart = echarts.init(document.getElementById('satisfactionAnalysis'))
+      myChart.clear()
+      myChart.setOption({
+        color: [this.$store.state.secondaryColor],
+        grid: {
+          top: 60,
+          left: 30,
+          right: 30,
+          bottom: 30
+        },
+        legend: {
+          textStyle: {
+            fontSize: 14,
+            lineHeight: 14,
+            color: this.$store.state.primaryColor
+          },
+          data: ['回访满意率']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: demoData.map(site => {
+              return site.name
+            }),
+            axisLabel: {
+              interval: 0,
+              color: this.$store.state.primaryColor,
+              fontSize: 10
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.$store.state.primaryColor
+              }
+            },
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '%/月份',
+            max: 100,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: this.$store.state.primaryColor
+              }
+            },
+            axisLabel: {
+              formatter: '{value}'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(70, 174, 253, 0.2)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '回访满意率',
+            type: 'line',
+            yAxisIndex: 0,
+            data: demoData.map(site => {
+              return site.value || 0
+            })
+          }
+        ]
+      })
+    },
+    //  获取品质核查完成率数据
+    getQualityCompleteData () {
+      const demoData = [{
+        name: '2020/09',
+        value: 71
+      }, {
+        name: '2020/10`',
+        value: 42
+      }, {
+        name: '2020/11',
+        value: 69
+      }, {
+        name: '2020/12',
+        value: 69
+      }, {
+        name: '2021/01',
+        value: 69
+      }, {
+        name: '2021/02',
+        value: 69
+      }, {
+        name: '2021/03',
+        value: 69
+      }, {
+        name: '2021/04',
+        value: 69
+      }, {
+        name: '2021/05',
+        value: 69
+      }, {
+        name: '2021/06',
+        value: 69
+      }, {
+        name: '2021/07',
+        value: 69
+      }, {
+        name: '2021/08',
+        value: 69
+      }]
+      const myChart = echarts.init(document.getElementById('qualityComplete'))
+      myChart.clear()
+      myChart.setOption({
+        color: [this.$store.state.warningColor],
+        grid: {
+          top: 60,
+          left: 30,
+          right: 30,
+          bottom: 30
+        },
+        legend: {
+          textStyle: {
+            fontSize: 14,
+            lineHeight: 14,
+            color: this.$store.state.primaryColor
+          },
+          data: ['完成率']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: demoData.map(site => {
+              return site.name
+            }),
+            axisLabel: {
+              interval: 0,
+              color: this.$store.state.primaryColor,
+              fontSize: 10
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.$store.state.primaryColor
+              }
+            },
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '%/月份',
+            max: 100,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: this.$store.state.primaryColor
+              }
+            },
+            axisLabel: {
+              formatter: '{value}'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(70, 174, 253, 0.2)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '完成率',
+            type: 'line',
+            yAxisIndex: 0,
+            data: demoData.map(site => {
+              return site.value || 0
+            })
+          }
+        ]
+      })
+    },
+    //  获取400报事系统数据
+    getReportingSystemData () {
+      const that = this
+      const demoData1 = [{
+        name: '报修',
+        value: 810
+      }, {
+        name: '报事',
+        value: 1220
+      }]
+      const demoData2 = [{
+        name: '微信',
+        value: 71
+      }, {
+        name: '来电',
+        value: 12
+      }, {
+        name: '来访',
+        value: 7
+      }, {
+        name: '网络',
+        value: 810
+      }]
+      const myChart1 = echarts.init(document.getElementById('reportingSystem1'))
+      myChart1.clear()
+      const myChart2 = echarts.init(document.getElementById('reportingSystem2'))
+      myChart2.clear()
+      myChart1.setOption({
+        color: that.colorList,
+        title: {
+          text: '工单分类',
+          textStyle: {
+            color: that.$store.state.primaryColor,
+            fontSize: 18 * that.sizeRatio,
+            lineHeight: 24 * that.sizeRatio
+          },
+          left: 'center',
+          top: 0
+        },
+        legend: {
+          icon: 'circle',
+          top: 'center',
+          right: 16 * that.sizeRatio,
+          orient: 'vertical',
+          itemWidth: 8 * that.sizeRatio,
+          formatter: function (name) {
+            return '{nam|' + name + ' }\n{val|' + demoData1.find(item => item.name == name).value + '}'
+          },
+          textStyle: {
+            rich: {
+              nam: {
+                fontSize: 14 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio,
+                color: that.$store.state.primaryColor
+              },
+              val: {
+                fontSize: 16 * that.sizeRatio,
+                color: that.$store.state.warningColor
+              }
+            }
+          }
+        },
+        series: [{
+          name: '工单分类',
+          type: 'pie',
+          radius: ['35%', '50%'],
+          center: ['32%', '50%'],
+          minAngle: 1,
+          roseType: 'radius',
+          label: {
+            show: false
+          },
+          itemStyle: {
+            color: (params) => {
+              return that.colorList[params.dataIndex]
+            },
+            shadowColor: that.$store.state.shadowColor,
+            shadowBlur: 8
+          },
+          data: demoData1.map((item, index) => {
+            return {
+              name: item.name,
+              value: item.value
+            }
+          }),
+          markPoint: {
+            symbol: 'roundRect',
+            itemStyle: {
+              color: 'transparent'
+            },
+            tooltip: {
+              show: false
+            },
+            data: [
+              {
+                name: '工单分类',
+                x: '32%',
+                y: '50%',
+                label: {
+                  normal: {
+                    show: true,
+                    align: 'center',
+                    formatter: JSON.stringify(demoData1.reduce((total, item) => {
+                      return total + item.value
+                    }, 0)),
+                    color: '#ffffff',
+                    fontSize: 18 * that.sizeRatio,
+                    fontWeight: 'bold'
+                  }
+                }
+              }
+            ]
+          }
+        }]
+      })
+      myChart2.setOption({
+        color: that.colorList,
+        title: {
+          text: '工单来源',
+          textStyle: {
+            color: that.$store.state.primaryColor,
+            fontSize: 18 * that.sizeRatio,
+            lineHeight: 24 * that.sizeRatio
+          },
+          left: 'center',
+          top: 0
+        },
+        legend: {
+          icon: 'circle',
+          top: 'center',
+          right: 0,
+          orient: 'vertical',
+          itemWidth: 8 * that.sizeRatio,
+          formatter: function (name) {
+            return '{nam|' + name + ' }\n{val|' + demoData2.find(item => item.name == name).value + '}'
+          },
+          textStyle: {
+            rich: {
+              nam: {
+                fontSize: 14 * that.sizeRatio,
+                lineHeight: 24 * that.sizeRatio,
+                color: that.$store.state.primaryColor
+              },
+              val: {
+                fontSize: 16 * that.sizeRatio,
+                color: that.$store.state.warningColor
+              }
+            }
+          }
+        },
+        series: [{
+          name: '工单来源',
+          type: 'pie',
+          radius: ['35%', '50%'],
+          center: ['32%', '50%'],
+          minAngle: 1,
+          roseType: 'radius',
+          label: {
+            show: false
+          },
+          itemStyle: {
+            color: (params) => {
+              return that.colorList[params.dataIndex]
+            },
+            shadowColor: that.$store.state.shadowColor,
+            shadowBlur: 8
+          },
+          data: demoData2.map((item, index) => {
+            return {
+              name: item.name,
+              value: item.value
+            }
+          }),
+          markPoint: {
+            symbol: 'roundRect',
+            itemStyle: {
+              color: 'transparent'
+            },
+            tooltip: {
+              show: false
+            },
+            data: [
+              {
+                name: '工单来源',
+                x: '32%',
+                y: '50%',
+                label: {
+                  normal: {
+                    show: true,
+                    align: 'center',
+                    formatter: JSON.stringify(demoData2.reduce((total, item) => {
+                      return total + item.value
+                    }, 0)),
+                    color: '#ffffff',
+                    fontSize: 18 * that.sizeRatio,
+                    fontWeight: 'bold'
+                  }
+                }
+              }
+            ]
+          }
+        }]
+      })
+    },
+    //  重绘图表尺寸
+    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';
+  .patrol-container{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    background-color: rgba(116,134,141,.1);
+    display: flex;
+    .patrol-card{
+      flex: 1;
+      height: 100%;
+      .patrol-title{
+        width: 100%;
+        height: 16%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $primary-color;
+        font-size: 1.8vh!important;
+        .patrol-title-icon{
+          width: 12px;
+          height: 12px;
+          transform: rotateZ(45deg)skew(0, 0);
+          background-color: $primary-color;
+          margin-right: 10px;
+        }
+      }
+      .patrol-info{
+        width: 100%;
+        height: 21%;
+        padding-left: 34%;
+        box-sizing: border-box;
+        .patrol-info-label{
+          width: 100%;
+          height: 50%;
+          display: flex;
+          align-items: center;
+          color: $primary-color;
+          font-size: 1.2vh!important;
+          .patrol-info-icon{
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: $primary-color;
+            margin-right: 8px;
+          }
+        }
+        .patrol-info-num{
+          width: 100%;
+          height: 50%;
+          padding-left: 14px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          color: $warning-color;
+          font-size: 1.1vh!important;
+        }
+      }
+    }
+    .patrol-card:last-child{
+    }
+  }
+</style>

src/views/engineeringScreen/index.vue

@@ -98,7 +98,7 @@
                 <div class="base-info-tip">
                   在管项目
                   <span>{{ baseInfoOption.projectCount }}</span>
-                  个&nbsp;&nbsp;&nbsp;&nbsp;在管机房
+                  个&nbsp;&nbsp;在管机房
                   <span>{{ baseInfoOption.devicePartrolCount }}</span>
                   个
                 </div>