From d00a9f035aec50c37c8e0a1363a1968672fb875f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 16 七月 2024 16:58:39 +0800
Subject: [PATCH] 2024.7.16

---
 src/views/inspection/problem/component/ProblemSummary.vue     |  133 ++++++++--
 src/utils/map/util.js                                         |   17 +
 src/views/visualization/SupervisionVisual.vue                 |    4 
 src/views/inspection/problem/component/ProblemType.vue        |   71 -----
 src/views/inspection/WorkStream.vue                           |   21 -
 src/views/inspection/problem/component/ProblemChangeChart.vue |  118 +++++----
 src/utils/echart/chart-option.js                              |   79 ++++++
 src/utils/map/marks.js                                        |   22 +
 src/components/BaseTable.vue                                  |    9 
 src/stores/subtask.js                                         |   62 +++++
 /dev/null                                                     |   12 -
 src/utils/echart/bar-chart-option.js                          |   54 ++++
 src/stores/area.js                                            |   13 
 src/views/inspection/problem/ProblemTrack.vue                 |   42 ++
 src/utils/map/index.js                                        |    2 
 src/views/main/MonitorView.vue                                |   44 ++-
 16 files changed, 488 insertions(+), 215 deletions(-)

diff --git a/src/components/BaseTable.vue b/src/components/BaseTable.vue
index ba3b9df..702a6f9 100644
--- a/src/components/BaseTable.vue
+++ b/src/components/BaseTable.vue
@@ -12,7 +12,7 @@
     header-row-class-name="t-header-row"
     header-cell-class-name="t-header-cell"
     :show-summary="false"
-    :highlight-current-row="true"
+    :highlight-current-row="false"
     @row-click="handleRowClick"
   >
     <slot></slot>
@@ -46,7 +46,7 @@
   --el-table-bg-color: transparent;
   --el-table-row-hover-bg-color: #23dad0a2;
   --el-table-current-row-bg-color: #7dff5d96;
-  --el-table-text-color: var(--font-color);
+  --el-table-text-color: var(--el-text-color-primary);
 }
 
 .t-row {
@@ -58,14 +58,15 @@
   /* background: red !important; */
   /* height: 40px;
   border: 1px solid black; */
+  text-align: center !important;
 }
 
 .t-header-row {
 }
 
 .t-header-cell {
-  background-color: var(--bg-color-2) !important;
+  /* background-color: var(--bg-color-2) !important; */
   text-align: center !important;
-  color: white !important;
+  color: var(--el-text-color-primary) !important;
 }
 </style>
diff --git a/src/stores/area.js b/src/stores/area.js
index 638389f..933ce87 100644
--- a/src/stores/area.js
+++ b/src/stores/area.js
@@ -29,11 +29,18 @@
       this.area.districtcode = location.dCode
       this.area.districtname = location.dName
     },
