2024.7.16

riku

2024-07-16 d00a9f035aec50c37c8e0a1363a1968672fb875f

2024.7.16

 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>

 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) {

 src/stores/counter.js

ÎļþÒÑɾ³ý

 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 }
})

 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 }

 src/utils/echart/chart-option.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,79 @@
const fontSize = 12

// æ˜¾ç¤ºå‰count个数据标签
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 }

 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
  })


 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);


 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)
  }
}

 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>

 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() {

 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>

 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
      }
    })
    // æ­£åºæŽ’列
    .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>

 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: '出入口（道路）扬尘' },
            //   { value: 20, name: '工程车辆' },
            //   { value: 18, name: '道路扬尘' },
            //   { value: 26, name: '路面硬化' },
            //   { value: 30, name: '渣土' }
            // ].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)
    }
  },

 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>

 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() {