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