+    setTimePeriod(time, type) {
+      const d = time ? dayjs(time) : dayjs()
+      this.area.starttime = d.startOf(type).format('YYYY-MM-DD HH:mm:ss')
+      this.area.endtime = d.endOf(type).format('YYYY-MM-DD HH:mm:ss')
+    },
     // 璁剧疆鏃堕棿涓虹粰瀹氭椂闂村搴斿綋鏃ョ殑澶村熬
     setTimeOneDay(time) {
-      const d = time ? dayjs(time) : dayjs()
-      this.area.starttime = d.startOf('day').format('YYYY-MM-DD HH:mm:ss')
-      this.area.endtime = d.endOf('day').format('YYYY-MM-DD HH:mm:ss')
+      this.setTimePeriod(time, 'day')
+    },
+    // 璁剧疆鏃堕棿涓虹粰瀹氭椂闂村搴斿綋鏈堢殑澶村熬
+    setTimeOneMonth(time) {
+      this.setTimePeriod(time, 'month')
     },
     // 璁剧疆鍦烘櫙绫诲瀷
     setSceneType(t) {
diff --git a/src/stores/counter.js b/src/stores/counter.js
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/subtask.js b/src/stores/subtask.js
new file mode 100644
index 0000000..8deda39
--- /dev/null
+++ b/src/stores/subtask.js
@@ -0,0 +1,62 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import timeUtil from '@/utils/time-util'
+
+// 宸℃煡浠诲姟
+export const useSubtaskStore = defineStore('subtask', () => {
+  // 褰撴湡鎵�鏈夊贰鏌ョ粺璁′俊鎭�
+  const summaryList = ref([])
+  const summaryMap = ref(new Map())
+  const subtaskLoading = ref(false)
+  const onFetchList = []
+  const onFetchMap = []
+
+  // 璁剧疆鏂扮殑鍊�
+  function setSummary(data) {
+    summaryList.value = data
+    summaryMap.value.clear()
+    data.forEach((e) => {
+      const tag = timeUtil.formatYMD(e.subtask.planstarttime)
+      if (!summaryMap.value.has(tag)) {
+        summaryMap.value.set(tag, [])
+      }
+      summaryMap.value.get(tag).push(e)
+    })
+    if (onFetchList.length > 0) {
+      onFetchList.forEach((e) => {
+        if (e.tag) {
+          e.fun(summaryMap.value.get(e.tag))
+        } else {
+          e.fun(summaryList.value)
+        }
+      })
+    }
+    if (onFetchMap.length > 0) {
+      onFetchMap.forEach((e) => {
+        e(summaryMap.value)
+      })
+    }
+  }
+
+  function getSummaryList(timeTag, callback) {
+    if (summaryMap.value.size === 0) {
+      onFetchList.push({ tag: timeTag, fun: callback })
+    } else {
+      if (timeTag) {
+        callback(summaryMap.value.get(timeTag))
+      } else {
+        callback(summaryList.value)
+      }
+    }
+  }
+
+  function getSummaryMap(callback) {
+    if (summaryMap.value.size === 0) {
+      onFetchMap.push(callback)
+    } else {
+      callback(summaryMap.value)
+    }
+  }
+
+  return { summaryList, summaryMap, subtaskLoading, setSummary, getSummaryList, getSummaryMap }
+})
diff --git a/src/utils/echart/bar-chart-option.js b/src/utils/echart/bar-chart-option.js
new file mode 100644
index 0000000..776b235
--- /dev/null
+++ b/src/utils/echart/bar-chart-option.js
@@ -0,0 +1,54 @@
+const fontSize = 12
+
+function barChartOption(chartData) {
+  const x = chartData.xAxis
+  const legends = chartData.yAxis.map((v) => {
+    return v.name
+  })
+  const series = chartData.yAxis.map((v) => {
+    return {
+      name: v.name,
+      type: 'bar',
+      data: v.data
+    }
+  })
+  return {
+    legend: {
+      data: legends,
+      textStyle: {
+        fontSize: fontSize,
+        color: 'white'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: x,
+      axisLabel: {
+        rotate: 45,
+        textStyle: {
+          fontSize: fontSize
+        },
+        color: '#ffffff',
+        textBorderColor: '#fff'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        textStyle: {
+          fontSize: fontSize,
+          color: 'white'
+        }
+      }
+    },
+    series: series
+  }
+}
+
+export { barChartOption }
diff --git a/src/utils/echart/chart-option.js b/src/utils/echart/chart-option.js
new file mode 100644
index 0000000..c7de2f8
--- /dev/null
+++ b/src/utils/echart/chart-option.js
@@ -0,0 +1,79 @@
+const fontSize = 12
+
+// 鏄剧ず鍓峜ount涓暟鎹爣绛�
+function genData(chartData, count) {
+  chartData.forEach((item, index) => {
+    const _show = index < count
+    item.label = { show: _show }
+    item.labelLine = { show: _show }
+  })
+  return chartData
+}
+
+/**
+ * 楗煎浘锛堝崡涓佹牸灏斿浘锛夐厤缃�
+ * @param {String} name 绯诲垪鍚嶇О
+ * @param {Array} chartData 鏁版嵁
+ * @param {boolean} sort 鏄惁鎺掑簭
+ * @param {number} showLegendCount 鏄剧ず鏍囩鏁伴噺
+ * @returns
+ */
+function pieChartOption(name, chartData, showLegendCount) {
+  let _data = chartData
+  if (showLegendCount) {
+    _data = genData(_data, showLegendCount)
+  }
+  return {
+    // legend: {
+    //   textStyle: {
+    //     fontSize: fontSize,
+    //     color: 'white'
+    //   }
+    // },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: name,
+        type: 'pie',
+        // radius: '55%',
+        center: ['50%', '50%'],
+        data: _data,
+        roseType: 'radius',
+        percentPrecision: 0,
+        label: {
+          position: 'outside',
+          formatter: '{b}({d}%)',
+          color: 'rgba(255, 255, 255, 0.8)'
+        },
+        labelLine: {
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.3)'
+          },
+          smooth: 0.2,
+          length: 5,
+          length2: 5
+        },
+        itemStyle: {
+          color: '#c23531',
+          shadowBlur: 200,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+        animationDelay: function (idx) {
+          return Math.random() * 200
+        }
+      }
+    ]
+  }
+}
+
+export { pieChartOption }
diff --git a/src/utils/map/index.js b/src/utils/map/index.js
index 26f5c3c..f557e32 100644
--- a/src/utils/map/index.js
+++ b/src/utils/map/index.js
@@ -68,7 +68,7 @@
     viewMode: '3D', // 鍦板浘妯″紡
     resizeEnable: true,
     center: [121.603928, 31.252955],
