已重命名4个文件
已修改12个文件
已添加12个文件
已删除1个文件
| | |
| | | "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", |
| | |
| | | } |
| | | }, |
| | | "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", |
| | |
| | | } |
| | | }, |
| | | "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": { |
| | |
| | | } |
| | | }, |
| | | "@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", |
| | |
| | | } |
| | | }, |
| | | "@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": { |
| | |
| | | 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 |
| | | }); |
| | | }, |
| | | }; |
| | | } |
对比新文件 |
| | |
| | | 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', |
| | | }); |
| | | } |
| | | }; |
| | | } |
| | |
| | | |
| | | export interface screenThemeState { |
| | | screenTheme: { |
| | | isDark: boolean |
| | | isDark: boolean, |
| | | depId: number |
| | | } |
| | | } |
| | | |
| | |
| | | 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; |
| | | } |
| | | }, |
| | | }); |
对比新文件 |
| | |
| | | <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> |
文件名从 src/views/intellectInspect/inspectIndex2/index.vue 修改 |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- <div class="list">--> |
| | | <!-- <div class="list-tit">--> |
| | | <!-- <span class="w60">任务信息</span>--> |
| | | <!-- <span class="w20">任务状态</span>--> |
| | | <!-- <span class="w20">操作</span>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="cardTop" v-for="(item, index) in tableData" :key="index">--> |
| | | <!-- <div class="l-info">--> |
| | | <!-- <span class="place">{{ item.taskName }},</span>--> |
| | | <!-- <p v-if="item.execUserName == null">该任务暂无人认领</p>--> |
| | | <!-- <p v-else>--> |
| | | <!-- <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span>由<span class="name">{{ item.execUserName }}</span--> |
| | | <!-- >进行的巡检任务--> |
| | | <!-- </p>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="m-info">--> |
| | | <!-- 任务状态:<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="r-info">--> |
| | | <!-- <el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>--> |
| | | <!-- <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="pageBtn">--> |
| | | <!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <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> |
| | |
| | | </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> |
| | | |
| | |
| | | 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'; |
| | |
| | | chartStatus:boolean; |
| | | period: string; |
| | | isFull:boolean; |
| | | themeColor:string |
| | | themeColor:string; |
| | | dialogVisible:boolean; |
| | | workNum: string; |
| | | beImgs: []; |
| | | afImgs: [] |
| | | } |
| | | interface type { |
| | | id: number; |
| | |
| | | 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, |
| | |
| | | ], |
| | | classGroupList: [], |
| | | quotaList: [], |
| | | inspectPointAllList: [] |
| | | inspectPointAllList: [], |
| | | dialogVisible: false |
| | | }); |
| | | const inspectRecordDialogRef = ref(); |
| | | const inspectListRef = ref(); |
| | |
| | | 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('暂不不支持全屏'); |
| | |
| | | } |
| | | 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 =()=>{ |
| | |
| | | }; |
| | | // 分页获取 |
| | | 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', |
| | |
| | | toFullscreen, |
| | | checkAllRecord, |
| | | checkAllList, |
| | | acceptance, |
| | | remark, |
| | | openPhoto, |
| | | toLine, |
| | | toOverTime, |
| | | toDetails, |
| | |
| | | <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> |
| | |
| | | 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', |
| | |
| | | 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', |
| | |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | type EChartsOption = echarts.EChartsOption |
| | | // 隐患整改情况 |
| | | const initSpi =()=>{ |
| | |
| | | { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], |
| | | data: state.monthList, |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | |
| | | } |
| | | ], |
| | | 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: { |
| | |
| | | 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', |
| | |
| | | }); |
| | | } |
| | | |
| | | 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){ |
| | |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getAllDepartment(); |
| | | getSpiData(); |
| | | initSpi(); |
| | | getTheme(); |
| | | }); |
| | | |
| | | return { |
| | |
| | | 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%; |
| | |
| | | <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> |
| | | |
| | |
| | | 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', |
| | |
| | | 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 changeTab =(i)=>{ |
| | | state.cur = i |
| | | nextTick(()=>{ |
| | | initAccidentByYear(); |
| | | }) |
| | | 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 |
| | | }); |
| | | } |
| | | } |
| | | |
| | | 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); |
| | | |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '月度数据', |
| | | name: '事故等级数量', |
| | | type: 'pie', |
| | | radius: ['50%', '80%'], |
| | | avoidLabelOverlap: false, |
| | |
| | | } |
| | | }, |
| | | 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%'] |
| | | } |
| | |
| | | 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; |
| | |
| | | } |
| | | 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(); |
| | | }); |
| | | |
| | |
| | | |
| | | return { |
| | | accidentMonth, |
| | | accidentYear, |
| | | Search, |
| | | changeTab, |
| | | changeTime, |
| | | fontSize, |
| | | ...toRefs(state) |
| | | }; |
| | |
| | | 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; |
| | | } |
| | | .act{ |
| | | z-index: 999999 !important; |
| | | .el-cascader-node__label{ |
| | | color: #11FEEE; |
| | | border: 1px solid #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-cascader-node{ |
| | | &:hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | .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-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; |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | div:hover{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | .act{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | .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{ |
| | |
| | | <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 :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="dangerMonth"></div> |
| | | <div v-show="cur===2" class="year" :id="dangerYear"></div> |
| | | <div class="month" :id="dangerMonth"></div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | 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', |
| | |
| | | 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 changeTab =(i)=>{ |
| | | state.cur = i |
| | | nextTick(()=>{ |
| | | initdangerByYear() |
| | | }) |
| | | 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 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); |
| | | |
| | |
| | | fontWeight: 'bold' |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 235, name: '一般隐患' }, |
| | | { value: 1048, name: '重大隐患' } |
| | | ], |
| | | data: danger, |
| | | center: ['50%','55%'] |
| | | } |
| | | ] |
| | |
| | | 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' |
| | | 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() |
| | | }) |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initdangerByMonth(); |
| | | getTime() |
| | | getTheme() |
| | | makeList() |
| | | getDataByYearId() |
| | | }); |
| | | |
| | | return { |
| | | dangerMonth, |
| | | dangerYear, |
| | | Search, |
| | | changeTime, |
| | | fontSize, |
| | | changeTab, |
| | | ...toRefs(state) |
| | | }; |
| | | }, |
| | |
| | | padding: 2% 2% 0; |
| | | 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; |
| | | 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); |
| | | ::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; |
| | | } |
| | | .act{ |
| | | z-index: 999999 !important; |
| | | .el-cascader-node__label{ |
| | | color: #11FEEE; |
| | | border: 1px solid #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-cascader-node{ |
| | | &:hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | .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-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; |
| | | 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; |
| | | border-radius: 2px; |
| | | cursor: pointer; |
| | | color: #fff; |
| | | z-index: 999999 !important; |
| | | .el-cascader-node__label{ |
| | | color: #000; |
| | | } |
| | | div:hover{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | .act{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | .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{ |
| | |
| | | <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> |
| | | |
| | |
| | | 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 { |
| | | 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() |
| | |
| | | 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: [ |
| | | 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: 10 |
| | | }, |
| | | { |
| | | label: '十一月', |
| | | value: 11 |
| | | }, |
| | | { |
| | | label: '十二月', |
| | | value: 12 |
| | | } |
| | | ], |
| | | selector: 'select-dark' |
| | | }) |
| | | |
| | | const swi = setInterval(()=>{ |
| | | state.curValue = !state.curValue |
| | | if(state.curValue == true){ |
| | | nextTick(()=>{ |
| | | initRisk1() |
| | | }) |
| | | ] |
| | | } |
| | | 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{ |
| | | nextTick(()=>{ |
| | | initRisk2() |
| | | }) |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | 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); |
| | | |
| | |
| | | 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), |
| | |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], |
| | | data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'], |
| | | data: depList, |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#999' |
| | | color: '#999', |
| | | fontSize: fontSize(9) |
| | | } |
| | | }, |
| | | yAxis: { |
| | |
| | | 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%' |
| | | }, |
| | | { |
| | |
| | | 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%' |
| | | }, |
| | | { |
| | |
| | | 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){ |
| | |
| | | } |
| | | } |
| | | |
| | | 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){ |
| | |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initRisk1(); |
| | | // initRisk1(); |
| | | getTheme(); |
| | | getTime(); |
| | | makeList(); |
| | | getAllDepartment(); |
| | | getDataByYearId() |
| | | }); |
| | | |
| | | onBeforeUnmount(() =>{ |
| | | clearInterval(swi) |
| | | clearInterval(state.myVar) |
| | | }) |
| | | |
| | | return { |
| | | risk1, |
| | | risk2, |
| | | Search, |
| | | fontSize, |
| | | changeTime, |
| | | ...toRefs(state) |
| | | }; |
| | | }, |
| | |
| | | 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{ |
| | | .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{ |
| | |
| | | |
| | | .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{ |
| | | .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; |
| | |
| | | <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> |
| | |
| | | </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 |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'], |
| | | data: ['一月', '二月', '三月', '四月'], |
| | | axisLine:{ |
| | | show: true, |
| | |
| | | { |
| | | 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, |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'], |
| | | data: ['五月', '六月','七月', '八月'], |
| | | axisLine:{ |
| | | show: true, |
| | |
| | | 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: { |
| | |
| | | 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: { |
| | |
| | | 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) |
| | |
| | | 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; |
| | |
| | | <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"> |
| | |
| | | <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)"> |
| | |
| | | |
| | | <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'; |
| | |
| | | import '/@/theme/bigScreen.css' |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | import {storeToRefs} from "pinia"; |
| | | import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage"; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | |
| | | 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', |
| | |
| | | } |
| | | 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' |
| | | depProps: { |
| | | expandTrigger: 'hover', |
| | | checkStrictly: true, |
| | | value: 'depId', |
| | | label: 'depName', |
| | | emitPath: false |
| | | }, |
| | | { |
| | | 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' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | departList: [], |
| | | }); |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | state.depValue = screenTheme.value.depId |
| | | getTime(); |
| | | getAllDepartment(); |
| | | setInterval(()=>{ |
| | | getTime() |
| | | },1000) |
| | | getTheme() |
| | | }); |
| | | |
| | | const getTime =()=>{ |
| | | setInterval(() => { |
| | | state.currentTime = new Date().toLocaleString(); |
| | | }, 1000); |
| | | } |
| | | |
| | | // 获取部门列表 |
| | | 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 = () =>{ |
| | |
| | | window.history.go(-1); |
| | | }; |
| | | |
| | | onBeforeUnmount(() =>{ |
| | | clearInterval() |
| | | }) |
| | | // 隐患状态列表 |
| | | // const getDeviceRecord = async () => { |
| | | // const data = { pageSize: state.pageSize, pageIndex: state.pageIndex}; |
| | |
| | | closeInfo, |
| | | changeTheme, |
| | | onScreenfullClick, |
| | | depChange, |
| | | jumpPage, |
| | | goBack, |
| | | ...toRefs(state) |
| | |
| | | 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; |
| | |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | z-index: 10000; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | |
| | | margin-left: 5%; |
| | | color: #fff; |
| | | height: 1rem; |
| | | } |
| | | |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |
| | |
| | | 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; |
| | |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | z-index: 10000; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | |
| | | margin-left: 5%; |
| | | color: #333; |
| | | height: 1rem; |
| | | } |
| | | |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | <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%;" /> |
| | | </div> |
| | |
| | | |
| | | <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'; |
| | |
| | | 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() |
| | |
| | | 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: {} |
| | | }); |
| | | |
| | | // 页面载入时执行方法 |
| | |
| | | getTheme() |
| | | }); |
| | | |
| | | watchEffect(() => { |
| | | |
| | | }) |
| | | |
| | | // 全屏 |
| | | const onScreenfullClick = () => { |
| | |
| | | state.lineColor = ['#333','#ccc'] |
| | | } |
| | | } |
| | | watchEffect(() => { |
| | | |
| | | }) |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | window.history.go(-1); |
| | |
| | | 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%; |
| | |
| | | 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%; |
| | |
| | | <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> |
| | | <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-select v-model="searchWord"> |
| | | <el-option |
| | | v-for="item in workType" |
| | | :key="item.id" |
| | |
| | | <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-select v-model="searchStatus"> |
| | | <el-option |
| | | v-for="item in workStatus" |
| | | :key="item.value" |
| | |
| | | <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;"> |
| | |
| | | <div class="grid-content topInfo"> |
| | | <el-date-picker |
| | | v-model="searchDate" |
| | | size="small" |
| | | :teleported="false" |
| | | type="daterange" |
| | | unlink-panels |
| | | range-separator="至" |
| | |
| | | /> |
| | | </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-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"> |
| | |
| | | <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> |
| | | </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> |
| | | <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 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="View" @click="viewRecord(scope.row)">查看</el-button> |
| | | <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button> |
| | | <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <video-detail ref="videoRef"></video-detail> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | 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: {}; |
| | |
| | | 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; |
| | |
| | | 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')), |
| | |
| | | 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, |
| | |
| | | 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: { |
| | |
| | | }, |
| | | 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: '受限空间作业' }, |
| | |
| | | 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:{ |
| | | } |
| | | }); |
| | | |
| | | const reviewRules = reactive<FormRules>({ |
| | | 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 reLoadData = async () => { |
| | | getListByPage(); |
| | |
| | | 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 { |
| | |
| | | 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) => { |
| | |
| | | await initBackEndControlRoutes(); |
| | | }; |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getListByPage(); |
| | | getAllDepartment() |
| | | }); |
| | | |
| | | return { |
| | | View, |
| | | Edit, |
| | |
| | | Finished, |
| | | Download, |
| | | FolderChecked, |
| | | VideoPlay, |
| | | reviewFormRef, |
| | | videoRef, |
| | | zyfb, |
| | | slfx, |
| | | zyqs, |
| | | toFullscreen, |
| | | reviewRules, |
| | | handleReview, |
| | | openVideo, |
| | | submitReview, |
| | | reLoadData, |
| | | toApply, |
| | |
| | | $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%; |
| | |
| | | |
| | | .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 { |
| | |
| | | |
| | | .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; |
| | | |
| | |
| | | vertical-align: middle; |
| | | white-space: nowrap; |
| | | span { |
| | | font-size: 18px; |
| | | font-size: 22px; |
| | | color: #f3001e; |
| | | margin: 0 2px; |
| | | cursor: pointer; |
| | |
| | | margin-bottom: 16px; |
| | | } |
| | | } |
| | | } |
| | | &:last-of-type { |
| | | height: calc(100% - 100px); |
| | | } |
| | | } |
| | | .stepItem { |
| | |
| | | .el-row { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 10px; |
| | | margin-bottom: 20px; |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | |
| | | & > div { |
| | | white-space: nowrap; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |