From 5f114549b05ad3334ca911e84e9698cade0995ca Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 20 三月 2023 11:07:17 +0800
Subject: [PATCH] 修改巡检首页，添加视频详情内容
---
src/views/intellectInspect/inspectIndex/index.vue | 318 -----
src/router/route.ts | 8
src/views/facilityManagement/facilityIndex/index.vue | 1956 ++++++++++++++++----------------
src/views/specialWorkSystem/specialIndex/components/videoDetail.vue | 160 ++
src/views/intellectInspect/inspectIndex/components/fullScreen.vue | 1069 ++++++++++++++++++
5 files changed, 2,229 insertions(+), 1,282 deletions(-)
diff --git a/src/router/route.ts b/src/router/route.ts
index 00c835b..27f6937 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -89,6 +89,14 @@
}
},
{
+ path: '/inspectFullScreen',
+ name: 'inspectFullScreen',
+ component: () => import('/@/views/intellectInspect/inspectIndex/components/fullScreen.vue'),
+ meta: {
+ title: '巡检首页全屏'
+ }
+ },
+ {
path: '/msgDetail',
name: 'msgDetail',
component: () => import('/@/views/riskWarningSys/warningBigScreen/indexs/msgDetail.vue'),
diff --git a/src/views/facilityManagement/facilityIndex/index.vue b/src/views/facilityManagement/facilityIndex/index.vue
index bad1aac..5514234 100644
--- a/src/views/facilityManagement/facilityIndex/index.vue
+++ b/src/views/facilityManagement/facilityIndex/index.vue
@@ -1,117 +1,117 @@
<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" :class="zin==1?'upItem':''">
- <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 filter-part2">
- <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" :class="zin==2?'upItem':''">
- <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 filter-part2">
- <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" :class="zin==3?'upItem':''">
- <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 filter-part3">
- <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 :teleported="false" v-model="chartSearch3.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="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"/>
- <el-table-column property="count" label="关联次数" align="center"/>
- </el-table>
- <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
- </div>
- <!-- <div class="chart" :id="ycqs"></div>-->
- </div>
- </div>
- <div class="topChart">
- <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
- <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 filter-part2">
- <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">
- <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"/>
- <el-table-column prop="dep" label="所属事业部" align="center"/>
- <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
- <el-table-column prop="tem" label="当前气温" align="center"/>
- <el-table-column prop="status" label="状态" align="center" width="180">
- <template #default="scope">
- <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
- </template>
- </el-table-column>
- </el-table>
- <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" :class="zin==5?'upItem':''">
- <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 filter-part2">
- <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">
- <div class="c-item" :id="aqxj"></div>
- <div class="c-item" :id="aqby"></div>
- <div class="c-item" :id="yhxh"></div>
- </div>
- </div>
- </div>
+ <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" :class="zin==1?'upItem':''">
+ <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 filter-part2">
+ <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" :class="zin==2?'upItem':''">
+ <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 filter-part2">
+ <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" :class="zin==3?'upItem':''">
+ <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 filter-part3">
+ <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 :teleported="false" v-model="chartSearch3.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="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"/>
+ <el-table-column property="count" label="关联次数" align="center"/>
+ </el-table>
+ <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
+ </div>
+ <!-- <div class="chart" :id="ycqs"></div>-->
+ </div>
+ </div>
+ <div class="topChart">
+ <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
+ <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 filter-part2">
+ <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">
+ <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"/>
+ <el-table-column prop="dep" label="所属事业部" align="center"/>
+ <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
+ <el-table-column prop="tem" label="当前气温" align="center"/>
+ <el-table-column prop="status" label="状态" align="center" width="180">
+ <template #default="scope">
+ <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ <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" :class="zin==5?'upItem':''">
+ <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 filter-part2">
+ <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">
+ <div class="c-item" :id="aqxj"></div>
+ <div class="c-item" :id="aqby"></div>
+ <div class="c-item" :id="yhxh"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts">
@@ -135,45 +135,45 @@
// 定义接口来定义对象的类型
interface stateType {
- applyData: Array<string>;
- workTimeList: Array<string>;
- multipleSelection: Array<any>;
- casProps: {};
- approveInfo: Object;
- dialogDetails: boolean;
- dialogReview: boolean;
- pageIndex1: number;
- pageSize1: number;
- chosenIndex: null | number;
- searchWord: number | null;
- searchStatus: number | null;
- chartSearch1: object;
- chartSearch2: object;
- chartSearch3: object;
- chartSearch4: object;
- totalSize1: number;
- details: {};
- workType: Array<type>;
- workType1: Array<type>;
- dialogType: number | null;
- departmentList: Array<any>;
- rankData: Array<any>;
- wdsbData: Array<any>;
- isFull:boolean;
- themeColor:string;
- zin:number
+ applyData: Array<string>;
+ workTimeList: Array<string>;
+ multipleSelection: Array<any>;
+ casProps: {};
+ approveInfo: Object;
+ dialogDetails: boolean;
+ dialogReview: boolean;
+ pageIndex1: number;
+ pageSize1: number;
+ chosenIndex: null | number;
+ searchWord: number | null;
+ searchStatus: number | null;
+ chartSearch1: object;
+ chartSearch2: object;
+ chartSearch3: object;
+ chartSearch4: object;
+ totalSize1: number;
+ details: {};
+ workType: Array<type>;
+ workType1: Array<type>;
+ dialogType: number | null;
+ departmentList: Array<any>;
+ rankData: Array<any>;
+ wdsbData: Array<any>;
+ isFull:boolean;
+ themeColor:string;
+ zin:number
}
interface type {
- id: number;
- name: string;
+ id: number;
+ name: string;
}
interface status {
name: string
value: number
}
interface DepartmentState {
- depId: number;
- depName: string;
+ depId: number;
+ depName: string;
}
interface User {
name: string;
@@ -181,774 +181,773 @@
info: string;
}
export default defineComponent({
- name: 'facilityIndex',
- components: {},
- setup() {
- const userInfo = useUserInfo();
- const { userInfos } = storeToRefs(userInfo);
- const router = useRouter();
- const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
- const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
- const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
- 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,
- dialogType: null,
- dialogReview: false,
- departmentList: [],
- chosenIndex: null,
- searchWord: null,
- searchStatus: null,
- chartSearch1: {
- searchDep: null,
- period: 'month'
- },
- chartSearch2: {
- searchDep: null,
- type: 0
- },
- chartSearch3: {
- searchDep: null
- },
- chartSearch4: {
- searchDep: null
- },
- applyData: [],
- workTimeList: [],
- multipleSelection: [],
- approveInfo: {
- approvalSteps: [],
- operators: []
- },
- casProps: {
- expandTrigger: 'hover',
- emitPath: false,
- value: 'depId',
- label: 'depName',
- checkStrictly: true
- },
- dialogDetails: false,
- details: {},
- workType1: [
- { id: 0, name: '所有作业' },
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- workType: [
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- rankData: [
- {
- num: '111',
- name: '设备1',
- dep: '事业部1',
- count: 58
- },
- {
- num: '222',
- name: '设备2',
- dep: '事业部2',
- count: 58
- },
- {
- num: '333',
- name: '设备3',
- dep: '事业部3',
- count: 58
- },
- {
- num: '444',
- name: '设备4',
- dep: '事业部4',
- count: 58
- },
- {
- num: '555',
- name: '设备5',
- dep: '事业部5',
- count: 58
- }
- ],
- wdsbData: [
- {
- num: '111',
- name: '设备1',
- dep: '事业部1',
- temRange: '>=35摄氏度',
- tem: '38摄氏度',
- status: '2'
- },
- {
- num: '222',
- name: '设备1',
- dep: '事业部1',
- temRange: '<=55摄氏度',
- tem: '38摄氏度',
- status: '1'
- },
- {
- num: '333',
- name: '设备1',
- dep: '事业部1',
- temRange: '>=55摄氏度',
- tem: '38摄氏度',
- status: '0'
- }
- ]
- });
- // 页面载入时执行方法
- onMounted(() => {
- // getListByPage();
- getAllDepartment();
- initSbzt()
- initYcqs()
- initAqxj()
- initAqby()
- initYhxh()
- });
- const toFullscreen =()=>{
- console.log(state.isFull,'quanp',state.themeColor)
- const element = document.getElementById('bigScreen')
- if (!screenfull.isEnabled) {
- ElMessage.warning('暂不不支持全屏');
- return false;
+ name: 'facilityIndex',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+ const router = useRouter();
+ const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
+ const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
+ const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
+ 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,
+ dialogType: null,
+ dialogReview: false,
+ departmentList: [],
+ chosenIndex: null,
+ searchWord: null,
+ searchStatus: null,
+ chartSearch1: {
+ searchDep: null,
+ period: 'month'
+ },
+ chartSearch2: {
+ searchDep: null,
+ type: 0
+ },
+ chartSearch3: {
+ searchDep: null
+ },
+ chartSearch4: {
+ searchDep: null
+ },
+ applyData: [],
+ workTimeList: [],
+ multipleSelection: [],
+ approveInfo: {
+ approvalSteps: [],
+ operators: []
+ },
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName',
+ checkStrictly: true
+ },
+ dialogDetails: false,
+ details: {},
+ workType1: [
+ { id: 0, name: '所有作业' },
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workType: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ rankData: [
+ {
+ num: '111',
+ name: '设备1',
+ dep: '事业部1',
+ count: 58
+ },
+ {
+ num: '222',
+ name: '设备2',
+ dep: '事业部2',
+ count: 58
+ },
+ {
+ num: '333',
+ name: '设备3',
+ dep: '事业部3',
+ count: 58
+ },
+ {
+ num: '444',
+ name: '设备4',
+ dep: '事业部4',
+ count: 58
+ },
+ {
+ num: '555',
+ name: '设备5',
+ dep: '事业部5',
+ count: 58
}
- screenfull.toggle(element);
- state.isFull = !state.isFull
- if(state.isFull == true){
- state.themeColor = '#11FEEE'
- }else{
- state.themeColor = '#333'
+ ],
+ wdsbData: [
+ {
+ num: '111',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '>=35摄氏度',
+ tem: '38摄氏度',
+ status: '2'
+ },
+ {
+ num: '222',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '<=55摄氏度',
+ tem: '38摄氏度',
+ status: '1'
+ },
+ {
+ num: '333',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '>=55摄氏度',
+ tem: '38摄氏度',
+ status: '0'
}
- initSbzt()
- initYcqs()
- initAqxj()
- initAqby()
- initYhxh()
+ ]
+ });
+ // 页面载入时执行方法
+ onMounted(() => {
+ // getListByPage();
+ getAllDepartment();
+ initSbzt()
+ initYcqs()
+ initAqxj()
+ initAqby()
+ initYhxh()
+ });
+ const toFullscreen =()=>{
+ console.log(state.isFull,'quanp',state.themeColor)
+ const element = document.getElementById('bigScreen')
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
}
- const upgrade =(level:number)=>{
- state.zin = level
- console.log(state.zin,'zin')
+ screenfull.toggle(element);
+ state.isFull = !state.isFull
+ if(state.isFull == true){
+ state.themeColor = '#11FEEE'
+ }else{
+ state.themeColor = '#333'
}
- type EChartsOption = echarts.EChartsOption
- const initSbzt =()=>{
- let dom = document.getElementById(sbzt.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- tooltip: {
- trigger: 'item'
+ 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);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '10%',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
},
- legend: {
- bottom: '10%',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '当前时间设备状态',
+ type: 'pie',
+ radius: '50%',
+ center: ['50%','35%'],
+ avoidLabelOverlap: false,
itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
+ },
+ labelLine: {
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ },
+ data: [
+ { value: 1048, name: '在用' },
+ { value: 735, name: '维修' },
+ { value: 580, name: '停用' },
+ { value: 484, name: '报废' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYcqs =()=>{
+ let dom = document.getElementById(ycqs.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ axisLabel: {
+ color: state.themeColor
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
}
},
- series: [
- {
- name: '当前时间设备状态',
- type: 'pie',
- radius: '50%',
- center: ['50%','35%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 1
- },
+ axisLabel:{
+ color: '#ccc'
+ }
+ },
+ grid: {
+ top: '8%',
+ bottom: '8%'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
+ type: 'line',
+ label:{
+ show: true
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initAqxj =()=>{
+ let dom = document.getElementById(aqxj.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期巡检率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '按期巡检率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
label: {
show: true,
- position: 'outside',
- overflow: 'truncate',
- borderWidth: 0,
- color: state.themeColor
- },
- labelLine: {
- show: true, // 显示指示线
- lineStyle: {
- color: '#ccc',
- width: 1,
- type: 'solid'
- }
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- },
- },
- data: [
- { value: 1048, name: '在用' },
- { value: 735, name: '维修' },
- { value: 580, name: '停用' },
- { value: 484, name: '报废' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initYcqs =()=>{
- let dom = document.getElementById(ycqs.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- xAxis: {
- type: 'category',
- data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
- axisLabel: {
- color: state.themeColor
- }
- },
- yAxis: {
- splitLine: {
- show: true,
- lineStyle: {
- color: '#fafafa',
- width: 1,
- type: 'dashed'
+ fontSize: 40,
+ fontWeight: 'bold'
}
},
- axisLabel:{
- color: '#ccc'
- }
- },
- grid: {
- top: '8%',
- bottom: '8%'
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line',
- label:{
- show: true
- }
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initAqxj =()=>{
- let dom = document.getElementById(aqxj.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '按期巡检率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
+ labelLine: {
+ show: true
},
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '按期巡检率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- 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: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initAqby =()=>{
- let dom = document.getElementById(aqby.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '按期保养率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '按期保养率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- 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: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initYhxh =()=>{
- let dom = document.getElementById(yhxh.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '隐患销号率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '隐患销号率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- 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: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- // 刷新
- const reLoadData = async () => {
- // getListByPage();
- };
-
- // 填写表单
- const toApply = () => {
- router.push({
- path: 'zysq'
- });
- };
-
- // 获取部门列表
- const getAllDepartment = async () => {
- let res = await teamManageApi().getAllDepartment();
- if (res.data.code === '200') {
- state.departmentList = JSON.parse(JSON.stringify(res.data.data))
- // recursion(state.departmentList);
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- // 分页获取列表
- // const getListByPage = async () => {
- // const dateRange = JSON.parse(JSON.stringify(state.searchDate))
- // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
- // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
- // let res = await workApplyApi().getApplyList(data);
- // if (res.data.code === '200') {
- // state.applyData = JSON.parse(JSON.stringify(res.data.data));
- // state.applyData = state.applyData.map((item) => {
- // if (item.operators == null || item.operators == []) {
- // item.operators = [];
- // } else {
- // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
- // }
- // return item;
- // });
- // state.totalSize1 = res.data.total;
- // } else {
- // ElMessage({
- // type: 'warning',
- // message: res.data.msg
- // });
- // }
- // };
-
- // 表格数据格式化
- const toNames = (row, column, cellValue, index) => {
- if (row.list == []) {
- return [];
- } else {
- const nameList = [];
- for (let i = 0; i < row.list.length; i++) {
- for (let t = 0; t < state.workTimeList.length; t++) {
- if (row.list[i] == state.workTimeList[t].id) {
- nameList.push(state.workTimeList[t].name);
- }
- }
- }
- return nameList.join();
- }
- };
-
- // 关键词查询记录
- // const searchRecord = async () => {
- // if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
- // ElMessage({
- // type: 'warning',
- // message: '请输入查询关键词'
- // });
- // } else {
- // getListByPage();
- // }
- // };
- // 重置搜索
- // const clearSearch = async () => {
- // state.searchWord = null;
- // state.searchDep = null;
- // state.searchDate = []
- // getListByPage();
- // };
- //
- // const handleSizeChange1 = (val: number) => {
- // state.pageSize1 = val;
- // getListByPage();
- // };
- // const handleCurrentChange1 = (val: number) => {
- // state.pageIndex1 = val;
- // getListByPage();
- // };
-
- const handleReview = (row)=>{
- state.dialogReview = true
- }
-
- const submitReview = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
- } else {
- console.log('error submit!', fields)
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
}
- })
+ ]
}
- // 折线图
- const renderMenu = async (value: string) => {
- Session.set('projectId', value);
- userInfos.value.projectId = value;
- await initBackEndControlRoutes();
- };
-
- return {
- View,
- Edit,
- Delete,
- Refresh,
- Plus,
- Finished,
- Download,
- FolderChecked,
- sbzt,
- ycqs,
- aqxj,
- aqby,
- yhxh,
- toFullscreen,
- upgrade,
- handleReview,
- submitReview,
- reLoadData,
- toApply,
- toNames,
- // searchRecord,
- // clearSearch,
- // getListByPage,
- // handleSizeChange1,
- // handleCurrentChange1,
- ...toRefs(state)
- };
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
}
+ const initAqby =()=>{
+ let dom = document.getElementById(aqby.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期保养率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '按期保养率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ 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: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYhxh =()=>{
+ let dom = document.getElementById(yhxh.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '隐患销号率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '隐患销号率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ 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: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 刷新
+ const reLoadData = async () => {
+ // getListByPage();
+ };
+
+ // 填写表单
+ const toApply = () => {
+ router.push({
+ path: 'zysq'
+ });
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ // recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 分页获取列表
+ // const getListByPage = async () => {
+ // const dateRange = JSON.parse(JSON.stringify(state.searchDate))
+ // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
+ // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
+ // let res = await workApplyApi().getApplyList(data);
+ // if (res.data.code === '200') {
+ // state.applyData = JSON.parse(JSON.stringify(res.data.data));
+ // state.applyData = state.applyData.map((item) => {
+ // if (item.operators == null || item.operators == []) {
+ // item.operators = [];
+ // } else {
+ // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
+ // }
+ // return item;
+ // });
+ // state.totalSize1 = res.data.total;
+ // } else {
+ // ElMessage({
+ // type: 'warning',
+ // message: res.data.msg
+ // });
+ // }
+ // };
+
+ // 表格数据格式化
+ const toNames = (row, column, cellValue, index) => {
+ if (row.list == []) {
+ return [];
+ } else {
+ const nameList = [];
+ for (let i = 0; i < row.list.length; i++) {
+ for (let t = 0; t < state.workTimeList.length; t++) {
+ if (row.list[i] == state.workTimeList[t].id) {
+ nameList.push(state.workTimeList[t].name);
+ }
+ }
+ }
+ return nameList.join();
+ }
+ };
+
+ // 关键词查询记录
+ // const searchRecord = async () => {
+ // if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
+ // ElMessage({
+ // type: 'warning',
+ // message: '请输入查询关键词'
+ // });
+ // } else {
+ // getListByPage();
+ // }
+ // };
+ // 重置搜索
+ // const clearSearch = async () => {
+ // state.searchWord = null;
+ // state.searchDep = null;
+ // state.searchDate = []
+ // getListByPage();
+ // };
+ //
+ // const handleSizeChange1 = (val: number) => {
+ // state.pageSize1 = val;
+ // getListByPage();
+ // };
+ // const handleCurrentChange1 = (val: number) => {
+ // state.pageIndex1 = val;
+ // getListByPage();
+ // };
+
+ const handleReview = (row)=>{
+ state.dialogReview = true
+ }
+
+ const submitReview = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ Finished,
+ Download,
+ FolderChecked,
+ sbzt,
+ ycqs,
+ aqxj,
+ aqby,
+ yhxh,
+ toFullscreen,
+ upgrade,
+ handleReview,
+ submitReview,
+ reLoadData,
+ toApply,
+ toNames,
+ // searchRecord,
+ // clearSearch,
+ // getListByPage,
+ // handleSizeChange1,
+ // handleCurrentChange1,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
- height: calc(100vh - 144px);
- box-sizing: border-box;
- overflow: hidden;
- .full{
- position:fixed;
- height: 34px;
- line-height: 34px;
- top: 80px;
- right: 20px;
- z-index: 9;
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .full{
+ position:fixed;
+ height: 34px;
+ line-height: 34px;
+ top: 80px;
+ right: 20px;
+ z-index: 9;
+ }
+ .demo-tabs {
+ width: 100%;
+ height: 100%;
+
+ &::v-deep(.el-tabs__content) {
+ height: calc(100% - 60px);
}
- .demo-tabs {
+
+ .el-tab-pane {
+ height: 100%;
+ }
+ }
+ .topChart{
+ width: 100%;
+ height: calc(50% - 10px);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+
+ .chart-item{
+ width: calc((100% - 40px)/3);
+ height: 100%;
+ margin-right: 20px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 0;
+ }
+
+ .chart-tit{
width: 100%;
- height: 100%;
-
- &::v-deep(.el-tabs__content) {
- height: calc(100% - 60px);
+ height: 15%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 16px;
+ font-weight: bolder;
+ white-space: nowrap;
}
-
- .el-tab-pane {
- height: 100%;
- }
- }
- .topChart{
- width: 100%;
- height: calc(50% - 10px);
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
-
- .chart-item{
- width: calc((100% - 40px)/3);
- height: 100%;
- margin-right: 20px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- margin-right: 0;
- }
-
- .chart-tit{
- width: 100%;
- height: 15%;
+ .filter-part{
display: flex;
- align-items: flex-start;
- justify-content: space-between;
- .tit{
- font-size: 16px;
- font-weight: bolder;
- white-space: nowrap;
+ align-items: center;
+ justify-content: right;
+ :deep(.el-cascader){
+ width: 35% !important;
}
- .filter-part{
- display: flex;
- align-items: center;
- justify-content: right;
- :deep(.el-cascader){
- width: 35% !important;
- }
- .el-select{
- width: 35% !important;
- margin-left: 10px;
- }
- .el-switch{
- width: 25% !important;
+ .el-select{
+ width: 35% !important;
+ margin-left: 10px;
+ }
+ .el-switch{
+ width: 25% !important;
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- .filter-part2{
- :deep(.el-cascader){
+ :deep(.el-switch__core){
width: 100% !important;
}
}
- .filter-part3{
- :deep(.el-cascader){
- width: 30% !important;
- }
- .el-select{
- width: 25% !important;
- margin-left: 10px;
- }
+ }
+ .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{
+ .filter-part3{
+ :deep(.el-cascader){
+ width: 30% !important;
+ }
+ .el-select{
+ width: 25% !important;
+ margin-left: 10px;
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ .el-table{
+ height: 90% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
height: 100% !important;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
height: 100% !important;
- .el-table__body{
+ tbody{
height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
+ .el-table__row{
+ height: 20% !important;
+ td{
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;
- }
+ 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;
}
}
}
@@ -957,99 +956,99 @@
}
}
}
- .c-item{
- width: calc((100% - 20px)/3);
- height: 100%;
- }
- .pageBtn {
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
}
- .el-radio-group{
- width: 20%;
+ .c-item{
+ width: calc((100% - 20px)/3);
+ height: 100%;
+ }
+ .pageBtn {
display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-30%);
+ align-items: center;
+ justify-content: right;
- .el-radio{
- width: 100%;
- margin-bottom: 4px;
- }
- }
- :deep(.active-ring-info){
- .active-ring-name{
- font-size: 1.5rem !important;
- text-align: center;
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
}
}
}
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
- .chart-item2{
- width: calc(50% - 10px);
- height: 100%;
- margin-right: 10px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- margin-right: 0;
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
}
- .chart{
- .el-table{
- height: 90% !important;
- :deep(.el-table__inner-wrapper){
- height: 100% !important;
- .el-table__header-wrapper {
- height: 20% !important;
- .el-table__header{
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
+
+ .chart-item2{
+ width: calc(50% - 10px);
+ height: 100%;
+ margin-right: 10px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 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;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
height: 100% !important;
- .el-table__body{
+ tbody{
height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
+ .el-table__row{
+ height: 20% !important;
+ td{
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;
- }
+ 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;
}
}
}
@@ -1061,32 +1060,33 @@
}
}
}
+ }
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
- width: 100%;
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- & > div {
- white-space: nowrap;
- margin-right: 20px;
- }
- }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
}
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
}
.container{
padding: 20px;
@@ -1231,18 +1231,18 @@
}
}
.el-card {
- border: 0;
+ border: 0;
}
.el-input{
- width: 100% !important;
+ width: 100% !important;
}
::v-deep(.el-date-editor){
- width: 100%;
+ width: 100%;
}
.el-select{
- width: 100%;
+ width: 100%;
}
:deep(.el-cascader){
- width: 100% !important;
+ width: 100% !important;
}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/intellectInspect/inspectIndex/components/fullScreen.vue b/src/views/intellectInspect/inspectIndex/components/fullScreen.vue
new file mode 100644
index 0000000..a0fb74f
--- /dev/null
+++ b/src/views/intellectInspect/inspectIndex/components/fullScreen.vue
@@ -0,0 +1,1069 @@
+<template>
+ <div class="home-container">
+ <div class="full">
+ <el-button type="text" style="height: 34px" @click="toIndex">
+ <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 class="item-bg" :color="['rgba(8, 109, 209, 0.2)']"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">年度巡检异常趋势</span>
+ </div>
+ <div class="chart" :id="xjLine"></div>
+ </div>
+ <div class="chart-item">
+ <dv-border-box10 class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">异常区域设备统计</span>
+ <div class="filter-part">
+ <el-switch
+ v-model="chartStatus"
+ inline-prompt
+ style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
+ active-text="区域"
+ inactive-text="设备"
+ />
+ </div>
+ </div>
+ <div class="chart" :id="sbtj"></div>
+ <el-radio-group v-model="period" size="small">
+ <el-radio border label="week">近7天</el-radio>
+ <el-radio border label="month">近30天</el-radio>
+ <el-radio border label="season">近90天</el-radio>
+ <el-radio border label="year">近一年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="midChart">
+ <dv-border-box10 class="item-bg"></dv-border-box10>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <div style="display: flex;align-items: center">
+ <span class="tit">当前巡检任务</span>
+ <div class="top-info" v-if="unchecked != 0 || unusual != 0">
+ <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
+ <div>预警消息：</div>
+ <div v-if="unchecked != 0">
+ 当日超期未巡检任务<el-tooltip
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
+ </div>
+ <span v-if="unchecked != 0 && unusual != 0">，</span>
+ <div v-if="unusual != 0">
+ 存在异常任务<el-tooltip
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(5)">{{ unusual }}</span
+ ></el-tooltip>个
+ </div>
+ 。
+ </div>
+ </div>
+ <div class="checkAll" @click="checkAllRecord()">
+ 全部记录>>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column label="任务信息" align="center">
+ <template #default="scope">
+ <div class="left-info">
+ <span>{{ scope.row.taskName }}，</span>
+ <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>
+ <p v-else>
+ <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务
+ </p>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">
+ <template #default="scope">
+ <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" width="180">
+ <template #default="scope">
+ <el-button type="text" size="small" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>
+ <el-button type="text" size="small" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
+ <div class="midChart">
+ <dv-border-box10 class="item-bg"></dv-border-box10>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">巡检异常清单</span>
+ <div class="checkAll" @click="checkAllList()">
+ 全部记录>>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="workOrderNum" label="工单编号" align="center"/>
+ <el-table-column prop="pointCode" label="异常巡检点" align="center"/>
+ <el-table-column prop="occurrenceTime" label="巡检（发现）时间" align="center"/>
+ <el-table-column prop="taskName" label="所属巡检任务" align="center"/>
+ <el-table-column prop="regionName" label="设备/区域名称" align="center"/>
+ <el-table-column prop="refer" label="正常参考值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="实际巡检值" align="center">
+ <template #default="scope">
+ <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/>
+ <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
+ <el-table-column prop="handlerStatus" label="处置状态" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
+ <el-table-column label="操作" align="center" width="180" fixed="right">
+ <template #default="scope">
+ <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button>
+ <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button>
+ <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button>
+ <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span>
+ </template>
+ </el-table-column>
+ </el-table>
+<!-- <div class="pageBtn">-->
+<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
+<!-- </div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title= '"工单编号：" + workNum'
+ width="60%"
+ :before-close="handleClose"
+ center
+ >
+ <div style="margin-bottom: 20px">
+ <div style="margin-bottom: 10px">处置前：</div>
+ <div v-if="beImgs && beImgs.length>0">
+ <el-image v-for="(item,index) in beImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :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: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" />
+ </div>
+ <div v-else>
+ 无照片信息
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="primary" @click="dialogVisible = false">
+ 确认
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
+ <inspect-list ref="inspectListRef"></inspect-list>
+ <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list>
+ </div>
+</template>
+
+<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, ElMessageBox } from 'element-plus';
+import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
+import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex'
+import { useRouter } from 'vue-router';
+import * as echarts from 'echarts'
+import inspectRecordDialog from './inspectRecordDialog.vue';
+import inspectList from './inspectList.vue';
+import unusualList from './unusualList.vue';
+import { departmentApi } from '/@/api/systemManage/department';
+import screenfull from "screenfull";
+import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
+// 定义接口来定义对象的类型
+interface stateType {
+ tableData: Array<string>;
+ unusualData: Array<any>;
+ unchecked: null | number;
+ unusual: null | number;
+ uncheckedList: [];
+ abnormalList: [];
+ pageIndex: number;
+ pageSize: number;
+ totalSize: number;
+ workTypeList: Array<type>;
+ departmentList: [];
+ timeType: Array<type>;
+ classGroupList: Array<classGroup>;
+ quotaList: [];
+ inspectPointAllList: [];
+ chartStatus:boolean;
+ period: string;
+ dialogVisible:boolean;
+ workNum: string;
+ beImgs: [];
+ afImgs: []
+}
+interface type {
+ id: number;
+ name: string;
+}
+interface classGroup {
+ id: number;
+ groupName: string;
+}
+export default {
+ name: 'inspectFullScreen',
+ components: { inspectRecordDialog, inspectList, unusualList },
+ setup() {
+ const router = useRouter();
+ const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
+ const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ workNum: '',
+ beImgs: [],
+ afImgs: [],
+ pageIndex: 1,
+ pageSize: 5,
+ totalSize: 0,
+ tableData: [],
+ unusualData: [],
+ unchecked: null,
+ unusual: null,
+ chartStatus: true,
+ period: 'month',
+ uncheckedList: [],
+ abnormalList: [],
+ workTypeList: [
+ { id: 1, name: '日常任务' },
+ { id: 2, name: '周期任务' }
+ ],
+ departmentList: [],
+ timeType: [
+ { id: 1, name: '分' },
+ { id: 2, name: '小时' },
+ { id: 3, name: '日' },
+ { id: 4, name: '月' },
+ { id: 5, name: '年' }
+ ],
+ classGroupList: [],
+ quotaList: [],
+ inspectPointAllList: [],
+ dialogVisible: false
+ });
+ const inspectRecordDialogRef = ref();
+ const inspectListRef = ref();
+ const unusualListRef = ref();
+ interface User {
+ name: string;
+ startTime: string;
+ endTime: string;
+ info: string;
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getInspectRecord();
+ getListExcepOrder();
+ getDayData();
+ getDepartmentData();
+ initXjLine()
+ initSbtj()
+ });
+ const toIndex =()=>{
+ router.push({
+ path: 'inspectIndex',
+ query: {
+
+ }
+ })
+ }
+ const checkAllRecord =()=>{
+ inspectListRef.value.departmentList = state.departmentList
+ inspectListRef.value.showInspectList()
+ }
+ const checkAllList =()=>{
+ unusualListRef.value.showUnusualList()
+ }
+ const acceptance =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认完成验收并结束工单？',
+ '完成验收',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().acceptedStatus({id: row.id});
+ if (res.data.code === '200') {
+ getListExcepOrder();
+ ElMessage({
+ type: 'success',
+ message: '验收成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '验收失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消验收',
+ })
+ })
+ }
+ const remark =(row:object)=>{
+ ElMessageBox.confirm(
+ '确认是否标记误报？',
+ '标记误报',
+ {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ center: true
+ }
+ )
+ .then(async() => {
+ const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
+ if (res.data.code === '200') {
+ getListExcepOrder();
+ ElMessage({
+ type: 'success',
+ message: '标记误报成功',
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '标记误报失败'
+ });
+ }
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '取消标记',
+ })
+ })
+ }
+ const openPhoto = async(row)=>{
+ state.dialogVisible = true
+ state.workNum = row.workOrderNum
+ const res = await inspectIndexApi().getListImages({id: row.id});
+ if (res.data.code === '200') {
+ state.beImgs = res.data.data.beforeImages
+ state.afImgs = res.data.data.afterImages
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: '图片获取失败'
+ });
+ }
+ }
+ type EChartsOption = echarts.EChartsOption
+ const initXjLine =()=>{
+ let dom = document.getElementById(xjLine.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['总趋势', '事业部'],
+ height: '15%',
+ top: 0,
+ bottom: 0,
+ padding:[1,1,1,0],
+ textStyle: {
+ // 设置默认的文字颜色
+ color: '#11FEEE'
+ },
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '3%',
+ bottom: 0,
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ // saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ axisLabel: {
+ color: '#11FEEE'
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
+ },
+ series: [
+ {
+ name: '总趋势',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
+ label:{
+ show: true,
+ color: '#95d475',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#95d475'
+ },
+ itemStyle:{
+ color: '#95d475',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ },
+ {
+ name: '事业部',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
+ label:{
+ show: true,
+ color: '#337ecc',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#337ecc'
+ },
+ itemStyle:{
+ color: '#337ecc',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initSbtj =()=>{
+ let dom = document.getElementById(sbtj.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: '#11FEEE',
+ // fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: '#11FEEE'
+ },
+ labelLine: {
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ },
+ data: [
+ { value: 1048, name: '区域1' },
+ { value: 735, name: '区域2' },
+ { value: 580, name: '区域3' },
+ { value: 484, name: '区域4' },
+ { value: 735, name: '区域5' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 分页获取
+ const getInspectRecord = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
+ let res = await inspectRecordApi().getInspectRecordByIndex(data);
+ if (res.data.code === '200') {
+ state.tableData = res.data.data.records;
+ state.totalSize = res.data.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+ // 分页获取
+ const getListExcepOrder = async () => {
+ const data = { pageSize: 4, pageIndex: state.pageIndex };
+ let res = await inspectIndexApi().getListExcepOrderByPage(data);
+ if (res.data.code === '200') {
+ state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+ //获取部门
+ const getDepartmentData = async () => {
+ let res = await departmentApi().getDepartmentList();
+ if (res.data.code === '200') {
+ state.departmentList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ //获取当日数据
+ const getDayData = async () => {
+ let res = await inspectRecordApi().getDayRecord();
+ if (res.data.code === '200') {
+ state.unchecked = res.data.data.noCheckTaskCount;
+ state.unusual = res.data.data.abnormalTaskCount;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const handleSizeChange = (val: number) => {
+ state.pageSize = val;
+ getInspectRecord();
+ };
+ const handleCurrentChange = (val: number) => {
+ state.pageIndex = val;
+ getInspectRecord();
+ };
+
+ const toLine = (item) => {
+ console.log(item,'item')
+ let id = item.id;
+ console.log(id,'id')
+ router.push({
+ path: 'intelligentLine',
+ query: {
+ id: id
+ }
+ });
+ };
+
+ const toOverTime = (id) => {
+ console.log(state.uncheckedList, 'list');
+ router.push({
+ path: 'inspectRecord',
+ query: {
+ id: id,
+ }
+ });
+ };
+ const toDetails = (type: string, item) => {
+ inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
+ };
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ xjLine,
+ sbtj,
+ Plus,
+ router,
+ inspectRecordDialogRef,
+ inspectListRef,
+ unusualListRef,
+ toIndex,
+ checkAllRecord,
+ checkAllList,
+ acceptance,
+ remark,
+ openPhoto,
+ toLine,
+ toOverTime,
+ toDetails,
+ handleSizeChange,
+ handleCurrentChange,
+ ...toRefs(state)
+ };
+ }
+};
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+@media screen and (min-width: 1366px) {
+
+}
+@media screen and (min-width: 1200px) and (max-width: 1366px) {
+
+}
+@media screen and (max-width: 1200px) {
+
+}
+
+.home-container {
+ height: 100vh;
+ box-sizing: border-box;
+ overflow: hidden;
+ 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{
+ width: 100%;
+ height: calc((100% - 40px) / 3);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+
+ .chart-item{
+ width: calc(60% - 20px);
+ height: 100%;
+ margin-right: 20px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+ border-radius: 4px;
+ background: rgba(0, 61, 121, 0.2);
+ backdrop-filter: blur(5px);
+ z-index: 2;
+
+ &:last-of-type{
+ width: 40%;
+ margin-right: 0;
+ position: relative;
+ z-index: 1;
+ }
+ .item-bg{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+ .chart-tit{
+ width: 100%;
+ height: 15%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 1.33rem;
+ font-weight: bolder;
+ 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;
+ }
+ }
+ .filter-part{
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ width: 20%;
+ .el-switch{
+ width: 100% !important;
+ :deep(.el-switch__core){
+ width: 100% !important;
+ }
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ .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;
+ }
+ }
+ }
+ }
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
+
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
+ }
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
+ }
+ .midChart{
+ height: calc((100% - 40px) / 3);
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ padding: 20px;
+ 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;
+ }
+ .chart-item{
+ width: 100%;
+ height: 100%;
+ padding: 0 0 20px;
+
+ .chart-tit{
+ width: 100%;
+ height: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tit{
+ font-size: 20px;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ :deep(.el-switch__core){
+ width: 120px;
+ }
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ background: #ffeb87;
+ padding: 4px 10px;
+ margin-left: 20px;
+ border-radius: 2px;
+ border: 1px solid #ffae00;
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ height: 100%;
+ span {
+ color: #f3001e;
+ margin: 0 4px;
+ font-size: 18px;
+ cursor: pointer;
+ font-weight: bolder;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ .checkAll{
+ cursor: pointer;
+ color: #11feee;
+ &:hover{
+ color: #409eff
+ }
+ }
+ }
+
+ .chart{
+ width: 100%;
+ height: 85%;
+ margin-top: 10px;
+
+ .el-table{
+ height: 100% !important;
+ 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
+ }
+ }
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
+ height: 100% !important;
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
+ height: 100% !important;
+ tbody{
+ height: 100% !important;
+ .el-table__row{
+ height: 25% !important;
+ td{
+ height: 25% !important;
+ padding: 0 0 !important;
+ .left-info{
+ display: flex;
+ align-items: center;
+ }
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .el-button{
+ padding: 0 !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .pageBtn {
+ position: absolute;
+ bottom: 15px;
+ right: 20px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ }
+ }
+
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+ }
+}
+
+.el-input {
+ width: 100% !important;
+}
+.el-date-editor::v-deep {
+ width: 100%;
+}
+.el-select {
+ width: 100%;
+}
+:deep(.el-textarea.is-disabled .el-textarea__inner) {
+ background-color: var(--el-card-bg-color);
+ color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__inner) {
+ color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__wrapper) {
+ background-color: var(--el-card-bg-color);
+}
+</style>
diff --git a/src/views/intellectInspect/inspectIndex/index.vue b/src/views/intellectInspect/inspectIndex/index.vue
index 668f6f7..ce2d582 100644
--- a/src/views/intellectInspect/inspectIndex/index.vue
+++ b/src/views/intellectInspect/inspectIndex/index.vue
@@ -1,30 +1,22 @@
<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>
<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">
@@ -47,7 +39,6 @@
</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">
@@ -109,7 +100,6 @@
</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>
@@ -235,8 +225,6 @@
inspectPointAllList: [];
chartStatus:boolean;
period: string;
- isFull:boolean;
- themeColor:string;
dialogVisible:boolean;
workNum: string;
beImgs: [];
@@ -258,13 +246,11 @@
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: [],
@@ -311,21 +297,12 @@
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
@@ -433,7 +410,7 @@
padding:[1,1,1,0],
textStyle: {
// 设置默认的文字颜色
- color: state.themeColor
+ color: '#333'
},
},
grid: {
@@ -453,7 +430,7 @@
boundaryGap: false,
data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
axisLabel: {
- color: state.themeColor
+ color: '#333'
}
},
yAxis: {
@@ -532,7 +509,7 @@
top: 'center',
textStyle: {
// 设置默认的文字颜色
- color: state.themeColor,
+ color: '#333',
// fontSize: 12
},
itemStyle: {
@@ -555,7 +532,7 @@
position: 'outside',
overflow: 'truncate',
borderWidth: 0,
- color: state.themeColor
+ color: '#333'
},
labelLine: {
show: true, // 显示指示线
@@ -604,7 +581,7 @@
};
// 分页获取
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))
@@ -701,7 +678,7 @@
...toRefs(state)
};
}
-};
+}
</script>
<style scoped lang="scss">
@@ -720,6 +697,7 @@
height: calc(100vh - 144px);
box-sizing: border-box;
overflow: hidden;
+ overflow-y: scroll;
.full{
position:fixed;
height: 34px;
@@ -730,7 +708,7 @@
}
.topChart{
width: 100%;
- height: calc((100% - 40px) / 3);
+ height: 300px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@@ -802,7 +780,6 @@
}
}
.midChart{
- height: calc((100% - 40px) / 3);
width: 100%;
background: #fff;
display: flex;
@@ -867,60 +844,10 @@
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;
@@ -954,212 +881,7 @@
}
}
}
-.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;
}
diff --git a/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue b/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
index 4f51c2b..8c37485 100644
--- a/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
+++ b/src/views/specialWorkSystem/specialIndex/components/videoDetail.vue
@@ -1,11 +1,46 @@
<template>
<el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
<div style="margin-bottom: 20px">
- <el-button type="warning">人工录入警报信息</el-button>
+ <el-button type="warning" @click="fillDialog = true">人工录入警报信息</el-button>
</div>
<div class="info">
<!-- <video class="video-cont" autoplay src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682" controls></video>-->
- <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
+ <div class="left-info">
+ <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
+ <div class="chart-area">
+ <div class="chart-item">
+ <div class="top-tit">
+ <div class="tit">基础指标数据（可燃气体浓度、氧气、一氧化碳、硫化氢按需展示）：</div>
+ <el-button type="warning" @click="reportDialog = true">监管异常填报</el-button>
+ </div>
+ <el-table :data="basicData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="type" label="类别" align="center"/>
+ <el-table-column property="time" label="填报时间" align="center"/>
+ <el-table-column property="name" label="填报人" align="center"/>
+ <el-table-column property="number" label="值" align="center"/>
+ <el-table-column property="isGood" label="是否合格" align="center">
+ <template #default="scope">
+ <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="chart-item">
+ <div class="top-tit"><div class="tit">现场检查代码：</div></div>
+ <el-table :data="checkData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="name" label="现在检查人" align="center"/>
+ <el-table-column property="time" label="检查填报时间" align="center"/>
+ <el-table-column property="content" label="检查内容" align="center"/>
+ <el-table-column property="info" label="描述" align="center"/>
+ <el-table-column property="isGood" label="是否合格" align="center">
+ <template #default="scope">
+ <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
<div class="right-info">
<div class="info-item">
<div class="info-tit">
@@ -39,7 +74,50 @@
</div>
</div>
</div>
-
+ <el-dialog v-model="fillDialog" title="作业全过程监测风险警报信息发现录入" width="50%" center>
+ <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="170px">
+ <el-form-item label="风险描述：" prop="describe">
+ <el-input
+ v-model="reviewForm.describe"
+ :autosize="{ minRows: 4, maxRows: 10 }"
+ type="textarea"
+ prop="desc"
+ placeholder="请输入风险描述信息"
+ />
+ </el-form-item>
+ <el-form-item label="是否已通知现场负责人：" prop="isInform">
+ <el-radio-group v-model="reviewForm.isInform">
+ <el-radio :label="1">是</el-radio>
+ <el-radio :label="0">否</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="fillDialog = false">取消</el-button>
+ <el-button type="primary">确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="reportDialog" title="基础指标数据作业过程中监管异常填报" width="50%" center>
+ <div class="tip">
+ 提示：动火作业被测可燃气体或蒸气浓度不应大于10%LEL。您在现场人员未发现或未如实填报时，才需要填写此项。
+ </div>
+ <el-form ref="reportFormRef" :model="reportForm" :rules="reportRules" label-width="120px">
+ <el-form-item label="可燃气体浓度：" prop="problem">
+ <el-input
+ v-model="reportForm.problem"
+ prop="problem"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="reportDialog = false">取消</el-button>
+ <el-button type="primary">确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
</el-dialog>
</template>
@@ -56,6 +134,12 @@
interface stateType {
videoDetailDialog:boolean
+ basicData: Array<any>
+ checkData: Array<any>
+ fillDialog: boolean
+ reviewForm: object
+ reportForm: object
+ reportDialog: boolean
}
export default defineComponent({
name: 'videoDetail',
@@ -65,7 +149,50 @@
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
const state = reactive<stateType>({
- videoDetailDialog: false
+ videoDetailDialog: false,
+ basicData:[
+ {
+ type: '可燃气体浓度',
+ time: '2023-03-20 09:09',
+ name: '李羽飞（动火分析人）',
+ number: '3%LEL',
+ isGood: 0
+ },
+ {
+ type: '可燃气体浓度',
+ time: '2023-03-20 09:09',
+ name: '李羽飞（动火分析人）',
+ number: '2.9%LEL',
+ isGood: 0
+ }
+ ],
+ checkData:[
+ {
+ name: '杨冬冬',
+ time: '2023-03-20 09:09',
+ content: '防火面罩不少于2个',
+ info: '2个',
+ isGood: 0
+ },
+ {
+ name: '杨冬冬',
+ time: '2023-03-20 09:09',
+ content: '电源插座是否防爆',
+ info: '是',
+ isGood: 0
+ },
+ {
+ name: '杨冬冬',
+ time: '2023-03-20 09:09',
+ content: '除动火人和监护人有无其他人员在场',
+ info: '有信息化人员',
+ isGood: 1
+ }
+ ],
+ fillDialog: false,
+ reportDialog: false,
+ reviewForm: {},
+ reportForm: {}
})
const openDialog = ()=>{
state.videoDetailDialog = true
@@ -85,10 +212,28 @@
align-items: flex-start;
justify-content: space-between;
- .video-cont{
+ .left-info{
width: calc(70% - 20px);
- height: 60vh;
margin-right: 20px;
+ .video-cont{
+ width: 100%;
+ min-height: 500px;
+ }
+ .chart-area{
+ width: 100%;
+ background: #fafafa;
+ padding: 20px;
+ margin-top: 20px;
+ .chart-item{
+ margin-bottom: 20px;
+ .top-tit{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ }
+ }
+ }
}
.right-info{
width: 30%;
@@ -124,4 +269,7 @@
}
}
}
+ .tip{
+ margin-bottom: 20px;
+ }
</style>
--
Gitblit v1.9.2