-    zooms: [3, 18],
+    zooms: [2, 20],
     zoom: 14
   })
 
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index 774a700..cfb8e3c 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -3,6 +3,7 @@
  */
 
 import { map, AMap } from './index'
+import util from './util'
 
 var _massMarks = undefined
 
@@ -70,12 +71,12 @@
     map.add(massMarks)
   },
 
-  createLabelMarks(img, dataList) {
+  createLabelMarks(img, dataList, onClick) {
     const layer = new AMap.LabelsLayer({
       zooms: [3, 20],
       zIndex: 1000,
       // 寮�鍚爣娉ㄩ伩璁╋紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
-      collision: true,
+      collision: false,
       // 寮�鍚爣娉ㄦ贰鍏ュ姩鐢伙紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
       animation: true
     })
@@ -96,7 +97,7 @@
           image: img,
           // clipOrigin: [14, 92],
           // clipSize: [50, 68],
-          size: [30, 30],
+          size: [20, 20],
           anchor: 'bottom-center',
           angel: 0,
           retina: true
@@ -106,7 +107,7 @@
           direction: 'top',
           offset: [0, -5],
           style: {
-            fontSize: 16,
+            fontSize: 12,
             fontWeight: 'normal',
             fillColor: '#fff',
             strokeColor: '#333',
@@ -116,10 +117,21 @@
         }
       }
       curData.extData = {
-        index: i
+        data: data
       }
 
       var labelMarker = new AMap.LabelMarker(curData)
+      labelMarker.on('click', (event) => {
+        console.log(labelMarker.getExtData())
+        console.log(event)
+        util.setFitView([event.target])
+        // util.setZoomSmall()
+        // util.setCenter(event.lnglat)
+        // 鑷畾涔夌偣鍑讳簨浠�
+        if (typeof onClick === 'function') {
+          onClick(event.data.data.extData.data)
+        }
+      })
 
       // markers.push(labelMarker);
 
diff --git a/src/utils/map/util.js b/src/utils/map/util.js
index 9eaa6a7..f12ee76 100644
--- a/src/utils/map/util.js
+++ b/src/utils/map/util.js
@@ -20,7 +20,20 @@
   clearViews() {
     map.clearMap()
   },
-  setFitView() {
-    map.setFitView()
+  setFitView(views) {
+    if (views) {
+      map.setFitView(views)
+    } else {
+      map.setFitView()
+    }
+  },
+  setZoomSmall() {
+    map.setZoom(18)
+  },
+  setZoomMedium() {
+    map.setZoom(14)
+  },
+  setZoomLarge() {
+    map.setZoom(6)
   }
 }
diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue
index 0a5d41c..fb2ecdb 100644
--- a/src/views/inspection/WorkStream.vue
+++ b/src/views/inspection/WorkStream.vue
@@ -60,17 +60,14 @@
 }
 
 onMounted(() => {
-  //   var index = 0
-  setInterval(() => {
-    streams.push({
-      //   index: index,
-      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-      user: users[parseInt(Math.random() * users.length)],
-      obj: objs[parseInt(Math.random() * objs.length)],
-      event: events[parseInt(Math.random() * events.length)]
-    })
-    scrollToBottom()
-    // index++
-  }, 10000)
+  // setInterval(() => {
+  //   streams.push({
+  //     time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  //     user: users[parseInt(Math.random() * users.length)],
+  //     obj: objs[parseInt(Math.random() * objs.length)],
+  //     event: events[parseInt(Math.random() * events.length)]
+  //   })
+  //   scrollToBottom()
+  // }, 10000)
 })
 </script>
