Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
| | |
| | | meta: { |
| | | title: '安全物资与设备' |
| | | } |
| | | }, |
| | | { |
| | | path: '/inspectIndex2', |
| | | name: 'inspectIndex2', |
| | | component: () => import('/@/views/intellectInspect/inspectIndex2/index.vue'), |
| | | meta: { |
| | | title: '巡检首页' |
| | | } |
| | | }, |
| | | { |
| | | path: '/video', |
| | | name: 'video', |
| | | component: () => import('/@/views/system/video/index.vue'), |
| | | meta: { |
| | | title: '视频设备管理' |
| | | } |
| | | }, |
| | | { |
| | | path: '/specialIndex', |
| | | name: 'specialIndex', |
| | | component: () => import('/@/views/specialWorkSystem/specialIndex/index.vue'), |
| | | meta: { |
| | | title: '特殊作业首页' |
| | | } |
| | | }, |
| | | { |
| | | path: '/facilityIndex', |
| | | name: 'facilityIndex', |
| | | component: () => import('/@/views/facilityManagement/facilityIndex/index.vue'), |
| | | meta: { |
| | | title: '设备管理首页' |
| | | } |
| | | } |
| | | ]; |
| | |
| | | <template> |
| | | <div class="home-container"> |
| | | <div class="home-container" :class="isFull==true?'container':''" id="bigScreen"> |
| | | <div class="full"> |
| | | <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen"> |
| | | <el-icon style="vertical-align: middle"> |
| | | <FullScreen /> |
| | | </el-icon> |
| | | <span style="vertical-align: middle">全屏</span> |
| | | </el-button> |
| | | <el-button v-else type="text" style="height: 34px" @click="toFullscreen"> |
| | | <el-icon style="vertical-align: middle"> |
| | | <Close /> |
| | | </el-icon> |
| | | <span style="vertical-align: middle">退出全屏</span> |
| | | </el-button> |
| | | </div> |
| | | <div class="topChart"> |
| | | <div class="chart-item"> |
| | | <div class="chart-item" :class="zin==1?'upItem':''"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">当前时间设备状态</span> |
| | | <div class="filter-part filter-part2"> |
| | | <el-cascader v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-cascader @focus="upgrade(1)" :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | </div> |
| | | </div> |
| | | <div class="chart" :id="sbzt"></div> |
| | | </div> |
| | | <div class="chart-item"> |
| | | <div class="chart-item" :class="zin==2?'upItem':''"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">设备异常趋势</span> |
| | | <div class="filter-part filter-part2"> |
| | | <el-cascader v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-cascader @focus="upgrade(2)" :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | </div> |
| | | </div> |
| | | <div class="chart" :id="ycqs"></div> |
| | | </div> |
| | | <div class="chart-item"> |
| | | <div class="chart-item" :class="zin==3?'upItem':''"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">关联作业排行</span> |
| | | <div class="filter-part filter-part3"> |
| | | <el-cascader v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-select v-model="chartSearch3.period" size="small"> |
| | | <el-cascader @focus="upgrade(3)" :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-select :teleported="false" v-model="chartSearch3.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 v-model="chartSearch3.workType" size="small"> |
| | | <el-select :teleported="false" v-model="chartSearch3.workType" size="small"> |
| | | <el-option |
| | | v-for="item in workType1" |
| | | :key="item.id" |
| | |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="chart" style="margin-top: 10px"> |
| | | <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> |
| | | <div class="chart"> |
| | | <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }"> |
| | | <el-table-column property="num" label="设备位号" align="center"/> |
| | | <el-table-column property="name" label="设备名称" align="center"/> |
| | | <el-table-column property="dep" label="所属部门" align="center"/> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="topChart"> |
| | | <div class="chart-item chart-item2"> |
| | | <div class="chart-item chart-item2" :class="zin==4?'upItem':''"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">关联作业趋势图</span> |
| | | <div class="filter-part filter-part2"> |
| | | <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-cascader @focus="upgrade(4)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | </div> |
| | | </div> |
| | | <div class="chart" style="margin-top: 10px"> |
| | | <div class="chart"> |
| | | <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }"> |
| | | <el-table-column prop="num" label="设备位号" align="center"/> |
| | | <el-table-column prop="name" label="设备名称" align="center"/> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pageBtn"> |
| | | <div class="pageBtn" style="margin-top: 10px"> |
| | | <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[3]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="chart-item chart-item2"> |
| | | <div class="chart-item chart-item2" :class="zin==5?'upItem':''"> |
| | | <div class="chart-tit"> |
| | | <span class="tit">其他数据分析</span> |
| | | <div class="filter-part filter-part2"> |
| | | <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | <el-cascader @focus="upgrade(5)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> |
| | | </div> |
| | | </div> |
| | | <div class="chart" style="margin-top: 10px;display: flex;align-items: center"> |
| | |
| | | import Cookies from 'js-cookie'; |
| | | import axios from 'axios'; |
| | | import * as echarts from "echarts"; |
| | | import screenfull from "screenfull"; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | |
| | | departmentList: Array<any>; |
| | | rankData: Array<any>; |
| | | wdsbData: Array<any>; |
| | | isFull:boolean; |
| | | themeColor:string; |
| | | zin:number |
| | | } |
| | | interface type { |
| | | id: number; |
| | |
| | | const aqby = ref("eChartAqby" + Date.now() + Math.random()) |
| | | const yhxh = ref("eChartYhxh" + Date.now() + Math.random()) |
| | | const state = reactive<stateType>({ |
| | | isFull: false, |
| | | themeColor: '#333', |
| | | zin: 1, |
| | | pageIndex1: 1, |
| | | pageSize1: 3, |
| | | totalSize1: 3, |
| | |
| | | initAqby() |
| | | initYhxh() |
| | | }); |
| | | |
| | | 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' |
| | | } |
| | | initSbzt() |
| | | initYcqs() |
| | | initAqxj() |
| | | initAqby() |
| | | initYhxh() |
| | | } |
| | | const upgrade =(level:number)=>{ |
| | | state.zin = level |
| | | console.log(state.zin,'zin') |
| | | } |
| | | type EChartsOption = echarts.EChartsOption |
| | | const initSbzt =()=>{ |
| | | let dom = document.getElementById(sbzt.value); |
| | |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | bottom: '10%' |
| | | bottom: '10%', |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor, |
| | | fontSize: 12 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 0 // 设置图例边框宽度为0 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'] |
| | | data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'], |
| | | axisLabel: { |
| | | color: state.themeColor |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | |
| | | option = { |
| | | title: { |
| | | text: '按期巡检率', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle:{ |
| | | color: state.themeColor |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | bottom: '5%', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor, |
| | | fontSize: 12 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 0 // 设置图例边框宽度为0 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | option = { |
| | | title: { |
| | | text: '按期保养率', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle:{ |
| | | color: state.themeColor |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | bottom: '5%', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor, |
| | | fontSize: 12 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 0 // 设置图例边框宽度为0 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | option = { |
| | | title: { |
| | | text: '隐患销号率', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle:{ |
| | | color: state.themeColor |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | bottom: '5%', |
| | | left: 'center' |
| | | left: 'center', |
| | | textStyle: { |
| | | // 设置默认的文字颜色 |
| | | color: state.themeColor, |
| | | fontSize: 12 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 0 // 设置图例边框宽度为0 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | aqxj, |
| | | aqby, |
| | | yhxh, |
| | | toFullscreen, |
| | | upgrade, |
| | | handleReview, |
| | | submitReview, |
| | | reLoadData, |
| | |
| | | height: calc(100vh - 144px); |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | .full{ |
| | | position:fixed; |
| | | height: 34px; |
| | | line-height: 34px; |
| | | top: 80px; |
| | | right: 20px; |
| | | z-index: 99999; |
| | | } |
| | | .demo-tabs { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | .topChart{ |
| | | width: 100%; |
| | | height: calc(50% - 10px); |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: flex-start; |
| | | margin-bottom: 20px; |
| | | height: 50%; |
| | | |
| | | .chart-item{ |
| | | width: calc((100% - 40px)/3); |
| | |
| | | |
| | | .chart-tit{ |
| | | width: 100%; |
| | | height: 15%; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | |
| | | } |
| | | .chart{ |
| | | width: 100%; |
| | | height: 88%; |
| | | |
| | | 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: 20% !important; |
| | | td{ |
| | | height: 20% !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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .c-item{ |
| | | width: calc((100% - 20px)/3); |
| | | height: 100%; |
| | |
| | | &:last-of-type{ |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | } |
| | | .homeCard { |
| | | width: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | |
| | | .main-card { |
| | | width: 100%; |
| | | height: 100%; |
| | | .cardTop { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | .mainCardBtn { |
| | | margin: 0; |
| | | .chart{ |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .top-info { |
| | | display: flex; |
| | | font-size: 16px; |
| | | font-weight: bolder; |
| | | align-items: center; |
| | | padding: 6px 10px; |
| | | background: #ffeb87; |
| | | border-radius: 4px; |
| | | border: 1px solid #ffae00; |
| | | margin-right: 20px; |
| | | |
| | | & > div { |
| | | vertical-align: middle; |
| | | white-space: nowrap; |
| | | span { |
| | | font-size: 22px; |
| | | color: #f3001e; |
| | | margin: 0 2px; |
| | | cursor: pointer; |
| | | |
| | | &:hover{ |
| | | text-decoration: underline; |
| | | } |
| | | .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: 20% !important; |
| | | td{ |
| | | height: 20% !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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .stepItem { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | margin-top: 30px; |
| | | margin-left: 30px; |
| | | padding-bottom: 30px; |
| | | padding-left: 40px; |
| | | border-left: 1px solid #a0cfff; |
| | | position: relative; |
| | | &:first-of-type { |
| | | margin-top: 30px; |
| | | } |
| | | &:first-of-type { |
| | | margin-bottom: 0; |
| | | border-left: none; |
| | | } |
| | | .stepNum { |
| | | position: absolute; |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 20px; |
| | | box-sizing: border-box; |
| | | font-size: 18px; |
| | | color: #333; |
| | | border: 1px solid #a0cfff; |
| | | line-height: 38px; |
| | | text-align: center; |
| | | left: -20px; |
| | | top: -30px; |
| | | background: #d9ecff; |
| | | } |
| | | .stepCard { |
| | | width: 100%; |
| | | margin-top: -30px; |
| | | |
| | | .box-card { |
| | | width: 100%; |
| | | |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | span { |
| | | font-weight: bold; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | |
| | | .text { |
| | | width: 100%; |
| | | font-size: 14px; |
| | | margin-bottom: 10px; |
| | | padding-left: 10px; |
| | | |
| | | span { |
| | | font-weight: bolder; |
| | | color: #409eff; |
| | | } |
| | | |
| | | &:last-of-type { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | .approveUnit { |
| | | width: 100%; |
| | | font-size: 14px; |
| | | margin-bottom: 20px; |
| | | padding: 10px 15px; |
| | | border: 1px solid #fff; |
| | | background: #ecf8ff; |
| | | border-radius: 6px; |
| | | .item-tit { |
| | | width: 100%; |
| | | display: flex; |
| | | color: #409eff; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | padding-bottom: 10px; |
| | | border-bottom: 1px solid #a0cfff; |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | &:last-of-type{ |
| | | text-align: center; |
| | | } |
| | | } |
| | | & > div { |
| | | flex: 1; |
| | | text-align: center; |
| | | } |
| | | } |
| | | .item-cont { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 0; |
| | | border-bottom: 1px solid #c6e2ff; |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | &:last-of-type{ |
| | | text-align: center; |
| | | } |
| | | } |
| | | & > div { |
| | | flex: 1; |
| | | text-align: center; |
| | | |
| | | & > div { |
| | | text-align: left; |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | span { |
| | | width: 45%; |
| | | &:first-of-type { |
| | | width: 30%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | &:last-of-type { |
| | | border-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | .approveItem { |
| | | width: 100%; |
| | | font-size: 14px; |
| | | margin-bottom: 20px; |
| | | padding: 10px 15px; |
| | | background: #ecf8ff; |
| | | border: 1px solid #fff; |
| | | border-radius: 6px; |
| | | .item-tit { |
| | | width: 100%; |
| | | display: flex; |
| | | color: #409eff; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | padding-bottom: 10px; |
| | | border-bottom: 1px solid #a0cfff; |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | } |
| | | & > div { |
| | | flex: 2; |
| | | text-align: center; |
| | | } |
| | | } |
| | | .item-cont { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 0; |
| | | border-bottom: 1px solid #c6e2ff; |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | } |
| | | & > div { |
| | | flex: 2; |
| | | text-align: center; |
| | | |
| | | & > div { |
| | | text-align: left; |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | margin-bottom: 10px; |
| | | span { |
| | | width: 50%; |
| | | &:first-of-type { |
| | | width: 25%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | &:last-of-type { |
| | | border-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | &:hover .card-header { |
| | | color: #0098f5; |
| | | } |
| | | &:hover .stepNum { |
| | | border: 2px solid #0098f5; |
| | | color: #0098f5; |
| | | } |
| | | } |
| | | .el-row { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | } |
| | | } |
| | | .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); |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | .upItem{ |
| | | position: relative; |
| | | z-index: 9999; |
| | | } |
| | | .chart-item2{ |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .el-card { |
| | | border: 0; |
| | | } |
| | |
| | | </div> |
| | | </div> |
| | | <div class="chart"> |
| | | <el-table :data="tableData" stripe border :header-cell-style="isFull==true?{background: none}:{ background: '#fafafa' }"> |
| | | <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }"> |
| | | <el-table-column label="任务信息" align="center"> |
| | | <template #default="scope"> |
| | | <div class="left-info"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="chart"> |
| | | <el-table :data="unusualData" stripe border :header-cell-style="isFull==true?{background: none}:{ background: '#fafafa' }"> |
| | | <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"/> |
| | |
| | | groupName: string; |
| | | } |
| | | export default { |
| | | name: 'workingHours', |
| | | name: 'inspectIndex', |
| | | components: { inspectRecordDialog, inspectList, unusualList }, |
| | | setup() { |
| | | const router = useRouter(); |
| | |
| | | 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' |
| | |
| | | } |
| | | initXjLine() |
| | | initSbtj() |
| | | console.log(state.isFull,'quanp',state.themeColor) |
| | | const element = document.getElementById('bigScreen') |
| | | if (!screenfull.isEnabled) { |
| | | ElMessage.warning('暂不不支持全屏'); |
| | | return false; |
| | | } |
| | | screenfull.toggle(element); |
| | | } |
| | | const checkAllRecord =()=>{ |
| | | inspectListRef.value.departmentList = state.departmentList |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | 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; |
| | | } |
| | |
| | | .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; |
| | |
| | | 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; |
| | | } |
对比新文件 |
| | |
| | | <template> |
| | | <el-dialog v-model="videoDetailDialog" title="实时监控" width="80%" center> |
| | | |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | | import { Session } from '/@/utils/storage'; |
| | | import { ElMessage } from 'element-plus' |
| | | import type { FormInstance, FormRules } from 'element-plus' |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | |
| | | |
| | | interface stateType { |
| | | videoDetailDialog:boolean |
| | | } |
| | | export default defineComponent({ |
| | | name: 'videoDetail', |
| | | components: {}, |
| | | props:[], |
| | | setup() { |
| | | const userInfo = useUserInfo() |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const state = reactive<stateType>({ |
| | | videoDetailDialog: false |
| | | }) |
| | | const openDialog = ()=>{ |
| | | state.videoDetailDialog = true |
| | | } |
| | | return { |
| | | openDialog, |
| | | ...toRefs(state) |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | |
| | | </style> |
| | |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | <el-button type="text" size="small">所有记录>></el-button> |
| | | </div> |
| | | </div> |
| | | <div class="chart"> |
| | | <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" :header-cell-style="isFull==true?{background: none}:{ background: '#fafafa' }"> |
| | | <el-table-column property="name" label="姓名" width="180" align="center"/> |
| | | <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" width="180"> |
| | | <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> |
| | |
| | | <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" /> |
| | | </el-col> |
| | | </el-row> |
| | | <el-table ref="multipleTableRef" :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> |
| | | <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="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"/> |
| | |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button> |
| | | <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button> |
| | | <el-button link type="primary" size="small" :icon="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 } from '@element-plus/icons-vue'; |
| | | import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked, VideoPlay } from '@element-plus/icons-vue'; |
| | | import { ElTable, ElMessage } from 'element-plus'; |
| | | import { specialIndexApi } from '/@/api/specialWorkSystem/specialIndex'; |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | |
| | | import axios from 'axios'; |
| | | import * as echarts from "echarts"; |
| | | import screenfull from "screenfull"; |
| | | import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue"; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | |
| | | 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 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, |
| | |
| | | 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', |
| | |
| | | warning: 51, |
| | | role: '监护人', |
| | | isCard: 0 |
| | | }, |
| | | { |
| | | name: '黄公子', |
| | | dep: '有机事业部', |
| | | warning: 69, |
| | | role: '作业人', |
| | | isCard: 1 |
| | | } |
| | | ], |
| | | reviewForm: { |
| | |
| | | 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' |
| | |
| | | initZyfb() |
| | | initSlfx() |
| | | initZyqs() |
| | | console.log(state.isFull,'quanp',state.themeColor) |
| | | const element = document.getElementById('bigScreen') |
| | | if (!screenfull.isEnabled) { |
| | | ElMessage.warning('暂不不支持全屏'); |
| | | return false; |
| | | } |
| | | screenfull.toggle(element); |
| | | } |
| | | const getTypePie = async ()=>{ |
| | | let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep); |
| | |
| | | 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) => { |
| | |
| | | Finished, |
| | | Download, |
| | | FolderChecked, |
| | | VideoPlay, |
| | | reviewFormRef, |
| | | videoRef, |
| | | zyfb, |
| | | slfx, |
| | | zyqs, |
| | | toFullscreen, |
| | | handleReview, |
| | | openVideo, |
| | | submitReview, |
| | | reLoadData, |
| | | toApply, |
| | |
| | | |
| | | .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; |
| | |
| | | } |
| | | .chart{ |
| | | width: 100%; |
| | | height: 88%; |
| | | 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%; |
| | |
| | | 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; |
| | | } |
| | |
| | | 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; |
| | |
| | | background-color: rgba(0,0,0,0) !important; |
| | | } |
| | | } |
| | | } |
| | | .el-button--text{ |
| | | 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; |
| | |
| | | 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; |
| | | } |