From 4ef69f1d7bdd01471d207c865a394c618c214452 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 13 三月 2023 09:46:16 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue | 183 +
package-lock.json | 40
src/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue | 215 +
src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 175
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 344 -
src/views/intellectInspect/inspectIndex/components/unusualList.vue | 539 +++
src/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue | 210 +
src/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue | 172 +
src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue | 233 +
src/views/specialWorkSystem/specialIndex/index.vue | 2494 +++++++-------
src/views/specialWorkSystem/specialIndex/components/videoDetail.vue | 85
src/views/riskWarningSys/warningBigScreen/index.vue | 234 +
src/views/intellectInspect/inspectIndex/components/inspectList.vue | 0
src/views/riskWarningSys/warningBigScreen/components/risk.vue | 623 ++-
src/views/riskWarningSys/warningBigScreen/indexs/components/train.vue | 177 +
src/views/intellectInspect/inspectIndex/index.vue | 1234 +++++--
src/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue | 211 +
src/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue | 201 +
src/views/riskWarningSys/warningBigScreen/components/danger.vue | 416 +
src/api/riskWarning/index.ts | 46
src/views/system/user/component/userDialog.vue | 2
src/views/riskWarningSys/warningBigScreen/components/training.vue | 168
src/stores/screenTheme.ts | 6
/dev/null | 1069 ------
src/stores/interface/index.ts | 3
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 391 +
src/api/intellectInspectSystem/inspectIndex/index.ts | 41
src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue | 175 +
src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue | 183 +
29 files changed, 6,246 insertions(+), 3,624 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5149933..1e0dc6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "MIT",
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
- "@kjgl77/datav-vue3": "^1.2.1",
+ "@kjgl77/datav-vue3": "^1.4.1",
"@wangeditor/editor": "^5.1.14",
"axios": "^0.27.2",
"countup.js": "^2.2.0",
@@ -450,12 +450,9 @@
}
},
"node_modules/@jiaminghi/color": {
- "version": "0.1.1",
- "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
- "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
- "dependencies": {
- "@babel/runtime": "^7.5.5"
- }
+ "version": "1.1.3",
+ "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+ "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
},
"node_modules/@jiaminghi/transition": {
"version": "1.1.11",
@@ -466,13 +463,15 @@
}
},
"node_modules/@kjgl77/datav-vue3": {
- "version": "1.2.1",
- "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
- "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
+ "version": "1.4.2",
+ "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.4.2.tgz",
+ "integrity": "sha512-2bwQtvPpRNSmWAUS/e81SLZdOabCdiF3wGkvLjkOa/n4grygNk0f8l7AwpaP0bUlc4ougPgFRIAy/wzkyNocoA==",
"dependencies": {
"@jiaminghi/c-render": "^0.4.3",
"@jiaminghi/charts": "^0.2.18",
- "@vueuse/core": "^9.1.0"
+ "@jiaminghi/color": "^1.1.3",
+ "@vueuse/core": "^9.1.0",
+ "lodash-es": "^4.17.21"
}
},
"node_modules/@kjgl77/datav-vue3/node_modules/@types/web-bluetooth": {
@@ -5089,12 +5088,9 @@
}
},
"@jiaminghi/color": {
- "version": "0.1.1",
- "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
- "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
- "requires": {
- "@babel/runtime": "^7.5.5"
- }
+ "version": "1.1.3",
+ "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+ "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
},
"@jiaminghi/transition": {
"version": "1.1.11",
@@ -5105,13 +5101,15 @@
}
},
"@kjgl77/datav-vue3": {
- "version": "1.2.1",
- "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
- "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
+ "version": "1.4.2",
+ "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.4.2.tgz",
+ "integrity": "sha512-2bwQtvPpRNSmWAUS/e81SLZdOabCdiF3wGkvLjkOa/n4grygNk0f8l7AwpaP0bUlc4ougPgFRIAy/wzkyNocoA==",
"requires": {
"@jiaminghi/c-render": "^0.4.3",
"@jiaminghi/charts": "^0.2.18",
- "@vueuse/core": "^9.1.0"
+ "@jiaminghi/color": "^1.1.3",
+ "@vueuse/core": "^9.1.0",
+ "lodash-es": "^4.17.21"
},
"dependencies": {
"@types/web-bluetooth": {
diff --git a/src/api/intellectInspectSystem/inspectIndex/index.ts b/src/api/intellectInspectSystem/inspectIndex/index.ts
new file mode 100644
index 0000000..e5eee90
--- /dev/null
+++ b/src/api/intellectInspectSystem/inspectIndex/index.ts
@@ -0,0 +1,41 @@
+import request from '/@/utils/request';
+
+export function inspectIndexApi() {
+ return {
+ //
+ getListExcepOrderByPage: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/select/listExcepOrderByPage`,
+ method: 'post',
+ data: data
+ });
+ },
+
+ //
+ falseAlarmStatus: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/update/falseAlarmStatusById`,
+ method: 'post',
+ data: data
+ });
+ },
+
+ //
+ acceptedStatus: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/update/acceptedStatusById`,
+ method: 'post',
+ data: data
+ });
+ },
+
+ //
+ getListImages: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/select/listImagesById`,
+ method: 'post',
+ data: data
+ });
+ },
+ };
+}
diff --git a/src/api/riskWarning/index.ts b/src/api/riskWarning/index.ts
new file mode 100644
index 0000000..1910bb2
--- /dev/null
+++ b/src/api/riskWarning/index.ts
@@ -0,0 +1,46 @@
+import request from '/@/utils/request';
+
+export function riskWarningApi() {
+ return {
+
+ //spi版本分页列表
+ getSpiData: (data:number) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/dep/12month?depId=${data}`,
+ method: 'get',
+ });
+ },
+
+ //获取任意部门事故统计指定月度区间报表
+ getRiskByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/incident/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
+ method: 'get',
+ });
+ },
+
+ //获取任意部门应急演练指定月度区间报表
+ getEmergencyByDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/emergency/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
+ method: 'get',
+ });
+ },
+
+ //获取任意部门的双重预防隐患指定月份区间报表
+ getSelfPreventByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/prevent/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
+ method: 'get',
+ });
+ },
+
+ //获取任意部门的直属子部门的双重预防隐患指定月份区间报表
+ getPreventByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/prevent/subDepartments?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
+ method: 'get',
+ });
+ }
+ };
+}
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 9ace21a..ef1d52c 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -54,7 +54,8 @@
export interface screenThemeState {
screenTheme: {
- isDark: boolean
+ isDark: boolean,
+ depId: number
}
}
diff --git a/src/stores/screenTheme.ts b/src/stores/screenTheme.ts
index 13c3592..70f363d 100644
--- a/src/stores/screenTheme.ts
+++ b/src/stores/screenTheme.ts
@@ -10,12 +10,16 @@
export const useScreenTheme = defineStore('screenTheme', {
state: (): screenThemeState => ({
screenTheme:{
- isDark: true
+ isDark: true,
+ depId: 1
}
}),
actions: {
async setScreenTheme(value: any) {
this.screenTheme.isDark = value;
+ },
+ async setDepId(value: any) {
+ this.screenTheme.depId = value;
}
},
});
diff --git a/src/views/intellectInspect/inspectIndex2/components/inspectList.vue b/src/views/intellectInspect/inspectIndex/components/inspectList.vue
similarity index 100%
rename from src/views/intellectInspect/inspectIndex2/components/inspectList.vue
rename to src/views/intellectInspect/inspectIndex/components/inspectList.vue
diff --git a/src/views/intellectInspect/inspectIndex/components/unusualList.vue b/src/views/intellectInspect/inspectIndex/components/unusualList.vue
new file mode 100644
index 0000000..9a4b901
--- /dev/null
+++ b/src/views/intellectInspect/inspectIndex/components/unusualList.vue
@@ -0,0 +1,539 @@
+<template>
+ <el-dialog v-model="unusualListDialog" title="巡检异常清单" width="90%" center>
+ <div class="main-card">
+ <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="workOrderNum" label="工单编号" align="center"/>
+ <el-table-column prop="pointCode" label="异常巡检点" align="center"/>
+ <el-table-column prop="occurrenceTime" label="巡检（发现）时间" align="center"/>
+ <el-table-column prop="taskName" label="所属巡检任务" align="center"/>
+ <el-table-column prop="regionName" label="设备/区域名称" align="center"/>
+ <el-table-column prop="refer" label="正常参考值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="实际巡检值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/>
+ <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
+ <el-table-column prop="handlerStatus" label="处置状态" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
+ <el-table-column label="操作" align="center" width="180" fixed="right">
+ <template #default="scope">
+ <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button>
+ <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button>
+ <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button>
+ <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <template #footer>
+ <span class="dialog-footer" style="display: flex;justify-content: right">
+ <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+ </span>
+ </template>
+ <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
+ <el-dialog
+ v-model="dialogVisible"
+ :title= '"工单编号：" + workNum'
+ width="60%"
+ :before-close="handleClose"
+ center
+ >
+ <div style="margin-bottom: 20px">
+ <div style="margin-bottom: 10px">处置前：</div>
+ <div v-if="beImgs && beImgs.length>0">
+ <el-image v-for="(item,index) in beImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ </div>
+ <div v-else>
+ 无照片信息
+ </div>
+ </div>
+ <div>
+ <div style="margin-bottom: 10px">处置后</div>
+ <div v-if="afImgs && beImgs.length>0">
+ <el-image v-for="(item,index) in afImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ </div>
+ <div v-else>
+ 无照片信息
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="primary" @click="dialogVisible = false">
+ 确认
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </el-dialog>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useUserInfo } from '/@/stores/userInfo';
+import { Session } from '/@/utils/storage';
+import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+import { ElTable } from 'element-plus';
+import { FormInstance, FormRules, ElMessage } from 'element-plus';
+import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
+import { useRouter } from 'vue-router';
+import inspectRecordDialog from './inspectRecordDialog.vue';
+import { departmentApi } from '/@/api/systemManage/department';
+import {inspectIndexApi} from "/@/api/intellectInspectSystem/inspectIndex";
+import {ElMessageBox} from "element-plus/es";
+// 定义接口来定义对象的类型
+interface stateType {
+ unusualData: Array<any>;
+ unchecked: null | number;
+ unusual: null | number;
+ uncheckedList: [];
+ abnormalList: [];
+ pageIndex: number;
+ pageSize: number;
+ totalSize: number;
+ workTypeList: Array<type>;
+ classGroupList: Array<classGroup>;
+ quotaList: [];
+ departmentList: [];
+ inspectPointAllList: [];
+ unusualListDialog: boolean;
+ dialogVisible:boolean;
+ workNum: string;
+ beImgs: [];
+ afImgs: []
+}
+interface type {
+ id: number;
+ name: string;
+}
+interface classGroup {
+ id: number;
+ groupName: string;
+}
+export default {
+ name: 'inspectList',
+ components: { inspectRecordDialog },
+ setup(context) {
+ const router = useRouter();
+ const state = reactive<stateType>({
+ unusualListDialog: false,
+ dialogVisible: false,
+ workNum: '',
+ beImgs: [],
+ afImgs: [],
+ pageIndex: 1,
+ pageSize: 10,
+ totalSize: 0,
+ unusualData: [],
+ unchecked: null,
+ unusual: null,
+ departmentList: [],
+ uncheckedList: [],
+ abnormalList: [],
+ workTypeList: [
+ { id: 1, name: '日常任务' },
+ { id: 2, name: '周期任务' }
+ ],
+ classGroupList: [],
+ quotaList: [],
+ inspectPointAllList: []
+ });
+ const inspectRecordDialogRef = ref();
+ interface User {
+ name: string;
+ startTime: string;
+ endTime: string;
+ info: string;
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+
+ });
+
+ const showUnusualList = ()=>{
+ state.unusualListDialog = true
+ getInspectRecord();
+ }
+ // 分页获取工作时段列表
+ const getInspectRecord = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
+ let res = await inspectIndexApi().getListExcepOrderByPage(data);
+ if (res.data.code === '200') {
+ state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
+ state.totalSize = res.data.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+ const acceptance =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认完成验收并结束工单？',
+ '完成验收',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().acceptedStatus({id: row.id});
+ if (res.data.code === '200') {
+ getInspectRecord();
+ context.emit('refreshRecord');
+ ElMessage({
+ type: 'success',
+ message: '验收成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '验收失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消验收',
+ })
+ })
+ }
+ const remark =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认是否标记误报？',
+ '标记误报',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
+ if (res.data.code === '200') {
+ getInspectRecord();
+ context.emit('refreshRecord');
+ ElMessage({
+ type: 'success',
+ message: '标记误报成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '标记误报失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消标记',
+ })
+ })
+ }
+ const openPhoto = async(row)=>{
+ state.dialogVisible = true
+ state.workNum = row.workOrderNum
+ const res = await inspectIndexApi().getListImages({id: row.id});
+ if (res.data.code === '200') {
+ state.beImgs = res.data.data.beforeImages
+ state.afImgs = res.data.data.afterImages
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '图片获取失败'
+ });
+ }
+ }
+ const handleSizeChange = (val: number) => {
+ state.pageSize = val;
+ getInspectRecord();
+ };
+ const handleCurrentChange = (val: number) => {
+ state.pageIndex = val;
+ getInspectRecord();
+ };
+
+ const toLine = (item) => {
+ console.log(item,'item')
+ let id = item.id;
+ console.log(id,'id')
+ router.push({
+ path: 'intelligentLine',
+ query: {
+ id: id
+ }
+ });
+ };
+
+ const toOverTime = (id) => {
+ console.log(state.uncheckedList, 'list');
+ router.push({
+ path: 'inspectRecord',
+ query: {
+ id: id,
+ }
+ });
+ };
+ const toDetails = (type: string, item: object) => {
+
+ };
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ router,
+ inspectRecordDialogRef,
+ acceptance,
+ openPhoto,
+ remark,
+ showUnusualList,
+ toLine,
+ toOverTime,
+ toDetails,
+ handleSizeChange,
+ handleCurrentChange,
+ ...toRefs(state)
+ };
+ }
+};
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+@media screen and (min-width: 1366px) {
+ .topCard {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: bolder;
+
+ .top-info {
+ display: flex;
+ font-size: 16px;
+ align-items: center;
+ padding: 10px 15px;
+ background: #ffeb87;
+ border-radius: 8px;
+ border: 1px solid #ffae00;
+
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ span {
+ font-size: 22px;
+ color: #f3001e;
+ margin: 0 4px;
+ cursor: pointer;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ .left-info {
+ width: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ font-size: 16px;
+ overflow-x: auto;
+ & > span {
+ white-space: nowrap;
+ }
+ p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ & > span {
+ white-space: nowrap;
+ }
+ }
+ }
+}
+@media screen and (min-width: 1200px) and (max-width: 1366px) {
+ .topCard {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: bolder;
+
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ padding: 6px 10px;
+ background: #ffeb87;
+ border-radius: 4px;
+ border: 1px solid #ffae00;
+
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ span {
+ font-size: 18px;
+ color: #f3001e;
+ margin: 0 2px;
+ cursor: pointer;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ .left-info {
+ width: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ font-size: 15px;
+ color: #333;
+ overflow-x: auto;
+ & > span {
+ white-space: nowrap;
+ }
+ p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ & > span {
+ white-space: nowrap;
+ }
+ }
+ }
+}
+@media screen and (max-width: 1200px) {
+ .topCard {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: bolder;
+
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ padding: 2px 6px;
+ background: #ffeb87;
+ border-radius: 4px;
+ border: 1px solid #ffae00;
+
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ span {
+ font-size: 16px;
+ color: #f3001e;
+ margin: 0 1px;
+ cursor: pointer;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ .left-info {
+ width: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ font-size: 12px;
+ color: #333;
+ overflow-x: auto;
+ & > span {
+ white-space: nowrap;
+ }
+ p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ & > span {
+ white-space: nowrap;
+ }
+ }
+ }
+}
+
+.home-container {
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .title {
+ font-size: 20px;
+ font-weight: bolder;
+ }
+ .main-card {
+ width: 100%;
+ height: 100%;
+ }
+ &:last-of-type {
+ position: relative;
+ padding-top: 0;
+ height: calc(100% - 60px);
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+ }
+}
+.el-input {
+ width: 100% !important;
+}
+.el-date-editor::v-deep {
+ width: 100%;
+}
+.el-select {
+ width: 100%;
+}
+:deep(.el-textarea.is-disabled .el-textarea__inner) {
+ background-color: var(--el-card-bg-color);
+ color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__inner) {
+ color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__wrapper) {
+ background-color: var(--el-card-bg-color);
+}
+</style>
diff --git a/src/views/intellectInspect/inspectIndex/index.vue b/src/views/intellectInspect/inspectIndex/index.vue
index 2e64240..7be559d 100644
--- a/src/views/intellectInspect/inspectIndex/index.vue
+++ b/src/views/intellectInspect/inspectIndex/index.vue
@@ -1,62 +1,195 @@
<template>
- <div class="home-container">
+ <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
+ <div class="full">
+ <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <FullScreen />
+ </el-icon>
+ <span style="vertical-align: middle">全屏</span>
+ </el-button>
+ <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <Close />
+ </el-icon>
+ <span style="vertical-align: middle">退出全屏</span>
+ </el-button>
+ </div>
<div style="height: 100%">
- <div class="homeCard topCard">
- <div class="title">当前巡检任务</div>
- <div class="top-info" v-if="unchecked != 0 || unusual != 0">
- <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
- 预警消息：
- <div v-if="unchecked != 0">
+ <div class="topChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">年度巡检异常趋势</span>
+ </div>
+ <div class="chart" :id="xjLine"></div>
+ </div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">异常区域设备统计</span>
+ <div class="filter-part">
+ <el-switch
+ v-model="chartStatus"
+ inline-prompt
+ style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
+ active-text="区域"
+ inactive-text="设备"
+ />
+ </div>
+ </div>
+ <div class="chart" :id="sbtj"></div>
+ <el-radio-group v-model="period" size="small">
+ <el-radio border label="week">近7天</el-radio>
+ <el-radio border label="month">近30天</el-radio>
+ <el-radio border label="season">近90天</el-radio>
+ <el-radio border label="year">近一年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="midChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <div style="display: flex;align-items: center">
+ <span class="tit">当前巡检任务</span>
+ <div class="top-info" v-if="unchecked != 0 || unusual != 0">
+ <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
+ <div>预警消息：</div>
+ <div v-if="unchecked != 0">
当日超期未巡检任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
- </div>
- <span v-if="unchecked != 0 && unusual != 0">，</span>
- <div v-if="unusual != 0">
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
+ </div>
+ <span v-if="unchecked != 0 && unusual != 0">，</span>
+ <div v-if="unusual != 0">
存在异常任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(5)">{{ unusual }}</span
- ></el-tooltip>个
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(5)">{{ unusual }}</span
+ ></el-tooltip>个
+ </div>
+ 。
</div>
- 。
+ </div>
+ <div class="checkAll" @click="checkAllRecord()">
+ 全部记录>>
+ </div>
</div>
- </div>
- <div class="homeCard">
- <div class="main-card">
- <div class="list">
- <div class="cardTop" v-for="(item, index) in tableData" :key="index">
- <div class="left-info">
- <span class="num">{{ pageSize * (pageIndex - 1) + index + 1 }}、</span>
- <span class="place">{{ item.taskName }}，</span>
- <p v-if="item.execUserName == null">该任务暂无人认领</p>
- <p v-else>
- <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span
- >由<span class="name">{{ item.execUserName }}</span
- >进行的巡检任务
- </p>
- </div>
- <div class="mid-info">
- 任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
- </div>
- <div class="right-info">
- <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div>
- <div v-else class="reviewBtn" @click="toDetails('查看', item)">[查看巡检记录]</div>
- </div>
+ <div class="chart">
+ <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column label="任务信息" align="center">
+ <template #default="scope">
+ <div class="left-info">
+ <span>{{ scope.row.taskName }}，</span>
+ <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>
+ <p v-else>
+ <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务
+ </p>
</div>
- </div>
- <div class="pageBtn">
- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
- </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">
+ <template #default="scope">
+ <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" width="180">
+ <template #default="scope">
+ <el-button type="text" size="small" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>
+ <el-button type="text" size="small" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
+ </div>
</div>
+ <div class="midChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">巡检异常清单</span>
+ <div class="checkAll" @click="checkAllList()">
+ 全部记录>>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="workOrderNum" label="工单编号" align="center"/>
+ <el-table-column prop="pointCode" label="异常巡检点" align="center"/>
+ <el-table-column prop="occurrenceTime" label="巡检（发现）时间" align="center"/>
+ <el-table-column prop="taskName" label="所属巡检任务" align="center"/>
+ <el-table-column prop="regionName" label="设备/区域名称" align="center"/>
+ <el-table-column prop="refer" label="正常参考值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="实际巡检值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/>
+ <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
+ <el-table-column prop="handlerStatus" label="处置状态" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
+ <el-table-column label="操作" align="center" width="180" fixed="right">
+ <template #default="scope">
+ <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button>
+ <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button>
+ <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button>
+ <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span>
+ </template>
+ </el-table-column>
+ </el-table>
+<!-- <div class="pageBtn">-->
+<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
+<!-- </div>-->
+ </div>
+ </div>
+ </div>
</div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title= '"工单编号：" + workNum'
+ width="60%"
+ :before-close="handleClose"
+ center
+ >
+ <div style="margin-bottom: 20px">
+ <div style="margin-bottom: 10px">处置前：</div>
+ <div v-if="beImgs && beImgs.length>0">
+ <el-image v-for="(item,index) in beImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ </div>
+ <div v-else>
+ 无照片信息
+ </div>
+ </div>
+ <div>
+ <div style="margin-bottom: 10px">处置后</div>
+ <div v-if="afImgs && beImgs.length>0">
+ <el-image v-for="(item,index) in afImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ </div>
+ <div v-else>
+ 无照片信息
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="primary" @click="dialogVisible = false">
+ 确认
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
<inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
+ <inspect-list ref="inspectListRef"></inspect-list>
+ <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list>
</div>
</template>
@@ -68,14 +201,20 @@
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
-import { FormInstance, FormRules, ElMessage } from 'element-plus';
+import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
+import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex'
import { useRouter } from 'vue-router';
+import * as echarts from 'echarts'
import inspectRecordDialog from './components/inspectRecordDialog.vue';
+import inspectList from './components/inspectList.vue';
+import unusualList from './components/unusualList.vue';
import { departmentApi } from '/@/api/systemManage/department';
+import screenfull from "screenfull";
// 定义接口来定义对象的类型
interface stateType {
tableData: Array<string>;
+ unusualData: Array<any>;
unchecked: null | number;
unusual: null | number;
uncheckedList: [];
@@ -89,6 +228,14 @@
classGroupList: Array<classGroup>;
quotaList: [];
inspectPointAllList: [];
+ chartStatus:boolean;
+ period: string;
+ isFull:boolean;
+ themeColor:string;
+ dialogVisible:boolean;
+ workNum: string;
+ beImgs: [];
+ afImgs: []
}
interface type {
id: number;
@@ -99,17 +246,27 @@
groupName: string;
}
export default {
- name: 'workingHours',
- components: { inspectRecordDialog },
+ name: 'inspectIndex',
+ components: { inspectRecordDialog, inspectList, unusualList },
setup() {
const router = useRouter();
+ const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
+ const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
const state = reactive<stateType>({
+ isFull: false,
+ themeColor: '#333',
+ workNum: '',
+ beImgs: [],
+ afImgs: [],
pageIndex: 1,
- pageSize: 10,
+ pageSize: 5,
totalSize: 0,
tableData: [],
+ unusualData: [],
unchecked: null,
unusual: null,
+ chartStatus: true,
+ period: 'month',
uncheckedList: [],
abnormalList: [],
workTypeList: [
@@ -126,9 +283,12 @@
],
classGroupList: [],
quotaList: [],
- inspectPointAllList: []
+ inspectPointAllList: [],
+ dialogVisible: false
});
const inspectRecordDialogRef = ref();
+ const inspectListRef = ref();
+ const unusualListRef = ref();
interface User {
name: string;
startTime: string;
@@ -139,11 +299,274 @@
// 页面载入时执行方法
onMounted(() => {
getInspectRecord();
+ getListExcepOrder();
getDayData();
getDepartmentData();
+ initXjLine()
+ initSbtj()
});
+ const toFullscreen =()=>{
+ // console.log(state.isFull,'quanp',state.themeColor)
+ const element = document.getElementById('bigScreen')
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
+ }
+ screenfull.toggle(element);
+ state.isFull = !state.isFull
+ if(state.isFull == true){
+ state.themeColor = '#11FEEE'
+ }else{
+ state.themeColor = '#333'
+ }
+ initXjLine()
+ initSbtj()
+ }
+ const checkAllRecord =()=>{
+ inspectListRef.value.departmentList = state.departmentList
+ inspectListRef.value.showInspectList()
+ }
+ const checkAllList =()=>{
+ unusualListRef.value.showUnusualList()
+ }
+ const acceptance =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认完成验收并结束工单？',
+ '完成验收',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().acceptedStatus({id: row.id});
+ if (res.data.code === '200') {
+ getListExcepOrder();
+ ElMessage({
+ type: 'success',
+ message: '验收成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '验收失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消验收',
+ })
+ })
+ }
+ const remark =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认是否标记误报？',
+ '标记误报',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
+ if (res.data.code === '200') {
+ getListExcepOrder();
+ ElMessage({
+ type: 'success',
+ message: '标记误报成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '标记误报失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消标记',
+ })
+ })
+ }
+ const openPhoto = async(row)=>{
+ state.dialogVisible = true
+ state.workNum = row.workOrderNum
+ const res = await inspectIndexApi().getListImages({id: row.id});
+ if (res.data.code === '200') {
+ state.beImgs = res.data.data.beforeImages
+ state.afImgs = res.data.data.afterImages
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '图片获取失败'
+ });
+ }
+ }
+ type EChartsOption = echarts.EChartsOption
+ const initXjLine =()=>{
+ let dom = document.getElementById(xjLine.value);
+ let myChart = echarts.init(dom);
- // 分页获取工作时段列表
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['总趋势', '事业部'],
+ height: '15%',
+ top: 0,
+ bottom: 0,
+ padding:[1,1,1,0],
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '3%',
+ bottom: 0,
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ // saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ axisLabel: {
+ color: state.themeColor
+ }
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '总趋势',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
+ label:{
+ show: true,
+ color: '#95d475',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#95d475'
+ },
+ itemStyle:{
+ color: '#95d475',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ },
+ {
+ name: '事业部',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
+ label:{
+ show: true,
+ color: '#337ecc',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#337ecc'
+ },
+ itemStyle:{
+ color: '#337ecc',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initSbtj =()=>{
+ let dom = document.getElementById(sbtj.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 1048, name: '区域1' },
+ { value: 735, name: '区域2' },
+ { value: 580, name: '区域3' },
+ { value: 484, name: '区域4' },
+ { value: 735, name: '区域5' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 分页获取
const getInspectRecord = async () => {
const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
let res = await inspectRecordApi().getInspectRecordByIndex(data);
@@ -156,6 +579,19 @@
message: res.data.msg
});
}
+ };
+ // 分页获取
+ const getListExcepOrder = async () => {
+ const data = { pageSize: 4, pageIndex: state.pageIndex };
+ let res = await inspectIndexApi().getListExcepOrderByPage(data);
+ if (res.data.code === '200') {
+ state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
};
//获取部门
const getDepartmentData = async () => {
@@ -222,9 +658,19 @@
Edit,
Delete,
Refresh,
+ xjLine,
+ sbtj,
Plus,
router,
inspectRecordDialogRef,
+ inspectListRef,
+ unusualListRef,
+ toFullscreen,
+ checkAllRecord,
+ checkAllList,
+ acceptance,
+ remark,
+ openPhoto,
toLine,
toOverTime,
toDetails,
@@ -239,319 +685,240 @@
<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 16px;
- align-items: center;
- padding: 10px 15px;
- background: #ffeb87;
- border-radius: 8px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 22px;
- color: #f3001e;
- margin: 0 4px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 18px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 18px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 16px;
- color: #fff;
-
- div {
- white-space: nowrap;
- }
- }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 6px 10px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 18px;
- color: #f3001e;
- margin: 0 2px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 15px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 15px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 13px;
- color: #fff;
- div {
- white-space: nowrap;
- }
- }
}
@media screen and (max-width: 1200px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 2px 6px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 16px;
- color: #f3001e;
- margin: 0 1px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 12px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 12px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 12px;
- color: #fff;
- div {
- white-space: nowrap;
- }
- }
}
.home-container {
height: calc(100vh - 144px);
box-sizing: border-box;
overflow: hidden;
- .homeCard {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
+ .full{
+ position:fixed;
+ height: 34px;
+ line-height: 34px;
+ top: 80px;
+ right: 20px;
+ z-index: 99999;
+ }
+ .topChart{
+ width: 100%;
+ height: calc((100% - 40px) / 3);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ &:last-of-type{
+ margin-bottom: 0;
+ }
- .title {
+ .chart-item{
+ width: calc(60% - 20px);
+ height: 100%;
+ margin-right: 20px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ width: 40%;
+ margin-right: 0;
+ }
+
+ .chart-tit{
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 1.33rem;
+ font-weight: bolder;
+ }
+ .filter-part{
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ width: 20%;
+ .el-switch{
+ width: 100% !important;
+ :deep(.el-switch__core){
+ width: 100% !important;
+ }
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 88%;
+ }
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
+
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
+ }
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
+ }
+ .midChart{
+ height: calc((100% - 40px) / 3);
+ width: 100%;
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ padding: 20px;
+
+ .chart-item{
+ width: 100%;
+ height: 100%;
+ padding: 0 0 20px;
+
+ .chart-tit{
+ width: 100%;
+ height: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tit{
font-size: 20px;
font-weight: bolder;
- }
- .main-card {
- width: 100%;
- height: 100%;
- .cardTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 10px;
- background: #daf3ff;
- padding: 10px 15px;
- border-radius: 8px;
+ }
+ :deep(.el-switch__core){
+ width: 120px;
- .left-info {
- .num {
- font-weight: bolder;
- margin-right: 10px;
- }
- .place {
- font-weight: bolder;
- }
- .time {
- font-weight: bolder;
- margin-right: 5px;
- }
- .name {
- font-weight: bolder;
- margin: 0 5px;
- font-weight: bolder;
- }
- }
- .mid-info {
- span {
- font-weight: bolder;
- }
+ }
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ background: #ffeb87;
+ padding: 4px 10px;
+ margin-left: 20px;
+ border-radius: 2px;
+ border: 1px solid #ffae00;
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ height: 100%;
+ span {
+ color: #f3001e;
+ margin: 0 4px;
+ font-size: 18px;
+ cursor: pointer;
+ font-weight: bolder;
- .grey {
- color: #999;
- }
- .green {
- color: #44b100;
- }
- .blue {
- color: #409eff;
- }
- .red {
- color: red;
- }
+ &:hover{
+ text-decoration: underline;
}
- .right-info {
- .checkBtn {
- padding: 10px 15px;
- background: #409eff;
- border-radius: 4px;
- cursor: pointer;
- }
-
- .reviewBtn {
- margin: 10px 15px;
- cursor: pointer;
- color: #44b100;
- }
- }
+ }
}
- .list {
- height: calc(100% - 60px);
- overflow-y: auto;
+ }
+ .checkAll{
+ cursor: pointer;
+ &:hover{
+ color: #409eff
}
- .pageBtn {
- position: absolute;
- bottom: 15px;
- right: 20px;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: right;
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ margin-top: 10px;
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
+ .el-table{
+ height: 100% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
+ height: 100% !important;
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
}
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
+ height: 100% !important;
+ tbody{
+ height: 100% !important;
+ .el-table__row{
+ height: 25% !important;
+ td{
+ height: 25% !important;
+ padding: 0 0 !important;
+ .left-info{
+ display: flex;
+ align-items: center;
+ }
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .el-button{
+ padding: 0 !important;
+ }
+ }
+ }
+ }
+ }
}
+ }
}
+ }
+
+ .pageBtn {
+ position: absolute;
+ bottom: 15px;
+ right: 20px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
}
- &:last-of-type {
- position: relative;
- padding-top: 0;
- height: calc(100% - 60px);
- }
+ }
}
+
.el-row {
display: flex;
align-items: center;
@@ -565,6 +932,193 @@
}
}
}
+.container{
+ padding: 20px;
+ background: url('../../../assets/spwbg.png') no-repeat center;
+
+ .full{
+ position:fixed;
+ background: #fff;
+ border-radius: 17px;
+ box-shadow: 3px 3px 12px rgba(0,0,0,.2);
+ height: 34px;
+ line-height: 34px;
+ top: 0;
+ right: 20px;
+ }
+ .topChart{
+ .chart-item{
+ border-radius: 4px;
+ background: rgba(8, 109, 209, 0.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ backdrop-filter: blur(5px);
+ position: relative;
+ z-index: 2;
+ &:last-of-type{
+ position: relative;
+ z-index: 1;
+ }
+ .el-radio.is-bordered.is-checked{
+ border-color: #11FEEE !important;
+ :deep(.el-radio__inner){
+ border-color: #11FEEE !important;
+ background: #11FEEE !important;
+ }
+ :deep(.el-radio__label){
+ color: #11FEEE !important
+ }
+ }
+ .chart-tit{
+ .tit{
+ color: #11FEEE;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-cascader-node{
+ .in-active-path{
+ background: #0049af;
+ }
+ &:hover{
+ background: #0049af;
+ }
+ }
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item.hover{
+ background: #0049af;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+ .chart{
+ .el-table {
+ color: #11FEEE !important;
+ background-color: rgba(0,0,0,0) !important;
+ :deep(thead){
+ color: #11FEEE !important;
+ }
+ :deep(tr){
+ background-color: rgba(0,0,0,0) !important;
+ .el-table__cell{
+ background-color: rgba(0,0,0,0) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ .midChart{
+ border-radius: 4px;
+ background: rgba(8, 109, 209, 0.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ backdrop-filter: blur(5px);
+ position: relative;
+ z-index: 3;
+ .tit{
+ color: #11FEEE;
+ }
+ .checkAll{
+ cursor: pointer;
+ color: #11feee;
+ &:hover{
+ color: #409eff
+ }
+ }
+ .el-table {
+ color: #11FEEE !important;
+ background-color: rgba(0,0,0,0) !important;
+ :deep(thead){
+ color: #11FEEE !important;
+ background-color: #092846 !important
+ }
+ :deep(tr){
+ background-color: rgba(0,0,0,0) !important;
+ .el-table__cell{
+ background-color: rgba(0,0,0,0) !important;
+ }
+ .el-table-fixed-column--right{
+ background-color: #092846 !important
+ }
+ }
+ }
+
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-cascader-node{
+ .in-active-path{
+ background: #0049af;
+ }
+ &:hover{
+ background: #0049af;
+ }
+ }
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item.hover{
+ background: #0049af;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+}
.el-input {
width: 100% !important;
}
diff --git a/src/views/intellectInspect/inspectIndex2/components/inspectRecordDialog.vue b/src/views/intellectInspect/inspectIndex2/components/inspectRecordDialog.vue
deleted file mode 100644
index e056931..0000000
--- a/src/views/intellectInspect/inspectIndex2/components/inspectRecordDialog.vue
+++ /dev/null
@@ -1,593 +0,0 @@
-<template>
- <div class="system-add-menu-container">
- <el-dialog v-model="ifShowInspectTaskDialog" :title="title" width="60%">
- <el-form :model="inspectTaskForm" label-width="120px" ref="inspectTaskFormRef">
- <el-row>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="任务名称" prop="unitName">
- <el-input v-model="inspectTaskForm.taskName" :disabled="!inspectPointConfirm" class="input-add" placeholder="请填写任务名称"> </el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="任务类型" prop="taskType">
- <el-select v-model="inspectTaskForm.taskType" :disabled="!inspectPointConfirm" class="input-add" placeholder="请选择任务类型">
- <el-option v-for="item in workTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="巡检部门" prop="execDepId">
- <el-cascader @change="giveClassGroup" :disabled="!inspectPointConfirm" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" clearable filterable class="input-add" v-model="inspectTaskForm.execDepId"> </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="巡检班组" prop="execClassgroupId">
- <el-select v-model="inspectTaskForm.execClassgroupId" :disabled="!inspectPointConfirm" class="input-add">
- <el-option v-for="item in classGroup" :key="item.id" :value="item.id" :label="item.groupName"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="巡检人" prop="execUserName">
- <el-input v-model="inspectTaskForm.execUserName" :disabled="!inspectPointConfirm" class="input-add"> </el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12" style="margin-bottom: 20px">
- <el-form-item label="任务开始时间" prop="startTime">
- <el-date-picker v-model="inspectTaskForm.startTime" :disabled="!inspectPointConfirm" placeholder="请选择任务开始时间" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" class="input-add" />
- </el-form-item>
- </el-col>
- </el-row>
-
- <div class="checkUnit-point">
- <el-tabs class="active" v-model="activeName">
- <el-tab-pane label="巡检链" name="inspectChain">
- <el-table :data="inspectTaskForm.points" fit style="width: 100%">
- <el-table-column type="index" label="序号" />
- <el-table-column prop="point" label="巡检点" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="region" label="所属设备" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="rfid" label="RFID" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="quotaContent" label="指标作业" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="secondReferenceResult" label="记录值" show-overflow-tooltip align="center">
- <template #default="scope">
- <div :style="{ color: scope.row.reportResult == 1 ? '#ff0000' : '#409eff' }">
- {{ scope.row.dataReportType == 1 ? '无' : scope.row.secondReferenceResult }}
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="quotaUnit" label="指标单位" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="reportResult" label="结果" show-overflow-tooltip align="center">
- <template #default="scope">
- <div :style="{ color: scope.row.reportResult == 1 ? '#ff0000' : '#409eff' }">
- {{ scope.row.reportResult == 0 ? '正常' : scope.row.reportResult == 1 ? '存在异常' : scope.row.reportResult == 2 ? '备' : '无' }}
- </div>
- </template>
- </el-table-column>
- <!-- <el-table-column label="操作" width="150" align="center">-->
- <!-- <template #default="scope">-->
- <!-- <el-button size="small" text type="danger" @click="onDelCheckUnit(scope.$index, scope.row)">删除</el-button>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- </el-table>
- </el-tab-pane>
- <el-tab-pane label="统计数据" name="allData">
- <sum-data :sumData="taskAndQuotas"></sum-data>
- </el-tab-pane>
- </el-tabs>
- </div>
- <div align="right" v-show="inspectPointConfirm">
- <el-button type="warning" @click="inspectPointDialog = false" size="default" plain>取消</el-button>
- <el-button type="primary" @click="submitInspectTask()" size="default">确认</el-button>
- </div>
- </el-form>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent } from 'vue';
-import { RFIDApi } from '/@/api/intellectInspectSystem/RFID';
-import { ElMessage } from 'element-plus/es';
-import { inspectTaskApi } from '/@/api/intellectInspectSystem/inspectTask';
-import { facilityAreaApi } from '/@/api/intellectInspectSystem/facilityAreaManage';
-import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
-interface dataState {
- title: string;
- taskAndQuotas: [];
- pointTitle: string;
- activeName: string;
- inspectPointConfirm: boolean;
- inspectPointDialog: boolean;
- ifShowInspectTaskDialog: boolean;
- inspectPointForm: inspectPointForm;
- inspectTaskForm: {
- execClassgroupId: number | null;
- execDepId: number | null;
- id: number | null;
- execUserName: string;
- startTime: string | null;
- taskName: string | null;
- taskType: number | null;
- validTime: string | null;
- points: Array<inspectPointForm>;
- };
- workTypeList: [];
- departmentList: [];
- timeList: [];
- dataReportTypeList: Array<dataReport>;
- firstReferenceValueList: Array<dataReport>;
- secondReferenceSignList: Array<dataReport>;
- thirdReferenceSignList: Array<dataReport>;
- classGroupList: Array<classGroup>;
- classGroup: Array<classGroup>;
- quotaList: Array<quota>;
- inspectPointAllList: Array<inspectPointAllState>;
-}
-interface inspectPointAllState {
- id: number;
- code: string;
- regionId: number;
- rfidId: number;
-}
-interface classGroup {
- depId: number;
-}
-interface dataReport {
- id: number;
- name: string;
-}
-interface quota {
- id: number;
- type: string;
- unit: string;
-}
-interface inspectPointForm {
- id: number | null;
- unitId: number | null;
- unitUuid: string | null;
- pointId: number | null;
- pointUuid: string | null;
- regionId: number | null;
- regionUuid: string | null;
- rfidId: number | null;
- quotaId: number | null;
- quotaUnit: string | null;
- reportResult: number | null;
- secondReferenceResult: number | null;
- execSequence: number | null;
- dataReportType: number | null;
- firstReferenceValue: number | null;
- secondReferenceSign: number | null;
- secondReferenceValue: number | null;
- thirdReferenceSign: number | null;
- thirdReferenceValue: number | null;
-}
-export default defineComponent({
- name: 'inspectTaskDialog',
- components: {
- SumData: defineAsyncComponent(() => import('/@/views/intellectInspect/inspectIndex/components/sum.vue'))
- },
- setup(props: any, context: any) {
- const inspectTaskFormRef = ref();
- const data = reactive<dataState>({
- title: '',
- taskAndQuotas: [],
- pointTitle: '',
- activeName: 'inspectChain',
- inspectPointConfirm: false,
- inspectPointDialog: false,
- ifShowInspectTaskDialog: false,
- inspectPointForm: {
- id: null,
- unitId: null,
- unitUuid: null,
- pointId: null,
- pointUuid: null,
- regionId: null,
- regionUuid: null,
- rfidId: null,
- quotaId: null,
- quotaUnit: null,
- execSequence: null,
- secondReferenceResult: null,
- reportResult: null,
- dataReportType: null,
- firstReferenceValue: null,
- secondReferenceSign: null,
- secondReferenceValue: null,
- thirdReferenceSign: null,
- thirdReferenceValue: null
- },
- inspectTaskForm: {
- execClassgroupId: null,
- execDepId: null,
- id: null,
- points: [],
- execUserName: '',
- startTime: null,
- taskName: null,
- taskType: null,
- validTime: null
- },
- workTypeList: [],
- departmentList: [],
- timeList: [],
- classGroupList: [],
- classGroup: [],
- quotaList: [],
- inspectPointAllList: [],
- dataReportTypeList: [
- { id: 1, name: '选择' },
- { id: 2, name: '填空' },
- { id: 3, name: '选择并填空' }
- ],
- firstReferenceValueList: [
- { id: 0, name: '正常' },
- { id: 1, name: '存在异常' },
- { id: 2, name: '备' }
- ],
- secondReferenceSignList: [
- { id: 1, name: '>' },
- { id: 2, name: '>=' }
- ],
- thirdReferenceSignList: [
- { id: 3, name: '<' },
- { id: 4, name: '<=' }
- ]
- });
-
- const openInspectPointDialog = (type: string, item: {}) => {
- data.inspectPointDialog = true;
- if (type === '新增') {
- data.pointTitle = '新增巡检点';
- data.inspectPointForm = {
- id: null,
- unitId: null,
- unitUuid: null,
- pointId: null,
- pointUuid: null,
- regionId: null,
- regionUuid: null,
- rfidId: null,
- quotaId: null,
- quotaUnit: null,
- reportResult: null,
- execSequence: null,
- secondReferenceResult: null,
- dataReportType: null,
- firstReferenceValue: null,
- secondReferenceSign: null,
- secondReferenceValue: null,
- thirdReferenceSign: null,
- thirdReferenceValue: null
- };
- } else {
- data.pointTitle = '修改巡检点';
- data.inspectPointForm = JSON.parse(JSON.stringify(item));
- }
- };
-
- const showInspectRecordDialog = (type: string, item: { id: number; uuid: string; execUserName: string }, workTypeList: [], department: [], timeType: [], classGroupList: [], quotaList: [], inspectPointAllList: []) => {
- data.quotaList = JSON.parse(JSON.stringify(quotaList));
- data.timeList = JSON.parse(JSON.stringify(timeType));
- data.inspectPointAllList = JSON.parse(JSON.stringify(inspectPointAllList));
- data.workTypeList = JSON.parse(JSON.stringify(workTypeList));
- data.departmentList = JSON.parse(JSON.stringify(department));
- data.classGroupList = JSON.parse(JSON.stringify(classGroupList));
- data.ifShowInspectTaskDialog = true;
- data.inspectPointConfirm = false;
- data.title = '查看巡检记录';
- getSum(item.id);
- inspectRecordApi()
- .getInspectRecordById({ id: item.id, uuid: item.uuid })
- .then((res) => {
- if (res.data.code === '200') {
- data.inspectTaskForm.execDepId = res.data.data.execDepId;
- giveClassGroup();
- data.inspectTaskForm = JSON.parse(JSON.stringify(res.data.data));
- data.inspectTaskForm.execUserName = item.execUserName;
- } else {
- }
- })
- .catch((error) => {});
- };
-
- // 格式化表格数据
- // const toRefer =(row, column, cellValue, index)=>{
- // return row.secondReferenceResult==0?'正常':(row.reportResult==1?'异常':'无')
- // }
-
- const getSum = async (id: number) => {
- let res = await inspectRecordApi().getInspectRecordSum({ id: id });
- if (res.data.code === '200') {
- data.taskAndQuotas = JSON.parse(JSON.stringify(res.data.data.taskAndQuotas));
- console.log(data.taskAndQuotas, '666666666666');
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- const submitInspectPoint = async () => {
- if (data.title === '新增巡检任务' && data.pointTitle === '新增巡检点') {
- if (data.inspectTaskForm.points.length === 0) {
- data.inspectPointForm.execSequence = 1;
- } else {
- data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1;
- }
- data.inspectTaskForm.points.push(data.inspectPointForm);
- data.inspectPointDialog = false;
- } else if (data.title === '新增巡检任务' && data.pointTitle === '修改巡检点') {
- let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id);
- data.inspectTaskForm.points[result] = data.inspectPointForm;
- data.inspectPointDialog = false;
- } else if (data.title === '修改巡检任务' && data.pointTitle === '新增巡检点') {
- data.inspectPointForm.unitId = data.inspectTaskForm.id;
- if (data.inspectTaskForm.points.length === 0) {
- data.inspectPointForm.execSequence = 1;
- } else {
- data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1;
- }
- let res = await inspectTaskApi().addChainOfInspectTask(data.inspectPointForm);
- if (res.data.code === '200') {
- ElMessage({
- type: 'success',
- message: '巡检点新增成功',
- duration: 2000
- });
- data.inspectPointDialog = false;
- data.inspectTaskForm.points.push(data.inspectPointForm);
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- } else {
- data.inspectPointForm.unitId = data.inspectTaskForm.id;
- let res = await inspectTaskApi().modChainOfInspectTask(data.inspectPointForm);
- if (res.data.code === '200') {
- ElMessage({
- type: 'success',
- message: '巡检点修改成功',
- duration: 2000
- });
- let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id);
- data.inspectTaskForm.points[result] = data.inspectPointForm;
- data.inspectPointDialog = false;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- }
- };
- const deleteFlow = async (index: number, item: { id: number }) => {
- if (data.pointTitle === '新增巡检点') {
- data.inspectTaskForm.points.splice(index, 1);
- } else {
- let res = await inspectTaskApi().deleteChainOfInspectTask({ id: item.id, unitId: data.inspectTaskForm.id });
- if (res.data.code === '200') {
- data.inspectTaskForm.points.splice(index, 1);
- ElMessage({
- type: 'success',
- message: '巡检点删除成功'
- });
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- }
- };
-
- const giveRegionAndRFID = () => {
- data.inspectPointForm.regionId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.regionId as number;
- data.inspectPointForm.rfidId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.rfidId as number;
- };
-
- const giveClassGroup = () => {
- data.inspectTaskForm.execClassgroupId = null;
- data.classGroup = data.classGroupList.filter((item) => item.depId === data.inspectTaskForm.execDepId);
- };
-
- const giveQuotaUnit = () => {
- data.inspectPointForm.quotaUnit = data.quotaList.find((item) => item.id === data.inspectPointForm.quotaId)?.unit as string;
- };
- const submitInspectTask = () => {
- inspectTaskFormRef.value.validate(async (valid: Boolean) => {
- if (valid) {
- if (data.title === '新增巡检任务') {
- let res = await inspectTaskApi().addInspectTask(data.inspectTaskForm);
- if (res.data.code === '200') {
- ElMessage({
- type: 'success',
- message: '巡检任务新增成功',
- duration: 2000
- });
- data.ifShowInspectTaskDialog = false;
- context.emit('refreshInspectTask');
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- } else {
- let res = await inspectTaskApi().modInspectTask(data.inspectTaskForm);
- if (res.data.code === '200') {
- ElMessage({
- type: 'success',
- message: '巡检指标修改成功',
- duration: 2000
- });
- data.ifShowInspectTaskDialog = false;
- context.emit('refreshInspectTask');
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- }
- } else {
- ElMessage({
- type: 'warning',
- message: '请完善基本信息'
- });
- }
- });
- };
-
- return {
- ...toRefs(data),
- inspectTaskFormRef,
- deleteFlow,
- getSum,
- // toRefer,
- giveQuotaUnit,
- giveClassGroup,
- submitInspectTask,
- submitInspectPoint,
- giveRegionAndRFID,
- showInspectRecordDialog,
- openInspectPointDialog
- };
- }
-});
-</script>
-
-<style scoped lang="scss">
-$homeNavLengh: 8;
-.home-container {
- height: calc(100vh - 144px);
- box-sizing: border-box;
- overflow: hidden;
- .homeCard {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
-
- .main-card {
- width: 100%;
- height: 100%;
- .cardTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
- .mainCardBtn {
- margin: 0;
- }
- }
- .pageBtn {
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
- }
- &:last-of-type {
- height: calc(100% - 100px);
- }
- }
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- & > div {
- white-space: nowrap;
- margin-right: 20px;
- }
- }
- }
-}
-.stepItem {
- width: 100%;
- display: flex;
- align-items: flex-start;
- margin-bottom: 30px;
- margin-left: 30px;
- padding-bottom: 30px;
- border-left: 2px solid #ccc;
- &:first-of-type {
- margin-top: 30px;
- }
- &:last-of-type {
- margin-bottom: 0;
- border-left: none;
- }
- .stepNum {
- width: 30px;
- height: 30px;
- border-radius: 15px;
- box-sizing: border-box;
- color: #333;
- border: 1px solid #999;
- line-height: 28px;
- text-align: center;
- margin-right: 10px;
- margin-left: -16px;
- margin-top: -30px;
- }
- .stepCard {
- width: 100%;
- margin-top: -30px;
-
- .box-card {
- width: 100%;
- &:deep(.el-card__header) {
- padding: 10px 15px;
- }
- .card-header {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- & > div:first-of-type {
- margin-right: 80px;
- font-size: 18px;
- font-weight: bold;
- }
- }
- }
- }
- &:hover .card-header {
- color: #0098f5;
- }
- &:hover .stepNum {
- border: 2px solid #0098f5;
- color: #0098f5;
- }
-}
-:deep(.el-date-editor) {
- width: 100%;
-}
-</style>
diff --git a/src/views/intellectInspect/inspectIndex2/components/sum.vue b/src/views/intellectInspect/inspectIndex2/components/sum.vue
deleted file mode 100644
index b0071e0..0000000
--- a/src/views/intellectInspect/inspectIndex2/components/sum.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
- <div style="height: 100%">
- <div class="sum-info">
- <div v-for="item in sumData" class="region-card">
- <div class="region-tit">{{item[0][0].region}}</div>
- <div class="unit-card">
- <div v-for="i in item">
- <div class="unit-tit">{{i[0].quotaContent}}（{{i[0].quotaUnit}}）</div>
- <div class="points">
- <div v-for="t in i" >
- <span class="point-tit">{{t.point}}</span>
- <span>{{t.dataReportType == 1 ? '无' : t.secondReferenceResult}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue';
- import { storeToRefs } from 'pinia';
- import { initBackEndControlRoutes } from '/@/router/backEnd';
- import {useUserInfo} from "/@/stores/userInfo";
- import { Session } from '/@/utils/storage';
- import { ElMessage } from 'element-plus'
- import type { FormInstance, FormRules } from 'element-plus'
- import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
-
-
- interface stateType {
-
- }
- export default defineComponent({
- name: 'SumData',
- components: {},
- props:['sumData'],
- setup() {
- const userInfo = useUserInfo()
- const { userInfos } = storeToRefs(userInfo);
- return {
-
- };
- },
- });
-</script>
-
-<style scoped lang="scss">
- .home-container {
- height: 100%;
- overflow: hidden;
- position: relative;
-
- .sum-info{
- width: 100%;
- border: 1px solid #ccc;
-
- .region-card{
- width: 100%;
- border-bottom: 1px solid #ccc;
- display: flex;
- font-size: 16px;
- align-items: center;
- .region-tit{
- width: 25%;
- text-align: center;
- }
- .unit-card{
- width: 75%;
- height: 100%;
- border-left: 1px solid #ccc;
-
- &>div{
- width: 100%;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #ccc;
-
- &:last-of-type{
- border-bottom: none;
- }
-
- .unit-tit{
- width: 40%;
- padding-left: 10px;
- }
- .points{
- width: 60%;
- height: 100%;
- border-left: 1px solid #ccc;
-
- &>div{
- width: 100%;
- display: flex;
- align-items: center;
- span{
- text-align: center;
- width: 50%;
- }
- .point-tit{
- border-right: 1px solid #ccc;
- padding: 10px;
- }
- }
- }
- }
- }
- }
- }
- .el-row{
- margin-bottom: 20px;
- }
- .el-row:last-child {
- margin-bottom: 0;
- }
- .el-input{
- width: 100% !important;
- }
- .el-date-editor::v-deep{
- width: 100%;
- }
- .el-select{
- width: 100%;
- }
- .el-cascader{
- width: 100% !important;
- }
- }
-</style>
diff --git a/src/views/intellectInspect/inspectIndex2/components/unusualList.vue b/src/views/intellectInspect/inspectIndex2/components/unusualList.vue
deleted file mode 100644
index c9059d3..0000000
--- a/src/views/intellectInspect/inspectIndex2/components/unusualList.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
- <el-dialog v-model="unusualListDialog" title="当前巡检任务" width="90%" center>
- <div class="main-card">
- <el-table :data="tableData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column label="工单编号" align="center"/>
- <el-table-column label="异常巡检点" align="center"/>
- <el-table-column label="巡检（发现）时间" align="center"/>
- <el-table-column label="所属巡检任务" align="center"/>
- <el-table-column label="设备/区域名称" align="center"/>
- <el-table-column label="正常参考值" align="center"/>
- <el-table-column label="实际巡检值" align="center"/>
- <el-table-column label="隐患处置人" align="center"/>
- <el-table-column label="电话" align="center"/>
- <el-table-column prop="taskStatus" label="处置状态" align="center" width="180">
- <template #default="scope">
- <span :style="{color: scope.row.taskStatus == 1 ? '#999' : scope.row.taskStatus == 2 ? '#44b100' : scope.row.taskStatus == 3 ? '#409eff' : 'red'}">
- {{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="处置描述反馈" align="center"/>
- <el-table-column label="操作" align="center" width="190" fixed="right">
- <template #default="scope">
- <el-button type="text" size="small">验收</el-button>
- <el-button type="text" size="small">查看现场照片</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <template #footer>
- <span class="dialog-footer" style="display: flex;justify-content: right">
- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
- </span>
- </template>
- <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
- </el-dialog>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, ref, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { initBackEndControlRoutes } from '/@/router/backEnd';
-import { useUserInfo } from '/@/stores/userInfo';
-import { Session } from '/@/utils/storage';
-import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
-import { ElTable } from 'element-plus';
-import { FormInstance, FormRules, ElMessage } from 'element-plus';
-import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
-import { useRouter } from 'vue-router';
-import inspectRecordDialog from './inspectRecordDialog.vue';
-import { departmentApi } from '/@/api/systemManage/department';
-// 定义接口来定义对象的类型
-interface stateType {
- tableData: Array<string>;
- unchecked: null | number;
- unusual: null | number;
- uncheckedList: [];
- abnormalList: [];
- pageIndex: number;
- pageSize: number;
- totalSize: number;
- workTypeList: Array<type>;
- classGroupList: Array<classGroup>;
- quotaList: [];
- departmentList: [];
- inspectPointAllList: [];
- unusualListDialog: boolean
-}
-interface type {
- id: number;
- name: string;
-}
-interface classGroup {
- id: number;
- groupName: string;
-}
-export default {
- name: 'inspectList',
- components: { inspectRecordDialog },
- setup() {
- const router = useRouter();
- const state = reactive<stateType>({
- unusualListDialog: false,
- pageIndex: 1,
- pageSize: 10,
- totalSize: 0,
- tableData: [],
- unchecked: null,
- unusual: null,
- departmentList: [],
- uncheckedList: [],
- abnormalList: [],
- workTypeList: [
- { id: 1, name: '日常任务' },
- { id: 2, name: '周期任务' }
- ],
- classGroupList: [],
- quotaList: [],
- inspectPointAllList: []
- });
- const inspectRecordDialogRef = ref();
- interface User {
- name: string;
- startTime: string;
- endTime: string;
- info: string;
- }
-
- // 页面载入时执行方法
- onMounted(() => {
-
- });
-
- const showUnusualList = ()=>{
- state.unusualListDialog = true
- getInspectRecord();
- }
- // 分页获取工作时段列表
- const getInspectRecord = async () => {
- const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
- let res = await inspectRecordApi().getInspectRecordByIndex(data);
- if (res.data.code === '200') {
- state.tableData = res.data.data.records;
- state.totalSize = res.data.data.total;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- const handleSizeChange = (val: number) => {
- state.pageSize = val;
- getInspectRecord();
- };
- const handleCurrentChange = (val: number) => {
- state.pageIndex = val;
- getInspectRecord();
- };
-
- const toLine = (item) => {
- console.log(item,'item')
- let id = item.id;
- console.log(id,'id')
- router.push({
- path: 'intelligentLine',
- query: {
- id: id
- }
- });
- };
-
- const toOverTime = (id) => {
- console.log(state.uncheckedList, 'list');
- router.push({
- path: 'inspectRecord',
- query: {
- id: id,
- }
- });
- };
- const toDetails = (type: string, item: object) => {
-
- };
- return {
- View,
- Edit,
- Delete,
- Refresh,
- Plus,
- router,
- inspectRecordDialogRef,
- showUnusualList,
- toLine,
- toOverTime,
- toDetails,
- handleSizeChange,
- handleCurrentChange,
- ...toRefs(state)
- };
- }
-};
-</script>
-
-<style scoped lang="scss">
-$homeNavLengh: 8;
-@media screen and (min-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
-
- .top-info {
- display: flex;
- font-size: 16px;
- align-items: center;
- padding: 10px 15px;
- background: #ffeb87;
- border-radius: 8px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 22px;
- color: #f3001e;
- margin: 0 4px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 16px;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
-}
-@media screen and (min-width: 1200px) and (max-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
-
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 6px 10px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 18px;
- color: #f3001e;
- margin: 0 2px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 15px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
-}
-@media screen and (max-width: 1200px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
-
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 2px 6px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 16px;
- color: #f3001e;
- margin: 0 1px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 12px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
-}
-
-.home-container {
- height: calc(100vh - 144px);
- box-sizing: border-box;
- overflow: hidden;
- .homeCard {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
-
- .title {
- font-size: 20px;
- font-weight: bolder;
- }
- .main-card {
- width: 100%;
- height: 100%;
- }
- &:last-of-type {
- position: relative;
- padding-top: 0;
- height: calc(100% - 60px);
- }
- }
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
- }
-}
-.el-input {
- width: 100% !important;
-}
-.el-date-editor::v-deep {
- width: 100%;
-}
-.el-select {
- width: 100%;
-}
-:deep(.el-textarea.is-disabled .el-textarea__inner) {
- background-color: var(--el-card-bg-color);
- color: var(--el-input-text-color, var(--el-text-color-regular));
-}
-:deep(.el-input.is-disabled .el-input__inner) {
- color: var(--el-input-text-color, var(--el-text-color-regular));
-}
-:deep(.el-input.is-disabled .el-input__wrapper) {
- background-color: var(--el-card-bg-color);
-}
-</style>
diff --git a/src/views/intellectInspect/inspectIndex2/index.vue b/src/views/intellectInspect/inspectIndex2/index.vue
deleted file mode 100644
index 2ef1411..0000000
--- a/src/views/intellectInspect/inspectIndex2/index.vue
+++ /dev/null
@@ -1,1069 +0,0 @@
-<template>
- <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
- <div class="full">
- <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <FullScreen />
- </el-icon>
- <span style="vertical-align: middle">全屏</span>
- </el-button>
- <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <Close />
- </el-icon>
- <span style="vertical-align: middle">退出全屏</span>
- </el-button>
- </div>
- <div style="height: 100%">
- <div class="topChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">年度巡检异常趋势</span>
- </div>
- <div class="chart" :id="xjLine"></div>
- </div>
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">异常区域设备统计</span>
- <div class="filter-part">
- <el-switch
- v-model="chartStatus"
- inline-prompt
- style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
- active-text="区域"
- inactive-text="设备"
- />
- </div>
- </div>
- <div class="chart" :id="sbtj"></div>
- <el-radio-group v-model="period" size="small">
- <el-radio border label="week">近7天</el-radio>
- <el-radio border label="month">近30天</el-radio>
- <el-radio border label="season">近90天</el-radio>
- <el-radio border label="year">近一年</el-radio>
- </el-radio-group>
- </div>
- </div>
- <div class="midChart">
- <div class="chart-item">
- <div class="chart-tit">
- <div style="display: flex;align-items: center">
- <span class="tit">当前巡检任务</span>
- <div class="top-info" v-if="unchecked != 0 || unusual != 0">
- <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
- <div>预警消息：</div>
- <div v-if="unchecked != 0">
- 当日超期未巡检任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
- </div>
- <span v-if="unchecked != 0 && unusual != 0">，</span>
- <div v-if="unusual != 0">
- 存在异常任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(5)">{{ unusual }}</span
- ></el-tooltip>个
- </div>
- 。
- </div>
- </div>
- <div class="checkAll" @click="checkAllRecord()">
- 全部记录>>
- </div>
- </div>
- <div class="chart">
- <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column label="任务信息" align="center">
- <template #default="scope">
- <div class="left-info">
- <span>{{ scope.row.taskName }}，</span>
- <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>
- <p v-else>
- <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务
- </p>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">
- <template #default="scope">
- <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" width="180">
- <template #default="scope">
- <el-button type="text" size="small" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>
- <el-button type="text" size="small" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>
- </template>
- </el-table-column>
- </el-table>
-<!-- <div class="list">-->
-<!-- <div class="list-tit">-->
-<!-- <span class="w60">任务信息</span>-->
-<!-- <span class="w20">任务状态</span>-->
-<!-- <span class="w20">操作</span>-->
-<!-- </div>-->
-<!-- <div class="cardTop" v-for="(item, index) in tableData" :key="index">-->
-<!-- <div class="l-info">-->
-<!-- <span class="place">{{ item.taskName }}，</span>-->
-<!-- <p v-if="item.execUserName == null">该任务暂无人认领</p>-->
-<!-- <p v-else>-->
-<!-- <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span>由<span class="name">{{ item.execUserName }}</span-->
-<!-- >进行的巡检任务-->
-<!-- </p>-->
-<!-- </div>-->
-<!-- <div class="m-info">-->
-<!-- 任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>-->
-<!-- </div>-->
-<!-- <div class="r-info">-->
-<!-- <el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>-->
-<!-- <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="pageBtn">-->
-<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
-<!-- </div>-->
- </div>
- </div>
- </div>
- <div class="midChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">巡检异常清单</span>
- <div class="checkAll" @click="checkAllList()">
- 全部记录>>
- </div>
- </div>
- <div class="chart">
- <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column prop="num" label="工单编号" align="center"/>
- <el-table-column prop="spot" label="异常巡检点" align="center"/>
- <el-table-column prop="time" label="巡检（发现）时间" align="center"/>
- <el-table-column prop="job" label="所属巡检任务" align="center"/>
- <el-table-column prop="area" label="设备/区域名称" align="center"/>
- <el-table-column prop="refer" label="正常参考值" align="center"/>
- <el-table-column prop="real" label="实际巡检值" align="center"/>
- <el-table-column prop="name" label="隐患处置人" align="center"/>
- <el-table-column prop="phone" label="电话" align="center"/>
- <el-table-column prop="status" label="处置状态" align="center"/>
- <el-table-column prop="describe" label="处置描述反馈" align="center"/>
- <el-table-column label="操作" align="center" width="180" fixed="right">
- <template #default="scope">
- <el-button type="text" size="small" class="checkBtn">验收</el-button>
- <el-button type="text" size="small" class="reviewBtn">查看现场照片</el-button>
- </template>
- </el-table-column>
- </el-table>
-<!-- <div class="pageBtn">-->
-<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
-<!-- </div>-->
- </div>
- </div>
- </div>
- </div>
- <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
- <inspect-list ref="inspectListRef"></inspect-list>
- <unusual-list ref="unusualListRef"></unusual-list>
- </div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, ref, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { initBackEndControlRoutes } from '/@/router/backEnd';
-import { useUserInfo } from '/@/stores/userInfo';
-import { Session } from '/@/utils/storage';
-import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
-import { ElTable } from 'element-plus';
-import { FormInstance, FormRules, ElMessage } from 'element-plus';
-import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
-import { useRouter } from 'vue-router';
-import * as echarts from 'echarts'
-import inspectRecordDialog from './components/inspectRecordDialog.vue';
-import inspectList from './components/inspectList.vue';
-import unusualList from './components/unusualList.vue';
-import { departmentApi } from '/@/api/systemManage/department';
-import screenfull from "screenfull";
-// 定义接口来定义对象的类型
-interface stateType {
- tableData: Array<string>;
- unusualData: Array<any>;
- unchecked: null | number;
- unusual: null | number;
- uncheckedList: [];
- abnormalList: [];
- pageIndex: number;
- pageSize: number;
- totalSize: number;
- workTypeList: Array<type>;
- departmentList: [];
- timeType: Array<type>;
- classGroupList: Array<classGroup>;
- quotaList: [];
- inspectPointAllList: [];
- chartStatus:boolean;
- period: string;
- isFull:boolean;
- themeColor:string
-}
-interface type {
- id: number;
- name: string;
-}
-interface classGroup {
- id: number;
- groupName: string;
-}
-export default {
- name: 'inspectIndex',
- components: { inspectRecordDialog, inspectList, unusualList },
- setup() {
- const router = useRouter();
- const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
- const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
- const state = reactive<stateType>({
- isFull: false,
- themeColor: '#333',
- pageIndex: 1,
- pageSize: 5,
- totalSize: 0,
- tableData: [],
- unusualData: [
- {
- num: '202302280001',
- spot: '70736',
- time: '2023-03-02 17:44:25',
- job: '甲醇车间XXX巡检',
- area: 'xxx设备',
- refer: '8.9~10Mpa',
- real: '15.6Mpa',
- name: '黄公子',
- phone: '15261806176',
- status: '待验收',
- describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
- },
- {
- num: '202302280001',
- spot: '70736',
- time: '2023-03-02 17:44:25',
- job: '甲醇车间XXX巡检',
- area: 'xxx设备',
- refer: '8.9~10Mpa',
- real: '15.6Mpa',
- name: '黄公子',
- phone: '15261806176',
- status: '待验收',
- describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
- },
- {
- num: '202302280001',
- spot: '70736',
- time: '2023-03-02 17:44:25',
- job: '甲醇车间XXX巡检',
- area: 'xxx设备',
- refer: '8.9~10Mpa',
- real: '15.6Mpa',
- name: '黄公子',
- phone: '15261806176',
- status: '待验收',
- describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
- },
- {
- num: '202302280001',
- spot: '70736',
- time: '2023-03-02 17:44:25',
- job: '甲醇车间XXX巡检',
- area: 'xxx设备',
- refer: '8.9~10Mpa',
- real: '15.6Mpa',
- name: '黄公子',
- phone: '15261806176',
- status: '待验收',
- describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
- }
- ],
- unchecked: null,
- unusual: null,
- chartStatus: true,
- period: 'month',
- uncheckedList: [],
- abnormalList: [],
- workTypeList: [
- { id: 1, name: '日常任务' },
- { id: 2, name: '周期任务' }
- ],
- departmentList: [],
- timeType: [
- { id: 1, name: '分' },
- { id: 2, name: '小时' },
- { id: 3, name: '日' },
- { id: 4, name: '月' },
- { id: 5, name: '年' }
- ],
- classGroupList: [],
- quotaList: [],
- inspectPointAllList: []
- });
- const inspectRecordDialogRef = ref();
- const inspectListRef = ref();
- const unusualListRef = ref();
- interface User {
- name: string;
- startTime: string;
- endTime: string;
- info: string;
- }
-
- // 页面载入时执行方法
- onMounted(() => {
- getInspectRecord();
- getDayData();
- getDepartmentData();
- initXjLine()
- initSbtj()
- });
- const toFullscreen =()=>{
- console.log(state.isFull,'quanp',state.themeColor)
- const element = document.getElementById('bigScreen')
- if (!screenfull.isEnabled) {
- ElMessage.warning('暂不不支持全屏');
- return false;
- }
- screenfull.toggle(element);
- state.isFull = !state.isFull
- if(state.isFull == true){
- state.themeColor = '#11FEEE'
- }else{
- state.themeColor = '#333'
- }
- initXjLine()
- initSbtj()
- }
- const checkAllRecord =()=>{
- inspectListRef.value.departmentList = state.departmentList
- inspectListRef.value.showInspectList()
- }
- const checkAllList =()=>{
- unusualListRef.value.showUnusualList()
- }
- type EChartsOption = echarts.EChartsOption
- const initXjLine =()=>{
- let dom = document.getElementById(xjLine.value);
- let myChart = echarts.init(dom);
-
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['总趋势', '事业部'],
- height: '15%',
- top: 0,
- bottom: 0,
- padding:[1,1,1,0],
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- },
- grid: {
- top: '15%',
- left: '3%',
- right: '3%',
- bottom: 0,
- containLabel: true
- },
- toolbox: {
- feature: {
- // saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
- axisLabel: {
- color: state.themeColor
- }
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '总趋势',
- type: 'line',
- stack: 'Total',
- data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
- label:{
- show: true,
- color: '#95d475',
- fontSize: 12
- },
- lineStyle:{
- width: 1,
- color: '#95d475'
- },
- itemStyle:{
- color: '#95d475',
- borderColor: '#fff',
- borderWidth: 2
- }
- },
- {
- name: '事业部',
- type: 'line',
- stack: 'Total',
- data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
- label:{
- show: true,
- color: '#337ecc',
- fontSize: 12
- },
- lineStyle:{
- width: 1,
- color: '#337ecc'
- },
- itemStyle:{
- color: '#337ecc',
- borderColor: '#fff',
- borderWidth: 2
- }
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initSbtj =()=>{
- let dom = document.getElementById(sbtj.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- top: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 1048, name: '区域1' },
- { value: 735, name: '区域2' },
- { value: 580, name: '区域3' },
- { value: 484, name: '区域4' },
- { value: 735, name: '区域5' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- // 分页获取工作时段列表
- const getInspectRecord = async () => {
- const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
- let res = await inspectRecordApi().getInspectRecordByIndex(data);
- if (res.data.code === '200') {
- state.tableData = res.data.data.records;
- state.totalSize = res.data.data.total;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
- //获取部门
- const getDepartmentData = async () => {
- let res = await departmentApi().getDepartmentList();
- if (res.data.code === '200') {
- state.departmentList = res.data.data;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- //获取当日数据
- const getDayData = async () => {
- let res = await inspectRecordApi().getDayRecord();
- if (res.data.code === '200') {
- state.unchecked = res.data.data.noCheckTaskCount;
- state.unusual = res.data.data.abnormalTaskCount;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- const handleSizeChange = (val: number) => {
- state.pageSize = val;
- getInspectRecord();
- };
- const handleCurrentChange = (val: number) => {
- state.pageIndex = val;
- getInspectRecord();
- };
-
- const toLine = (item) => {
- console.log(item,'item')
- let id = item.id;
- console.log(id,'id')
- router.push({
- path: 'intelligentLine',
- query: {
- id: id
- }
- });
- };
-
- const toOverTime = (id) => {
- console.log(state.uncheckedList, 'list');
- router.push({
- path: 'inspectRecord',
- query: {
- id: id,
- }
- });
- };
- const toDetails = (type: string, item) => {
- inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
- };
- return {
- View,
- Edit,
- Delete,
- Refresh,
- xjLine,
- sbtj,
- Plus,
- router,
- inspectRecordDialogRef,
- inspectListRef,
- unusualListRef,
- toFullscreen,
- checkAllRecord,
- checkAllList,
- toLine,
- toOverTime,
- toDetails,
- handleSizeChange,
- handleCurrentChange,
- ...toRefs(state)
- };
- }
-};
-</script>
-
-<style scoped lang="scss">
-$homeNavLengh: 8;
-@media screen and (min-width: 1366px) {
-
-}
-@media screen and (min-width: 1200px) and (max-width: 1366px) {
-
-}
-@media screen and (max-width: 1200px) {
-
-}
-
-.home-container {
- height: calc(100vh - 144px);
- box-sizing: border-box;
- overflow: hidden;
- .full{
- position:fixed;
- height: 34px;
- line-height: 34px;
- top: 80px;
- right: 20px;
- z-index: 99999;
- }
- .topChart{
- width: 100%;
- height: calc((100% - 40px) / 3);
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
- &:last-of-type{
- margin-bottom: 0;
- }
-
- .chart-item{
- width: calc(60% - 20px);
- height: 100%;
- margin-right: 20px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- width: 40%;
- margin-right: 0;
- }
-
- .chart-tit{
- width: 100%;
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- .tit{
- font-size: 1.33rem;
- font-weight: bolder;
- }
- .filter-part{
- display: flex;
- align-items: center;
- justify-content: right;
- width: 20%;
- .el-switch{
- width: 100% !important;
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- }
- .chart{
- width: 100%;
- height: 88%;
- }
- .el-radio-group{
- width: 20%;
- display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-30%);
-
- .el-radio{
- width: 100%;
- margin-bottom: 4px;
- }
- }
- :deep(.active-ring-info){
- .active-ring-name{
- font-size: 1.5rem !important;
- text-align: center;
- }
- }
- }
- }
- .midChart{
- height: calc((100% - 40px) / 3);
- width: 100%;
- background: #fff;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
- padding: 20px;
-
- .chart-item{
- width: 100%;
- height: 100%;
- padding: 0 0 20px;
-
- .chart-tit{
- width: 100%;
- height: 15%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .tit{
- font-size: 20px;
- font-weight: bolder;
- }
- :deep(.el-switch__core){
- width: 120px;
-
- }
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- background: #ffeb87;
- padding: 4px 10px;
- margin-left: 20px;
- border-radius: 2px;
- border: 1px solid #ffae00;
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- height: 100%;
- span {
- color: #f3001e;
- margin: 0 4px;
- font-size: 18px;
- cursor: pointer;
- font-weight: bolder;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- .checkAll{
- cursor: pointer;
- &:hover{
- color: #409eff
- }
- }
- }
- .chart{
- width: 100%;
- height: 85%;
- margin-top: 10px;
-
- .el-table{
- height: 100% !important;
- :deep(.el-table__inner-wrapper){
- height: 100% !important;
- .el-table__header-wrapper {
- height: 20% !important;
- .el-table__header{
- height: 100% !important;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- }
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
- height: 100% !important;
- .el-table__body{
- height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
- height: 25% !important;
- td{
- height: 25% !important;
- padding: 0 0 !important;
- .left-info{
- display: flex;
- align-items: center;
- }
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .el-button{
- padding: 0 !important;
- }
- }
- }
- }
- }
- }
- }
- }
- }
-
- .pageBtn {
- position: absolute;
- bottom: 15px;
- right: 20px;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
- }
- }
- }
-
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
- }
-}
-.container{
- padding: 20px;
- background: url('../../../assets/spwbg.png') no-repeat center;
-
- .full{
- position:fixed;
- background: #fff;
- border-radius: 17px;
- box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
- z-index: 99999;
- }
- .topChart{
- .chart-item{
- border-radius: 4px;
- background: rgba(8, 109, 209, 0.2);
- border: 1px solid rgba(54, 252, 252, .6);
- backdrop-filter: blur(5px);
- position: relative;
- z-index: 2;
- &:last-of-type{
- position: relative;
- z-index: 1;
- }
- .el-radio.is-bordered.is-checked{
- border-color: #11FEEE !important;
- :deep(.el-radio__inner){
- border-color: #11FEEE !important;
- background: #11FEEE !important;
- }
- :deep(.el-radio__label){
- color: #11FEEE !important
- }
- }
- .chart-tit{
- .tit{
- color: #11FEEE;
- }
- ::v-deep(.el-popper){
- background-color: rgba(10,31,92,1);
- border: 1px solid rgba(17,254,238,.4);
- color: #11FEEE;
- .el-cascader-node{
- .in-active-path{
- background: #0049af;
- }
- &:hover{
- background: #0049af;
- }
- }
- .el-cascader-node__label{
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- .el-select-dropdown__item{
- color: #11FEEE;
- }
- .el-select-dropdown__item.hover{
- background: #0049af;
- }
- }
- ::v-deep(.el-popper__arrow){
- &::before{
- background-color: rgba(10,31,92,.6) !important;
- border: 1px solid rgba(17,254,238,.4);
- }
- }
- ::v-deep(.el-input__wrapper){
- box-shadow: none;
- border: 1px solid rgba(17,254,238,.2);
- background: rgba(10,31,92,.6) !important;
- height: 1.5rem;
- color: #11FEEE;
-
- input{
- font-size: 0.8rem;
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- }
- }
- .chart{
- .el-table {
- color: #11FEEE !important;
- background-color: rgba(0,0,0,0) !important;
- :deep(thead){
- color: #11FEEE !important;
- }
- :deep(tr){
- background-color: rgba(0,0,0,0) !important;
- .el-table__cell{
- background-color: rgba(0,0,0,0) !important;
- }
- }
- }
- }
- }
- }
- .midChart{
- border-radius: 4px;
- background: rgba(8, 109, 209, 0.2);
- border: 1px solid rgba(54, 252, 252, .6);
- backdrop-filter: blur(5px);
- position: relative;
- z-index: 3;
- .tit{
- color: #11FEEE;
- }
- .checkAll{
- cursor: pointer;
- color: #11feee;
- &:hover{
- color: #409eff
- }
- }
- .el-table {
- color: #11FEEE !important;
- background-color: rgba(0,0,0,0) !important;
- :deep(thead){
- color: #11FEEE !important;
- background-color: #092846 !important
- }
- :deep(tr){
- background-color: rgba(0,0,0,0) !important;
- .el-table__cell{
- background-color: rgba(0,0,0,0) !important;
- }
- .el-table-fixed-column--right{
- background-color: #092846 !important
- }
- }
- }
-
- ::v-deep(.el-popper){
- background-color: rgba(10,31,92,1);
- border: 1px solid rgba(17,254,238,.4);
- color: #11FEEE;
- .el-cascader-node{
- .in-active-path{
- background: #0049af;
- }
- &:hover{
- background: #0049af;
- }
- }
- .el-cascader-node__label{
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- .el-select-dropdown__item{
- color: #11FEEE;
- }
- .el-select-dropdown__item.hover{
- background: #0049af;
- }
- }
- ::v-deep(.el-popper__arrow){
- &::before{
- background-color: rgba(10,31,92,.6) !important;
- border: 1px solid rgba(17,254,238,.4);
- }
- }
- ::v-deep(.el-input__wrapper){
- box-shadow: none;
- border: 1px solid rgba(17,254,238,.2);
- background: rgba(10,31,92,.6) !important;
- height: 1.5rem;
- color: #11FEEE;
-
- input{
- font-size: 0.8rem;
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- }
- }
-}
-.el-input {
- width: 100% !important;
-}
-.el-date-editor::v-deep {
- width: 100%;
-}
-.el-select {
- width: 100%;
-}
-:deep(.el-textarea.is-disabled .el-textarea__inner) {
- background-color: var(--el-card-bg-color);
- color: var(--el-input-text-color, var(--el-text-color-regular));
-}
-:deep(.el-input.is-disabled .el-input__inner) {
- color: var(--el-input-text-color, var(--el-text-color-regular));
-}
-:deep(.el-input.is-disabled .el-input__wrapper) {
- background-color: var(--el-card-bg-color);
-}
-</style>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index a52fdca..392db13 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -1,17 +1,5 @@
<template>
<div class="charts-cont">
- <div :class="spiChart">
- <el-cascader
- class="spiSe"
- :teleported="false"
- v-model="spiValue"
- :options="departList"
- :props="spiProps"
- :show-all-levels="false"
- @change="handleChange"
- />
- </div>
-
<div class="spi" :id="spi">
</div>
@@ -32,12 +20,13 @@
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme";
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
+ import {riskWarningApi} from "/@/api/riskWarning";
interface stateType {
- spiValue: number;
- departList: Array<any>;
- spiChart: string;
- spiProps: object
+ spiData: Array<any>;
+ year: string;
+ monthList: Array<string>;
+ valueList: Array<string>
}
export default defineComponent({
name: 'SPI',
@@ -53,22 +42,21 @@
const { screenTheme } = storeToRefs(screenThemes);
const spi = ref("eChartSpi" + Date.now() + Math.random())
const state = reactive<stateType>({
- spiValue: 1,
- departList: [],
- spiProps: {
- expandTrigger: 'hover',
- checkStrictly: true,
- value: 'depId',
- label: 'depName',
- },
- spiChart: 'spi-dark'
+ spiData: [],
+ year: '',
+ monthList: [],
+ valueList: [],
})
- // 获取部门列表
- const getAllDepartment = async () => {
- let res = await teamManageApi().getAllDepartment();
+ // 获取spi数据
+ const getSpiData = async () => {
+ let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
if (res.data.code === '200') {
- state.departList = JSON.parse(JSON.stringify(res.data.data))
+ state.spiData = JSON.parse(JSON.stringify(res.data.data))
+ state.monthList = Array.from(state.spiData, ({ month }) => month + '月');
+ state.valueList = Array.from(state.spiData, ({ spiVal }) => spiVal);
+ state.year = res.data.data[0].year
+ initSpi()
} else {
ElMessage({
type: 'warning',
@@ -76,7 +64,6 @@
});
}
};
-
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
const initSpi =()=>{
@@ -108,7 +95,7 @@
{
type: 'category',
boundaryGap: false,
- data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: state.monthList,
axisLine:{
show: true,
lineStyle:{
@@ -149,70 +136,106 @@
}
],
series: [
+ // {
+ // name: '危险线',
+ // data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
+ // type: 'line',
+ // lineStyle:{
+ // width: 0
+ // },
+ // areaStyle: {
+ // color: {
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0.1,
+ // color: "rgba(216,55,55)", // 线处的颜色
+ // },
+ // {
+ // offset: 0.9,
+ // color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
+ // },
+ // ],
+ // }
+ // },
+ // showSymbol: false,
+ // // stack: 'Total',
+ // smooth: true
+ // },
+ // {
+ // name: '警告线',
+ // data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
+ // type: 'line',
+ // lineStyle:{
+ // width: 0
+ // },
+ // areaStyle: {
+ // color: {
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0.1,
+ // color: "rgba(235,194,80)", // 线处的颜色
+ // },
+ // {
+ // offset: 0.9,
+ // color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
+ // },
+ // ],
+ // }
+ // },
+ // showSymbol: false,
+ // // stack: 'Total',
+ // smooth: true
+ // },
+ // {
+ // name: '注意线',
+ // data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
+ // type: 'line',
+ // lineStyle:{
+ // width: 0
+ // },
+ // areaStyle: {
+ // color: {
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0.1,
+ // color: "rgba(147,208,81)", // 线处的颜色
+ // },
+ // {
+ // offset: 0.9,
+ // color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
+ // },
+ // ]
+ // },
+ // },
+ // showSymbol: false,
+ // // stack: 'Total',
+ // smooth: true
+ // },
{
- name: '危险线',
- data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
+ name: 'SPI预警指数值',
+ data: state.valueList,
type: 'line',
+ triggerLineEvent: true,
+ label:{
+ show: true,
+ color: '#23E5E5',
+ fontSize: fontSize(12)
+ },
lineStyle:{
- width: 0
- },
- areaStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0.1,
- color: "rgba(216,55,55)", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
- },
- ],
- }
- },
- showSymbol: false,
- // stack: 'Total',
- smooth: true
- },
- {
- name: '警告线',
- data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
- type: 'line',
- lineStyle:{
- width: 0
- },
- areaStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0.1,
- color: "rgba(235,194,80)", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
- },
- ],
- }
- },
- showSymbol: false,
- // stack: 'Total',
- smooth: true
- },
- {
- name: '注意线',
- data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
- type: 'line',
- lineStyle:{
- width: 0
+ width: 2,
+ color: '#23E5E5'
},
areaStyle: {
color: {
@@ -229,26 +252,8 @@
offset: 0.9,
color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
},
- ]
- },
- },
- showSymbol: false,
- // stack: 'Total',
- smooth: true
- },
- {
- name: 'SPI预警指数值',
- data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
- type: 'line',
- triggerLineEvent: true,
- label:{
- show: true,
- color: '#23E5E5',
- fontSize: fontSize(12)
- },
- lineStyle:{
- width: 2,
- color: '#23E5E5'
+ ],
+ }
},
itemStyle:{
color: '#23E5E5',
@@ -266,20 +271,9 @@
});
}
- const getTheme =()=>{
- if(screenTheme.value.isDark){
- state.spiChart = 'spi-dark'
- }else{
- state.spiChart = 'spi-light'
- }
- }
watchEffect(() => {
- if(props.theme){
- state.spiChart = 'spi-dark'
- }else{
- state.spiChart = 'spi-light'
- }
+ getSpiData()
})
function fontSize(val){
@@ -289,9 +283,8 @@
// 页面载入时执行方法
onMounted(() => {
- getAllDepartment();
+ getSpiData();
initSpi();
- getTheme();
});
return {
@@ -311,105 +304,6 @@
padding: 2%;
position: relative;
- .spi-dark{
- position: absolute;
- width: 25% !important;
- top: 0;
- left: 2rem;
- z-index: 99999;
-
- ::v-deep(.el-cascader){
- width: 100% !important;
- }
- ::v-deep(.el-popper){
- background-color: rgba(10,31,92,1);
- border: 1px solid rgba(17,254,238,.4);
- color: #11FEEE;
- .el-cascader-node__label{
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- .el-cascader-node{
- &:hover{
- background: #0049af;
- }
- }
- }
- ::v-deep(.el-popper__arrow){
- &::before{
- background-color: rgba(10,31,92,.6) !important;
- border: 1px solid rgba(17,254,238,.4);
- }
- }
- ::v-deep(.el-input__wrapper){
- width: 20%;
- box-shadow: none;
- border: 1px solid rgba(17,254,238,.2);
- background: rgba(10,31,92,.6) !important;
- height: 2.5rem;
- color: #11FEEE;
-
- input{
- font-size: 1.25rem;
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- }
- }
-
- .spi-light{
- position: absolute;
- width: 25% !important;
- top: 0;
- left: 2rem;
- z-index: 99999;
-
- ::v-deep(.el-cascader){
- width: 100% !important;
- }
- ::v-deep(.el-popper){
- background-color: #fff;
- border: 1px solid #ccc;
- color: #000;
- .el-cascader-node__label{
- color: #000;
- }
- .el-icon{
- color: #000;
- }
- .el-cascader-node{
- &:hover{
- background: #ccc;
- }
- }
- }
- ::v-deep(.el-popper__arrow){
- &::before{
- background-color: #fff !important;
- border: 1px solid #ccc;
- }
- }
- ::v-deep(.el-input__wrapper){
- width: 20%;
- box-shadow: none;
- border: 1px solid #ccc;
- background: #fff !important;
- height: 2.5rem;
- color: #000;
-
- input{
- font-size: 1.25rem;
- color: #000;
- }
- .el-icon{
- color: #000;
- }
- }
- }
.spi{
width: 100%;
height: 100%;
diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
index 2f15dfe..30f8621 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/accident.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
@@ -1,11 +1,16 @@
<template>
<div class="charts-cont">
- <div :class="choose" >
- <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
- <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
+ <div :class="selector">
+ <el-cascader
+ class="timeSe"
+ :teleported="false"
+ v-model="timeValue"
+ :options="optionList"
+ :props="riskProps"
+ @change="changeTime"
+ />
</div>
- <div v-show="cur===1" class="month" :id="accidentMonth"></div>
- <div v-show="cur===2" class="month" :id="accidentYear"></div>
+ <div class="month" :id="accidentMonth"></div>
</div>
</template>
@@ -22,12 +27,16 @@
import * as echarts from "echarts";
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme"
-
+ import { riskWarningApi } from '/@/api/riskWarning';
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
interface stateType {
- cur: number,
curColor: string,
- choose: string
- }
+ accData: Array<any>;
+ timeValue: Array<any>,
+ optionList: Array<any>,
+ selector: string,
+ riskProps: object
+ }
export default defineComponent({
name: 'accident',
components: {},
@@ -41,22 +50,127 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
- const accidentYear = ref("eChartFix" + Date.now() + Math.random())
const state = reactive<stateType>({
- cur: 1,
curColor: '#fff',
- choose: 'choose-dark'
+ accData: [],
+ timeValue: [],
+ optionList: [],
+ riskProps: {
+ expandTrigger: 'hover'
+ },
+ selector: 'select-dark'
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ };
+ const makeList = () =>{
+ for(let i=0;i<=60;i++){
+ const newObj = {
+ label: 1990 + i + '',
+ value: 1990 + i + '',
+ children: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ },
+ {
+ label: '十一月',
+ value: 11
+ },
+ {
+ label: '十二月',
+ value: 12
+ }
+ ]
+ }
+ state.optionList.push(newObj)
+ }
+ }
+ const getTime = () =>{
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ const temp = curTime.split('-')
+ state.timeValue[0] = temp[0]
+ state.timeValue[1] = Number(temp[1])
+ }
+ const getDataByYearId = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: state.timeValue[1],
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ if(state.timeValue[1] == 0){
+ data.beginMonth = 1
+ data.endMonth = 12
+ }
+ let res = await riskWarningApi().getRiskByTimeDep(data);
+ if (res.data.code === '200') {
+ state.accData = res.data.data[0].detail
+ const oneList = res.data.data[0].detail[0].count
+ const twoList = res.data.data[0].detail[1].count
+ const threeList = res.data.data[0].detail[2].count
+ const fourList = res.data.data[0].detail[3].count
+ const fiveList = res.data.data[0].detail[4].count
+ initAccidentByMonth(oneList,twoList,threeList,fourList,fiveList)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
- const changeTab =(i)=>{
- state.cur = i
- nextTick(()=>{
- initAccidentByYear();
- })
- }
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initAccidentByMonth =()=>{
+ const initAccidentByMonth =(one:number,two:number,three:number,four:number,five:number)=>{
let dom = document.getElementById(accidentMonth.value);
let myChart = echarts.init(dom);
@@ -78,7 +192,7 @@
},
series: [
{
- name: '月度数据',
+ name: '事故等级数量',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
@@ -106,11 +220,11 @@
}
},
data: [
- { value: 1, name: '特别重大事故' },
- { value: 10, name: '重大事故' },
- { value: 20, name: '较大事故' },
- { value: 33, name: '一般事故' },
- { value: 50, name: '未遂事故' }
+ { value: one, name: '特别重大事故' },
+ { value: two, name: '重大事故' },
+ { value: three, name: '较大事故' },
+ { value: four, name: '一般事故' },
+ { value: five, name: '未遂事故' }
],
center: ['50%','60%']
}
@@ -123,74 +237,7 @@
myChart.resize();
});
}
- // 隐患整改情况
- const initAccidentByYear =()=>{
- let dom = document.getElementById(accidentYear.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '0',
- left: 'center',
- itemWidth: fontSize(10),
- itemHeight: fontSize(8),
- textStyle:{
- color: 'auto',
- fontSize: fontSize(11)
- }
- },
- series: [
- {
- name: '年度数据',
- type: 'pie',
- radius: ['50%', '80%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: fontSize(2)
- },
- label: {
- show: false,
- position: 'outer',
- fontSize: fontSize(10),
- textBorderWidth: 0,
- width: fontSize(40),
- overflow: 'break'
- },
- // labelLine: {
- // show: true,
- // length: fontSize(10),
- // length2: fontSize(10)
- // },
- emphasis: {
- label: {
- show: true,
- fontSize: fontSize(22),
- fontWeight: 'bold'
- }
- },
- data: [
- { value: 10, name: '特别重大事故' },
- { value: 20, name: '重大事故' },
- { value: 100, name: '较大事故' },
- { value: 130, name: '一般事故' },
- { value: 150, name: '未遂事故' }
- ],
- center: ['50%','60%']
- }
- ]
- };
-
- option && myChart.setOption(option);
-
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
@@ -198,25 +245,33 @@
}
const getTheme =()=>{
if(screenTheme.value.isDark){
- state.choose = 'choose-dark'
+ state.selector = 'select-dark'
}else{
- state.choose = 'choose-light'
+ state.selector = 'select-light'
}
}
watchEffect(() => {
if(props.theme){
- state.choose = 'choose-dark'
+ state.selector = 'select-dark'
}else{
- state.choose = 'choose-light'
+ state.selector = 'select-light'
}
+ getDataByYearId()
})
+ const changeTime = (value)=>{
+ state.timeValue[0] = value[0]
+ state.timeValue[1] = value[1]
+ getDataByYearId()
+ }
// 页面载入时执行方法
onMounted(() => {
- initAccidentByMonth();
- getTheme()
+ getTheme();
+ getTime();
+ makeList();
+ getDataByYearId();
// initAccidentByYear();
});
@@ -226,9 +281,8 @@
return {
accidentMonth,
- accidentYear,
Search,
- changeTab,
+ changeTime,
fontSize,
...toRefs(state)
};
@@ -243,58 +297,115 @@
padding: 5%;
position: relative;
- .choose-dark{
+ .select-dark{
position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
+ z-index: 99999;
+ top: -20px;
+ right: 3rem;
+ width: 30%;
+ height: 1.5rem;
+ margin-right: 0.8rem;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: rgba(17,254,238,.4);
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
border: 1px solid rgba(17,254,238,.4);
- border-radius: 2px;
- cursor: pointer;
- }
- div:hover{
color: #11FEEE;
- border: 1px solid #11FEEE;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
}
- .act{
+ ::v-deep(.el-cascader-menu){
+ min-width: 50px !important;
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
color: #11FEEE;
- border: 1px solid #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
}
}
- .choose-light{
- position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: #ccc;
+ .select-light{
+ position: absolute;
+ z-index: 99999;
+ top: -20px;
+ right: 3rem;
+ width: 30%;
+ height: 20px;
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(255,255,255,1);
border: 1px solid #ccc;
- border-radius: 2px;
- cursor: pointer;
+ color: #fff;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
}
- div:hover{
- color: #333;
- border: 1px solid #333;
+ ::v-deep(.el-cascader-menu){
+ min-width: 80px !important;
}
- .act{
- color: #333;
- border: 1px solid #333;
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(255,255,255,.6) !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 1.5rem;
+ color: #fff;
+
+ input{
+ font-size: 0.8rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
}
}
.month{
diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
index ccf8a14..0f140b4 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/danger.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
@@ -1,15 +1,16 @@
<template>
<div class="charts-cont">
-<!-- <el-select v-model="selected" class="choose" size="small">-->
-<!-- <el-option label="月度" value="1"/>-->
-<!-- <el-option label="年度" value="2"/>-->
-<!-- </el-select>-->
- <div :class="choose">
- <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
- <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
- </div>
- <div v-show="cur===1" class="month" :id="dangerMonth"></div>
- <div v-show="cur===2" class="year" :id="dangerYear"></div>
+ <div :class="selector">
+ <el-cascader
+ class="timeSe"
+ :teleported="false"
+ v-model="timeValue"
+ :options="optionList"
+ :props="riskProps"
+ @change="changeTime"
+ />
+ </div>
+ <div class="month" :id="dangerMonth"></div>
</div>
</template>
@@ -36,11 +37,15 @@
import * as echarts from "echarts";
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme";
+ import {riskWarningApi} from "/@/api/riskWarning";
interface stateType {
- cur: number,
- choose: string
+ selector: string,
+ timeValue: Array<any>,
+ optionList: Array<any>,
+ riskProps: object,
+ dangerData: Array<any>
}
export default defineComponent({
name: 'danger',
@@ -55,21 +60,131 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
- const dangerYear = ref("eChartFix" + Date.now() + Math.random())
const state = reactive<stateType>({
- cur: 1,
- choose: 'choose-dark'
+ selector: 'select-dark',
+ timeValue: [],
+ dangerData: [],
+ optionList: [],
+ riskProps: {
+ expandTrigger: 'hover'
+ },
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ }
+ const makeList = () =>{
+ for(let i=0;i<=60;i++){
+ const newObj = {
+ label: 1990 + i + '',
+ value: 1990 + i + '',
+ children: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ },
+ {
+ label: '十一月',
+ value: 11
+ },
+ {
+ label: '十二月',
+ value: 12
+ }
+ ]
+ }
+ state.optionList.push(newObj)
+ }
+ }
+ const getTime = () =>{
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ const temp = curTime.split('-')
+ state.timeValue[0] = temp[0]
+ state.timeValue[1] = Number(temp[1])
+ }
- const changeTab =(i)=>{
- state.cur = i
- nextTick(()=>{
- initdangerByYear()
- })
- }
+ const changeTime = (value)=>{
+ state.timeValue[0] = value[0]
+ state.timeValue[1] = value[1]
+ }
+
+ const getDataByYearId = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: state.timeValue[1],
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ if(state.timeValue[1] == 0){
+ data.beginMonth = 1
+ data.endMonth = 12
+ }
+ let res = await riskWarningApi().getSelfPreventByTimeDep(data);
+ if (res.data.code === '200') {
+ state.dangerData = res.data.data
+ const danger = [
+ {value: state.dangerData[0].detail.lightRiskCount,name: '一般隐患'},
+ {value: state.dangerData[0].detail.heavyRiskCount,name: '重大隐患'}
+ ]
+ initdangerByMonth(danger)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initdangerByMonth =()=>{
+ const initdangerByMonth =(danger)=>{
let dom = document.getElementById(dangerMonth.value);
let myChart = echarts.init(dom);
@@ -116,10 +231,7 @@
fontWeight: 'bold'
}
},
- data: [
- { value: 235, name: '一般隐患' },
- { value: 1048, name: '重大隐患' }
- ],
+ data: danger,
center: ['50%','55%']
}
]
@@ -131,103 +243,42 @@
myChart.resize();
});
}
- // 隐患整改情况
- const initdangerByYear =()=>{
- let dom = document.getElementById(dangerYear.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'item'
- },
- color: ['#FAC858','#EE6666'],
- legend: {
- top: '8%',
- left: 'center',
- itemWidth: fontSize(10),
- itemHeight: fontSize(8),
- textStyle:{
- color: 'auto',
- fontSize: fontSize(11)
- }
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: '65%',
- avoidLabelOverlap: true,
- label: {
- show: true,
- position: 'inside',
- fontSize: fontSize(12),
- color: '#ffffff',
- textBorderWidth: 0,
- width: 30,
- overflow: 'break'
- },
- labelLine: {
- show: true,
- length: 10,
- length2: 10
- },
- emphasis: {
- label: {
- show: true,
- fontSize: fontSize(22),
- fontWeight: 'bold'
- }
- },
- data: [
- { value: 35, name: '一般隐患' },
- { value: 1048, name: '重大隐患' }
- ],
- center: ['50%','55%']
- }
- ]
- };
-
- option && myChart.setOption(option);
-
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
}
const getTheme =()=>{
- if(screenTheme.value.isDark){
- state.choose = 'choose-dark'
- }else{
- state.choose = 'choose-light'
- }
+ if(screenTheme.value.isDark){
+ state.selector = 'select-dark'
+ }else{
+ state.selector = 'select-light'
+ }
}
watchEffect(() => {
- if(props.theme){
- state.choose = 'choose-dark'
- }else{
- state.choose = 'choose-light'
- }
+ if(props.theme){
+ state.selector = 'select-dark'
+ }else{
+ state.selector = 'select-light'
+ }
+ getDataByYearId()
})
// 页面载入时执行方法
onMounted(() => {
- initdangerByMonth();
+ getTime()
getTheme()
+ makeList()
+ getDataByYearId()
});
return {
dangerMonth,
- dangerYear,
Search,
+ changeTime,
fontSize,
- changeTab,
...toRefs(state)
};
},
@@ -241,60 +292,117 @@
padding: 2% 2% 0;
position: relative;
- .choose-dark{
- position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
+ .select-dark{
+ position: absolute;
+ z-index: 99999;
+ bottom: 0;
+ left: 2rem;
+ width: 50%;
+ height: 1.5rem;
+ margin-right: 0.8rem;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: rgba(17,254,238,.4);
- border: 1px solid rgba(17,254,238,.4);
- border-radius: 2px;
- cursor: pointer;
- }
- div:hover{
- color: #11FEEE;
- border: 1px solid #11FEEE;
- }
- .act{
- color: #11FEEE;
- border: 1px solid #11FEEE;
- }
- }
- .choose-light{
- position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 50px !important;
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
+ color: #11FEEE;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: #ccc;
- border: 1px solid #ccc;
- border-radius: 2px;
- cursor: pointer;
- }
- div:hover{
- color: #333;
- border: 1px solid #333;
- }
- .act{
- color: #333;
- border: 1px solid #333;
- }
- }
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
+ .select-light{
+ position: absolute;
+ z-index: 99999;
+ bottom: 0;
+ left: 2rem;
+ width: 50%;
+ height: 20px;
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(255,255,255,1);
+ border: 1px solid #ccc;
+ color: #fff;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 80px !important;
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(255,255,255,.6) !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 1.5rem;
+ color: #fff;
+
+ input{
+ font-size: 0.8rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
.month{
width: 100%;
height: 100%;
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
index 038699b..c689cad 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/risk.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -1,15 +1,17 @@
<template>
<div class="charts-cont">
- <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
- <el-option
- v-for="item in optionList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ <div :class="selector">
+ <el-cascader
+ class="timeSe"
+ :teleported="false"
+ v-model="timeValue"
+ :options="optionList"
+ :props="riskProps"
+ @change="changeTime"
/>
- </el-select>
- <div v-show="curValue===true" class="risk" :id="risk1"></div>
- <div v-show="curValue===false" class="risk" :id="risk2"></div>
+ </div>
+ <div class="risk" :id="risk1"></div>
+<!-- <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
</div>
</template>
@@ -25,21 +27,32 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
- import {useScreenTheme} from "/@/stores/screenTheme";
+ import { useScreenTheme } from "/@/stores/screenTheme";
+ import { riskWarningApi } from '/@/api/riskWarning';
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
interface stateType {
curValue: boolean,
- month: number,
+ timeValue: Array<any>,
optionList: Array<any>,
- selector: string
+ selector: string,
+ riskData: Array<any>,
+ riskProps: object,
+ departmentList: Array<any>,
+ departmentRecursionList: Array<DepartmentState>;
}
+ interface DepartmentState {
+ depId: number;
+ depName: string;
+ }
export default defineComponent({
name: 'risk',
components: {},
props:{
size: Number,
- theme: Boolean
+ theme: Boolean,
+ dep: Array
},
setup(props) {
const userInfo = useUserInfo()
@@ -47,76 +60,192 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
- const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
+ // const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
const state = reactive<stateType>({
curValue: true,
- month: 0,
- optionList: [
- {
- label: '年度',
- value: 0
- },
- {
- label: '一月',
- value: 1
- },
- {
- label: '二月',
- value: 2
- },
- {
- label: '三月',
- value: 3
- },
- {
- label: '四月',
- value: 4
- },
- {
- label: '五月',
- value: 5
- },
- {
- label: '六月',
- value: 6
- },
- {
- label: '七月',
- value: 7
- },
- {
- label: '八月',
- value: 8
- },
- {
- label: '九月',
- value: 9
- },
- {
- label: '十月',
- value: 10
- }
- ],
- selector: 'select-dark'
+ timeValue: [],
+ optionList: [],
+ riskProps: {
+ expandTrigger: 'hover'
+ },
+ selector: 'select-dark',
+ riskData: [],
+ departmentList: [],
+ departmentRecursionList: [],
+ myVar: 0
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ };
+ const makeList = () =>{
+ for(let i=0;i<=60;i++){
+ const newObj = {
+ label: 1990 + i + '',
+ value: 1990 + i + '',
+ children: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ },
+ {
+ label: '十一月',
+ value: 11
+ },
+ {
+ label: '十二月',
+ value: 12
+ }
+ ]
+ }
+ state.optionList.push(newObj)
+ }
+ }
+ // const swi = setInterval(()=>{
+ // state.curValue = !state.curValue
+ // if(state.curValue == true){
+ // nextTick(()=>{
+ // initRisk1()
+ // })
+ // }else{
+ // nextTick(()=>{
+ // initRisk2()
+ // })
+ // }
+ //
+ // },5000)
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
- const swi = setInterval(()=>{
- state.curValue = !state.curValue
- if(state.curValue == true){
- nextTick(()=>{
- initRisk1()
- })
- }else{
- nextTick(()=>{
- initRisk2()
- })
- }
+ const recursion = (value: any) => {
+ for (let i of value) {
+ if (i.children.length !== 0) {
+ state.departmentRecursionList.push(i);
+ recursion(i.children);
+ } else {
+ state.departmentRecursionList.push(i);
+ }
+ }
+ };
+ // const recursion = (value: any) => {
+ // for (let i of value) {
+ // if (i.children.length !== 0) {
+ // state.departmentRecursionList.push(i);
+ // recursion(i.children);
+ // } else {
+ // state.departmentRecursionList.push(i);
+ // }
+ // }
+ // };
+ const getDataByYearId = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: state.timeValue[1],
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ if(state.timeValue[1] == 0){
+ data.beginMonth = 1
+ data.endMonth = 12
+ }
+ let res = await riskWarningApi().getPreventByTimeDep(data);
+ if (res.data.code === '200') {
+ state.riskData = res.data.data
+ const depList = []
+ const deathList = []
+ const hardList = []
+ const lightList = []
+ for(let index in state.riskData){
+ state.riskData[index].depId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.riskData[index].depId))?.depName;
+ depList.push(state.riskData[index].depId)
+ deathList.push(state.riskData[index].detail.deathCount)
+ hardList.push(state.riskData[index].detail.heavyInjureCount)
+ lightList.push(state.riskData[index].detail.lightInjureCount)
+ }
+ // state.departmentList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
+ if(depList.length == 0){
+ depList.push('该部门不包含子部门数据')
+ deathList.push(0)
+ hardList.push(0)
+ lightList.push(0)
+ }
+ initRisk1(depList,deathList,hardList,lightList)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
- },5000)
+ const changeTime = (value)=>{
+ state.timeValue[0] = value[0]
+ state.timeValue[1] = value[1]
+ getDataByYearId()
+ }
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initRisk1 =()=>{
+ const initRisk1 =(depList,deathList,hardList,lightList)=>{
let dom = document.getElementById(risk1.value);
let myChart = echarts.init(dom);
@@ -130,8 +259,33 @@
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
+ // dataZoom: {
+ // type: 'slider',
+ // show: true,
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // realtime: true,
+ // top: 20,
+ // left: 10,
+ // height: 12,
+ // width: 80,
+ // start: 0,
+ // end: 100,
+ // orient: 'horizontal'
+ // },
+ dataZoom: [
+ //滑动条
+ {
+ xAxisIndex: 0, //这里是从X轴的0刻度开始
+ show: false, //是否显示滑动条，不影响使用
+ type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+ startValue: 0, // 从头开始。
+ endValue: 6, // 一次性展示几个。
+ },
+ ],
legend: {
- top: '1%',
+ top: '0',
left: 'center',
itemWidth: fontSize(10),
itemHeight: fontSize(8),
@@ -148,8 +302,7 @@
},
xAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
+ data: depList,
axisLine:{
show: true,
lineStyle:{
@@ -157,7 +310,8 @@
}
},
axisLabel:{
- color: '#999'
+ color: '#999',
+ fontSize: fontSize(9)
}
},
yAxis: {
@@ -186,8 +340,7 @@
emphasis: {
focus: 'series'
},
- // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
- data: [320, 302, 301, 334, 390, 330],
+ data: deathList,
barCategoryGap: '50%'
},
{
@@ -200,8 +353,7 @@
emphasis: {
focus: 'series'
},
- // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
- data: [120, 132, 101, 134, 90, 230],
+ data: hardList,
barCategoryGap: '50%'
},
{
@@ -214,131 +366,138 @@
emphasis: {
focus: 'series'
},
- // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
- data: [220, 182, 191, 234, 290, 330],
+ data: lightList,
barCategoryGap: '50%'
}
]
};
-
- option && myChart.setOption(option);
+ // option && myChart.setOption(option);
+ if (option && typeof option === 'object') {
+ myChart.setOption(option);
+ state.myVar = setInterval(function(){
+ if (option.dataZoom[0].endValue == depList.length ) {
+ option.dataZoom[0].endValue = 4;
+ option.dataZoom[0].startValue = 0;
+ } else {
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
+ }
+ myChart.setOption(option);
+ }, 6000)
+ }
window.addEventListener("resize",function (){
myChart.resize();
});
- echarts.init(document.getElementById(risk2.value)).dispose()
+ // echarts.init(document.getElementById(risk2.value)).dispose()
}
- const initRisk2 =()=>{
- let dom = document.getElementById(risk2.value);
- let myChart = echarts.init(dom);
-
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- // Use axis to trigger tooltip
- type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
- }
- },
- legend: {
- top: '1%',
- left: 'center',
- itemWidth: fontSize(10),
- itemHeight: fontSize(8),
- textStyle:{
- color: 'auto',
- fontSize: fontSize(12)
- }
- },
- grid: {
- left: '2%',
- right: '4%',
- bottom: '0',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
- axisLine:{
- show: true,
- lineStyle:{
- color: '#999'
- }
- },
- axisLabel:{
- color: '#999'
- }
- },
- yAxis: {
- type: 'value',
- axisLine:{
- show: true,
- lineStyle:{
- type: 'dotted'
- }
- },
- axisLabel:{
- color: '#999'
- },
- splitLine:{
- show: false
- }
- },
- series: [
- {
- name: '可能造成死亡的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
- data: [320, 301, 334, 390, 330, 320],
- barCategoryGap: '50%'
- },
- {
- name: '可能造成重伤的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
- data: [90, 230, 210, 132, 101, 134],
- barCategoryGap: '50%'
- },
- {
- name: '可能造成轻伤的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
- data: [290, 330, 310, 191, 234, 290],
- barCategoryGap: '50%'
- }
- ]
- };
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- echarts.init(document.getElementById(risk1.value)).dispose()
- }
+ // const initRisk2 =()=>{
+ // let dom = document.getElementById(risk2.value);
+ // let myChart = echarts.init(dom);
+ //
+ // let option: EChartsOption;
+ //
+ // option = {
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // // Use axis to trigger tooltip
+ // type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ // }
+ // },
+ // legend: {
+ // top: '1%',
+ // left: 'center',
+ // itemWidth: fontSize(10),
+ // itemHeight: fontSize(8),
+ // textStyle:{
+ // color: 'auto',
+ // fontSize: fontSize(12)
+ // }
+ // },
+ // grid: {
+ // left: '2%',
+ // right: '4%',
+ // bottom: '0',
+ // containLabel: true
+ // },
+ // xAxis: {
+ // type: 'category',
+ // data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
+ // axisLine:{
+ // show: true,
+ // lineStyle:{
+ // color: '#999'
+ // }
+ // },
+ // axisLabel:{
+ // color: '#999'
+ // }
+ // },
+ // yAxis: {
+ // type: 'value',
+ // axisLine:{
+ // show: true,
+ // lineStyle:{
+ // type: 'dotted'
+ // }
+ // },
+ // axisLabel:{
+ // color: '#999'
+ // },
+ // splitLine:{
+ // show: false
+ // }
+ // },
+ // series: [
+ // {
+ // name: '可能造成死亡的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [320, 301, 334, 390, 330, 320],
+ // barCategoryGap: '50%'
+ // },
+ // {
+ // name: '可能造成重伤的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [90, 230, 210, 132, 101, 134],
+ // barCategoryGap: '50%'
+ // },
+ // {
+ // name: '可能造成轻伤的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [290, 330, 310, 191, 234, 290],
+ // barCategoryGap: '50%'
+ // }
+ // ]
+ // };
+ //
+ // option && myChart.setOption(option);
+ // window.addEventListener("resize",function (){
+ // myChart.resize();
+ // });
+ // echarts.init(document.getElementById(risk1.value)).dispose()
+ // }
const getTheme =()=>{
if(screenTheme.value.isDark){
@@ -348,12 +507,20 @@
}
}
+ const getTime = () =>{
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ const temp = curTime.split('-')
+ state.timeValue[0] = temp[0]
+ state.timeValue[1] = Number(temp[1])
+ }
+
watchEffect(() => {
if(props.theme){
state.selector = 'select-dark'
}else{
state.selector = 'select-light'
}
+ getDataByYearId()
})
function fontSize(val){
@@ -363,19 +530,23 @@
// 页面载入时执行方法
onMounted(() => {
- initRisk1();
+ // initRisk1();
getTheme();
+ getTime();
+ makeList();
+ getAllDepartment();
+ getDataByYearId()
});
onBeforeUnmount(() =>{
- clearInterval(swi)
+ clearInterval(state.myVar)
})
return {
risk1,
- risk2,
Search,
fontSize,
+ changeTime,
...toRefs(state)
};
},
@@ -390,23 +561,36 @@
position: relative;
.select-dark{
position: absolute;
- z-index: 999;
+ z-index: 99999;
top: -20px;
- right: 1.6rem;
+ right: 3rem;
width: 30%;
- height: 20px;
+ height: 1.5rem;
margin-right: 0.8rem;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
::v-deep(.el-popper){
background-color: rgba(10,31,92,1);
border: 1px solid rgba(17,254,238,.4);
color: #11FEEE;
- .el-select-dropdown__item{
+ z-index: 999999 !important;
+ .el-cascader-node__label{
color: #11FEEE;
}
- .el-select-dropdown__item.hover{
- background: #0049af;
+ .el-icon{
+ color: #11FEEE;
}
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 50px !important;
}
::v-deep(.el-popper__arrow){
&::before{
@@ -433,23 +617,36 @@
.select-light{
position: absolute;
- z-index: 999;
+ z-index: 99999;
top: -20px;
- right: 1.6rem;
+ right: 3rem;
width: 30%;
height: 20px;
margin-right: 0.8rem;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
::v-deep(.el-popper){
background-color: rgba(255,255,255,1);
border: 1px solid #ccc;
color: #fff;
- .el-select-dropdown__item{
+ z-index: 999999 !important;
+ .el-cascader-node__label{
color: #000;
}
- .el-select-dropdown__item.hover{
- background: #ccc;
+ .el-icon{
+ color: #000;
}
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 80px !important;
}
::v-deep(.el-popper__arrow){
&::before{
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
index 68eab0b..2410257 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/training.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -1,5 +1,7 @@
<template>
<div class="charts-cont">
+ <span v-if="lastDays == -1" :class="tip">该部门本年未进行应急演练</span>
+ <span v-else :class="tip">距本年度上次演练结束{{lastDays}}天</span>
<div v-show="curTab === 1" class="train" :id="train1"></div>
<div v-show="curTab === 2" class="train" :id="train2"></div>
<div v-show="curTab === 3" class="train" :id="train3"></div>
@@ -7,59 +9,138 @@
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
+import {
+ toRefs,
+ reactive,
+ defineComponent,
+ ref,
+ defineAsyncComponent,
+ onMounted,
+ nextTick,
+ onBeforeUnmount,
+ watchEffect
+} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
import { Session } from '/@/utils/storage';
import { Search } from '@element-plus/icons-vue'
+ import {useScreenTheme} from "/@/stores/screenTheme"
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
+ import { riskWarningApi } from '/@/api/riskWarning';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
interface stateType {
- curTab: number
+ curTab: number,
+ timeValue: Array<any>,
+ traData: Array<any>,
+ monthData: Array<any>,
+ lastDays: number | null,
+ tip: string,
}
export default defineComponent({
name: 'accident',
components: {},
props:{
- size: Number
+ size: Number,
+ theme: Boolean
},
setup(props) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const train1 = ref("eChartTrain1" + Date.now() + Math.random())
const train2 = ref("eChartTrain2" + Date.now() + Math.random())
const train3 = ref("eChartTrain3" + Date.now() + Math.random())
const state = reactive<stateType>({
- curTab: 1
+ curTab: 1,
+ timeValue: [],
+ traData: [],
+ monthData: [],
+ lastDays: null,
+ tip: 'tip-dark'
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ };
- // const changeTab=()=>{
- // setInterval(()=>{
- // if(state.curTab<3){
- // state.curTab = state.curTab + 1
- // if(state.curTab == 2){
- // nextTick(()=>{
- // initTrain2()
- // })
- // }else{
- // nextTick(()=>{
- // initTrain3()
- // })
- // }
- //
- // }else{
- // state.curTab = 1
- // nextTick(()=>{
- // initTrain1()
- // })
- // }
- // },5000)
- // }
+ const getDataById = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: 1,
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ let res = await riskWarningApi().getEmergencyByDep(data);
+ if (res.data.code === '200') {
+ state.traData = res.data.data
+ const result = []
+ let lastTime = ''
+ for(let index in state.traData){
+ if(state.traData[index].detail && state.traData[index].detail.length>0){
+ let total = state.traData[index].detail.reduce((pre,cur)=>{
+ return pre+cur.practiceCount
+ },0)
+ result.push(total)
+ state.traData[index].totalCount = total
+ }else{
+ result.push(0)
+ }
+ for(let i in state.traData[index].detail){
+ if(state.traData[index].detail[i].lastPracticeTime != null){
+ lastTime = state.traData[index].detail[i].lastPracticeTime
+ }
+ }
+ }
+ if(!lastTime){
+ state.lastDays = -1
+ }else{
+ const date = new Date(lastTime)
+ const nTime = Date.now() - date.getTime()
+ state.lastDays = Math.floor(nTime / 86400000)
+ }
+ const arrNum = Math.ceil(result.length/4, 10);
+ let index = 0; // 定义初始索引
+ let resIndex = 0; // 用来保存每次拆分的长度
+ while(index< arrNum){
+ state.monthData[index]= result.slice(resIndex,4+resIndex);
+ resIndex += 4;
+ index++;
+ }
+ initTrain1()
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ const getTime = () =>{
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ const temp = curTime.split('-')
+ state.timeValue[0] = temp[0]
+ state.timeValue[1] = Number(temp[1])
+ }
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.tip = 'tip-dark'
+ }else{
+ state.tip = 'tip-light'
+ }
+ }
const changeTab = setInterval(()=>{
if(state.curTab<3){
state.curTab = state.curTab + 1
@@ -119,7 +200,6 @@
},
yAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
data: ['一月', '二月', '三月', '四月'],
axisLine:{
show: true,
@@ -135,8 +215,7 @@
{
name: '2011',
type: 'bar',
- // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [18203, 23489, 29034, 104970],
+ data: state.monthData[0],
itemStyle:{
color: {
x: 0,
@@ -212,7 +291,6 @@
},
yAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
data: ['五月', '六月','七月', '八月'],
axisLine:{
show: true,
@@ -229,7 +307,7 @@
name: '2011',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [131744, 630230, 18203, 23489],
+ data: state.monthData[1],
barCategoryGap: '50%',
itemStyle:{
color: {
@@ -322,7 +400,7 @@
name: '2011',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [29034, 104970, 131744, 630230],
+ data: state.monthData[2],
barCategoryGap: '50%',
itemStyle:{
color: {
@@ -366,9 +444,21 @@
return val * (nowClientWidth/1920) * Number(props.size);
}
+
+ watchEffect(() => {
+ if(props.theme){
+ state.tip = 'tip-dark'
+ }else{
+ state.tip = 'tip-light'
+ }
+ getDataById()
+ })
+
// 页面载入时执行方法
onMounted(() => {
- initTrain1();
+ getTime();
+ getTheme();
+ getDataById()
});
onBeforeUnmount(() =>{
clearInterval(changeTab)
@@ -397,6 +487,18 @@
height: 100%;
}
}
+ .tip-dark{
+ display: block;
+ font-size: 0.8rem;
+ color: #11feee;
+ height: 1rem;
+ }
+ .tip-light{
+ display: block;
+ font-size: 0.8rem;
+ color: #333;
+ height: 1rem;
+ }
.home-container {
height: 100%;
overflow: hidden;
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 25941cb..53f4a47 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -69,8 +69,7 @@
<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
</div>
<div class="chart-box">
- <span class="train-tip">距上次演练结束 5 天</span>
- <training class="train-chart" :size="1"></training>
+ <training :size="1" :theme="screenTheme.isDark"></training>
</div>
</div>
<div class="left-bottom">
@@ -80,15 +79,25 @@
<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
</div>
<div class="chart-box">
- <risk :size="1" :theme="screenTheme.isDark"></risk>
+ <risk :size="1" :theme="screenTheme.isDark" :dep="departList"></risk>
</div>
</div>
</div>
<div class="main-middle">
<div class="mid-top">
<dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
- <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%">
- <div></div>
+ <div class="part-tit" style="position: absolute;top: 10%;padding: 0 4%;align-items: flex-start;z-index: 10001">
+ <div class="spiChart">
+ <el-cascader
+ class="spiSe"
+ :teleported="false"
+ v-model="depValue"
+ :options="departList"
+ :props="depProps"
+ :show-all-levels="false"
+ @change="depChange"
+ />
+ </div>
<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
</div>
<div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
@@ -171,7 +180,17 @@
<script lang="ts">
import screenfull from 'screenfull';
- import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ onBeforeUnmount
+ } from 'vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
@@ -181,6 +200,7 @@
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme"
import {storeToRefs} from "pinia";
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
// 定义接口来定义对象的类型
interface stateType {
@@ -189,10 +209,12 @@
boxBigColor: Array<string>;
isScreenfull: boolean;
currentTime: string;
- spiValue: number;
- spiOptions: Array<any>;
+ depValue: number;
dialogShow: string;
- dialogHide: string
+ dialogHide: string;
+ depProps: object;
+ departList: Array<any>;
+ lastTrain: number | null;
}
export default defineComponent({
name: 'warningScreen',
@@ -218,67 +240,54 @@
}
const state = reactive<stateType>({
boxBg: 'rgba(8, 109, 209, 0.2)',
+ depValue: 1,
boxColor: [],
boxBigColor: [],
+ lastTrain: null,
isScreenfull: false,
currentTime: '',
- spiValue: 0,
dialogShow: 'hide',
dialogHide: 'showup',
- spiOptions: [
- {
- value: 0,
- label: '公司级别SPI'
- },
- {
- value: 1,
- label: 'A事业部SPI',
- children: [
- {
- value: 11,
- label: 'A车间SPI'
- },
- {
- value: 12,
- label: 'B车间SPI'
- },
- {
- value: 13,
- label: 'C车间SPI'
- }
- ]
- },
- {
- value: 2,
- label: 'B事业部SPI',
- children: [
- {
- value: 21,
- label: 'D车间SPI'
- },
- {
- value: 22,
- label: 'E车间SPI'
- },
- {
- value: 23,
- label: 'F车间SPI'
- }
- ]
- }
- ]
+ depProps: {
+ expandTrigger: 'hover',
+ checkStrictly: true,
+ value: 'depId',
+ label: 'depName',
+ emitPath: false
+ },
+ departList: [],
});
-
// 页面载入时执行方法
onMounted(() => {
- getTime()
+ state.depValue = screenTheme.value.depId
+ getTime();
+ getAllDepartment();
+ setInterval(()=>{
+ getTime()
+ },1000)
getTheme()
});
const getTime =()=>{
- setInterval(() => {
- state.currentTime = new Date().toLocaleString();
- }, 1000);
+ state.currentTime = new Date().toLocaleString();
+ }
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departList = JSON.parse(JSON.stringify(res.data.data))
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
+ const depChange = (value)=>{
+ state.depValue = value
+ screenThemes.setDepId(value)
}
const changeTheme = () =>{
@@ -353,6 +362,9 @@
window.history.go(-1);
};
+ onBeforeUnmount(() =>{
+ clearInterval()
+ })
// 隐患状态列表
// const getDeviceRecord = async () => {
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
@@ -375,6 +387,7 @@
closeInfo,
changeTheme,
onScreenfullClick,
+ depChange,
jumpPage,
goBack,
...toRefs(state)
@@ -621,6 +634,52 @@
align-items: center;
z-index: 9999;
+ .spiChart{
+ width: 25% !important;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 2.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 1.25rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
span{
font-size: 1.25rem;
font-weight: bolder;
@@ -641,7 +700,7 @@
right: 0;
width: 100%;
height: calc(100% - 50px);
- z-index: 99999;
+ z-index: 10000;
.train-tip{
display: block;
font-size: 0.8rem;
@@ -649,11 +708,6 @@
margin-left: 5%;
color: #fff;
height: 1rem;
- }
-
- .train-chart{
- width: 100%;
- height: calc(100% - 1rem);
}
}
}
@@ -931,6 +985,53 @@
justify-content: space-between;
align-items: center;
z-index: 9999;
+
+ .spiChart{
+ width: 25% !important;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: #fff;
+ border: 1px solid #ccc;
+ color: #000;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: #fff !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 2.5rem;
+ color: #000;
+
+ input{
+ font-size: 1.25rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
+
span{
font-size: 1.25rem;
font-weight: bolder;
@@ -951,7 +1052,7 @@
right: 0;
width: 100%;
height: calc(100% - 50px);
- z-index: 99999;
+ z-index: 10000;
.train-tip{
display: block;
font-size: 0.8rem;
@@ -959,11 +1060,6 @@
margin-left: 5%;
color: #333;
height: 1rem;
- }
-
- .train-chart{
- width: 100%;
- height: calc(100% - 1rem);
}
}
}
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue
new file mode 100644
index 0000000..c350ec4
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue
@@ -0,0 +1,233 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>2022年度事故等级分布与影响一览</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div v-if="descContent[0]">
+ <h4>特别重大事故共计：{{descContent[0].count}}起</h4>
+ <p>
+ 死亡人数：{{descContent[0].causeDeathCount}}人；
+ 重伤人数：{{descContent[0].causeHeavyInjureCount}}人；
+ 轻伤人数：{{descContent[0].causeLightInjureCount}}人；
+ 直接经济损失：{{descContent[0].loss}}元</p>
+ </div>
+ <div v-if="descContent[1]">
+ <h4>重大事故共计：{{descContent[1].count}}起</h4>
+ <p>
+ 死亡人数：{{descContent[1].causeDeathCount}}人；
+ 重伤人数：{{descContent[1].causeHeavyInjureCount}}人；
+ 轻伤人数：{{descContent[1].causeLightInjureCount}}人；
+ 直接经济损失：{{descContent[1].loss}}万元</p>
+ </div>
+ <div v-if="descContent[2]">
+ <h4>较大事故共计：{{descContent[2].count}}起</h4>
+ <p>
+ 死亡人数：{{descContent[2].causeDeathCount}}人；
+ 重伤人数：{{descContent[2].causeHeavyInjureCount}}人；
+ 轻伤人数：{{descContent[2].causeLightInjureCount}}人；
+ 直接经济损失：{{descContent[2].loss}}元</p>
+ </div>
+ <div v-if="descContent[3]">
+ <h4>一般事故共计：{{descContent[3].count}}起</h4>
+ <p>
+ 死亡人数：{{descContent[3].causeDeathCount}}人；
+ 重伤人数：{{descContent[3].causeHeavyInjureCount}}人；
+ 轻伤人数：{{descContent[3].causeLightInjureCount}}人；
+ 直接经济损失：{{descContent[3].loss}}元</p>
+ </div>
+ <div v-if="descContent[4]">
+ <h4>未遂事故共计：{{descContent[4].count}}起</h4>
+ <p>
+ 死亡人数：{{descContent[4].causeDeathCount}}人；
+ 重伤人数：{{descContent[4].causeHeavyInjureCount}}人；
+ 轻伤人数：{{descContent[4].causeLightInjureCount}}人；
+ 直接经济损失：{{descContent[4].loss}}元</p>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+ import {riskWarningApi} from "/@/api/riskWarning";
+ import {ElMessage} from "element-plus/es";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Array<any>;
+ lineColor: Array<string>;
+ }
+
+ export default defineComponent({
+ name: 'accDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: [],
+ lineColor: ['#11FEEE'],
+ });
+ const getDataByYearId = async () => {
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: state.timeValue[1],
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ if(state.timeValue[1] == '0'){
+ data.beginMonth = '1'
+ data.endMonth = '12'
+ }
+ let res = await riskWarningApi().getRiskByTimeDep(data);
+ if (res.data.code === '200') {
+
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ if(props.content && props.content.accData && props.content.accData[0] && props.content.accData[1] && props.content.accData[2] && props.content.accData[3] && props.content.accData[4]){
+ state.descContent = props.content.accData
+ }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue
new file mode 100644
index 0000000..15e93f2
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue
@@ -0,0 +1,215 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>隐患等级分布与隐患整改率</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4 v-if="descContent.detail && descContent.detail.heavyRiskCount">
+ 重大隐患数量：{{descContent.detail.heavyRiskCount}}
+ </h4>
+ <h4 v-else>
+ 重大隐患数量：0
+ </h4>
+ </div>
+ <div>
+ <h4 v-if="descContent.detail && descContent.detail.heavyRiskCount && descContent.detail.heavyRiskFinishCount">
+ 已完成整改：{{descContent.detail.heavyRiskCount == 0 ? 0 + '%' : Math.round(descContent.detail.heavyRiskFinishCount / descContent.detail.heavyRiskCount * 10000) / 100.00 + '%'}}
+ </h4>
+ <h4 v-else>
+ 已完成整改：0%
+ </h4>
+ </div>
+<!-- <div>-->
+<!-- <h4>整改中：8%；</h4>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <h4>暂未整改：3%；</h4>-->
+<!-- </div>-->
+ <div>
+ <h4 v-if="descContent.detail && descContent.detail.lightRiskCount">
+ 一般隐患数量：{{descContent.detail.lightRiskCount}}
+ </h4>
+ <h4 v-else>
+ 一般隐患数量：0
+ </h4>
+ </div>
+ <div>
+ <h4 v-if="descContent.detail && descContent.detail.lightRiskCount && descContent.detail.lightRiskFinishCount">
+ 已完成整改：{{descContent.detail.lightRiskCount == 0 ? 0 + '%' : Math.round(descContent.detail.lightRiskFinishCount / descContent.detail.lightRiskCount * 10000) / 100.00 + '%'}}
+ </h4>
+ <h4 v-else>
+ 已完成整改：0%
+ </h4>
+ </div>
+<!-- <div>-->
+<!-- <h4>整改中：19%；</h4>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <h4>暂未整改：6%；</h4>-->
+<!-- </div>-->
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'danDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ if(props.content && props.content.dangerData && props.content.dangerData[0]){
+ state.descContent = props.content.dangerData[0]
+ }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue
new file mode 100644
index 0000000..7106a5c
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue
@@ -0,0 +1,210 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>教育培训情况汇总</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>公司总计：</h4>
+ </div>
+ <div>
+ <h4>企业总设计培训次数：50次</h4>
+ </div>
+ <div>
+ <h4>企业总设计培训时间：100小时</h4>
+ </div>
+ <div>
+ <h4>企业总完成培训次数：50次</h4>
+ </div>
+ <div>
+ <h4>企业总完成培训时间：100小时</h4>
+ </div>
+ <div>
+ <h4>企业总完成比例：100%</h4>
+ </div>
+ <div>
+ <h4>部门级完成度最低部门前三：</h4>
+ </div>
+ <div>
+ <h4>有机化工事业部</h4>
+ </div>
+ <div>
+ <h4>设计培训次数：--次</h4>
+ </div>
+ <div>
+ <h4>设计培训时间：--小时</h4>
+ </div>
+ <div>
+ <h4>完成培训次数：--次</h4>
+ </div>
+ <div>
+ <h4>完成培训时间：--小时</h4>
+ </div>
+ <div>
+ <h4>完成比例：--%</h4>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'eduDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ // if(props.content){
+ // state.descContent = props.content
+ // }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue
new file mode 100644
index 0000000..d459b10
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue
@@ -0,0 +1,175 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>监控列表</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>请选择所要查看的监控：</h4>
+ <p>监控系统待接入...</p>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'monDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ // if(props.content){
+ // state.descContent = props.content
+ // }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue
new file mode 100644
index 0000000..b955f19
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue
@@ -0,0 +1,183 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>预警消息SPI报告-2022年8月</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>2022年8月整体SPI指数317.65，处于安全范围以内。</h4>
+ <p>8月份spi中教育培训比例不足和一般风险新增较多，对SPI总值影响较大，请注意调整相关因素环节的处理措施。</p>
+ </div>
+ <div>
+ <h4>次月预警消息</h4>
+ <p>未来一个月该地区气候干燥，降水量少，高温天气仍将持续，应注意防范消防风险，注意重点消防区域的消防设置设备的可用性检查</p>
+ </div>
+ <div>
+ <h4>本月SPI基础数据构成：</h4>
+ <p>...</p>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'msgDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ // if(props.content){
+ // state.descContent = props.content
+ // }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue
new file mode 100644
index 0000000..e78d145
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue
@@ -0,0 +1,183 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>人员持证上岗情况</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>该岗位工种持证人员：1048人</h4>
+ </div>
+ <div>
+ <h4>该岗位工种未持证人员：735人</h4>
+ </div>
+ <div>
+ <h4>关键岗位必要持证无证上岗：1人</h4>
+ </div>
+ <div>
+ <p>提醒：本年度存在有1人在管家必要持证岗位未持证上岗情况，该情况已经上报监管系统，请注意控制该风险因素。</p>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'proDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ // if(props.content){
+ // state.descContent = props.content
+ // }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue
new file mode 100644
index 0000000..3faf4a3
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue
@@ -0,0 +1,201 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>隐患影响等级分布详情</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div v-for="(item,index) in descContent.riskData" :key="index">
+ <div>
+ <h4>{{item.depId}}共上报隐患总数：{{item.detail.riskTotalCount }} 个</h4>
+ </div>
+ <div>
+ <h4>其中：</h4>
+ </div>
+ <div>
+ <h4>一般隐患数量：{{ item.detail.lightRiskCount }} 个</h4>
+ </div>
+ <div>
+ <h4>重大隐患数量：{{ item.detail.heavyRiskCount }} 个</h4>
+ </div>
+ <div>
+ <h4>可能造成死亡的：{{ item.detail.deathCount }} 个</h4>
+ </div>
+ <div>
+ <h4>可能造成重伤的：{{ item.detail.heavyInjureCount}} 个</h4>
+ </div>
+ <div>
+ <h4>可能造成轻伤的：{{ item.detail.lightInjureCount }} 个</h4>
+ </div>
+ <div>
+ <h4>一般隐患整改数量：{{ item.detail.lightRiskFinishCount }} 个</h4>
+ </div>
+ <div>
+ <h4>重大隐患整改数量：{{ item.detail.heavyRiskFinishCount }} 个</h4>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'riskDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ if(props.content){
+ state.descContent = props.content
+ }
+ console.log(state.descContent,'risk')
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue
new file mode 100644
index 0000000..fd1c076
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue
@@ -0,0 +1,172 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>{{descContent.year}}年度事企业SPI趋势</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div v-for="(item,index) in descContent.spiData" :key="index">
+ <h4>{{item.month}}月份，安全生产预警指数值：{{item.spiVal}}<span v-if="index < descContent.spiData.length">；</span></h4>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'spiDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {},
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ if(props.content){
+ state.descContent = props.content
+ }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue
new file mode 100644
index 0000000..4d77655
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue
@@ -0,0 +1,211 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>当前应急物资储备情况（总）</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>消防耗材：</h4>
+ </div>
+ <div>
+ <h4>入库总数：2310</h4>
+ </div>
+ <div>
+ <h4>剩余总数：2103</h4>
+ </div>
+ <div></div>
+ <div>
+ <h4>安全帽：</h4>
+ </div>
+ <div>
+ <h4>入库总数：34312</h4>
+ </div>
+ <div>
+ <h4>剩余总数：23509</h4>
+ </div>
+ <div></div>
+ <div>
+ <h4>防护服：</h4>
+ </div>
+ <div>
+ <h4>入库总数：22140</h4>
+ </div>
+ <div>
+ <h4>剩余总数：12830</h4>
+ </div>
+ <div></div>
+ <div>
+ <h4>防护服：</h4>
+ </div>
+ <div>
+ <h4>入库总数：22140</h4>
+ </div>
+ <div>
+ <h4>剩余总数：12830</h4>
+ </div>
+ <div></div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'stoDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ // if(props.content){
+ // state.descContent = props.content
+ // }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/train.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/train.vue
new file mode 100644
index 0000000..58fa252
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/train.vue
@@ -0,0 +1,177 @@
+<template>
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>应急演练概况</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <h4>应急演练分月情况汇总：</h4>
+ </div>
+ <div v-for="(item,index) in descContent.traData" :key="index">
+ <h4>{{item.month}}月份应急演练次数：{{item.totalCount}}次；</h4>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ descContent: Object;
+ lineColor: Array<string>;
+ }
+ export default defineComponent({
+ name: 'trainDesc',
+ components: {},
+ props:{
+ content: Object || null
+ },
+ setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
+ const state = reactive<stateType>({
+ descContent: {
+
+ },
+ lineColor: ['#11FEEE'],
+ });
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
+
+ watchEffect(() => {
+ if(props.content){
+ state.descContent = props.content
+ }
+ })
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getTheme();
+ });
+ return {
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
index c037e1c..81cd90a 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
@@ -13,13 +13,12 @@
</div>
<div class="chart-cont">
<div class="chart">
- <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
- <accident v-if="curChart===1" :size="2.5"></accident>
- <training v-else-if="curChart===2" :size="2.5"></training>
- <risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
- <spi v-else-if="curChart===4" :size="2"></spi>
+ <accident v-if="curChart===1" :size="2.5" ref="accRef"></accident>
+ <training v-else-if="curChart===2" :size="2.5" ref="trainRef"></training>
+ <risk v-else-if="curChart===3" :size="2.5" ref="riskRef"></risk>
+ <spi v-else-if="curChart===4" :size="2" ref="spiRef"></spi>
<educate v-else-if="curChart===5" :size="2.5"></educate>
- <danger v-else-if="curChart===6" :size="2.5"></danger>
+ <danger v-else-if="curChart===6" :size="2.5" ref="danRef"></danger>
<profession v-else-if="curChart===7" :size="2.5"></profession>
<message v-else-if="curChart===8" :size="2"></message>
<monitor v-else-if="curChart===9" :size="2.5"></monitor>
@@ -28,39 +27,18 @@
<div class="chart-right">
<dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
<div class="charts-des">
- <div class="des-tit">
- <div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
- <div v-else-if="curChart===2">应急演练概况</div>
- <div v-else-if="curChart===3">隐患影响等级分布详情</div>
- <div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
- <div v-else-if="curChart===5">教育培训情况汇总</div>
- <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
- <div v-else-if="curChart===7">人员持证上岗情况</div>
- <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
- <div v-else-if="curChart===9">监控列表</div>
- <div v-else>当前应急物资储备情况（总）</div>
- <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
- </div>
- <div v-if="curChart===2" class="des-main">
- <div>
- <h4>距上次【<span>{{trainDesc.title}}</span>】应急演练结束<span>{{trainDesc.total}}</span>天</h4>
- <h4>
- 应急演练分月情况汇总：
- </h4>
- <p v-for="(item,index) in trainDesc.list" :key="index">{{item.month}}应急演练次数：{{item.num}}次</p>
- </div>
- </div>
- <div v-else class="des-main">
- <div v-for="(item,index) in accidentDesc" :key="index">
- <h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
- <h4>
- 事故影响
- </h4>
- <p>{{item.desc}}</p>
- </div>
- </div>
+ <acc-desc v-if="curChart===1" :content="accRef"></acc-desc>
+ <train-desc v-else-if="curChart===2" :content="trainRef"></train-desc>
+ <risk-desc v-else-if="curChart===3" :content="riskRef"></risk-desc>
+ <spi-desc v-else-if="curChart===4" :content="spiRef"></spi-desc>
+ <edu-desc v-else-if="curChart===5" :content="eduRef"></edu-desc>
+ <dan-desc v-else-if="curChart===6" :content="danRef"></dan-desc>
+ <pro-desc v-else-if="curChart===7" :content="proRef"></pro-desc>
+ <msg-desc v-else-if="curChart===8" :content="msgRef"></msg-desc>
+ <mon-desc v-else-if="curChart===9" :content="monRef"></mon-desc>
+ <sto-desc v-else :content="stoRef"></sto-desc>
</div>
- <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
</div>
</div>
</div>
@@ -68,7 +46,17 @@
<script lang="ts">
import screenfull from 'screenfull';
- import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ watchEffect
+ } from 'vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
@@ -84,22 +72,40 @@
isScreenfull: boolean;
curChart: number | null;
lineColor: Array<string>;
- accidentDesc: Array<any>;
- trainDesc: Object;
+ accRef: Object;
+ trainRef: Object;
+ riskRef: Object;
+ spiRef: Object;
+ eduRef: Object;
+ danRef: Object;
+ proRef: Object;
+ msgRef: Object;
+ monRef: Object;
+ stoRef: Object
}
export default defineComponent({
name: 'warningPage',
components: {
accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
+ accDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue')),
training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
+ trainDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/train.vue')),
spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
+ spiDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue')),
risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
+ riskDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue')),
educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
+ eduDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue')),
danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
+ danDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue')),
profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
+ proDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue')),
message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ msgDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue')),
monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
- stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
+ monDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue')),
+ stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')),
+ stoDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue'))
},
setup() {
const screenThemes = useScreenTheme()
@@ -109,71 +115,16 @@
isScreenfull: false,
curChart: null,
lineColor: ['#11FEEE'],
- accidentDesc:[
- {
- title: '特别重大事故',
- total: 10,
- desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
- },
- {
- title: '重大事故',
- total: 20,
- desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
- },
- {
- title: '较大事故',
- total: 100,
- desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
- },
- {
- title: '一般事故',
- total: 130,
- desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
- },
- {
- title: '未遂事故',
- total: 150,
- desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
- }
- ],
- trainDesc:{
- title: '公司级',
- total: 5,
- list: [
- {
- month: '一月份',
- num: 23
- },
- {
- month: '二月份',
- num: 76
- },
- {
- month: '三月份',
- num: 152
- },
- {
- month: '四月份',
- num: 200
- },
- {
- month: '五月份',
- num: 49
- },
- {
- month: '六月份',
- num: 83
- },
- {
- month: '七月份',
- num: 102
- },
- {
- month: '八月份',
- num: 99
- }
- ]
- }
+ accRef: {},
+ trainRef: {},
+ riskRef: {},
+ spiRef: {},
+ eduRef: {},
+ danRef: {},
+ proRef: {},
+ msgRef: {},
+ monRef: {},
+ stoRef: {}
});
// 页面载入时执行方法
@@ -184,6 +135,9 @@
getTheme()
});
+ watchEffect(() => {
+
+ })
// 全屏
const onScreenfullClick = () => {
@@ -209,6 +163,9 @@
state.lineColor = ['#333','#ccc']
}
}
+ watchEffect(() => {
+
+ })
// 返回上一页
const goBack = () => {
window.history.go(-1);
@@ -296,9 +253,9 @@
height: 100%;
.charts-des{
height: 90%;
+ padding: 4%;
background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
background-size: 100% 100%;
- padding: 4%;
.des-tit{
width: 100%;
@@ -417,9 +374,9 @@
height: 100%;
.charts-des{
height: 90%;
+ padding: 4%;
background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
background-size: 100% 100%;
- padding: 4%;
.des-tit{
width: 100%;
diff --git a/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue b/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
index 52337d2..4f51c2b 100644
--- a/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
+++ b/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
@@ -1,5 +1,44 @@
<template>
- <el-dialog v-model="videoDetailDialog" title="实时监控" width="80%" center>
+ <el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
+ <div style="margin-bottom: 20px">
+ <el-button type="warning">人工录入警报信息</el-button>
+ </div>
+ <div class="info">
+<!-- <video class="video-cont" autoplay src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682" controls></video>-->
+ <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
+ <div class="right-info">
+ <div class="info-item">
+ <div class="info-tit">
+ 基础信息
+ </div>
+ <div class="content">
+ <div>作业编号: <span>0000001</span></div>
+ <div>作业部门: <span>有机化工</span></div>
+ <div>作业人员: <span>王大壮（持证）</span></div>
+ <div>开始时间: <span>2023-03-09 14:00:45</span></div>
+ <div>结束时间: <span>2023-03-09 17:05:45</span></div>
+ <div class="checkBtn">查看作业票</div>
+ <div class="checkBtn">查看审批流</div>
+ </div>
+ </div>
+ <div class="info-item">
+ <div class="info-tit">
+ 警报信息
+ </div>
+ <div class="content">
+ <div>设备IA自动识别警报:
+ <div>无</div>
+ </div>
+ <div>人工录入警报信息:
+ <div>无</div>
+ </div>
+ <div>现场检查不合格项:
+ <div>1、除动火人和监护人有无其他人员在场：有信息化人员在场</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</el-dialog>
</template>
@@ -40,5 +79,49 @@
</script>
<style scoped lang="scss">
+ .info{
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .video-cont{
+ width: calc(70% - 20px);
+ height: 60vh;
+ margin-right: 20px;
+ }
+ .right-info{
+ width: 30%;
+
+ .info-item{
+ width: 100%;
+ margin-bottom: 10px;
+
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+
+ .info-tit{
+ width: 100%;
+ padding: 6px 0;
+ text-align: center;
+ background: #59ddf7;
+ border-radius: 4px;
+ margin-bottom: 10px;
+ }
+ .content{
+ width: 100%;
+ div{
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 4px;
+ }
+ .checkBtn{
+ color: #409eff;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
</style>
diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index f18f329..fea8c63 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -1,261 +1,261 @@
<template>
- <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
- <div class="full">
- <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <FullScreen />
- </el-icon>
- <span style="vertical-align: middle">全屏</span>
- </el-button>
- <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <Close />
- </el-icon>
- <span style="vertical-align: middle">退出全屏</span>
- </el-button>
+ <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
+ <div class="full">
+ <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <FullScreen />
+ </el-icon>
+ <span style="vertical-align: middle">全屏</span>
+ </el-button>
+ <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <Close />
+ </el-icon>
+ <span style="vertical-align: middle">退出全屏</span>
+ </el-button>
+ </div>
+ <div class="topChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">八大作业各分类分布图</span>
+ <div class="filter-part filter-part2">
+ <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" :id="zyfb"></div>
+ <el-radio-group v-model="chartSearch1.period" size="small">
+ <el-radio label="week" border>近7天</el-radio>
+ <el-radio label="month" border>近30天</el-radio>
+ <el-radio label="season" border>近90天</el-radio>
+ <el-radio label="year" border>近一年</el-radio>
+ </el-radio-group>
</div>
- <div class="topChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">八大作业各分类分布图</span>
- <div class="filter-part filter-part2">
- <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="zyfb"></div>
- <el-radio-group v-model="chartSearch1.period" size="small">
- <el-radio label="week" border>近7天</el-radio>
- <el-radio label="month" border>近30天</el-radio>
- <el-radio label="season" border>近90天</el-radio>
- <el-radio label="year" border>近一年</el-radio>
- </el-radio-group>
- </div>
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">各事业部关联作业分析</span>
- <div class="filter-part">
- <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- <el-select v-model="chartSearch2.type" size="small" :teleported="false">
- <el-option
- v-for="item in workType1"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </div>
- </div>
- <div class="chart" :id="slfx"></div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">各事业部关联作业分析</span>
+ <div class="filter-part">
+ <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ <el-select v-model="chartSearch2.type" size="small" :teleported="false">
+ <el-option
+ v-for="item in workType1"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
</div>
</div>
- <div class="topChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">关联作业趋势图</span>
- <div class="filter-part filter-part2">
- <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="zyqs"></div>
+ <div class="chart" :id="slfx"></div>
+ </div>
+ </div>
+ <div class="topChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">关联作业趋势图</span>
+ <div class="filter-part filter-part2">
+ <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
</div>
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">异常警报关联人</span>
- <div class="filter-part">
- <el-switch
- v-model="chartSearch4.type"
- inline-prompt
- style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
- active-text="作业人"
- inactive-text="监护人"
+ </div>
+ <div class="chart" :id="zyqs"></div>
+ </div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">异常警报关联人</span>
+ <div class="filter-part">
+ <el-switch
+ v-model="chartSearch4.type"
+ inline-prompt
+ style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
+ active-text="作业人"
+ inactive-text="监护人"
+ />
+ <el-select :teleported="false" v-model="chartSearch4.period" size="small">
+ <el-option label="近7天" value="week"/>
+ <el-option label="近30天" value="month"/>
+ <el-option label="近90天" value="season"/>
+ <el-option label="近1年" value="year"/>
+ </el-select>
+ <el-select :teleported="false" v-model="chartSearch4.workType" size="small">
+ <el-option
+ v-for="item in workType1"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="name" label="姓名" align="center"/>
+ <el-table-column property="dep" label="所属部门" align="center"/>
+ <el-table-column property="warning" label="异常报警次数" align="center"/>
+ <el-table-column property="role" label="角色" align="center"/>
+ <el-table-column property="isCard" label="是否持证" align="center">
+ <template #default="scope">
+ <span>{{scope.row.isCard == 1?'是':'否'}}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button>
+ </div>
+ <!-- <div class="chart" :id="slfx"></div>-->
+ </div>
+ </div>
+ <div>
+ <div class="homeCard">
+ <el-row>
+ <el-col :span="5" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业类型：</span>
+ <div class="grid-content topInfo">
+ <el-select :teleported="false" v-model="searchWord" size="small">
+ <el-option
+ v-for="item in workType"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
/>
- <el-select :teleported="false" v-model="chartSearch4.period" size="small">
- <el-option label="近7天" value="week"/>
- <el-option label="近30天" value="month"/>
- <el-option label="近90天" value="season"/>
- <el-option label="近1年" value="year"/>
- </el-select>
- <el-select :teleported="false" v-model="chartSearch4.workType" size="small">
- <el-option
- v-for="item in workType1"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
+ </el-select>
+ </div>
+ </el-col>
+ <el-col :span="5" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业状态：</span>
+ <div class="grid-content topInfo">
+ <el-select :teleported="false" v-model="searchStatus" size="small">
+ <el-option
+ v-for="item in workStatus"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </el-col>
+ <el-col :span="5" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业部门：</span>
+ <div class="grid-content topInfo">
+ <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
+ </div>
+ </el-col>
+ <el-col :span="6" style="display:flex;align-items: center;">
+ <span style="white-space: nowrap;margin-left: 20px">申请时间：</span>
+ <div class="grid-content topInfo">
+ <el-date-picker
+ v-model="searchDate"
+ size="small"
+ :teleported="false"
+ type="daterange"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+ />
+ </div>
+ </el-col>
+ <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
+ <el-button plain @click="clearSearch" size="small">重置</el-button>
+ </el-row>
+ <div class="main-card">
+ <el-row class="cardTop" style="justify-content: space-between">
+ <el-col :span="2" class="mainCardBtn">
+ <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button>
+ </el-col>
+ <el-col :span="22" style="display: flex;justify-content: end;align-items: center">
+ <div class="top-info">
+ <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
+ 作业编号
+ <div v-if="unchecked != 0">
+ <el-tooltip
+ class="box-item"
+ effect="light"
+ content="查看预警详情"
+ placement="bottom-start"
+ ><span>123456</span></el-tooltip>
+ </div>
+ 可燃气体浓度超过18%
+ ,请及时处理！
</div>
- </div>
- <div class="chart">
- <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column property="name" label="姓名" align="center"/>
- <el-table-column property="dep" label="所属部门" align="center"/>
- <el-table-column property="warning" label="异常报警次数" align="center"/>
- <el-table-column property="role" label="角色" align="center"/>
- <el-table-column property="isCard" label="是否持证" align="center">
- <template #default="scope">
- <span>{{scope.row.isCard == 1?'是':'否'}}</span>
- </template>
- </el-table-column>
- </el-table>
- <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button>
- </div>
-<!-- <div class="chart" :id="slfx"></div>-->
+ <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
+ </el-col>
+ </el-row>
+ <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="num" label="作业证编号" align="center"/>
+ <el-table-column property="dep" label="部门" align="center"/>
+ <el-table-column property="applyer" label="申请人" align="center"/>
+ <el-table-column property="worker" label="作业人" align="center"/>
+ <el-table-column property="type" label="作业类型" align="center"/>
+ <el-table-column property="level" label="作业等级" align="center"/>
+ <el-table-column property="applyTime" label="申请时间" align="center"/>
+ <el-table-column property="startTime" label="作业开始时间" align="center"/>
+ <el-table-column property="endTime" label="作业结束时间" align="center"/>
+ <el-table-column label="作业状态" align="center">
+ <template #default="scope">
+ <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column property="reason" label="中止原因" align="center"/>
+ <el-table-column label="安全预警" align="center">
+ <template #default="scope">
+ <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column property="message" label="报警信息" align="center">
+ <template #default="scope">
+ <el-button type="text" size="small" v-if="scope.row.message == 1">查看</el-button>
+ <span v-else>无</span>
+ </template>
+ </el-table-column>
+ <el-table-column fixed="right" label="操作" align="center" width="250">
+ <template #default="scope">
+ <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button>
+ <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button>
+ <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pageBtn">
+ <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
</div>
</div>
- <div>
- <div class="homeCard">
- <el-row>
- <el-col :span="5" style="display:flex;align-items: center">
- <span style="white-space: nowrap">作业类型：</span>
- <div class="grid-content topInfo">
- <el-select :teleported="false" v-model="searchWord" size="small">
- <el-option
- v-for="item in workType"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </div>
- </el-col>
- <el-col :span="5" style="display:flex;align-items: center">
- <span style="white-space: nowrap">作业状态：</span>
- <div class="grid-content topInfo">
- <el-select :teleported="false" v-model="searchStatus" size="small">
- <el-option
- v-for="item in workStatus"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- />
- </el-select>
- </div>
- </el-col>
- <el-col :span="5" style="display:flex;align-items: center">
- <span style="white-space: nowrap">作业部门：</span>
- <div class="grid-content topInfo">
- <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
- </div>
- </el-col>
- <el-col :span="6" style="display:flex;align-items: center;">
- <span style="white-space: nowrap;margin-left: 20px">申请时间：</span>
- <div class="grid-content topInfo">
- <el-date-picker
- v-model="searchDate"
- size="small"
- :teleported="false"
- type="daterange"
- unlink-panels
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
- />
- </div>
- </el-col>
- <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
- <el-button plain @click="clearSearch" size="small">重置</el-button>
- </el-row>
- <div class="main-card">
- <el-row class="cardTop" style="justify-content: space-between">
- <el-col :span="2" class="mainCardBtn">
- <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button>
- </el-col>
- <el-col :span="22" style="display: flex;justify-content: end;align-items: center">
- <div class="top-info">
- <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
- 作业编号
- <div v-if="unchecked != 0">
- <el-tooltip
- class="box-item"
- effect="light"
- content="查看预警详情"
- placement="bottom-start"
- ><span>123456</span></el-tooltip>
- </div>
- 可燃气体浓度超过18%
- ,请及时处理！
- </div>
- <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
- </el-col>
- </el-row>
- <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
- <el-table-column property="num" label="作业证编号" align="center"/>
- <el-table-column property="dep" label="部门" align="center"/>
- <el-table-column property="applyer" label="申请人" align="center"/>
- <el-table-column property="worker" label="作业人" align="center"/>
- <el-table-column property="type" label="作业类型" align="center"/>
- <el-table-column property="level" label="作业等级" align="center"/>
- <el-table-column property="applyTime" label="申请时间" align="center"/>
- <el-table-column property="startTime" label="作业开始时间" align="center"/>
- <el-table-column property="endTime" label="作业结束时间" align="center"/>
- <el-table-column label="作业状态" align="center">
- <template #default="scope">
- <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
- </template>
- </el-table-column>
- <el-table-column property="reason" label="中止原因" align="center"/>
- <el-table-column label="安全预警" align="center">
- <template #default="scope">
- <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column property="message" label="报警信息" align="center">
- <template #default="scope">
- <el-button type="text" size="small" v-if="scope.row.message == 1">查看</el-button>
- <span v-else>无</span>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" align="center" width="250">
- <template #default="scope">
- <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button>
- <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button>
- <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="pageBtn">
- <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
- </div>
- </div>
- </div>
- </div>
- <el-dialog v-model="dialogDetails" title="作业申请详情" center>
- <fire v-if="dialogType == 1" :details = details></fire>
- <space v-else-if="dialogType == 2" :details = details></space>
- <hoist v-else-if="dialogType == 3" :details = details></hoist>
- <ground v-else-if="dialogType == 4" :details = details></ground>
- <broken v-else-if="dialogType == 5" :details = details></broken>
- <height v-else-if="dialogType == 6" :details = details></height>
- <power v-else-if="dialogType == 7" :details = details></power>
- <plate v-else :details = details></plate>
- <template #footer>
+ </div>
+ </div>
+ <el-dialog v-model="dialogDetails" title="作业申请详情" center>
+ <fire v-if="dialogType == 1" :details = details></fire>
+ <space v-else-if="dialogType == 2" :details = details></space>
+ <hoist v-else-if="dialogType == 3" :details = details></hoist>
+ <ground v-else-if="dialogType == 4" :details = details></ground>
+ <broken v-else-if="dialogType == 5" :details = details></broken>
+ <height v-else-if="dialogType == 6" :details = details></height>
+ <power v-else-if="dialogType == 7" :details = details></power>
+ <plate v-else :details = details></plate>
+ <template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="dialogDetails = false"
>确认</el-button
>
</span>
- </template>
- </el-dialog>
- <el-dialog v-model="dialogReview" title="填报验收意见" center>
- <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
- <el-form-item label="填报验收意见：" prop="advice">
- <el-input
- v-model="reviewForm.advice"
- :autosize="{ minRows: 4, maxRows: 10 }"
- type="textarea"
- placeholder="请填写验收意见"
- />
- </el-form-item>
- </el-form>
- <template #footer>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="dialogReview" title="填报验收意见" center>
+ <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
+ <el-form-item label="填报验收意见：" prop="advice">
+ <el-input
+ v-model="reviewForm.advice"
+ :autosize="{ minRows: 4, maxRows: 10 }"
+ type="textarea"
+ placeholder="请填写验收意见"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitReview(reviewFormRef)">提交验收</el-button>
</span>
- </template>
- </el-dialog>
- <video-detail ref="videoRef"></video-detail>
- </div>
+ </template>
+ </el-dialog>
+ <video-detail ref="videoRef"></video-detail>
+ </div>
</template>
<script lang="ts">
@@ -280,50 +280,50 @@
// 定义接口来定义对象的类型
interface stateType {
- workData: Array<any>;
- workTimeList: Array<string>;
- multipleSelection: Array<any>;
- casProps: {};
- approveInfo: Object;
- dialogDetails: boolean;
- dialogReview: boolean;
- pageIndex1: number;
- pageSize1: number;
- chosenIndex: null | number;
- searchWord: number | null;
- searchStatus: number | null;
- chartSearch1: object;
- chartSearch2: object;
- chartSearch3: object;
- chartSearch4: object;
- searchDep2: number | null;
- searchDep: number | null;
- searchDate: Array<any>,
- totalSize1: number;
- details: {};
- workType: Array<type>;
- workType1: Array<type>;
- dialogType: number | null;
- departmentList: Array<any>;
- departmentRecursionList: Array<DepartmentState>;
- workStatus: Array<status>;
- reviewForm: object;
- reviewRules: object;
- warningData: Array<any>;
- isFull:boolean;
- themeColor:string
+ workData: Array<any>;
+ workTimeList: Array<string>;
+ multipleSelection: Array<any>;
+ casProps: {};
+ approveInfo: Object;
+ dialogDetails: boolean;
+ dialogReview: boolean;
+ pageIndex1: number;
+ pageSize1: number;
+ chosenIndex: null | number;
+ searchWord: number | null;
+ searchStatus: number | null;
+ chartSearch1: object;
+ chartSearch2: object;
+ chartSearch3: object;
+ chartSearch4: object;
+ searchDep2: number | null;
+ searchDep: number | null;
+ searchDate: Array<any>,
+ totalSize1: number;
+ details: {};
+ workType: Array<type>;
+ workType1: Array<type>;
+ dialogType: number | null;
+ departmentList: Array<any>;
+ departmentRecursionList: Array<DepartmentState>;
+ workStatus: Array<status>;
+ reviewForm: object;
+ reviewRules: object;
+ warningData: Array<any>;
+ isFull:boolean;
+ themeColor:string
}
interface type {
- id: number;
- name: string;
+ id: number;
+ name: string;
}
interface status {
name: string
value: number
}
interface DepartmentState {
- depId: number;
- depName: string;
+ depId: number;
+ depName: string;
}
interface User {
name: string;
@@ -331,739 +331,738 @@
info: string;
}
export default defineComponent({
- name: 'specialIndex',
- components: {
- VideoDetail,
- fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')),
- space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')),
- hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')),
- ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/groundLog.vue')),
- broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/brokenLog.vue')),
- height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/heightLog.vue')),
- power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/powerLog.vue')),
- plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/plateLog.vue'))
- },
- setup() {
- const userInfo = useUserInfo();
- const { userInfos } = storeToRefs(userInfo);
- const router = useRouter();
- const reviewFormRef = ref<FormInstance>()
- const zyfb = ref("eChartZyfb" + Date.now() + Math.random())
- const slfx = ref("eChartSlfx" + Date.now() + Math.random())
- const zyqs = ref("eChartZyqs" + Date.now() + Math.random())
- const videoRef = ref();
- const state = reactive<stateType>({
- pageIndex1: 1,
- pageSize1: 10,
- totalSize1: 0,
- dialogType: null,
- dialogReview: false,
- departmentList: [],
- departmentRecursionList: [],
- chosenIndex: null,
- searchWord: null,
- searchStatus: null,
- chartSearch1: {
- searchDep: null,
- startTime: '2023-03-08',
- endTime: '2023-02-08',
- period: 'month'
- },
- chartSearch2: {
- searchDep: null,
- type: 0
- },
- chartSearch3: {
- searchDep: null
- },
- chartSearch4: {
- searchDep: null
- },
- searchDep2: null,
- searchDep: null,
- searchDate: [],
- workData: [
- {
- num: '111',
- dep: '部门1',
- applyer: '张凤',
- worker: '李羽飞',
- type: '动火作业',
- level: '一级',
- applyTime: '2023-03-08',
- startTime: '2023-03-08',
- endTime: '2023-03-08',
- status: 0,
- reason: '分析超时',
- warning: 0,
- message: 1
- },
- {
- num: '222',
- dep: '部门2',
- applyer: '张凤',
- worker: '李羽飞',
- type: '动土作业',
- level: '一级',
- applyTime: '2023-03-08',
- startTime: '2023-03-08',
- endTime: '2023-03-08',
- status: 1,
- reason: '分析超时',
- warning: 1,
- message: 0
- },
- {
- num: '333',
- dep: '部门3',
- applyer: '张凤',
- worker: '李羽飞',
- type: '动火作业',
- level: '一级',
- applyTime: '2023-03-08',
- startTime: '2023-03-08',
- endTime: '2023-03-08',
- status: 2,
- reason: '分析超时',
- warning: 2,
- message: 0
- },
- {
- num: '222',
- dep: '部门2',
- applyer: '张凤',
- worker: '李羽飞',
- type: '动土作业',
- level: '一级',
- applyTime: '2023-03-08',
- startTime: '2023-03-08',
- endTime: '2023-03-08',
- status: 1,
- reason: '分析超时',
- warning: 1,
- message: 0
- },
- {
- num: '333',
- dep: '部门3',
- applyer: '张凤',
- worker: '李羽飞',
- type: '动火作业',
- level: '一级',
- applyTime: '2023-03-08',
- startTime: '2023-03-08',
- endTime: '2023-03-08',
- status: 2,
- reason: '分析超时',
- warning: 2,
- message: 0
- }
- ],
- isFull: false,
- themeColor: '#333',
- workTimeList: [],
- multipleSelection: [],
- approveInfo: {
- approvalSteps: [],
- operators: []
- },
- casProps: {
- expandTrigger: 'hover',
- emitPath: false,
- value: 'depId',
- label: 'depName',
- checkStrictly: true
- },
- dialogDetails: false,
- details: {},
- workType1: [
- { id: 0, name: '所有作业' },
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- workType: [
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- workStatus: [
- {
- name: '作业进行中',
- value: 0
- },
- {
- name: '作业终止',
- value: 1
- },
- {
- name: '作业结束待验收',
- value: 2
- },
- {
- name: '作业完成',
- value: 3
- }
- ],
- warningData: [
- {
- name: '黄公子',
- dep: '有机事业部',
- warning: 69,
- role: '作业人',
- isCard: 1
- },
- {
- name: '李飞飞',
- dep: '有机事业部',
- warning: 51,
- role: '监护人',
- isCard: 0
- },
- {
- name: '黄公子',
- dep: '有机事业部',
- warning: 69,
- role: '作业人',
- isCard: 1
- }
- ],
- reviewForm: {
- advice: ''
- },
- reviewRules:{
- advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
- }
+ name: 'specialIndex',
+ components: {
+ VideoDetail,
+ fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')),
+ space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')),
+ hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')),
+ ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/groundLog.vue')),
+ broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/brokenLog.vue')),
+ height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/heightLog.vue')),
+ power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/powerLog.vue')),
+ plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/plateLog.vue'))
+ },
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+ const router = useRouter();
+ const reviewFormRef = ref<FormInstance>()
+ const zyfb = ref("eChartZyfb" + Date.now() + Math.random())
+ const slfx = ref("eChartSlfx" + Date.now() + Math.random())
+ const zyqs = ref("eChartZyqs" + Date.now() + Math.random())
+ const videoRef = ref();
+ const state = reactive<stateType>({
+ pageIndex1: 1,
+ pageSize1: 10,
+ totalSize1: 0,
+ dialogType: null,
+ dialogReview: false,
+ departmentList: [],
+ departmentRecursionList: [],
+ chosenIndex: null,
+ searchWord: null,
+ searchStatus: null,
+ chartSearch1: {
+ searchDep: null,
+ startTime: '2023-03-08',
+ endTime: '2023-02-08',
+ period: 'month'
+ },
+ chartSearch2: {
+ searchDep: null,
+ type: 0
+ },
+ chartSearch3: {
+ searchDep: null
+ },
+ chartSearch4: {
+ searchDep: null
+ },
+ searchDep2: null,
+ searchDep: null,
+ searchDate: [],
+ workData: [
+ {
+ num: '111',
+ dep: '部门1',
+ applyer: '张凤',
+ worker: '李羽飞',
+ type: '动火作业',
+ level: '一级',
+ applyTime: '2023-03-08',
+ startTime: '2023-03-08',
+ endTime: '2023-03-08',
+ status: 0,
+ reason: '分析超时',
+ warning: 0,
+ message: 1
+ },
+ {
+ num: '222',
+ dep: '部门2',
+ applyer: '张凤',
+ worker: '李羽飞',
+ type: '动土作业',
+ level: '一级',
+ applyTime: '2023-03-08',
+ startTime: '2023-03-08',
+ endTime: '2023-03-08',
+ status: 1,
+ reason: '分析超时',
+ warning: 1,
+ message: 0
+ },
+ {
+ num: '333',
+ dep: '部门3',
+ applyer: '张凤',
+ worker: '李羽飞',
+ type: '动火作业',
+ level: '一级',
+ applyTime: '2023-03-08',
+ startTime: '2023-03-08',
+ endTime: '2023-03-08',
+ status: 2,
+ reason: '分析超时',
+ warning: 2,
+ message: 0
+ },
+ {
+ num: '222',
+ dep: '部门2',
+ applyer: '张凤',
+ worker: '李羽飞',
+ type: '动土作业',
+ level: '一级',
+ applyTime: '2023-03-08',
+ startTime: '2023-03-08',
+ endTime: '2023-03-08',
+ status: 1,
+ reason: '分析超时',
+ warning: 1,
+ message: 0
+ },
+ {
+ num: '333',
+ dep: '部门3',
+ applyer: '张凤',
+ worker: '李羽飞',
+ type: '动火作业',
+ level: '一级',
+ applyTime: '2023-03-08',
+ startTime: '2023-03-08',
+ endTime: '2023-03-08',
+ status: 2,
+ reason: '分析超时',
+ warning: 2,
+ message: 0
+ }
+ ],
+ isFull: false,
+ themeColor: '#333',
+ workTimeList: [],
+ multipleSelection: [],
+ approveInfo: {
+ approvalSteps: [],
+ operators: []
+ },
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName',
+ checkStrictly: true
+ },
+ dialogDetails: false,
+ details: {},
+ workType1: [
+ { id: 0, name: '所有作业' },
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workType: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workStatus: [
+ {
+ name: '作业进行中',
+ value: 0
+ },
+ {
+ name: '作业终止',
+ value: 1
+ },
+ {
+ name: '作业结束待验收',
+ value: 2
+ },
+ {
+ name: '作业完成',
+ value: 3
+ }
+ ],
+ warningData: [
+ {
+ name: '黄公子',
+ dep: '有机事业部',
+ warning: 69,
+ role: '作业人',
+ isCard: 1
+ },
+ {
+ name: '李飞飞',
+ dep: '有机事业部',
+ warning: 51,
+ role: '监护人',
+ isCard: 0
+ },
+ {
+ name: '黄公子',
+ dep: '有机事业部',
+ warning: 69,
+ role: '作业人',
+ isCard: 1
+ }
+ ],
+ reviewForm: {
+ advice: ''
+ },
+ reviewRules:{
+ advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
+ }
+ });
+ // 页面载入时执行方法
+ onMounted(() => {
+ getListByPage();
+ getAllDepartment();
+ initZyfb()
+ initSlfx()
+ initZyqs()
+ });
+ const toFullscreen =()=>{
+ const element = document.getElementById('bigScreen')
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
+ }
+ screenfull.toggle(element);
+ state.isFull = !state.isFull
+ if(state.isFull == true){
+ state.themeColor = '#11FEEE'
+ }else{
+ state.themeColor = '#333'
+ }
+ initZyfb()
+ initSlfx()
+ initZyqs()
+ }
+ const getTypePie = async ()=>{
+ let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep);
+ if (res.data.code === '200') {
+ console.log(res.data,'666666666')
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
});
- // 页面载入时执行方法
- onMounted(() => {
- getListByPage();
- getAllDepartment();
- initZyfb()
- initSlfx()
- initZyqs()
- });
- const toFullscreen =()=>{
- const element = document.getElementById('bigScreen')
- if (!screenfull.isEnabled) {
- ElMessage.warning('暂不不支持全屏');
- return false;
- }
- screenfull.toggle(element);
- state.isFull = !state.isFull
- if(state.isFull == true){
- state.themeColor = '#11FEEE'
- }else{
- state.themeColor = '#333'
- }
- initZyfb()
- initSlfx()
- initZyqs()
}
- const getTypePie = async ()=>{
- let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep);
- if (res.data.code === '200') {
- console.log(res.data,'666666666')
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- }
- type EChartsOption = echarts.EChartsOption
- const initZyfb =()=>{
- let dom = document.getElementById(zyfb.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- tooltip: {
- trigger: 'item'
+ }
+ type EChartsOption = echarts.EChartsOption
+ const initZyfb =()=>{
+ let dom = document.getElementById(zyfb.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
},
- legend: {
- orient: 'vertical',
- left: 'left',
- top: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 1048, name: '动火作业' },
- { value: 735, name: '受限空间作业' },
- { value: 580, name: '吊装作业' },
- { value: 484, name: '动土作业' },
- { value: 735, name: '断路作业' },
- { value: 580, name: '高处作业' },
- { value: 484, name: '临时用电作业' },
- { value: 300, name: '盲板抽堵作业' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initSlfx =()=>{
- let dom = document.getElementById(slfx.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- color: state.themeColor
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
}
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: 'Direct',
- type: 'bar',
- barWidth: '60%',
- data: [10, 52, 200, 334, 390, 330, 220]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 1048, name: '动火作业' },
+ { value: 735, name: '受限空间作业' },
+ { value: 580, name: '吊装作业' },
+ { value: 484, name: '动土作业' },
+ { value: 735, name: '断路作业' },
+ { value: 580, name: '高处作业' },
+ { value: 484, name: '临时用电作业' },
+ { value: 300, name: '盲板抽堵作业' }
+ ]
+ }
+ ]
}
- const initZyqs =()=>{
- let dom = document.getElementById(zyqs.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- xAxis: {
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initSlfx =()=>{
+ let dom = document.getElementById(slfx.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
type: 'category',
- data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
+ axisTick: {
+ alignWithLabel: true
+ },
axisLabel: {
color: state.themeColor
}
- },
- yAxis: {
+ }
+ ],
+ yAxis: [
+ {
type: 'value'
- },
- grid: {
- top: '8%',
- bottom: '8%'
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line'
- }
- ]
- }
+ }
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+ }
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initZyqs =()=>{
+ let dom = document.getElementById(zyqs.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ axisLabel: {
+ color: state.themeColor
+ }
+ },
+ yAxis: {
+ type: 'value'
+ },
+ grid: {
+ top: '8%',
+ bottom: '8%'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
+ type: 'line'
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 刷新
+ const reLoadData = async () => {
+ getListByPage();
+ };
+
+ // 填写表单
+ const toApply = () => {
+ router.push({
+ path: 'zysq'
+ });
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ // recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
});
}
- // 刷新
- const reLoadData = async () => {
- getListByPage();
- };
+ };
- // 填写表单
- const toApply = () => {
- router.push({
- path: 'zysq'
- });
- };
-
- // 获取部门列表
- const getAllDepartment = async () => {
- let res = await teamManageApi().getAllDepartment();
- if (res.data.code === '200') {
- state.departmentList = JSON.parse(JSON.stringify(res.data.data))
- // recursion(state.departmentList);
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- // 分页获取列表
- const getListByPage = async () => {
- const dateRange = JSON.parse(JSON.stringify(state.searchDate))
- if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
- const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
- let res = await workApplyApi().getApplyList(data);
- if (res.data.code === '200') {
- state.workData = JSON.parse(JSON.stringify(res.data.data));
- state.workData = state.workData.map((item) => {
- if (item.operators == null || item.operators == []) {
- item.operators = [];
- } else {
- item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
- }
- return item;
- });
- state.totalSize1 = res.data.total;
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- // 表格数据格式化
- const toNames = (row, column, cellValue, index) => {
- if (row.list == []) {
- return [];
- } else {
- const nameList = [];
- for (let i = 0; i < row.list.length; i++) {
- for (let t = 0; t < state.workTimeList.length; t++) {
- if (row.list[i] == state.workTimeList[t].id) {
- nameList.push(state.workTimeList[t].name);
- }
- }
- }
- return nameList.join();
- }
- };
-
- // 关键词查询记录
- const searchRecord = async () => {
- if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
- ElMessage({
- type: 'warning',
- message: '请输入查询关键词'
- });
- } else {
- getListByPage();
- }
- };
- // 重置搜索
- const clearSearch = async () => {
- state.searchWord = null;
- state.searchDep = null;
- state.searchDate = []
- getListByPage();
- };
-
- const handleSizeChange1 = (val: number) => {
- state.pageSize1 = val;
- getListByPage();
- };
- const handleCurrentChange1 = (val: number) => {
- state.pageIndex1 = val;
- getListByPage();
- };
-
- // 查看记录
- const viewRecord = (row: any) => {
- state.dialogType = row.workType
- state.details = JSON.parse(JSON.stringify(row));
- if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){
- state.details.workDetail.otherSpecialWork=[]
- }
- else {
- const a = state.details.workDetail.otherSpecialWork
- state.details.workDetail.otherSpecialWork = a.split(',').map((item) => {
- return state.workType.find((i: { id: number }) => i.id === Number(item))?.name;
- });
- }
- if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){
- state.details.workDetail.involvedDepIds=[]
- }
- else {
- const a = state.details.workDetail.involvedDepIds
- state.details.workDetail.involvedDepIds = a.split(',').map((item) => {
- return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName;
- });
- }
- if(state.details.workDetail.csDepId){
- state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName;
- }
- if(state.details.workDetail.operationDepId){
- state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
- }
- if(state.details.workDetail.gbPath){
- state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',')
- }
- if(state.details.workDetail.bcPath){
- state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',')
- }
- if(state.details.workDetail.bpLocationMapPath){
- state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',')
- }
- state.dialogDetails = true;
- };
-
- const handleReview = (row)=>{
- state.dialogReview = true
- }
- const openVideo = ()=>{
- videoRef.value.openDialog()
- }
- const submitReview = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
+ // 分页获取列表
+ const getListByPage = async () => {
+ const dateRange = JSON.parse(JSON.stringify(state.searchDate))
+ if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
+ const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
+ let res = await workApplyApi().getApplyList(data);
+ if (res.data.code === '200') {
+ state.workData = JSON.parse(JSON.stringify(res.data.data));
+ state.workData = state.workData.map((item) => {
+ if (item.operators == null || item.operators == []) {
+ item.operators = [];
} else {
- console.log('error submit!', fields)
+ item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
}
- })
+ return item;
+ });
+ state.totalSize1 = res.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
}
+ };
- // 折线图
- const renderMenu = async (value: string) => {
- Session.set('projectId', value);
- userInfos.value.projectId = value;
- await initBackEndControlRoutes();
- };
+ // 表格数据格式化
+ const toNames = (row, column, cellValue, index) => {
+ if (row.list == []) {
+ return [];
+ } else {
+ const nameList = [];
+ for (let i = 0; i < row.list.length; i++) {
+ for (let t = 0; t < state.workTimeList.length; t++) {
+ if (row.list[i] == state.workTimeList[t].id) {
+ nameList.push(state.workTimeList[t].name);
+ }
+ }
+ }
+ return nameList.join();
+ }
+ };
- return {
- View,
- Edit,
- Delete,
- Refresh,
- Plus,
- Finished,
- Download,
- FolderChecked,
- VideoPlay,
- reviewFormRef,
- videoRef,
- zyfb,
- slfx,
- zyqs,
- toFullscreen,
- handleReview,
- openVideo,
- submitReview,
- reLoadData,
- toApply,
- toNames,
- searchRecord,
- clearSearch,
- viewRecord,
- getListByPage,
- handleSizeChange1,
- handleCurrentChange1,
- ...toRefs(state)
- };
+ // 关键词查询记录
+ const searchRecord = async () => {
+ if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
+ ElMessage({
+ type: 'warning',
+ message: '请输入查询关键词'
+ });
+ } else {
+ getListByPage();
+ }
+ };
+ // 重置搜索
+ const clearSearch = async () => {
+ state.searchWord = null;
+ state.searchDep = null;
+ state.searchDate = []
+ getListByPage();
+ };
+
+ const handleSizeChange1 = (val: number) => {
+ state.pageSize1 = val;
+ getListByPage();
+ };
+ const handleCurrentChange1 = (val: number) => {
+ state.pageIndex1 = val;
+ getListByPage();
+ };
+
+ // 查看记录
+ const viewRecord = (row: any) => {
+ state.dialogType = row.workType
+ state.details = JSON.parse(JSON.stringify(row));
+ if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){
+ state.details.workDetail.otherSpecialWork=[]
+ }
+ else {
+ const a = state.details.workDetail.otherSpecialWork
+ state.details.workDetail.otherSpecialWork = a.split(',').map((item) => {
+ return state.workType.find((i: { id: number }) => i.id === Number(item))?.name;
+ });
+ }
+ if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){
+ state.details.workDetail.involvedDepIds=[]
+ }
+ else {
+ const a = state.details.workDetail.involvedDepIds
+ state.details.workDetail.involvedDepIds = a.split(',').map((item) => {
+ return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName;
+ });
+ }
+ if(state.details.workDetail.csDepId){
+ state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName;
+ }
+ if(state.details.workDetail.operationDepId){
+ state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
+ }
+ if(state.details.workDetail.gbPath){
+ state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',')
+ }
+ if(state.details.workDetail.bcPath){
+ state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',')
+ }
+ if(state.details.workDetail.bpLocationMapPath){
+ state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',')
+ }
+ state.dialogDetails = true;
+ };
+
+ const handleReview = (row)=>{
+ state.dialogReview = true
}
+ const openVideo = ()=>{
+ videoRef.value.openDialog()
+ }
+ const submitReview = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ Finished,
+ Download,
+ FolderChecked,
+ VideoPlay,
+ reviewFormRef,
+ videoRef,
+ zyfb,
+ slfx,
+ zyqs,
+ toFullscreen,
+ handleReview,
+ openVideo,
+ submitReview,
+ reLoadData,
+ toApply,
+ toNames,
+ searchRecord,
+ clearSearch,
+ viewRecord,
+ getListByPage,
+ handleSizeChange1,
+ handleCurrentChange1,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
- height: calc(100vh - 144px);
- position: relative;
- box-sizing: border-box;
- overflow: hidden;
- overflow-y: scroll;
- scrollbar-width: none; /* firefox */
- -ms-overflow-style: none; /* IE 10+ */
+ height: calc(100vh - 144px);
+ position: relative;
+ box-sizing: border-box;
+ overflow: hidden;
+ overflow-y: scroll;
+ scrollbar-width: none; /* firefox */
+ -ms-overflow-style: none; /* IE 10+ */
- &::-webkit-scrollbar {
- display: none; /* Chrome Safari */
- }
- .full{
- position:fixed;
- height: 34px;
- line-height: 34px;
- top: 80px;
- right: 20px;
- z-index: 99999;
+ &::-webkit-scrollbar {
+ display: none; /* Chrome Safari */
+ }
+ .full{
+ position:fixed;
+ height: 34px;
+ line-height: 34px;
+ top: 80px;
+ right: 20px;
+ z-index: 99999;
+ }
+
+ .demo-tabs {
+ width: 100%;
+ height: 100%;
+
+ &::v-deep(.el-tabs__content) {
+ height: calc(100% - 60px);
}
- .demo-tabs {
- width: 100%;
- height: 100%;
-
- &::v-deep(.el-tabs__content) {
- height: calc(100% - 60px);
- }
-
- .el-tab-pane {
- height: 100%;
- }
+ .el-tab-pane {
+ height: 100%;
}
- .topChart{
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
- height: 40%;
+ }
+ .topChart{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ height: 40%;
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+
+ .chart-item{
+ width: calc(50% - 10px);
+ height: 100%;
+ margin-right: 10px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
&:last-of-type{
- margin-bottom: 0;
+ margin-right: 0;
}
- .chart-item{
- width: calc(50% - 10px);
- height: 100%;
- margin-right: 10px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- margin-right: 0;
+ .chart-tit{
+ width: 100%;
+ height: 15%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 1.33rem;
+ font-weight: bolder;
+ white-space: nowrap;
}
-
- .chart-tit{
- width: 100%;
- height: 15%;
+ .filter-part{
display: flex;
- align-items: flex-start;
- justify-content: space-between;
- .tit{
- font-size: 1.33rem;
- font-weight: bolder;
- white-space: nowrap;
+ align-items: center;
+ justify-content: right;
+ :deep(.el-cascader){
+ width: 35% !important;
}
- .filter-part{
- display: flex;
- align-items: center;
- justify-content: right;
- :deep(.el-cascader){
- width: 35% !important;
- }
- .el-select{
- width: 35% !important;
- margin-left: 10px;
- }
- .el-switch{
- width: 25% !important;
+ .el-select{
+ width: 35% !important;
+ margin-left: 10px;
+ }
+ .el-switch{
+ width: 25% !important;
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- .filter-part2{
- :deep(.el-cascader){
+ :deep(.el-switch__core){
width: 100% !important;
}
}
-
}
- .chart{
- width: 100%;
- height: 85%;
- .el-table{
- height: 90% !important;
- :deep(.el-table__inner-wrapper){
- height: 100% !important;
- .el-table__header-wrapper {
- height: 20% !important;
- .el-table__header{
+ .filter-part2{
+ :deep(.el-cascader){
+ width: 100% !important;
+ }
+ }
+
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ .el-table{
+ height: 90% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
height: 100% !important;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
height: 100% !important;
- .el-table__body{
+ tbody{
height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
+ .el-table__row{
+ height: 25% !important;
+ td{
height: 25% !important;
- td{
- height: 25% !important;
- padding: 0 0 !important;
- .left-info{
- display: flex;
- align-items: center;
- }
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .el-button{
- padding: 0 !important;
- }
+ padding: 0 0 !important;
+ .left-info{
+ display: flex;
+ align-items: center;
+ }
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .el-button{
+ padding: 0 !important;
}
}
}
@@ -1073,314 +1072,315 @@
}
}
}
- .el-radio-group{
- width: 20%;
- display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-30%);
+ }
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
- .el-radio{
- width: 100%;
- margin-bottom: 4px;
- }
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
}
- :deep(.active-ring-info){
- .active-ring-name{
- font-size: 1.5rem !important;
- text-align: center;
- }
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
}
}
}
- .homeCard {
+ }
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .main-card {
+ width: 100%;
+ height: 100%;
+ .cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn {
+ margin: 0;
+ }
+
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ font-weight: bolder;
+ align-items: center;
+ padding: 4px 10px;
+ background: #ffeb87;
+ border-radius: 2px;
+ border: 1px solid #ffae00;
+ margin-right: 20px;
+
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ span {
+ font-size: 18px;
+ color: #f3001e;
+ margin: 0 2px;
+ cursor: pointer;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ .pageBtn {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ }
+ .stepItem {
+ display: flex;
+ align-items: flex-start;
+ margin-top: 30px;
+ margin-left: 30px;
+ padding-bottom: 30px;
+ padding-left: 40px;
+ border-left: 1px solid #a0cfff;
+ position: relative;
+ &:first-of-type {
+ margin-top: 30px;
+ }
+ &:first-of-type {
+ margin-bottom: 0;
+ border-left: none;
+ }
+ .stepNum {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ box-sizing: border-box;
+ font-size: 18px;
+ color: #333;
+ border: 1px solid #a0cfff;
+ line-height: 38px;
+ text-align: center;
+ left: -20px;
+ top: -30px;
+ background: #d9ecff;
+ }
+ .stepCard {
+ width: 100%;
+ margin-top: -30px;
+
+ .box-card {
width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
- .main-card {
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ span {
+ font-weight: bold;
+ margin-left: 10px;
+ }
+ }
+
+ .text {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 10px;
+ padding-left: 10px;
+
+ span {
+ font-weight: bolder;
+ color: #409eff;
+ }
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ .approveUnit {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ border: 1px solid #fff;
+ background: #ecf8ff;
+ border-radius: 6px;
+ .item-tit {
width: 100%;
- height: 100%;
- .cardTop {
+ display: flex;
+ color: #409eff;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0cfff;
+
+ & > span {
+ flex: 1;
+ &:last-of-type{
+ text-align: center;
+ }
+ }
+ & > div {
+ flex: 1;
+ text-align: center;
+ }
+ }
+ .item-cont {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #c6e2ff;
+
+ & > span {
+ flex: 1;
+ &:last-of-type{
+ text-align: center;
+ }
+ }
+ & > div {
+ flex: 1;
+ text-align: center;
+
+ & > div {
+ text-align: left;
+ width: 100%;
display: flex;
+ justify-content: center;
align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
- .mainCardBtn {
- margin: 0;
- }
-
- .top-info {
- display: flex;
- font-size: 14px;
- font-weight: bolder;
- align-items: center;
- padding: 4px 10px;
- background: #ffeb87;
- border-radius: 2px;
- border: 1px solid #ffae00;
- margin-right: 20px;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 18px;
- color: #f3001e;
- margin: 0 2px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
+ span {
+ width: 45%;
+ &:first-of-type {
+ width: 30%;
}
}
}
}
- .pageBtn {
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
+ &:last-of-type {
+ border-bottom: 0;
}
+ }
}
- }
- .stepItem {
- display: flex;
- align-items: flex-start;
- margin-top: 30px;
- margin-left: 30px;
- padding-bottom: 30px;
- padding-left: 40px;
- border-left: 1px solid #a0cfff;
- position: relative;
- &:first-of-type {
- margin-top: 30px;
- }
- &:first-of-type {
- margin-bottom: 0;
- border-left: none;
- }
- .stepNum {
- position: absolute;
- width: 40px;
- height: 40px;
- border-radius: 20px;
- box-sizing: border-box;
- font-size: 18px;
- color: #333;
- border: 1px solid #a0cfff;
- line-height: 38px;
- text-align: center;
- left: -20px;
- top: -30px;
- background: #d9ecff;
- }
- .stepCard {
+ .approveItem {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ background: #ecf8ff;
+ border: 1px solid #fff;
+ border-radius: 6px;
+ .item-tit {
width: 100%;
- margin-top: -30px;
+ display: flex;
+ color: #409eff;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0cfff;
- .box-card {
- width: 100%;
-
- .card-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- span {
- font-weight: bold;
- margin-left: 10px;
- }
- }
-
- .text {
- width: 100%;
- font-size: 14px;
- margin-bottom: 10px;
- padding-left: 10px;
-
- span {
- font-weight: bolder;
- color: #409eff;
- }
-
- &:last-of-type {
- margin-bottom: 0;
- }
- }
- .approveUnit {
- width: 100%;
- font-size: 14px;
- margin-bottom: 20px;
- padding: 10px 15px;
- border: 1px solid #fff;
- background: #ecf8ff;
- border-radius: 6px;
- .item-tit {
- width: 100%;
- display: flex;
- color: #409eff;
- align-items: flex-start;
- justify-content: space-between;
- padding-bottom: 10px;
- border-bottom: 1px solid #a0cfff;
-
- & > span {
- flex: 1;
- &:last-of-type{
- text-align: center;
- }
- }
- & > div {
- flex: 1;
- text-align: center;
- }
- }
- .item-cont {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0;
- border-bottom: 1px solid #c6e2ff;
-
- & > span {
- flex: 1;
- &:last-of-type{
- text-align: center;
- }
- }
- & > div {
- flex: 1;
- text-align: center;
-
- & > div {
- text-align: left;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- span {
- width: 45%;
- &:first-of-type {
- width: 30%;
- }
- }
- }
- }
- &:last-of-type {
- border-bottom: 0;
- }
- }
- }
- .approveItem {
- width: 100%;
- font-size: 14px;
- margin-bottom: 20px;
- padding: 10px 15px;
- background: #ecf8ff;
- border: 1px solid #fff;
- border-radius: 6px;
- .item-tit {
- width: 100%;
- display: flex;
- color: #409eff;
- align-items: flex-start;
- justify-content: space-between;
- padding-bottom: 10px;
- border-bottom: 1px solid #a0cfff;
-
- & > span {
- flex: 1;
- }
- & > div {
- flex: 2;
- text-align: center;
- }
- }
- .item-cont {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0;
- border-bottom: 1px solid #c6e2ff;
-
- & > span {
- flex: 1;
- }
- & > div {
- flex: 2;
- text-align: center;
-
- & > div {
- text-align: left;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: flex-start;
- margin-bottom: 10px;
- span {
- width: 50%;
- &:first-of-type {
- width: 25%;
- }
- }
- }
- }
- &:last-of-type {
- border-bottom: 0;
- }
- }
- }
+ & > span {
+ flex: 1;
}
- }
- &:hover .card-header {
- color: #0098f5;
- }
- &:hover .stepNum {
- border: 2px solid #0098f5;
- color: #0098f5;
- }
- }
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
+ & > div {
+ flex: 2;
+ text-align: center;
+ }
+ }
+ .item-cont {
width: 100%;
display: flex;
align-items: center;
- font-size: 16px;
- font-weight: bold;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #c6e2ff;
- & > div {
- white-space: nowrap;
- margin-right: 20px;
+ & > span {
+ flex: 1;
}
+ & > div {
+ flex: 2;
+ text-align: center;
+
+ & > div {
+ text-align: left;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ margin-bottom: 10px;
+ span {
+ width: 50%;
+ &:first-of-type {
+ width: 25%;
+ }
+ }
+ }
+ }
+ &:last-of-type {
+ border-bottom: 0;
+ }
+ }
}
+ }
}
+ &:hover .card-header {
+ color: #0098f5;
+ }
+ &:hover .stepNum {
+ border: 2px solid #0098f5;
+ color: #0098f5;
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
}
.container{
@@ -1576,18 +1576,18 @@
}
}
.el-card {
- border: 0;
+ border: 0;
}
.el-input{
- width: 100% !important;
+ width: 100% !important;
}
::v-deep(.el-date-editor){
- width: 100%;
+ width: 100%;
}
.el-select{
- width: 100%;
+ width: 100%;
}
:deep(.el-cascader){
- width: 100% !important;
+ width: 100% !important;
}
</style>
diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue
index 22b5b33..2e0d159 100644
--- a/src/views/system/user/component/userDialog.vue
+++ b/src/views/system/user/component/userDialog.vue
@@ -4,7 +4,7 @@
<el-form :model="userForm" size="default" ref="userRef" :rules="userFormRules" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="disabled">
- <el-form-item label="用户名">
+ <el-form-item label="用户名" prop="username">
<el-input v-model.trim="userForm.username" :disabled="disabled" placeholder="" clearable></el-input>
</el-form-item>
</el-col>
--
Gitblit v1.9.2