diff --git a/src/views/inspection/problem/ProblemTrack.vue b/src/views/inspection/problem/ProblemTrack.vue
index ebab9b2..849b107 100644
--- a/src/views/inspection/problem/ProblemTrack.vue
+++ b/src/views/inspection/problem/ProblemTrack.vue
@@ -1,14 +1,33 @@
 <template>
   <!-- <div class="border-r-small"> -->
   <BaseCard>
-    <div class="font-large">闂鏁存敼璺熻釜</div>
+    <el-row justify="space-between" align="middle">
+      <div class="font-large">闂鏁存敼璺熻釜</div>
+      <OptionTime v-model="time" type="date"></OptionTime>
+    </el-row>
     <div>
-      <el-row justify="end">
-        <OptionTime v-model="time" type="date"></OptionTime>
-      </el-row>
       <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
       <ProblemTable :data="subtaskList"></ProblemTable>
     </div>
+  </BaseCard>
+  <BaseCard>
+    <el-row justify="space-between" align="middle">
+      <div class="font-large">鍒嗘湡瓒嬪娍</div>
+      <OptionTime v-model="time"></OptionTime>
+    </el-row>
+    <div>
+      <ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
+    </div>
+  </BaseCard>
+  <BaseCard>
+    <el-row justify="space-between" align="middle">
+      <div class="font-large">闂鍒嗗竷</div>
+    </el-row>
+    <div>
+      <ProblemType ref="pTypeRef"></ProblemType>
+    </div>
+  </BaseCard>
+  <!-- <BaseCard>
     <el-collapse v-model="activeNames" @change="handleChange">
       <el-collapse-item title="鍒嗘湡瓒嬪娍" name="1">
         <ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
@@ -17,12 +36,13 @@
         <ProblemType ref="pTypeRef"></ProblemType>
       </el-collapse-item>
     </el-collapse>
-  </BaseCard>
+  </BaseCard> -->
   <!-- </div> -->
 </template>
 
 <script>
 import { useAreaStore } from '@/stores/area.js'
+import { useSubtaskStore } from '@/stores/subtask.js'
 import { mapStores } from 'pinia'
 import dayjs from 'dayjs'
 
@@ -56,19 +76,23 @@
         const d = nV ? dayjs(nV) : dayjs()
         this.area.starttime = d.startOf('day').format('YYYY-MM-DD HH:mm:ss')
         this.area.endtime = d.endOf('day').format('YYYY-MM-DD HH:mm:ss')
