From 04e9d32ac49bf5a38adf3cd7dab6bff6e346eefd Mon Sep 17 00:00:00 2001 From: Riku <risaku@163.com> Date: 星期一, 08 七月 2024 22:53:51 +0800 Subject: [PATCH] 问题整改跟踪和工作流模块 --- package-lock.json | 59 +++++++++ src/views/inspection/InspectionView.vue | 4 src/api/index.js | 3 src/views/inspection/problem/ProblemTrack.vue | 11 + package.json | 1 src/views/inspection/problem/component/ProblemType.vue | 86 ++++++++++++++ src/components.d.ts | 5 src/views/inspection/WorkStream.vue | 69 +++++++++++ src/views/inspection/problem/component/ProblemChangeChart.vue | 81 +++++++++++++ 9 files changed, 311 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cf619c..cce69b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@vueuse/core": "^10.10.0", "axios": "^1.7.2", "dayjs": "^1.11.11", + "echarts": "^5.5.1", "element-plus": "^2.7.4", "pinia": "^2.1.7", "unplugin-vue-components": "^0.27.0", @@ -1746,6 +1747,20 @@ "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true + }, + "node_modules/echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.6.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" }, "node_modules/editorconfig": { "version": "1.0.4", @@ -4677,6 +4692,19 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } }, "dependencies": { @@ -5820,6 +5848,22 @@ "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true + }, + "echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.6.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } }, "editorconfig": { "version": "1.0.4", @@ -7810,6 +7854,21 @@ "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } } } } diff --git a/package.json b/package.json index f9d0366..6e7fad2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@vueuse/core": "^10.10.0", "axios": "^1.7.2", "dayjs": "^1.11.11", + "echarts": "^5.5.1", "element-plus": "^2.7.4", "pinia": "^2.1.7", "unplugin-vue-components": "^0.27.0", diff --git a/src/api/index.js b/src/api/index.js index 01609aa..9eb3004 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -11,7 +11,8 @@ let ip2_file = 'https://fyami.com.cn/' if (debug) { - ip1 = 'http://192.168.0.138:8082/' + // ip1 = 'http://192.168.0.138:8082/' + ip1 = 'http://localhost:8080/' // ip1_file = 'http://47.100.191.150:9005/'; // ip2 = 'http://192.168.0.138:8080/'; // ip2_file = 'https://fyami.com.cn/'; diff --git a/src/components.d.ts b/src/components.d.ts index c1a6a40..e5f1b96 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -8,22 +8,18 @@ declare module 'vue' { export interface GlobalComponents { BaseMap: typeof import('./components/map/BaseMap.vue')['default'] - copy: typeof import('./components/search/OptionLocation copy.vue')['default'] CoreHeader: typeof import('./components/core/CoreHeader.vue')['default'] - ElButton: typeof import('element-plus/es')['ElButton'] ElCalendar: typeof import('element-plus/es')['ElCalendar'] ElCard: typeof import('element-plus/es')['ElCard'] ElCascader: typeof import('element-plus/es')['ElCascader'] ElCol: typeof import('element-plus/es')['ElCol'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] - ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElLink: typeof import('element-plus/es')['ElLink'] ElOption: typeof import('element-plus/es')['ElOption'] ElProgress: typeof import('element-plus/es')['ElProgress'] ElRow: typeof import('element-plus/es')['ElRow'] - ElScorllbar: typeof import('element-plus/es')['ElScorllbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSegmented: typeof import('element-plus/es')['ElSegmented'] ElSelect: typeof import('element-plus/es')['ElSelect'] @@ -34,7 +30,6 @@ ElText: typeof import('element-plus/es')['ElText'] ElTimeline: typeof import('element-plus/es')['ElTimeline'] ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem'] - FYOptionTime: typeof import('./components/search/FYOptionTime.vue')['default'] OptionLocation: typeof import('./components/search/OptionLocation.vue')['default'] OptionSceneType: typeof import('./components/search/OptionSceneType.vue')['default'] OptionTime: typeof import('./components/search/OptionTime.vue')['default'] diff --git a/src/views/inspection/InspectionView.vue b/src/views/inspection/InspectionView.vue index a42ca35..bc8752d 100644 --- a/src/views/inspection/InspectionView.vue +++ b/src/views/inspection/InspectionView.vue @@ -1,7 +1,7 @@ <template> <div class="wrapper"> <div>鐜板満宸℃煡</div> - <TaskTrack></TaskTrack> + <WorkStream></WorkStream> </div> </template> @@ -10,6 +10,8 @@ * 鐜板満宸℃煡瀹炴椂璺熻釜 */ import TaskTrack from '@/views/inspection/TaskTrack.vue' +import WorkStream from '@/views/inspection/WorkStream.vue' + </script> <style scoped> diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue new file mode 100644 index 0000000..0fbe9be --- /dev/null +++ b/src/views/inspection/WorkStream.vue @@ -0,0 +1,69 @@ +<template> + <div class="border-r-small m-h-2 p-h-4"> + <el-scrollbar ref="scrollbarRef" height="calc(var(--fy-body-height) / 3 * 1 - 30px)"> + <div ref="scrollContentRef"> + <div v-for="item in streams" :key="item.index"> + <el-text type="primary">[{{ item.time }}]: </el-text> + <el-text>鐢ㄦ埛</el-text> + <el-text type="warning">{{ item.user }}</el-text> + <el-text>鍦�</el-text> + <el-text type="success">{{ item.obj }}</el-text> + <el-text>{{ item.event }}</el-text> + </div> + </div> + </el-scrollbar> + </div> +</template> +<script setup> +import { reactive, ref, onMounted } from 'vue' +import dayjs from 'dayjs' + +const streams = reactive([]) +const scrollContentRef = ref() +const scrollbarRef = ref() + +const users = ['pcheck', 'zzq', 'xzq'] +const events = [ + '鏂板涓�涓棶棰�', + '鏂板涓�椤圭幇鍦烘暣鏀�', + '瀹℃牳浜嗕竴涓棶棰�', + '瀹℃牳浜嗕竴涓暣鏀�', + '寮�濮嬪贰鏌�', + '缁撴潫宸℃煡' +] +const objs = [ + '澶у畞鍥介檯瀛︽牎(灏忓閮�)鏂板缓宸ョ▼', + '鏂板缓472琛楀潑鍏叡缁垮湴鍜屽湴涓嬬┖闂村紑鍙戦」鐩�', + '榛勬郸姹熷欢浼告WS3鍗曞厓xH130E琛楀潑030406070911鍦板潡', + '寰愭眹鍖洪緳鍗庤閬�188N-F-04鍦板潡锛堟々鍩哄伐绋嬶級', + '缃戞槗涓婃捣瑗垮哺鐮斿彂涓績椤圭洰', + '寰愭眹鍖洪粍娴︽睙鍗楀欢浼告WS3鍗曞厓xh130D琛楀潑03銆�04銆�06銆�08銆�09銆�11鍜�12鍦板潡椤圭洰妗╁熀宸ョ▼', + '澶繚瀹跺洯路涓婃捣闈欏畨鍥介檯搴峰吇绀惧尯椤圭洰瑁呬慨宸ョ▼', + '褰郸瑗跨郴缁熼洦璋冭搫姹犲伐绋�', + '寰愭眹鍖洪暱妗ヨ閬�395琛楀潑xh311B-07B鍦板潡鏂板缓骞煎効鍥�', + '褰竴浣忓畢灏忓尯鏃т綇鎴挎媶闄ら噸寤哄伐绋�', + '闃块噷宸村反涓婃捣寰愭眹椤圭洰浜屾湡' +] + +function scrollToBottom() { + const h1 = scrollContentRef.value.clientHeight + 100 + setTimeout(() => { + scrollbarRef.value.setScrollTop(h1) + }, 100) +} + +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) +}) +</script> diff --git a/src/views/inspection/problem/ProblemTrack.vue b/src/views/inspection/problem/ProblemTrack.vue index 4ccefe6..f92b5ca 100644 --- a/src/views/inspection/problem/ProblemTrack.vue +++ b/src/views/inspection/problem/ProblemTrack.vue @@ -5,6 +5,12 @@ <ProblemSummary :data="subtaskList"></ProblemSummary> <ProblemTable :data="subtaskList"></ProblemTable> </div> + <div> + <ProblemChangeChart></ProblemChangeChart> + </div> + <div> + <ProblemType></ProblemType> + </div> </div> </template> @@ -14,10 +20,13 @@ import ProblemTable from './component/ProblemTable.vue' import ProblemSummary from './component/ProblemSummary.vue' +import ProblemChangeChart from './component/ProblemChangeChart.vue' +import ProblemType from './component/ProblemType.vue' + import taskApi from '@/api/fysp/taskApi.js' export default { - components: { ProblemSummary, ProblemTable }, + components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType }, data() { return { subtaskList: [] diff --git a/src/views/inspection/problem/component/ProblemChangeChart.vue b/src/views/inspection/problem/component/ProblemChangeChart.vue new file mode 100644 index 0000000..a033240 --- /dev/null +++ b/src/views/inspection/problem/component/ProblemChangeChart.vue @@ -0,0 +1,81 @@ +<template> + <el-row justify="space-between"> + <div>鍒嗘湡瓒嬪娍</div> + <OptionTime v-model="time"></OptionTime> + </el-row> + <div ref="echart" class="line-chart"></div> +</template> +<script> +import * as echarts from 'echarts' + +export default { + 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鍙�'], + axisLabel: { + textStyle: { + fontSize: fontSize + }, + color: '#ffffff', + textBorderColor: '#fff' + } + }, + yAxis: { + type: 'value', + axisLabel: { + textStyle: { + fontSize: fontSize, + color: 'white' + } + } + }, + series: [ + { + name: '闂', + type: 'bar', + data: [67, 45, 90, 67, 45, 90] + }, + { + name: '鏁存敼', + type: 'bar', + data: [67, 45, 90, 67, 40, 81] + } + // { + // name: '鏁存敼鐜�', + // type: 'bar', + // data: [820, 832, 901, 934, 1290, 1330, 1320] + // } + ] + } + this.echart.setOption(option) + } + }, + mounted() { + this.echart = echarts.init(this.$refs.echart) + this.refresh() + } +} +</script> +<style scoped> +.line-chart { + /* width: 200px; */ + height: 200px; +} +</style> diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue new file mode 100644 index 0000000..fe6d2d9 --- /dev/null +++ b/src/views/inspection/problem/component/ProblemType.vue @@ -0,0 +1,86 @@ +<template> + <el-row justify="space-between"> + <div>闂鍒嗗竷</div> + <OptionTime v-model="time"></OptionTime> + </el-row> + <div ref="echart" class="line-chart"></div> +</template> +<script> +import * as echarts from 'echarts' + +export default { + methods: { + refresh() { + 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: [ + { 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.3)' + }, + 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 + } + } + ] + } + this.echart.setOption(option) + } + }, + mounted() { + this.echart = echarts.init(this.$refs.echart) + this.refresh() + } +} +</script> +<style scoped> +.line-chart { + /* width: 200px; */ + height: 200px; +} +</style> -- Gitblit v1.9.3