<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 style="height: 100%">
|
<div class="topChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">年度巡检异常趋势</span>
|
</div>
|
<div class="chart" :id="xjLine"></div>
|
</div>
|
<div class="chart-item">
|
<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">
|
<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">
|
<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 './components/inspectRecordDialog.vue';
|
import inspectList from './components/inspectList.vue';
|
import unusualList from './components/unusualList.vue';
|
import { departmentApi } from '/@/api/systemManage/department';
|
import screenfull from "screenfull";
|
// 定义接口来定义对象的类型
|
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;
|
isFull:boolean;
|
themeColor:string;
|
dialogVisible:boolean;
|
workNum: string;
|
beImgs: [];
|
afImgs: []
|
}
|
interface type {
|
id: number;
|
name: string;
|
}
|
interface classGroup {
|
id: number;
|
groupName: string;
|
}
|
export default {
|
name: 'inspectIndex',
|
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>({
|
isFull: false,
|
themeColor: '#333',
|
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 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()
|
}
|
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: state.themeColor
|
},
|
},
|
grid: {
|
top: '15%',
|
left: '3%',
|
right: '3%',
|
bottom: 0,
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
// saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
|
axisLabel: {
|
color: state.themeColor
|
}
|
},
|
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: state.themeColor,
|
// fontSize: 12
|
},
|
itemStyle: {
|
borderWidth: 0 // 设置图例边框宽度为0
|
}
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 1,
|
borderColor: '#fff',
|
borderWidth: 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: '区域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,
|
toFullscreen,
|
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: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.full{
|
position:fixed;
|
height: 34px;
|
line-height: 34px;
|
top: 80px;
|
right: 20px;
|
z-index: 9;
|
}
|
.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;
|
|
&:last-of-type{
|
width: 40%;
|
margin-right: 0;
|
}
|
|
.chart-tit{
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
.tit{
|
font-size: 1.33rem;
|
font-weight: bolder;
|
}
|
.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: 88%;
|
}
|
.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%;
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
padding: 20px;
|
|
.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;
|
}
|
: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;
|
&:hover{
|
color: #409eff
|
}
|
}
|
}
|
.chart{
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
.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(8, 109, 209, 0.2);
|
border: 1px solid rgba(54, 252, 252, .6);
|
backdrop-filter: blur(5px);
|
position: relative;
|
z-index: 2;
|
&:last-of-type{
|
position: relative;
|
z-index: 1;
|
}
|
.el-radio.is-bordered.is-checked{
|
border-color: #11FEEE !important;
|
:deep(.el-radio__inner){
|
border-color: #11FEEE !important;
|
background: #11FEEE !important;
|
}
|
:deep(.el-radio__label){
|
color: #11FEEE !important
|
}
|
}
|
.chart-tit{
|
.tit{
|
color: #11FEEE;
|
}
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
.el-cascader-node{
|
.in-active-path{
|
background: #0049af;
|
}
|
&:hover{
|
background: #0049af;
|
}
|
}
|
.el-cascader-node__label{
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item.hover{
|
background: #0049af;
|
}
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 1.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 0.8rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
.chart{
|
.el-table {
|
color: #11FEEE !important;
|
background-color: rgba(0,0,0,0) !important;
|
:deep(thead){
|
color: #11FEEE !important;
|
}
|
: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(8, 109, 209, 0.2);
|
border: 1px solid rgba(54, 252, 252, .6);
|
backdrop-filter: blur(5px);
|
position: relative;
|
z-index: 3;
|
.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;
|
}
|
.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>
|