-        // this.areaStore.setTimeOneDay(nV)
         this.fetchSubtask()
         this.fetchDayProblemsStatistic()
       }
     }
   },
   computed: {
-    ...mapStores(useAreaStore)
+    ...mapStores(useAreaStore),
+    ...mapStores(useSubtaskStore)
   },
   methods: {
     fetchSubtask() {
-      taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
-        this.subtaskList = res.data
+      // taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
+      //   this.subtaskList = res.data
+      // })
+      const tag = dayjs(this.time).format('YYYY-MM-DD')
+      this.subtaskStore.getSummaryList(tag, (v) => {
+        this.subtaskList = v ? v : []
       })
     },
     fetchDayProblemsStatistic() {
diff --git a/src/views/inspection/problem/component/ProblemChangeChart.vue b/src/views/inspection/problem/component/ProblemChangeChart.vue
index 3e6314d..73703d6 100644
--- a/src/views/inspection/problem/component/ProblemChangeChart.vue
+++ b/src/views/inspection/problem/component/ProblemChangeChart.vue
@@ -1,18 +1,18 @@
 <template>
   <el-row justify="space-between">
     <el-col :span="18">
-      <div>
+      <el-text size="small">
         鍦烘櫙鏁帮細{{ sceneNum }}锛岄棶棰樻�绘暟锛歿{ proNum }}锛屽崟鍦烘櫙闂鍧囧�硷細{{ proEachSceneNum }}锛�
-      </div>
-      <div>
+      </el-text>
+      <el-text size="small">
         鏁存敼鎬绘暟锛歿{ changeNum }}锛屾湁鏁堟暣鏀规暟锛歿{ changePassNum }}锛岄棶棰樻暣鏀圭巼锛歿{
           changePer
         }}锛屾湁鏁堟暣鏀圭巼锛歿{ changePassPer }}
-      </div>
+      </el-text>
     </el-col>
     <el-col :span="6">
       <el-row justify="end">
-        <OptionTime v-model="time"></OptionTime>
+        <!-- <OptionTime v-model="time"></OptionTime> -->
       </el-row>
     </el-col>
   </el-row>
