From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 10 三月 2023 18:12:12 +0800
Subject: [PATCH] Default Changelist
---
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/sum.vue | 0
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 | 962 -------
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 | 260 +
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/riskWarningSys/warningBigScreen/components/training.vue | 168 +
src/stores/screenTheme.ts | 6
/dev/null | 404 ---
src/stores/interface/index.ts | 3
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 391 ++-
src/api/intellectInspectSystem/inspectIndex/index.ts | 27
src/views/intellectInspect/inspectIndex/components/inspectRecordDialog.vue | 0
src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue | 175 +
src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue | 183 +
29 files changed, 4,251 insertions(+), 2,347 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
index 5093571..e5eee90 100644
--- a/src/api/intellectInspectSystem/inspectIndex/index.ts
+++ b/src/api/intellectInspectSystem/inspectIndex/index.ts
@@ -10,5 +10,32 @@
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/inspectIndex2/components/inspectRecordDialog.vue b/src/views/intellectInspect/inspectIndex/components/inspectRecordDialog.vue
similarity index 100%
rename from src/views/intellectInspect/inspectIndex2/components/inspectRecordDialog.vue
rename to src/views/intellectInspect/inspectIndex/components/inspectRecordDialog.vue
diff --git a/src/views/intellectInspect/inspectIndex2/components/sum.vue b/src/views/intellectInspect/inspectIndex/components/sum.vue
similarity index 100%
rename from src/views/intellectInspect/inspectIndex2/components/sum.vue
rename to src/views/intellectInspect/inspectIndex/components/sum.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..feeee56
--- /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 :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/inspectIndex2/index.vue b/src/views/intellectInspect/inspectIndex/index.vue
similarity index 79%
rename from src/views/intellectInspect/inspectIndex2/index.vue
rename to src/views/intellectInspect/inspectIndex/index.vue
index 7b43609..7b9a78b 100644
--- a/src/views/intellectInspect/inspectIndex2/index.vue
+++ b/src/views/intellectInspect/inspectIndex/index.vue
@@ -102,33 +102,6 @@
</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>
@@ -142,21 +115,35 @@
</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 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 :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 type="text" size="small" class="checkBtn">验收</el-button>
- <el-button type="text" size="small" class="reviewBtn">查看现场照片</el-button>
+ <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>
@@ -167,9 +154,42 @@
</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"></unusual-list>
+ <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list>
</div>
</template>
@@ -181,7 +201,7 @@
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';
@@ -211,7 +231,11 @@
chartStatus:boolean;
period: string;
isFull:boolean;
- themeColor:string
+ themeColor:string;
+ dialogVisible:boolean;
+ workNum: string;
+ beImgs: [];
+ afImgs: []
}
interface type {
id: number;
@@ -231,64 +255,14 @@
const state = reactive<stateType>({
isFull: false,
themeColor: '#333',
+ workNum: '',
+ beImgs: [],
+ afImgs: [],
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: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
- }
- ],
+ unusualData: [],
unchecked: null,
unusual: null,
chartStatus: true,
@@ -309,7 +283,8 @@
],
classGroupList: [],
quotaList: [],
- inspectPointAllList: []
+ inspectPointAllList: [],
+ dialogVisible: false
});
const inspectRecordDialogRef = ref();
const inspectListRef = ref();
@@ -331,7 +306,7 @@
initSbtj()
});
const toFullscreen =()=>{
- console.log(state.isFull,'quanp',state.themeColor)
+ // console.log(state.isFull,'quanp',state.themeColor)
const element = document.getElementById('bigScreen')
if (!screenfull.isEnabled) {
ElMessage.warning('暂不不支持全屏');
@@ -353,6 +328,86 @@
}
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 =()=>{
@@ -527,10 +582,10 @@
};
// 分页获取
const getListExcepOrder = async () => {
- const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
+ const data = { pageSize: 4, pageIndex: state.pageIndex };
let res = await inspectIndexApi().getListExcepOrderByPage(data);
if (res.data.code === '200') {
- console.log(res.data,'res')
+ state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
} else {
ElMessage({
type: 'warning',
@@ -613,6 +668,9 @@
toFullscreen,
checkAllRecord,
checkAllList,
+ acceptance,
+ remark,
+ openPhoto,
toLine,
toOverTime,
toDetails,
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/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/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index f18f329..ff31155 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -1,161 +1,57 @@
<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 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>
- </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>
- <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">
+ <div class="home-container">
+ <div style="height: 100%">
+ <el-row class="homeCard">
+ <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>
+ <el-select v-model="searchWord">
+ <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">
+ </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 v-model="searchStatus">
+ <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"/>
+ <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
</div>
- </el-col>
- <el-col :span="6" style="display:flex;align-items: center;">
+ </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"
- />
+ <el-date-picker
+ v-model="searchDate"
+ 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>
+ </el-col>
+ <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button>
+ <el-button plain @click="clearSearch">重置</el-button>
+ </el-row>
+ <div class="homeCard">
<div class="main-card">
<el-row class="cardTop" style="justify-content: space-between">
<el-col :span="2" class="mainCardBtn">
@@ -179,38 +75,31 @@
<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">
+ <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="workPermitNo" label="作业证编号" width="180" align="center"/>
+ <el-table-column property="depName" label="部门" align="center"/>
+ <el-table-column property="applyUname" label="申请人" align="center"/>
+ <el-table-column property="operators" label="作业人" align="center"/>
+ <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
+ <el-table-column property="workLevelDesc" label="作业等级" align="center"/>
+ <el-table-column property="applyTime" label="申请时间" width="180" align="center"/>
+ <el-table-column property="startTime" label="作业开始时间" width="180" align="center"/>
+ <el-table-column property="endTime" label="作业结束时间" width="180" align="center"/>
+ <el-table-column label="作业状态" align="center" width="180">
<template #default="scope">
- <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
+ <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag>
</template>
</el-table-column>
- <el-table-column property="reason" label="中止原因" align="center"/>
- <el-table-column label="安全预警" align="center">
+ <el-table-column property="stopReason" label="中止原因" align="center"/>
+ <el-table-column label="安全预警" align="center" width="180">
<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>
+ <el-tag :type="scope.row.saftyWarning==0?'success':(scope.row.saftyWarning==1||scope.row.saftyWarning==2)?'warning':'danger'">{{ scope.row.saftyWarning==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>
+ <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>
</template>
</el-table-column>
</el-table>
@@ -254,7 +143,6 @@
</span>
</template>
</el-dialog>
- <video-detail ref="videoRef"></video-detail>
</div>
</template>
@@ -265,22 +153,18 @@
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
-import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked, VideoPlay } from '@element-plus/icons-vue';
+import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue';
import { ElTable, ElMessage } from 'element-plus';
-import { specialIndexApi } from '/@/api/specialWorkSystem/specialIndex';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';
-import * as echarts from "echarts";
-import screenfull from "screenfull";
-import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue";
// 定义接口来定义对象的类型
interface stateType {
- workData: Array<any>;
+ applyData: Array<string>;
workTimeList: Array<string>;
multipleSelection: Array<any>;
casProps: {};
@@ -292,26 +176,16 @@
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
+ reviewForm: object
}
interface type {
id: number;
@@ -333,7 +207,6 @@
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')),
@@ -348,10 +221,6 @@
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,
@@ -363,104 +232,9 @@
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',
+ applyData: [],
workTimeList: [],
multipleSelection: [],
approveInfo: {
@@ -476,17 +250,6 @@
},
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: '受限空间作业' },
@@ -515,219 +278,14 @@
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
- });
- }
- }
- 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
- },
- 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: '动火作业' },
- { 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
- }
- }
- ],
- 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();
- });
- }
- 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 reviewRules = reactive<FormRules>({
+ advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
+ })
// 刷新
const reLoadData = async () => {
getListByPage();
@@ -761,8 +319,8 @@
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) => {
+ state.applyData = JSON.parse(JSON.stringify(res.data.data));
+ state.applyData = state.applyData.map((item) => {
if (item.operators == null || item.operators == []) {
item.operators = [];
} else {
@@ -867,9 +425,7 @@
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) => {
@@ -888,6 +444,12 @@
await initBackEndControlRoutes();
};
+ // 页面载入时执行方法
+ onMounted(() => {
+ getListByPage();
+ getAllDepartment()
+ });
+
return {
View,
Edit,
@@ -897,15 +459,9 @@
Finished,
Download,
FolderChecked,
- VideoPlay,
reviewFormRef,
- videoRef,
- zyfb,
- slfx,
- zyqs,
- toFullscreen,
+ reviewRules,
handleReview,
- openVideo,
submitReview,
reLoadData,
toApply,
@@ -926,25 +482,8 @@
$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+ */
-
- &::-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%;
@@ -956,145 +495,6 @@
.el-tab-pane {
height: 100%;
}
- }
- .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-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;
- }
- .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;
-
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- .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;
- 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;
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- .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;
- }
- }
- }
}
.homeCard {
width: 100%;
@@ -1117,12 +517,12 @@
.top-info {
display: flex;
- font-size: 14px;
+ font-size: 16px;
font-weight: bolder;
align-items: center;
- padding: 4px 10px;
+ padding: 6px 10px;
background: #ffeb87;
- border-radius: 2px;
+ border-radius: 4px;
border: 1px solid #ffae00;
margin-right: 20px;
@@ -1130,7 +530,7 @@
vertical-align: middle;
white-space: nowrap;
span {
- font-size: 18px;
+ font-size: 22px;
color: #f3001e;
margin: 0 2px;
cursor: pointer;
@@ -1155,6 +555,9 @@
margin-bottom: 16px;
}
}
+ }
+ &:last-of-type {
+ height: calc(100% - 100px);
}
}
.stepItem {
@@ -1359,7 +762,7 @@
.el-row {
display: flex;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
@@ -1381,199 +784,6 @@
}
}
}
-}
-
-.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;
- 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-button--text{
- color: #11FEEE;
- }
- }
- }
- }
- .homeCard{
- 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;
- .el-row{
- &>div{
- &>span{
- color: #11FEEE;
- }
- }
- }
- :deep(.el-range-separator){
- color: #11FEEE;
- }
- .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-card {
border: 0;
--
Gitblit v1.9.2