| | |
| | | <template> |
| | | <div class="home-container" :class="isFull==true?'container':''" id="bigScreen"> |
| | | <div class="home-container"> |
| | | <div class="full"> |
| | | <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen"> |
| | | <el-button type="text" style="height: 34px" @click="toFullscreen"> |
| | | <el-icon style="vertical-align: middle"> |
| | | <FullScreen /> |
| | | </el-icon> |
| | | <span style="vertical-align: middle">全屏</span> |
| | | </el-button> |
| | | <el-button v-else type="text" style="height: 34px" @click="toFullscreen"> |
| | | <el-icon style="vertical-align: middle"> |
| | | <Close /> |
| | | </el-icon> |
| | | <span style="vertical-align: middle">退出全屏</span> |
| | | </el-button> |
| | | </div> |
| | | <div style="height: 100%"> |
| | | <div class="topChart"> |
| | | <div class="chart-item"> |
| | | <dv-border-box10 v-if="isFull==true" class="item-bg" :color="['rgba(8, 109, 209, 0.2)']"></dv-border-box10> |
| | | <div class="chart-tit"> |
| | | <span class="tit">年度巡检异常趋势</span> |
| | | <div class="filter-part"> |
| | | <el-cascader v-model="searchDepId" :options="depList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | </div> |
| | | </div> |
| | | <div class="chart" :id="xjLine"></div> |
| | | </div> |
| | | <div class="chart-item"> |
| | | <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> |
| | | <div class="chart-tit"> |
| | | <span class="tit">异常区域设备统计</span> |
| | | <div class="filter-part"> |
| | | <div class="filter-part2"> |
| | | <el-switch |
| | | v-model="chartStatus" |
| | | v-model="searchQuery.regionType" |
| | | inline-prompt |
| | | style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66" |
| | | active-text="区域" |
| | | inactive-text="设备" |
| | | :active-value="2" |
| | | :inactive-value="3" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="chart" :id="sbtj"></div> |
| | | <el-radio-group v-model="period" size="small"> |
| | | <el-radio border label="week">近7天</el-radio> |
| | | <el-radio border label="month">近30天</el-radio> |
| | | <el-radio border label="season">近90天</el-radio> |
| | | <el-radio border label="year">近一年</el-radio> |
| | | <el-radio-group v-model="searchQuery.timeType" size="small"> |
| | | <el-radio border :label="1">近7天</el-radio> |
| | | <el-radio border :label="2">近30天</el-radio> |
| | | <el-radio border :label="3">近90天</el-radio> |
| | | <el-radio border :label="4">近一年</el-radio> |
| | | </el-radio-group> |
| | | </div> |
| | | </div> |
| | | <div class="midChart"> |
| | | <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> |
| | | <div class="chart-item"> |
| | | <div class="chart-tit"> |
| | | <div style="display: flex;align-items: center"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="midChart"> |
| | | <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> |
| | | <div class="chart-item"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">巡检异常清单</span> |
| | |
| | | import { departmentApi } from '/@/api/systemManage/department'; |
| | | import screenfull from "screenfull"; |
| | | import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3' |
| | | import {specialIndexApi} from "/@/api/specialWorkSystem/specialIndex"; |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | tableData: Array<string>; |
| | |
| | | classGroupList: Array<classGroup>; |
| | | quotaList: []; |
| | | inspectPointAllList: []; |
| | | chartStatus:boolean; |
| | | period: string; |
| | | isFull:boolean; |
| | | themeColor:string; |
| | | searchQuery:{ |
| | | regionType:number; |
| | | timeType: number; |
| | | } |
| | | dialogVisible:boolean; |
| | | workNum: string; |
| | | beImgs: []; |
| | | afImgs: [] |
| | | afImgs: []; |
| | | searchDepId: number|null |
| | | depList: Array<any> |
| | | casProps:object |
| | | } |
| | | interface type { |
| | | id: number; |
| | |
| | | const xjLine = ref("eChartXjLine" + Date.now() + Math.random()) |
| | | const sbtj = ref("eChartSbtj" + Date.now() + Math.random()) |
| | | const state = reactive<stateType>({ |
| | | isFull: false, |
| | | themeColor: '#333', |
| | | workNum: '', |
| | | beImgs: [], |
| | | afImgs: [], |
| | | pageIndex: 1, |
| | | pageSize: 5, |
| | | pageSize: 10, |
| | | totalSize: 0, |
| | | tableData: [], |
| | | unusualData: [], |
| | | unchecked: null, |
| | | unusual: null, |
| | | chartStatus: true, |
| | | period: 'month', |
| | | searchQuery:{ |
| | | regionType: 2, |
| | | timeType: 2, |
| | | }, |
| | | uncheckedList: [], |
| | | abnormalList: [], |
| | | workTypeList: [ |
| | |
| | | { id: 4, name: '月' }, |
| | | { id: 5, name: '年' } |
| | | ], |
| | | searchDepId: null, |
| | | depList: [ |
| | | { |
| | | name: '电石事业部', |
| | | depId: 49 |
| | | }, |
| | | { |
| | | name: '电力事业部', |
| | | id: 50 |
| | | }, |
| | | { |
| | | name: '有机化工事业部', |
| | | id: 48 |
| | | }, |
| | | { |
| | | name: '甲醇事业部', |
| | | id: 32 |
| | | } |
| | | ], |
| | | casProps: { |
| | | expandTrigger: 'hover', |
| | | emitPath: false, |
| | | value: 'depId', |
| | | label: 'name', |
| | | checkStrictly: true |
| | | }, |
| | | classGroupList: [], |
| | | quotaList: [], |
| | | inspectPointAllList: [], |
| | |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | // getDepartmentData(); |
| | | // getCountExcepOrder(); |
| | | // getPieCountExcepOrder(); |
| | | getInspectRecord(); |
| | | getListExcepOrder(); |
| | | getDayData(); |
| | | getDepartmentData(); |
| | | initXjLine() |
| | | initSbtj() |
| | | }); |
| | | const toFullscreen =()=>{ |
| | | // console.log(state.isFull,'quanp',state.themeColor) |
| | | const element = document.getElementById('bigScreen') |
| | | if (!screenfull.isEnabled) { |
| | | ElMessage.warning('暂不不支持全屏'); |
| | | return false; |
| | | } |
| | | screenfull.toggle(element); |
| | | state.isFull = !state.isFull |
| | | if(state.isFull == true){ |
| | | state.themeColor = '#11FEEE' |
| | | }else{ |
| | | state.themeColor = '#333' |
| | | } |
| | | initXjLine() |
| | | initSbtj() |
| | | router.push({ |
| | | path: 'inspectFullScreen', |
| | | query: { |
| | | |
| | | } |
| | | }) |
| | | } |
| | | const checkAllRecord =()=>{ |
| | | inspectListRef.value.departmentList = state.departmentList |
| | |
| | | } |
| | | const checkAllList =()=>{ |
| | | unusualListRef.value.showUnusualList() |
| | | } |
| | | const getCountExcepOrder = async ()=>{ |
| | | let res = await inspectIndexApi().getCountExcepOrder({depId: state.searchDepId}); |
| | | if (res.data.code === '200') { |
| | | console.log('折线图趋势数据>>>', res.data.data) |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | const getPieCountExcepOrder = async ()=>{ |
| | | let res = await inspectIndexApi().getPieCountExcepOrder(state.searchQuery); |
| | | if (res.data.code === '200') { |
| | | console.log('饼状图趋势数据>>>', res.data.data) |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | const acceptance =(row:object)=>{ |
| | | ElMessageBox.confirm( |
| | |
| | | padding:[1,1,1,0], |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor |
| | | color: '#333' |
| | | }, |
| | | }, |
| | | grid: { |
| | |
| | | boundaryGap: false, |
| | | data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'], |
| | | axisLabel: { |
| | | color: state.themeColor |
| | | color: '#333' |
| | | } |
| | | }, |
| | | yAxis: { |
| | |
| | | top: 'center', |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor, |
| | | color: '#333', |
| | | // fontSize: 12 |
| | | }, |
| | | itemStyle: { |
| | |
| | | position: 'outside', |
| | | overflow: 'truncate', |
| | | borderWidth: 0, |
| | | color: state.themeColor |
| | | color: '#333' |
| | | }, |
| | | labelLine: { |
| | | show: true, // 显示指示线 |
| | |
| | | }; |
| | | // 分页获取 |
| | | const getListExcepOrder = async () => { |
| | | const data = { pageSize: 4, pageIndex: state.pageIndex }; |
| | | const data = { pageSize: 10, pageIndex: state.pageIndex }; |
| | | let res = await inspectIndexApi().getListExcepOrderByPage(data); |
| | | if (res.data.code === '200') { |
| | | state.unusualData = JSON.parse(JSON.stringify(res.data.data.records)) |
| | |
| | | let res = await departmentApi().getDepartmentList(); |
| | | if (res.data.code === '200') { |
| | | state.departmentList = res.data.data; |
| | | const newList = [] |
| | | for(let i of state.departmentList[0].children){ |
| | | if(i.depId == 32 || i.depId == 48 ||i.depId == 49 || i.depId == 50){ |
| | | newList.push(i) |
| | | } |
| | | } |
| | | state.depList = newList |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | height: calc(100vh - 144px); |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | .full{ |
| | | position:fixed; |
| | | height: 34px; |
| | |
| | | } |
| | | .topChart{ |
| | | width: 100%; |
| | | height: calc((100% - 40px) / 3); |
| | | height: 300px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: flex-start; |
| | |
| | | font-weight: bolder; |
| | | } |
| | | .filter-part{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | :deep(.el-cascader){ |
| | | width: 100% !important; |
| | | } |
| | | .el-switch{ |
| | | width: 100% !important; |
| | | :deep(.el-switch__core){ |
| | | width: 100% !important; |
| | | } |
| | | } |
| | | |
| | | } |
| | | .filter-part2{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | |
| | | } |
| | | } |
| | | .midChart{ |
| | | height: calc((100% - 40px) / 3); |
| | | width: 100%; |
| | | background: #fff; |
| | | display: flex; |
| | |
| | | .tit{ |
| | | font-size: 20px; |
| | | font-weight: bolder; |
| | | } |
| | | :deep(.el-switch__core){ |
| | | width: 120px; |
| | | |
| | | } |
| | | .top-info { |
| | | display: flex; |
| | |
| | | width: 100%; |
| | | height: 85%; |
| | | margin-top: 10px; |
| | | |
| | | .el-table{ |
| | | height: 100% !important; |
| | | :deep(.el-table__inner-wrapper){ |
| | | height: 100% !important; |
| | | .el-table__header-wrapper { |
| | | height: 20% !important; |
| | | .el-table__header{ |
| | | height: 100% !important; |
| | | th{ |
| | | height: 100% !important; |
| | | padding: 0 0 !important; |
| | | .cell{ |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .el-table__body-wrapper { |
| | | height: 80% !important; |
| | | .el-scrollbar__view{ |
| | | height: 100% !important; |
| | | .el-table__body{ |
| | | height: 100% !important; |
| | | tbody{ |
| | | height: 100% !important; |
| | | .el-table__row{ |
| | | height: 25% !important; |
| | | td{ |
| | | height: 25% !important; |
| | | padding: 0 0 !important; |
| | | .left-info{ |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .cell{ |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | .el-button{ |
| | | padding: 0 !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .left-info{ |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .pageBtn { |
| | | position: absolute; |
| | | bottom: 15px; |
| | |
| | | } |
| | | } |
| | | } |
| | | .container{ |
| | | padding: 20px; |
| | | background: url('../../../assets/spwbg.png') no-repeat center; |
| | | |
| | | .full{ |
| | | position:fixed; |
| | | background: rgba(0,0,0,.2); |
| | | border: 1px solid rgba(54, 252, 252, .6); |
| | | border-radius: 17px 1px 1px 17px; |
| | | box-shadow: 3px 3px 12px rgba(0,0,0,.2); |
| | | height: 32px; |
| | | line-height: 30px; |
| | | top: 10px; |
| | | right: 2px; |
| | | display: flex; |
| | | justify-content: center; |
| | | backdrop-filter: blur(2px); |
| | | z-index: 99999; |
| | | } |
| | | .topChart{ |
| | | .chart-item{ |
| | | border-radius: 4px; |
| | | background: rgba(0, 61, 121, 0.2); |
| | | backdrop-filter: blur(5px); |
| | | position: relative; |
| | | z-index: 2; |
| | | &:last-of-type{ |
| | | position: relative; |
| | | z-index: 1; |
| | | } |
| | | .item-bg{ |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: -1; |
| | | } |
| | | .el-radio.is-bordered.is-checked{ |
| | | border-color: #11FEEE !important; |
| | | :deep(.el-radio__inner){ |
| | | border-color: #11FEEE !important; |
| | | background: #11FEEE !important; |
| | | } |
| | | :deep(.el-radio__label){ |
| | | color: #11FEEE !important |
| | | } |
| | | } |
| | | .chart-tit{ |
| | | .tit{ |
| | | color: #11FEEE; |
| | | } |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-cascader-node{ |
| | | .in-active-path{ |
| | | background: #0049af; |
| | | } |
| | | &:hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | .el-cascader-node__label{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(10,31,92,.6) !important; |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 1.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | .chart{ |
| | | .el-table { |
| | | color: #11FEEE !important; |
| | | background-color: rgba(0,0,0,0) !important; |
| | | :deep(thead){ |
| | | color: #11FEEE !important; |
| | | } |
| | | :deep(tr){ |
| | | background-color: rgba(0,0,0,0) !important; |
| | | .el-table__cell{ |
| | | background-color: rgba(0,0,0,0) !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .midChart{ |
| | | border-radius: 4px; |
| | | background: rgba(0, 61, 121, 0.2); |
| | | backdrop-filter: blur(5px); |
| | | position: relative; |
| | | z-index: 3; |
| | | .item-bg { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: -1; |
| | | } |
| | | .tit{ |
| | | color: #11FEEE; |
| | | } |
| | | .checkAll{ |
| | | cursor: pointer; |
| | | color: #11feee; |
| | | &:hover{ |
| | | color: #409eff |
| | | } |
| | | } |
| | | .el-table { |
| | | color: #11FEEE !important; |
| | | background-color: rgba(0,0,0,0) !important; |
| | | :deep(thead){ |
| | | color: #11FEEE !important; |
| | | background-color: #092846 !important |
| | | } |
| | | :deep(tr){ |
| | | background-color: rgba(0,0,0,0) !important; |
| | | .el-table__cell{ |
| | | background-color: rgba(0,0,0,0) !important; |
| | | } |
| | | .el-table-fixed-column--right{ |
| | | background-color: #092846 !important |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-cascader-node{ |
| | | .in-active-path{ |
| | | background: #0049af; |
| | | } |
| | | &:hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | .el-cascader-node__label{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(10,31,92,.6) !important; |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 1.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .el-input { |
| | | width: 100% !important; |
| | | } |