@@ -20,17 +20,22 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import { barChartOption } from '@/utils/echart/bar-chart-option'
+import { useSubtaskStore } from '@/stores/subtask.js'
+import { mapStores } from 'pinia'
+import dayjs from 'dayjs'
 
 export default {
   data() {
     return {
-      sceneNum: 51,
-      proNum: 161,
-      changeNum: 40,
-      changePassNum: 40
+      sceneNum: 0,
+      proNum: 0,
+      changeNum: 0,
+      changePassNum: 0
     }
   },
   computed: {
+    ...mapStores(useSubtaskStore),
     proEachSceneNum() {
       return Math.round((this.proNum / this.sceneNum) * 10) / 10
     },
@@ -50,66 +55,67 @@
     }
   },
   methods: {
-    refresh() {
-      const fontSize = 12
-      const option = {
-        legend: {
-          data: ['闂鏁�', '鏁存敼鏁�'],
-          textStyle: {
-            fontSize: fontSize,
-            color: 'white'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: ['1鍙�', '2鍙�', '3鍙�', '4鍙�', '5鍙�', '6鍙�', '7鍙�', '8鍙�', '9鍙�'],
-          axisLabel: {
-            textStyle: {
-              fontSize: fontSize
-            },
-            color: '#ffffff',
-            textBorderColor: '#fff'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            textStyle: {
-              fontSize: fontSize,
-              color: 'white'
-            }
-          }
-        },
-        series: [
+    fetchData() {
+      this.subtaskStore.getSummaryMap((map) => {
+        this.refresh(map)
+      })
+    },
+    refresh(map) {
+      let sceneNum = 0,
+        proNum = 0,
+        changeNum = 0,
+        changePassNum = 0
+      const chartData = {
+        xAxis: [],
+        yAxis: [
           {
             name: '闂鏁�',
-            type: 'bar',
-            data: [12, 8, 9, 7, 14, 19, 9, 7, 14]
+            data: []
           },
           {
             name: '鏁存敼鏁�',
-            type: 'bar',
-            data: [6, 2, 5, 3, 6, 3, 6, 2, 5]
+            data: []
           }
-          //   {
-          //     name: '鏁存敼鐜�',
-          //     type: 'bar',
-          //     data: [820, 832, 901, 934, 1290, 1330, 1320]
-          //   }
         ]
       }
+      const list = []
+      for (const key of map.keys()) {
+        const value = map.get(key)
+        list.push({ name: key, value: value })
+      }
+      // 鎸夋棩鏈熸搴忔帓鍒�
+      list
+        .sort(function (a, b) {
+          return b.name - a.name
+        })
+        .forEach((e) => {
+          chartData.xAxis.push(dayjs(e.name).format('DD鏃�'))
+          let pNum = 0,
+            cNum = 0
+
+          e.value.forEach((s) => {
+            sceneNum++
+            pNum += s.proNum
+            cNum += s.changeNum
+            changePassNum += s.changeCheckedNum
+          })
+          chartData.yAxis[0].data.push(pNum)
+          chartData.yAxis[1].data.push(cNum)
+          proNum += pNum
+          changeNum += cNum
+        })
+      const option = barChartOption(chartData)
       this.echart.setOption(option)
+
+      this.sceneNum = sceneNum
+      this.proNum = proNum
+      this.changeNum = changeNum
+      this.changePassNum = changePassNum
     }
   },
   mounted() {
     this.echart = echarts.init(this.$refs.echart)
-    this.refresh()
+    this.fetchData()
   }
 }
 </script>
diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 1bdc8c4..e81d006 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,37 +1,51 @@
 <template>
-  <!-- <div class="font-small">
-    浠婃棩缁熻锛氶棶棰樻暟: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼:
-    {{ summary.changePer }}
-  </div> -->
-
-  <div v-if="mainProType" class="font-small">
-    绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
-  </div>
-  <BaseTable :data="summary">
-    <el-table-column
-      label="闂鏁�"
-      prop="proNum"
-      :show-overflow-tooltip="true"
-      width="60"
-    ></el-table-column>
-    <el-table-column
-      label="鏁存敼鏁�"
-      prop="changeNum"
-      :show-overflow-tooltip="true"
-      width="60"
-    ></el-table-column>
-    <el-table-column
-      label="鏁存敼鐜�"
-      prop="changePer"
-      :show-overflow-tooltip="true"
-      width="60"
-    ></el-table-column>
-  </BaseTable>
+  <el-row>
+    <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
+      <div v-show="mainProType">
+        <el-text>绐佸嚭闂</el-text>
+        <div ref="echartRef" class="pie-chart"></div>
+      </div>
+      <template v-if="mainProType">
+        <div v-show="false" class="font-small">
+          绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{
+            mainProType.per
+          }}
+        </div>
+      </template>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="colSpanLarge" :xl="colSpanLarge">
+      <el-text>鍗曟棩姹囨��</el-text>
+      <BaseTable :data="summary">
+        <el-table-column
+          label="闂鏁�"
+          prop="proNum"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="鏁存敼鏁�"
+          prop="changeNum"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="鏁存敼鐜�"
+          prop="changePer"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </BaseTable>
+    </el-col>
+  </el-row>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { pieChartOption } from '@/utils/echart/chart-option'
 
 const props = defineProps({
+  date: {
+    type: Date,
+    default: new Date()
+  },
   data: {
     type: Array,
     default: () => []
@@ -43,6 +57,25 @@
   loading: Boolean
 })
 
+const colSpanLarge = computed(() => {
+  return mainProType.value ? 15 : 24
+})
+
+// 楗煎浘
+let echart
+const echartRef = ref(null)
+
+// 褰撴棩鏃堕棿
+const timeObj = computed(() => {
+  const d = dayjs(props.date)
+  return {
+    year: d.year(),
+    month: d.month(),
+    date: d.date()
+  }
+})
+
+// 闂鍜屾暣鏀规暟閲忕粺璁�
 const summary = computed(() => {
   let proNum = 0,
     changeNum = 0,
@@ -59,6 +92,7 @@
   return [{ proNum, changeNum, changePer }]
 })
 
+// 绐佸嚭闂缁熻
 const mainProType = computed(() => {
   let res
   let total = 0,
@@ -79,6 +113,47 @@
       }
     }
   })
+  refreshChart(props.proStatistic)
   return res
 })
