<template>
|
<div class="home-container">
|
<div class="full">
|
<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>
|
</div>
|
<div style="height: 100%">
|
<div class="topChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">年度巡检异常趋势</span>
|
<div class="filter-part">
|
<el-cascader v-model="searchDepId" :options="depList" :props="casProps" :show-all-levels="false" size="small"/>
|
</div>
|
</div>
|
<div class="chart" :id="xjLine"></div>
|
</div>
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">异常区域设备统计</span>
|
<div class="filter-part2">
|
<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";
|
import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
|
import {specialIndexApi} from "/@/api/specialWorkSystem/specialIndex";
|
// 定义接口来定义对象的类型
|
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: [];
|
searchDepId: number|null
|
depList: Array<any>
|
casProps:object
|
}
|
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>({
|
workNum: '',
|
beImgs: [],
|
afImgs: [],
|
pageIndex: 1,
|
pageSize: 10,
|
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: '年' }
|
],
|
searchDepId: null,
|
depList: [
|
{
|
name: '电石事业部',
|
depId: 49
|
},
|
{
|
name: '电力事业部',
|
id: 50
|
},
|
{
|
name: '有机化工事业部',
|
id: 48
|
},
|
{
|
name: '甲醇事业部',
|
id: 32
|
}
|
],
|
casProps: {
|
expandTrigger: 'hover',
|
emitPath: false,
|
value: 'depId',
|
label: 'depName',
|
checkStrictly: true
|
},
|
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(() => {
|
getDepartmentData();
|
getCountExcepOrder();
|
getInspectRecord();
|
getListExcepOrder();
|
getDayData();
|
initXjLine()
|
initSbtj()
|
});
|
const toFullscreen =()=>{
|
router.push({
|
path: 'inspectFullScreen',
|
query: {
|
|
}
|
})
|
}
|
const checkAllRecord =()=>{
|
inspectListRef.value.departmentList = state.departmentList
|
inspectListRef.value.showInspectList()
|
}
|
const checkAllList =()=>{
|
unusualListRef.value.showUnusualList()
|
}
|
const getCountExcepOrder = async ()=>{
|
let res = await inspectIndexApi().getCountExcepOrder({depId: state.searchDepId});
|
if (res.data.code === '200') {
|
console.log('折线图趋势数据>>>', res.data.data)
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
const 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: '#333'
|
},
|
},
|
grid: {
|
top: '15%',
|
left: '3%',
|
right: '3%',
|
bottom: 0,
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
// saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
|
axisLabel: {
|
color: '#333'
|
}
|
},
|
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: '#333',
|
// 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: '#333'
|
},
|
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: 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))
|
} 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;
|
const newList = []
|
for(let i of state.departmentList[0].children){
|
if(i.depId == 32 || i.depId == 48 ||i.depId == 49 || i.depId == 50){
|
newList.push(i)
|
}
|
}
|
state.depList = newList
|
console.log(state.depList,'3434')
|
} 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;
|
overflow-y: scroll;
|
.full{
|
position:fixed;
|
height: 34px;
|
line-height: 34px;
|
top: 80px;
|
right: 20px;
|
z-index: 9;
|
}
|
.topChart{
|
width: 100%;
|
height: 300px;
|
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;
|
.el-select{
|
width: 50% !important;
|
margin-left: 10px;
|
}
|
.el-switch{
|
width: 100% !important;
|
:deep(.el-switch__core){
|
width: 100% !important;
|
}
|
}
|
}
|
.filter-part2{
|
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{
|
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;
|
}
|
.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;
|
.left-info{
|
display: flex;
|
align-items: center;
|
}
|
.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>
|
