| | |
|---|
| | | <!doctype html> |
|---|
| | | <html lang="en"> |
|---|
| | | <html lang="en" class="dark"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8" /> |
|---|
| | | <link rel="icon" href="/favicon.ico" /> |
|---|
| | |
|---|
| | | /** |
|---|
| | | * è·ååä»»å¡ç»è®¡ä¿¡æ¯ |
|---|
| | | */ |
|---|
| | | fetchSubtaskSummaryArea(area) { |
|---|
| | | fetchTaskProgress(area) { |
|---|
| | | return $fysp.post('subtask/summary/area', area).then((res) => res.data) |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .then((res) => res.data) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åå·¡æ¥ä»»å¡é®é¢ç»è®¡ä¿¡æ¯ |
|---|
| | | * @param {Object} area |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | fetchSubtaskSummaryByArea(area) { |
|---|
| | | return $fysp.post('subtask/summary/area/problem', area).then((res) => res.data) |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | // ) |
|---|
| | | // ) |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | @forward 'element-plus/theme-chalk/src/dark/var.scss' with ( |
|---|
| | | $bg-color: ( |
|---|
| | | 'page': #ffffffa9, |
|---|
| | | '': #122b54a9, |
|---|
| | | 'overlay': #122b54a9 |
|---|
| | | ) |
|---|
| | | ); |
|---|
| | |
|---|
| | | 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'] |
|---|
| | | ElStatistic: typeof import('element-plus/es')['ElStatistic'] |
|---|
| | | ElTable: typeof import('element-plus/es')['ElTable'] |
|---|
| | |
|---|
| | | import { createApp } from 'vue' |
|---|
| | | import { createPinia } from 'pinia' |
|---|
| | | import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|---|
| | | import 'element-plus/theme-chalk/src/dark/css-vars.scss' |
|---|
| | | |
|---|
| | | import App from './App.vue' |
|---|
| | | import router from './router' |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // åºåçéçé»è¾ç®¡ç |
|---|
| | | |
|---|
| | | import { defineStore } from 'pinia' |
|---|
| | | import dayjs from 'dayjs' |
|---|
| | | |
|---|
| | | export const useAreaStore = defineStore('area', { |
|---|
| | | state: () => { |
|---|
| | | return { |
|---|
| | | area: { |
|---|
| | | provincecode: undefined, |
|---|
| | | provincename: undefined, |
|---|
| | | citycode: undefined, |
|---|
| | | cityname: undefined, |
|---|
| | | districtcode: undefined, |
|---|
| | | districtname: undefined, |
|---|
| | | starttime: undefined, |
|---|
| | | endtime: undefined, |
|---|
| | | scensetypeid: undefined |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | actions: { |
|---|
| | | // 设置è¡æ¿åºåä¿¡æ¯ |
|---|
| | | setLocation(location) { |
|---|
| | | this.area.provincecode = location.pCode |
|---|
| | | this.area.provincename = location.pName |
|---|
| | | this.area.citycode = location.cCode |
|---|
| | | this.area.cityname = location.cName |
|---|
| | | this.area.districtcode = location.dCode |
|---|
| | | this.area.districtname = location.dName |
|---|
| | | }, |
|---|
| | | // 设置æ¶é´ä¸ºç»å®æ¶é´å¯¹åºå½æ¥ç头尾 |
|---|
| | | 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') |
|---|
| | | }, |
|---|
| | | // 设置åºæ¯ç±»å |
|---|
| | | setSceneType(t) { |
|---|
| | | this.area.scensetypeid = t |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * æåcssä¸å¸¦æcalcå½æ°ç表达å¼çåæ°é¨å |
|---|
| | | * @param {String} str cssä¸å¸¦æcalcå½æ°çè¡¨è¾¾å¼ |
|---|
| | | */ |
|---|
| | | function unCalc(str) { |
|---|
| | | if (str.startsWith('calc(')) { |
|---|
| | | let _str = str.replace('calc(', '') |
|---|
| | | _str = _str.replace(/\)/g, (match, offset, string) => { |
|---|
| | | if (offset === string.lastIndexOf(match)) { |
|---|
| | | return '' |
|---|
| | | } else { |
|---|
| | | return match |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return _str |
|---|
| | | } else { |
|---|
| | | return str |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { unCalc } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | //对äºå¯¹è±¡çå¼ç¨æ¯å¼±å¼ç¨ï¼è¿æå³çå¨æ²¡æå
¶ä»å¼ç¨åå¨æ¶åå¾åæ¶è½æ£ç¡®è¿è¡ãå¨åæ¶å¼ç¨æ¶ï¼ä¸éè¦æå¨å é¤å
ç´ ï¼å 为å®ä»¬ä¼èªå¨è¢«åå¾åæ¶ã |
|---|
| | | const map = new WeakMap() |
|---|
| | | |
|---|
| | | // ResizeObserveræ¯ä¸ä¸ªæé å½æ°ï¼ç¨äºçå¬å
ç´ çååï¼å½å
ç´ ç尺寸åçååæ¶ï¼ä¼è§¦ååè°å½æ°ã |
|---|
| | | const divs = new ResizeObserver((entries) => { |
|---|
| | | // entriesæ¯ä¸ä¸ªæ°ç»ï¼å
å«ææ被è§å¯çå
ç´ çä¿¡æ¯ |
|---|
| | | for (const entry of entries) { |
|---|
| | | // å°å
ç´ ååè°å½æ°ååº |
|---|
| | | const handler = map.get(entry.target) |
|---|
| | | // å¦æåè°å½æ°åå¨ï¼åè°ç¨åè°å½æ° |
|---|
| | | if (handler) { |
|---|
| | | handler({ |
|---|
| | | width: Math.ceil(entry.borderBoxSize[0].inlineSize), //å
ç´ ç宽度 |
|---|
| | | height: Math.ceil(entry.borderBoxSize[0].blockSize) //å
ç´ çé«åº¦ |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | //è·å使ç¨æ令çdivç宽é«.e.widthåe.height |
|---|
| | | export const vResize = { |
|---|
| | | mounted(el, binding) { |
|---|
| | | // å°å
ç´ ååè°å½æ°åå
¥mapä¸ |
|---|
| | | map.set(el, binding) |
|---|
| | | // å¼å§è§å¯å
ç´ |
|---|
| | | divs.observe(el) |
|---|
| | | }, |
|---|
| | | unmounted(el) { |
|---|
| | | // åæ¢è§å¯å
ç´ |
|---|
| | | divs.unobserve(el) |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="border-r-small" style="height: 200px"> |
|---|
| | | <div class="border-r-small"> |
|---|
| | | <div class="font-large">èåæ§æ³</div> |
|---|
| | | <el-scrollbar height="300px"> |
|---|
| | | <el-calendar v-model="value" /> |
|---|
| | | </el-scrollbar> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tasks: [] |
|---|
| | | value: new Date() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="wrapper"> |
|---|
| | | <div>å¤æ ¸å·¡æ¥</div> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | v-loading="loading" |
|---|
| | | table-layout="fixed" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | :height="tableHeight" |
|---|
| | | size="small" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | fixed="left" |
|---|
| | | prop="name" |
|---|
| | | :show-overflow-tooltip="true" |
|---|
| | | label="å称" |
|---|
| | | width="200" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="planTime" :show-overflow-tooltip="true" label="æ¶é´"> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- <el-table-column prop="score" :show-overflow-tooltip="true" label="è¯å" width="60"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="risk" :show-overflow-tooltip="true" label="é£é©" width="60"> |
|---|
| | | </el-table-column> --> |
|---|
| | | <el-table-column prop="recheck" :show-overflow-tooltip="true" label="å¤æ ¸" width="60"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * ç°åºå·¡æ¥å®æ¶è·è¸ª |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableData: [], |
|---|
| | | tableHeight: 'calc(var(--fy-body-height) / 3 - 27px)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | let i = 0 |
|---|
| | | while (i < 20) { |
|---|
| | | this.tableData.push({ |
|---|
| | | guid: 'SMuheEkjswioSn7A', |
|---|
| | | name: 'ä¸ç§çææ°å港项ç®å·¡æ¥ä¸ç§çææ°å港项ç®å·¡æ¥', |
|---|
| | | district: 'éå±±åº', |
|---|
| | | planTime: '2024-06-04', |
|---|
| | | startTime: '2024-06-04 13:31:26', |
|---|
| | | endTime: '2024-06-04 13:33:37', |
|---|
| | | userName: 'æ±æ£å¼º', |
|---|
| | | status: 'å·²ç»æ', |
|---|
| | | total: 4, |
|---|
| | | checked: 2, |
|---|
| | | score: 90, |
|---|
| | | risk: 'é«', |
|---|
| | | recheck: 1 |
|---|
| | | }) |
|---|
| | | i++ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .wrapper { |
|---|
| | | /* height: calc(var(--fy-body-height) / 3); */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="border-r-small" style="height: 200px"> |
|---|
| | | <div class="border-r-small"> |
|---|
| | | <div class="font-large">åºæ¥èªå·¡æ¥</div> |
|---|
| | | <el-text>æ¬æå
±åå¸4次èªå·¡æ¥ï¼å·²å®æ0次ï¼æªå®æ4次</el-text> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | v-loading="loading" |
|---|
| | | table-layout="fixed" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | :height="tableHeight" |
|---|
| | | size="small" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | fixed="left" |
|---|
| | | prop="name" |
|---|
| | | :show-overflow-tooltip="true" |
|---|
| | | label="ä¼ä¸" |
|---|
| | | width="200" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="planTime" :show-overflow-tooltip="true" label="åå¸æ¶é´"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="complete" :show-overflow-tooltip="true" label="å®ææ
åµ"> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- <el-table-column prop="recheck" :show-overflow-tooltip="true" label="å¤æ ¸" width="60"> |
|---|
| | | </el-table-column> --> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tasks: [] |
|---|
| | | tableData: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | methods: {}, |
|---|
| | | mounted() {} |
|---|
| | | mounted() { |
|---|
| | | let i = 0 |
|---|
| | | while (i < 4) { |
|---|
| | | this.tableData.push({ |
|---|
| | | guid: 'SMuheEkjswioSn7A', |
|---|
| | | name: 'ä¸ç§çææ°å港项ç®', |
|---|
| | | district: 'éå±±åº', |
|---|
| | | planTime: '2024-06-04', |
|---|
| | | startTime: '2024-06-04 13:31:26', |
|---|
| | | endTime: '2024-06-04 13:33:37', |
|---|
| | | complete: '0/6' |
|---|
| | | }) |
|---|
| | | i++ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="border-r-small"> |
|---|
| | | <div class="font-large">é®é¢æ´æ¹è·è¸ª</div> |
|---|
| | | <div> |
|---|
| | | <ProblemSummary :data="subtaskList"></ProblemSummary> |
|---|
| | | <ProblemTable :data="subtaskList"></ProblemTable> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { useAreaStore } from '@/stores/area.js' |
|---|
| | | import { mapStores } from 'pinia' |
|---|
| | | |
|---|
| | | import ProblemTable from './component/ProblemTable.vue' |
|---|
| | | import ProblemSummary from './component/ProblemSummary.vue' |
|---|
| | | import taskApi from '@/api/fysp/taskApi.js' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { ProblemSummary, ProblemTable }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | subtaskList: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | computed: { |
|---|
| | | ...mapStores(useAreaStore) |
|---|
| | | // area() { |
|---|
| | | // return { |
|---|
| | | // provincecode: '31', |
|---|
| | | // provincename: 'ä¸æµ·å¸', |
|---|
| | | // citycode: '3100', |
|---|
| | | // cityname: 'ä¸æµ·å¸', |
|---|
| | | // districtcode: '310116', |
|---|
| | | // districtname: 'éå±±åº', |
|---|
| | | // starttime: '', |
|---|
| | | // endtime: '' |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | fetchSubtask() { |
|---|
| | | taskApi.fetchSubtaskSummaryByArea(this.areaStore.area).then((res) => { |
|---|
| | | this.subtaskList = res.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.fetchSubtask() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .text { |
|---|
| | | background-color: aliceblue; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | é®é¢æ°: {{ summary.proNum }}ï¼æ´æ¹æ°: {{ summary.changeNum }}ï¼æ´æ¹ç: {{ summary.changePer }} |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script setup> |
|---|
| | | import { computed, ref } from 'vue' |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | data: { |
|---|
| | | type: Array |
|---|
| | | }, |
|---|
| | | loading: Boolean |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const summary = computed(() => { |
|---|
| | | let proNum = 0, |
|---|
| | | changeNum = 0, |
|---|
| | | changePer = '/' |
|---|
| | | props.data.forEach((d) => { |
|---|
| | | proNum += d.proNum |
|---|
| | | changeNum += d.changeNum |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (proNum > 0) { |
|---|
| | | changePer = Math.round((changeNum / proNum) * 100) / 100 + '%' |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { proNum, changeNum, changePer } |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-table |
|---|
| | | :data="showTableData" |
|---|
| | | v-loading="loading" |
|---|
| | | table-layout="fixed" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | :height="tableHeight" |
|---|
| | | size="small" |
|---|
| | | > |
|---|
| | | <el-table-column type="index" label="" width="30"> </el-table-column> |
|---|
| | | <el-table-column prop="scene.name" :show-overflow-tooltip="true" label="å称" width="150"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="scene.location" :show-overflow-tooltip="true" label="å°å"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="proNum" :show-overflow-tooltip="true" label="é®é¢" width="41"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="changeNum" :show-overflow-tooltip="true" label="æ´æ¹" width="41"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column :show-overflow-tooltip="true" label="æ´æ¹ç" width="54"> |
|---|
| | | <template #default="{ row }"> |
|---|
| | | {{ calPer(row.proNum, row.changeNum) }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="updateTime" :show-overflow-tooltip="true" label="æ¶é´"> |
|---|
| | | <template #default="{ row }"> |
|---|
| | | {{ $fm.formatH(row.updateTime) }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="btn-more font-small"> |
|---|
| | | <el-link type="primary" @click="showMore = !showMore">æ¥çæ´å¤</el-link> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script setup> |
|---|
| | | import { computed, ref } from 'vue' |
|---|
| | | import dayjs from 'dayjs' |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | data: { |
|---|
| | | type: Array |
|---|
| | | }, |
|---|
| | | loading: Boolean |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const showMore = ref(false) |
|---|
| | | |
|---|
| | | const tableData = computed(() => { |
|---|
| | | const l = props.data.map((value) => { |
|---|
| | | const time = value.subtask.executionendtime |
|---|
| | | ? value.subtask.executionendtime |
|---|
| | | : value.subtask.executionstarttime |
|---|
| | | value.updateTime = time |
|---|
| | | return value |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return l.sort((a, b) => { |
|---|
| | | return dayjs(b.updateTime) - dayjs(a.updateTime) |
|---|
| | | }) |
|---|
| | | // return l |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const showTableData = computed(() => { |
|---|
| | | if (showMore.value) { |
|---|
| | | return tableData.value |
|---|
| | | } else { |
|---|
| | | return tableData.value.slice(0, 3) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 计ç®æ´æ¹ç |
|---|
| | | * @param {Number} p é®é¢æ° |
|---|
| | | * @param {Number} c æ´æ¹æ° |
|---|
| | | */ |
|---|
| | | function calPer(p, c) { |
|---|
| | | if (p == 0) { |
|---|
| | | return '/' |
|---|
| | | } else { |
|---|
| | | return Math.round((c / p) * 100) / 100 + '%' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .btn-more { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="6" class="page-right"> |
|---|
| | | <el-scrollbar height="var(--fy-body-height)"> |
|---|
| | | <ManagementView></ManagementView> |
|---|
| | | </el-scrollbar> |
|---|
| | | <el-col :span="7" class="page-right"> |
|---|
| | | <!-- <el-scrollbar height="var(--fy-body-height)"> --> |
|---|
| | | <ManagementView></ManagementView> |
|---|
| | | <!-- </el-scrollbar> --> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-col :span="10"> |
|---|
| | | <el-scrollbar class="page-left-top"> |
|---|
| | | <VisualizationView></VisualizationView> |
|---|
| | | </el-scrollbar> |
|---|
| | |
|---|
| | | <InspectionView></InspectionView> |
|---|
| | | </el-scrollbar> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6" class="page-right"> |
|---|
| | | <el-col :span="7" class="page-right"> |
|---|
| | | <el-scrollbar height="var(--fy-body-height)"> |
|---|
| | | <ManagementView></ManagementView> |
|---|
| | | <StatisticView></StatisticView> |
|---|
| | | </el-scrollbar> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { provide, ref } 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 { provide } from 'vue' |
|---|
| | | const windowHeight = ref(window.innerHeight) |
|---|
| | | const areaStore = useAreaStore() |
|---|
| | | areaStore.setTimeOneDay() |
|---|
| | | |
|---|
| | | // const headerHeight = computed(()=>{ |
|---|
| | | // return |
|---|
| | | // }) |
|---|
| | | // fetch('../../assets/styles/layout.scss').then((res) => { |
|---|
| | | // console.log(res.text()) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | provide('mapHeight', 'calc(var(--fy-body-height) / 3 * 2)') |
|---|
| | | </script> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="border-r-small"> |
|---|
| | | <div class="font-large">é£é©è¯ä¼°</div> |
|---|
| | | <el-row justify="space-evenly"> |
|---|
| | | <div ref="titleRef" class="font-large">综åé£é©è¯ä¼°</div> |
|---|
| | | <el-row ref="statisticRef" justify="space-evenly"> |
|---|
| | | <el-statistic title="é«é£é©" :value="10"> </el-statistic> |
|---|
| | | <el-statistic title="ä¸é£é©" :value="10"> </el-statistic> |
|---|
| | | <el-statistic title="ä½é£é©" :value="10"> </el-statistic> |
|---|
| | |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="score" :show-overflow-tooltip="true" label="è¯å" width="60"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="score" :show-overflow-tooltip="true" label="é£é©" width="60"> |
|---|
| | | <el-table-column prop="risk" :show-overflow-tooltip="true" label="é£é©" width="60"> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- <el-table-column prop="recheck" :show-overflow-tooltip="true" label="å¤æ ¸" width="60"> |
|---|
| | | </el-table-column> --> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { unCalc } from '@/utils/css-util' |
|---|
| | | /** |
|---|
| | | * 对å®æçä»»å¡è¿è¡è¯ä¼°é£é©ï¼æ¾ç¤ºé«é£é©åºæ¯ï¼æ¾ç¤ºå¤æ ¸çåºæ¯çæ
åµ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | height: { |
|---|
| | | type: String, |
|---|
| | | default: '200' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableData: [] |
|---|
| | | tableData: [], |
|---|
| | | tableHeight: '200' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | height(nV, oV) { |
|---|
| | | if (nV != oV) { |
|---|
| | | this.tableHeight = this.calcTableHeight() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | calcTableHeight() { |
|---|
| | | const h1 = this.$refs.titleRef.offsetHeight |
|---|
| | | const h2 = this.$refs.statisticRef.$el.offsetHeight |
|---|
| | | const h = h1 + h2 |
|---|
| | | const r = `calc(${unCalc(this.height)} - ${h}px)` |
|---|
| | | return r |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.tableHeight = this.calcTableHeight() |
|---|
| | | let i = 0 |
|---|
| | | while (i < 20) { |
|---|
| | | this.tableData.push({ |
|---|
| | |
|---|
| | | status: 'å·²ç»æ', |
|---|
| | | total: 4, |
|---|
| | | checked: 2, |
|---|
| | | score: 90 |
|---|
| | | score: 90, |
|---|
| | | risk: 'é«', |
|---|
| | | recheck: 1 |
|---|
| | | }) |
|---|
| | | i++ |
|---|
| | | } |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <!-- <el-row> ç»è®¡ç®¡ç </el-row> --> |
|---|
| | | <TaskStats></TaskStats> |
|---|
| | | <EvaluateSummary></EvaluateSummary> |
|---|
| | | <TaskSummary></TaskSummary> |
|---|
| | | <ProblemTrack ref="statusRef"></ProblemTrack> |
|---|
| | | <!-- <TaskStats ref="statusRef"></TaskStats> --> |
|---|
| | | <EvaluateSummary :height="height"></EvaluateSummary> |
|---|
| | | <!-- <TaskSummary ref="summaryRef"></TaskSummary> --> |
|---|
| | | <ReInspectionView ref="summaryRef"></ReInspectionView> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | <script> |
|---|
| | | import TaskStats from '@/views/management/TaskStats.vue' |
|---|
| | | import TaskSummary from '@/views/management/TaskSummary.vue' |
|---|
| | | import EvaluateSummary from '@/views/management/EvaluateSummary.vue' |
|---|
| | | import ReInspectionView from '@/views/inspection/ReInspectionView.vue' |
|---|
| | | import ProblemTrack from '@/views/inspection/problem/ProblemTrack.vue' |
|---|
| | | import { vResize } from '@/utils/resize-observer' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { TaskStats, TaskSummary, EvaluateSummary, ReInspectionView, ProblemTrack }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // height: '500px', |
|---|
| | | statusHeight: 200, |
|---|
| | | summaryHeight: 200 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | height() { |
|---|
| | | const h = this.statusHeight + this.summaryHeight + 5 |
|---|
| | | return `calc(var(--fy-body-height) - ${h}px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | calcHeight() { |
|---|
| | | const h1 = this.$refs.statusRef.$el.offsetHeight |
|---|
| | | const h2 = this.$refs.summaryRef.$el.offsetHeight |
|---|
| | | const h = h1 + h2 |
|---|
| | | return `calc(var(--fy-body-height) - ${h}px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | vResize.mounted(this.$refs.statusRef.$el, ({ height }) => { |
|---|
| | | this.statusHeight = height |
|---|
| | | }) |
|---|
| | | vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => { |
|---|
| | | this.summaryHeight = height |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | unmounted() { |
|---|
| | | vResize.unmounted(this.$refs.statusRef.$el) |
|---|
| | | vResize.unmounted(this.$refs.summaryRef.$el) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <el-row> ç»è®¡ç®¡ç </el-row> --> |
|---|
| | | <SelfInspection></SelfInspection> |
|---|
| | | <JointEnforcement></JointEnforcement> |
|---|
| | | <TaskSummary></TaskSummary> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import SelfInspection from '@/views/inspection/SelfInspection.vue' |
|---|
| | | import JointEnforcement from '@/views/inspection/JointEnforcement.vue' |
|---|
| | | import TaskSummary from '@/views/management/TaskSummary.vue' |
|---|
| | | import { vResize } from '@/utils/resize-observer' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { SelfInspection, JointEnforcement, TaskSummary }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // height: '500px', |
|---|
| | | statusHeight: 200, |
|---|
| | | summaryHeight: 200 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | height() { |
|---|
| | | const h = this.statusHeight + this.summaryHeight |
|---|
| | | return `calc(var(--fy-body-height) - ${h}px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | calcHeight() { |
|---|
| | | const h1 = this.$refs.statusRef.$el.offsetHeight |
|---|
| | | const h2 = this.$refs.summaryRef.$el.offsetHeight |
|---|
| | | const h = h1 + h2 |
|---|
| | | return `calc(var(--fy-body-height) - ${h}px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // vResize.mounted(this.$refs.statusRef.$el, ({ height }) => { |
|---|
| | | // this.statusHeight = height |
|---|
| | | // }) |
|---|
| | | // vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => { |
|---|
| | | // this.summaryHeight = height |
|---|
| | | // }) |
|---|
| | | }, |
|---|
| | | unmounted() { |
|---|
| | | // vResize.unmounted(this.$refs.statusRef.$el) |
|---|
| | | // vResize.unmounted(this.$refs.summaryRef.$el) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped></style> |
|---|
| | |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | components: { SelfInspection, JointEnforcement }, |
|---|
| | | props: { |
|---|
| | | height: String |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tasks: [] |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <el-row> å·¡æ¥æ±æ» </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="ä»æ¥æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="å¨åº¦æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="æ度æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <TaskSummaryItem title="å£åº¦æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <TaskSummaryItem title="年度æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <div class="border-r-small"> |
|---|
| | | <el-row> å·¡æ¥æ±æ» </el-row> |
|---|
| | | <el-segmented v-model="value" :options="options" /> |
|---|
| | | <div><el-text tag="i"> è¯ä¼° </el-text></div> |
|---|
| | | <el-row justify="space-evenly"> |
|---|
| | | <div> |
|---|
| | | <el-statistic title="æ»è®¡" :value="10"> </el-statistic> |
|---|
| | | <div class="statistic-footer"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span>对æ¯æ¨æ¥</span> |
|---|
| | | <span class="green"> |
|---|
| | | 24% |
|---|
| | | <el-icon> |
|---|
| | | <CaretTop /> |
|---|
| | | </el-icon> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-statistic title="é«é£é©" :value="2" :value-style="styleRed"> </el-statistic> |
|---|
| | | <el-statistic title="ä¸é£é©" :value="6" :value-style="styleYellow"> </el-statistic> |
|---|
| | | <el-statistic title="ä½é£é©" :value="2" :value-style="styleGreen"> </el-statistic> |
|---|
| | | </el-row> |
|---|
| | | <div><el-text tag="i"> å¤æ ¸ </el-text></div> |
|---|
| | | <el-row justify="space-evenly"> |
|---|
| | | <div> |
|---|
| | | <el-statistic title="éå¤æ ¸" :value="2"> </el-statistic> |
|---|
| | | <div class="statistic-footer"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span>对æ¯æ¨æ¥</span> |
|---|
| | | <span class="green"> |
|---|
| | | 24% |
|---|
| | | <el-icon> |
|---|
| | | <CaretTop /> |
|---|
| | | </el-icon> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-statistic title="å·²å®æ" :value="2" :value-style="styleGreen"> </el-statistic> |
|---|
| | | </el-row> |
|---|
| | | <div><el-text tag="i"> é®é¢ </el-text></div> |
|---|
| | | <el-row justify="space-evenly"> |
|---|
| | | <div> |
|---|
| | | <el-statistic title="æ»è®¡" :value="10"> </el-statistic> |
|---|
| | | <div class="statistic-footer"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span>对æ¯æ¨æ¥</span> |
|---|
| | | <span class="green"> |
|---|
| | | 24% |
|---|
| | | <el-icon> |
|---|
| | | <CaretTop /> |
|---|
| | | </el-icon> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-statistic title="å¾
å®¡æ ¸" :value="2" :value-style="styleRed"> </el-statistic> |
|---|
| | | <el-statistic title="å·²å®¡æ ¸" :value="6" :value-style="styleYellow"> </el-statistic> |
|---|
| | | <el-statistic title="å¾
æ´æ¹" :value="2" :value-style="styleGreen"> </el-statistic> |
|---|
| | | <el-statistic title="å·²æ´æ¹" :value="2" :value-style="styleGreen"> </el-statistic> |
|---|
| | | <el-statistic title="å¾
确认" :value="2" :value-style="styleGreen"> </el-statistic> |
|---|
| | | </el-row> |
|---|
| | | <!-- <el-row> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="ä»æ¥æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="å¨åº¦æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <TaskSummaryItem title="æ度æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <TaskSummaryItem title="å£åº¦æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <TaskSummaryItem title="年度æ±æ»"></TaskSummaryItem> |
|---|
| | | </el-col> |
|---|
| | | </el-row> --> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup></script> |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | height: String |
|---|
| | | }, |
|---|
| | | emits: ['update:height'], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | value: 'ä»æ¥æ±æ»', |
|---|
| | | options: ['ä»æ¥æ±æ»', 'å¨åº¦æ±æ»', 'æ度æ±æ»', 'å£åº¦æ±æ»', '年度æ±æ»'], |
|---|
| | | styleRed: 'color:var(--el-color-danger);', |
|---|
| | | styleYellow: 'color:var(--el-color-warning);', |
|---|
| | | styleGreen: 'color:var(--el-color-success);' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() {} |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped></style> |
|---|
| | | <style scoped> |
|---|
| | | .el-segmented { |
|---|
| | | --el-segmented-item-selected-color: var(--el-text-color-primary); |
|---|
| | | --el-segmented-item-selected-bg-color: #ffd100; |
|---|
| | | --el-border-radius-base: 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-statistic { |
|---|
| | | --el-statistic-content-font-size: var(--el-font-size-base); |
|---|
| | | /* background-color: aliceblue; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .statistic-footer { |
|---|
| | | background-color: #ffd100; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | font-size: 12px; |
|---|
| | | color: var(--el-text-color-regular); |
|---|
| | | /* margin-top: 16px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .statistic-footer .footer-item { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .statistic-footer .footer-item span:last-child { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | margin-left: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .green { |
|---|
| | | color: var(--el-color-success); |
|---|
| | | } |
|---|
| | | .red { |
|---|
| | | color: var(--el-color-error); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { inject } from 'vue' |
|---|
| | | import { useAreaStore } from '@/stores/area.js' |
|---|
| | | import { mapStores } from 'pinia' |
|---|
| | | |
|---|
| | | import taskApi from '@/api/fysp/taskApi.js' |
|---|
| | | import marks from '@/utils/map/marks.js' |
|---|
| | | import scene_1 from '@/assets/icon/scene_1.png' |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | area() { |
|---|
| | | return { |
|---|
| | | provincecode: this.locations.pCode, |
|---|
| | | provincename: this.locations.pName, |
|---|
| | | citycode: this.locations.cCode, |
|---|
| | | cityname: this.locations.cName, |
|---|
| | | districtcode: this.locations.dCode, |
|---|
| | | districtname: this.locations.dName, |
|---|
| | | starttime: this.$fm.formatYMDH(this.time), |
|---|
| | | scensetypeid: this.sceneType.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ...mapStores(useAreaStore) |
|---|
| | | // area() { |
|---|
| | | // return { |
|---|
| | | // provincecode: this.locations.pCode, |
|---|
| | | // provincename: this.locations.pName, |
|---|
| | | // citycode: this.locations.cCode, |
|---|
| | | // cityname: this.locations.cName, |
|---|
| | | // districtcode: this.locations.dCode, |
|---|
| | | // districtname: this.locations.dName, |
|---|
| | | // starttime: this.$fm.formatYMDH(this.time), |
|---|
| | | // scensetypeid: this.sceneType.value |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ¥è¯¢ |
|---|
| | | fetchSubtaskSummaryArea() { |
|---|
| | | return taskApi.fetchSubtaskSummaryArea(this.area).then((res) => { |
|---|
| | | fetchTaskProgress() { |
|---|
| | | this.areaStore.setLocation(this.locations) |
|---|
| | | this.areaStore.setTimeOneDay(this.time) |
|---|
| | | this.areaStore.setSceneType(this.sceneType.value) |
|---|
| | | |
|---|
| | | return taskApi.fetchTaskProgress(this.areaStore.area).then((res) => { |
|---|
| | | let list = [] |
|---|
| | | res.data.forEach((e) => { |
|---|
| | | list = list.concat(e.subTaskSummary) |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.fetchSubtaskSummaryArea() |
|---|
| | | // this.fetchTaskProgress() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | |
|---|
| | | <SupervisionVisual></SupervisionVisual> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <SubtaskVisual></SubtaskVisual> |
|---|
| | | <!-- <SubtaskVisual></SubtaskVisual> --> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