+
+function refreshChart(data) {
+  if (!data || !echart) return
+  const chartData = data
+    .map((item) => {
+      return {
+        value: item.count,
+        name: item.name
+      }
+    })
+    // 姝e簭鎺掑垪
+    .sort(function (a, b) {
+      return b.value - a.value
+    })
+  const option = pieChartOption('闂鍒嗗竷', chartData, 1)
+  const series = option.series[0]
+  // series.radius = '50%'
+  series.center = ['10%', '50%']
+  series.label.formatter = '{b}\n{c}涓�({d}%)'
+  echart.setOption(option)
+  setTimeout(() => {
+    echart.resize()
+  }, 100)
+}
+
+// watch(props.proStatistic, (nV, oV) => {
+//   if (nV != oV) {
+//     refreshChart(nV)
+//   }
+// })
+
+onMounted(() => {
+  echart = echarts.init(echartRef.value)
+})
 </script>
+<style scoped>
+.pie-chart {
+  /* width: 200px; */
+  height: 70px;
+}
+</style>
diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index 6967ca7..f65f5aa 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,12 +1,9 @@
 <template>
   <el-row justify="space-between">
     <el-col :span="18">
-      <div v-if="mainProType">
+      <el-text v-if="mainProType">
         绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
-        <!-- <span v-for="item in mainProType" :key="item.name">
-          {{ item.name }}锛岄棶棰樻暟锛歿{ item.count }}锛屽崰姣攞{ item.per }}
-        </span> -->
-      </div>
+      </el-text>
     </el-col>
     <el-col :span="6">
       <el-row justify="end">
@@ -18,9 +15,9 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import { pieChartOption } from '@/utils/echart/chart-option'
 import { unref } from 'vue'
 import dayjs from 'dayjs'
-
 import problemApi from '@/api/fysp/problemApi.js'
 import { useFetchData } from '@/composables/fetchData'
 import { useAreaStore } from '@/stores/area.js'
@@ -71,7 +68,7 @@
       const param = unref(this.areaStore.area)
       param.starttime = dayjs(param.starttime).startOf('month').format('YYYY-MM-DD HH:mm:ss')
       param.endtime = dayjs(param.endtime).endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      this.fetchData((page, pageSize) => {
+      this.fetchData(() => {
         return problemApi.fetchProblemsStatistic(param).then((res) => {
           this.dataList = res
           const chartData = res
@@ -90,65 +87,7 @@
       })
     },
     refresh(chartData) {
-      const fontSize = 12
-      const option = {
-        legend: {
-          data: ['闂', '鏁存敼'],
-          textStyle: {
-            fontSize: fontSize,
-            color: 'white'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'item'
-        },
-        series: [
-          {
-            name: '闂鍒嗗竷',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '50%'],
-            data: chartData,
-            // data: [
-            //   { value: 24, name: '鍑哄叆鍙o紙閬撹矾锛夋壃灏�' },
-            //   { value: 20, name: '宸ョ▼杞﹁締' },
-            //   { value: 18, name: '閬撹矾鎵皹' },
-            //   { value: 26, name: '璺潰纭寲' },
-            //   { value: 30, name: '娓e湡' }
-            // ].sort(function (a, b) {
-            //   return a.value - b.value
-            // }),
-            roseType: 'radius',
-            label: {
-              color: 'rgba(255, 255, 255, 0.8)'
-            },
-            labelLine: {
-              lineStyle: {
-                color: 'rgba(255, 255, 255, 0.3)'
-              },
-              smooth: 0.2,
-              length: 10,
-              length2: 20
-            },
-            itemStyle: {
-              color: '#c23531',
-              shadowBlur: 200,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            },
-            animationType: 'scale',
-            animationEasing: 'elasticOut',
-            animationDelay: function (idx) {
-              return Math.random() * 200
-            }
-          }
-        ]
-      }
+      const option = pieChartOption('闂鍒嗗竷', chartData)
       this.echart.setOption(option)
     }
   },
diff --git a/src/views/main/MonitorView.vue b/src/views/main/MonitorView.vue
index 6591259..0df6985 100644
--- a/src/views/main/MonitorView.vue
+++ b/src/views/main/MonitorView.vue
@@ -5,7 +5,7 @@
         <ManagementView></ManagementView>
       </el-scrollbar>
     </el-col>
-    <el-col :span="10">
+    <el-col :span="17">
       <el-scrollbar class="page-left-top">
         <VisualizationView></VisualizationView>
       </el-scrollbar>
@@ -13,25 +13,38 @@
         <InspectionView></InspectionView>
       </el-scrollbar>
     </el-col>
-    <el-col :span="7" class="page-right">
+    <!-- <el-col :span="7" class="page-right">
       <el-scrollbar height="var(--fy-body-height)">
         <StatisticView></StatisticView>
       </el-scrollbar>
-    </el-col>
+    </el-col> -->
   </el-row>
 </template>
 
 <script setup>
-import { provide, ref } from 'vue'
+import { provide, ref, unref } from 'vue'
 import InspectionView from '@/views/inspection/InspectionView.vue'
 import ManagementView from '@/views/management/ManagementView.vue'
 import StatisticView from '@/views/management/StatisticView.vue'
 import VisualizationView from '@/views/visualization/VisualizationView.vue'
 import { useAreaStore } from '@/stores/area.js'
+import { useSubtaskStore } from '@/stores/subtask.js'
+import { useMapStore } from '@/stores/map.js'
+import taskApi from '@/api/fysp/taskApi.js'
+import marks from '@/utils/map/marks.js'
+import mapUtil from '@/utils/map/util.js'
+import scene_1 from '@/assets/icon/scene_1.png'
 
+provide('mapHeight', 'calc(var(--fy-body-height) / 4 * 3)')
+provide('excludeMapHeight', 'calc(var(--fy-body-height) / 4 * 1)')
 const windowHeight = ref(window.innerHeight)
+
 const areaStore = useAreaStore()
-areaStore.setTimeOneDay()
+const subtaskStore = useSubtaskStore()
+const mapStore = useMapStore()
+
+// 鍒濆鍖栨煡璇㈣寖鍥�
+areaStore.setTimeOneMonth()
 areaStore.setLocation({
   pCode: '31',
   pName: '涓婃捣甯�',
@@ -42,15 +55,18 @@
 })
 areaStore.setSceneType('1')
 
-// const headerHeight = computed(()=>{
-//   return
-// })
-// fetch('../../assets/styles/layout.scss').then((res) => {
-//   console.log(res.text())
-// })
-
-provide('mapHeight', 'calc(var(--fy-body-height) / 4 * 3)')
-provide('excludeMapHeight', 'calc(var(--fy-body-height) / 4 * 1)')
+// 鑾峰彇鏈湀鐨勬墍鏈夊贰鏌ョ粺璁′俊鎭�
+subtaskStore.subtaskLoading = true
+taskApi.fetchSubtaskSummaryByArea(areaStore.area).then((res) => {
+  // 瀛樺偍涓哄叏灞�鏁版嵁
+  subtaskStore.setSummary(res.data)
+  subtaskStore.subtaskLoading = false
+  // 缁樺埗鍦板浘鏍囪
+  marks.createLabelMarks(scene_1, unref(res.data), (v) => {
+    mapStore.focusMarker = v
+  })
+  mapUtil.setFitView()
+})
 </script>
 
 <style scoped>
diff --git a/src/views/visualization/SupervisionVisual.vue b/src/views/visualization/SupervisionVisual.vue
index 795a7da..6d593c6 100644
--- a/src/views/visualization/SupervisionVisual.vue
+++ b/src/views/visualization/SupervisionVisual.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { inject } from 'vue'
+import { inject, unref } from 'vue'
 import { useAreaStore } from '@/stores/area.js'
 import { mapStores } from 'pinia'
 
@@ -86,7 +86,7 @@
       })
     },
     newLabelMasks(data) {
-      marks.createLabelMarks(scene_1, data)
+      marks.createLabelMarks(scene_1, unref(data))
     }
   },
   mounted() {

--
Gitblit v1.9.3