You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1624 lines
48 KiB
1624 lines
48 KiB
<template> |
|
<div class="container"> |
|
<!-- 用户 --> |
|
<div style="width:100%;height:100%;" |
|
v-show="role_id == '1123598816738675200' || role_id == '1123598816738675201' || role_id == '1846419477876510721'"> |
|
<div class="mask" v-show="isShowMask"> |
|
账号审核中... |
|
</div> |
|
<div class="top_box"> |
|
<div class="top_left"> |
|
<img style="width:100%;height:100%;border-radius: 10px;" :src="backGroundPic" alt=""> |
|
</div> |
|
<div class="top_right"> |
|
<div class="work_box"> |
|
<div class="work_tit">工作台</div> |
|
<div class="work_con"> |
|
<div class="work_item" v-for="(item, index) in workList" :key="item.name" @click="ckickItem(item)"> |
|
<div class="item_top"> |
|
<div class="item_img"> |
|
<!-- <img :src="item.img" alt=""> --> |
|
<img |
|
:src="index == 0 ? require('@/assets/images/lab_xj.png') : index == 1 ? require('@/assets/images/bs_jl.png') : |
|
index == 2 ? require('@/assets/images/alarm.png') : index == 3 ? require('@/assets/images/full.png') : ''" |
|
alt=""> |
|
</div> |
|
<div class="right_item"> |
|
<div class="item_name">{{ item.name }}</div> |
|
<div class="item_num" >{{ item.num }}</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
<div class="work_item" v-show="isShowOther"> |
|
<div class="item_top"> |
|
<div class="item_img"> |
|
<img :src="require('@/assets/images/other.png')" alt=""> |
|
</div> |
|
<div class="right_item"> |
|
<div class="item_name">其他</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
<div class="xj_box"> |
|
<div class="xj_tit">实验室巡检</div> |
|
<div class="xj_con"> |
|
<!-- <el-carousel direction="vertical" interval="10000" :autoplay="true" class="xj_con_box"> |
|
<el-carousel-item v-for="item in inspectionList" :key="item.title"> |
|
<div class="xj_item"> |
|
<div class="xj_top"> |
|
<div class="tit_box"> |
|
<div class="xj_title">{{ item.inspectionName }}</div> |
|
<div class="xj_time">巡检计划时间：{{ item.inspectionTime }}</div> |
|
</div> |
|
<div class="xj_task">{{ taskType == 1 ? '周期任务' : '单次任务' }}</div> |
|
</div> |
|
<div class="xj_center">巡检人：{{ item.inspectionPerson }}</div> |
|
<div class="xj_bottom"> |
|
<div class="xj_status">{{ item.isStart == 0 ? '未开始' : '已开始' }}</div> |
|
<div class="xj_yytime">预约时间：{{ item.appointTime }}</div> |
|
</div> |
|
</div> |
|
</el-carousel-item> |
|
</el-carousel> --> |
|
<vueSeamless v-if="inspectionList.length >= 1" :data="inspectionList" :class-option="alarmOption" class="xj_con_box"> |
|
<div class="xj_item" v-for="item in inspectionList" :key="item.name"> |
|
<div class="xj_top"> |
|
<div class="tit_box"> |
|
<div class="xj_title">{{ item.inspectionName }}</div> |
|
<div class="xj_time">巡检计划时间：{{ item.inspectionTime }}</div> |
|
</div> |
|
<div class="xj_task">{{ taskType == 1 ? '周期任务' : '单次任务' }}</div> |
|
</div> |
|
<div class="xj_center"> |
|
巡检人：{{ item.inspectionPerson }} |
|
<div class="xj_status">{{ item.isStart == 0 ? '未开始' : '已开始' }}</div> |
|
<div class="xj_yytime">预约时间：{{ item.appointTime }}</div> |
|
</div> |
|
<!-- <div class="xj_bottom"> |
|
|
|
</div> --> |
|
</div> |
|
</vueSeamless> |
|
<el-empty class="xj_con_box" v-show="inspectionList.length == 0" description="暂无数据"></el-empty> |
|
</div> |
|
</div> |
|
<div class="xj_box"> |
|
<div class="xj_tit">实验室维修</div> |
|
<div class="xj_con"> |
|
<vueSeamless v-if="requirementList.length >= 1" :data="requirementList" :class-option="alarmOption" class="xj_con_box"> |
|
<div class="xj_item" v-for="item in requirementList" :key="item.name" @click="clickReqiure(item)"> |
|
<div class="xj_top"> |
|
<div class="tit_box"> |
|
<div class="xj_title">{{ item.requirementCode }}</div> |
|
</div> |
|
<div class="xj_task">{{ getStatus('maintain', role_id, item.status).name}}</div> |
|
</div> |
|
<div class="xj_center"> |
|
<div class="xj_status">{{ item.faultDescribe }}</div> |
|
</div> |
|
<!-- <div class="xj_bottom"> |
|
|
|
</div> --> |
|
</div> |
|
</vueSeamless> |
|
<el-empty class="xj_con_box" v-show="requirementList.length == 0" description="暂无数据"></el-empty> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bottom_box"> |
|
<div class="bottom_left"> |
|
<div class="left_tit">设备报警</div> |
|
<div class="left_con"> |
|
<vueSeamless v-if="alarmList.length >= 1" :data="alarmList" :class-option="alarmOption" |
|
class="tablebox_item_warp"> |
|
<div class="left_item" v-for="item in alarmList" :key="item.name"> |
|
<div class="item_left"> |
|
<div class="item_circle" |
|
:class="item.alarmLevel == '1' ? 'one' : item.alarmLevel == '2' ? 'two' : ''"> |
|
<div class="status">{{ item.alarmLevel == '1' ? '一级' : item.alarmLevel == '2' ? '二级' : '' }}</div> |
|
<div class="status_txt">{{ item.alarmLevel == '1' ? '特别严重' : item.alarmLevel == '2' ? '严重' : '' }} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="item_right"> |
|
<div class="item_con"> |
|
<div class="item_top"> |
|
<div>{{ item.deviceName }}</div> |
|
<div class="item_btn">一键报送</div> |
|
</div> |
|
<div class="item_bot"> |
|
<div>品牌：{{ item.brand }}</div> |
|
<div>型号：{{ item.model }}</div> |
|
<div>报警时间：{{ item.alarmTime }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</vueSeamless> |
|
<el-empty class="nodata" v-show="alarmList.length == 0" description="暂无报警"></el-empty> |
|
</div> |
|
</div> |
|
<div class="bottom_right"> |
|
<div class="right_tit">维修统计</div> |
|
<div class="right_con"> |
|
<div class="bar_box"> |
|
<div class="bar_top"> |
|
选择时间：<el-date-picker v-model="staticBarTime" type="daterange" range-separator="至" |
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" |
|
@change="changeStaticBarTime"> |
|
</el-date-picker> |
|
</div> |
|
<div class="bar_charts" id="bar_echart"></div> |
|
</div> |
|
<div class="pie_box"> |
|
<div class="pie_top"> |
|
选择时间：<el-date-picker v-model="staticPieTime" type="daterange" range-separator="至" |
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" |
|
@change="changestaticPieTime"> |
|
</el-date-picker> |
|
</div> |
|
<div class="pie_charts"> |
|
<div class="pie_chart"> |
|
<div class="charts_box" id="error_echarts"></div> |
|
<div class="charts_tit">故障现象分类</div> |
|
</div> |
|
<div class="pie_chart"> |
|
<div class="charts_box" id="device_echarts"></div> |
|
<div class="charts_tit">设备分类</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 客服/维修负责人 --> |
|
<div style="width:100%;height:100%;" v-if="role_id == '1839536982874193922' || role_id == '1839537055389515777'||role_id == '1867020647911350274'"> |
|
<div class="left_box"> |
|
<div class="map_box"> |
|
<Map style="width:100%;height:100%;"></Map> |
|
</div> |
|
<div class="bench_box"> |
|
<div class="bench_tit"><span style="font-weight: 550;">工作台</span> |
|
</div> |
|
<div class="bench_con"> |
|
<div class="bench_item" v-for="(item, index) in benchList" :key="item.title"> |
|
<img v-show="role_id == '1839536982874193922'" style="width: 32px;height: 32px;" |
|
:src="index == 0 ? require('@/assets/svg/task.svg') : index == 1 ? require('@/assets/svg/over.svg') : index == 2 ? require('@/assets/svg/plan.svg') : ''" |
|
alt=""> |
|
<img v-show="role_id == '1839537055389515777'" style="width: 32px;height: 32px;" |
|
:src="index == 0 ? require('@/assets/svg/task.svg') : index == 1 ? require('@/assets/svg/over.svg') : index == 2 ? require('@/assets/svg/person.svg') : ''" |
|
alt=""> |
|
<div style="margin:5px 0;color:#101010;">{{ item.title }}</div> |
|
<div style="margin:12px 0;color:#6c6c6c;font-size:14px;">{{ item.mainName }}<span |
|
style="margin:0px 10px;font-size:22px;color:#000;">{{ item.num }}</span>{{ item.mainName == '巡检签约' ? |
|
'家' |
|
: item.title == '维修人员' ? '人' : '件'}}</div> |
|
<div style="color:#6c6c6c;font-size:14px;">{{ item.subName }}<span |
|
style="margin:0px 10px;font-size:22px;color:#000;">{{ item.num1 }}</span>{{ item.title == '维修人员' ? '人' |
|
: |
|
'件'}}</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
<div class="right_box"> |
|
<div class="right_top"> |
|
<div class="top_tit">实验室巡检</div> |
|
<div class="top_con"> |
|
<div class="top_container"> |
|
<vueSeamless v-if="labXjList.length >= 1" :data="labXjList" :class-option="calssOption" |
|
class="tablebox_item_warp"> |
|
<div class="top_item" v-for="item in labXjList" :key="item.name"> |
|
<div class="item_left">{{ item.name }}</div> |
|
<div class="item_right">巡检计划时间：{{ item.planTime }}</div> |
|
</div> |
|
</vueSeamless> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right_bottom"> |
|
<div class="bottom_tit">提报统计</div> |
|
<div class="bottom_con"> |
|
<div class="static_box"> |
|
<div class="static_top"> |
|
<div>{{ (role_id == '1839536982874193922'||role_id == '1867020647911350274') ? '各单位提报统计' : '各维修人员数据统计' }}</div> |
|
<div style="margin-left: 20px;">选择时间： |
|
<el-date-picker v-model="staticTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
|
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changestaticTime" size="mini"> |
|
</el-date-picker> |
|
</div> |
|
</div> |
|
<div class="static_chart" id="unitCharts" v-show="role_id == '1839536982874193922'"></div> |
|
<div class="static_chart" id="peopleCharts" v-show="role_id == '1839537055389515777'"></div> |
|
</div> |
|
<div class="static_box"> |
|
<div class="static_top"> |
|
<div>故障类占比统计</div> |
|
<div> |
|
选择时间： |
|
<el-date-picker v-model="faultTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
|
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeFaultTime" size="mini"> |
|
</el-date-picker> |
|
<!-- <el-select v-model="typeValue" placeholder="请选择"> |
|
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> |
|
</el-option> |
|
</el-select> |
|
<el-select v-model="deviceValue" placeholder="请选择设备"> |
|
<el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value"> |
|
</el-option> |
|
</el-select> |
|
<el-select v-model="brandValue" placeholder="请选择品牌"> |
|
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"> |
|
</el-option> |
|
</el-select> --> |
|
</div> |
|
</div> |
|
<div class="static_bot_chart"> |
|
<div class="problem_box" id="problem_charts"></div> |
|
<div class="probability_box" id="probability_charts"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { nextTick } from 'vue'; |
|
import { mapGetters } from "vuex"; |
|
import Map from './map.vue' |
|
import vueSeamless from 'vue-seamless-scroll' |
|
import { getUserInfo } from "@/api/system/user"; |
|
import { getList } from '@/api/operation/hand' |
|
import { overview, workList, deviceList, upkeepStat, pieStat,maintenancePersonnel, mapAddress, limsInspecList, overviewList, limsInspecChart, faultRatio } from '@/api/workbench/workbench' |
|
import { color } from 'echarts'; |
|
import statusData from "@/assets/json/status.json"; // 引入状态数据 |
|
|
|
export default { |
|
components: { |
|
Map, |
|
vueSeamless |
|
}, |
|
data() { |
|
return { |
|
requirementList:[], |
|
role_id: '', |
|
isShowOther: false, |
|
isShowMask:false, |
|
workList: [ |
|
{ |
|
name:'实验室巡检', |
|
img:require('@/assets/images/lab_xj.png'), |
|
num:0 |
|
}, |
|
{ |
|
name:'报送记录', |
|
img:require('@/assets/images/bs_jl.png'), |
|
num:0 |
|
}, |
|
{ |
|
name:'设备报警', |
|
img:require('@/assets/images/alarm.png'), |
|
num:0 |
|
}, |
|
{ |
|
name:'监控大屏', |
|
img:require('@/assets/images/full.png'), |
|
num:0 |
|
}, |
|
], |
|
inspectionList: [ |
|
{ |
|
appointTime: "2024-11-15", |
|
inspectionName: "水系统检查", |
|
inspectionPerson: "张三", |
|
inspectionTime: "2024-11-11", |
|
isStart: "0", |
|
taskType: "1" |
|
} |
|
], |
|
staticBarTime: '', |
|
staticPieTime: '', |
|
staticTime: [], |
|
faultTime: [], |
|
alarmList: [ |
|
{ |
|
alarmLevel: "1", |
|
alarmTime: "2024-11-15", |
|
brand: "品牌A", |
|
deviceName: "2024-11-11", |
|
model: "GDXH-12582", |
|
} |
|
], |
|
benchList: [ |
|
{ |
|
img:require('@/assets/svg/task.svg'), |
|
title:'我的任务', |
|
mainName:'今日待办', |
|
num:'5', |
|
subName:'今日已办', |
|
num1:10 |
|
}, |
|
{ |
|
img:require('@/assets/svg/over.svg'), |
|
title:'维修已办结', |
|
mainName:'本月', |
|
num:16, |
|
subName:'本年', |
|
num1:129 |
|
}, |
|
{ |
|
img:require('@/assets/svg/plan.svg'), |
|
title:'巡检计划1', |
|
mainName:'巡检签约', |
|
num:22, |
|
subName:'巡检', |
|
num1:159 |
|
} |
|
], |
|
typeList: [ |
|
{ label: '装修类', value: '001' } |
|
], |
|
typeValue: '', |
|
deviceList: [{ label: '给排水', value: '01' }, { label: '空调', value: '02' }], |
|
deviceValue: '', |
|
brandList: [{ label: '美的', value: '0001' }, { label: '海尔', value: '0002' }], |
|
brandValue: '', |
|
labXjList: [ |
|
// {name:'安池实验室-实验室设备巡检',time:'2024/8/28'}, |
|
// {name:'安池实验室-实验室设备巡检1',time:'2024/8/29'}, |
|
// {name:'安池实验室-实验室设备巡检2',time:'2024/8/30'}, |
|
// {name:'安池实验室-实验室设备巡检3',time:'2024/8/30'}, |
|
// {name:'安池实验室-实验室设备巡检4',time:'2024/8/30'}, |
|
// {name:'安池实验室-实验室设备巡检5',time:'2024/8/30'}, |
|
], |
|
calssOption: {}, |
|
alarmOption: {}, |
|
xData: [], |
|
numData: [], |
|
backGroundPic: require('@/assets/images/lab.png'), |
|
barXdata: ["报送维修", "巡检维修"], |
|
totalBardata: [10, 20], |
|
completedBardata: [3, 12], |
|
unCompletedBardata: [7, 8], |
|
errorData: [ |
|
{name: "电气", value: 300}, |
|
{name: "空调", value: 248}, |
|
{name: "装修类", value: 135}, |
|
{name: "智能设备", value: 180}, |
|
{name: "暖通、自控", value: 654} |
|
], |
|
deviceData: [ |
|
{name: "设备1", value: 580}, |
|
{name: "空调", value: 1048}, |
|
{name: "通风柜", value: 735} |
|
], |
|
problemData: [], |
|
rateData: [], |
|
peopleXdata:[], |
|
peopleNum:[], |
|
peoplePercent:[] |
|
} |
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
getStatus() { |
|
return (type, id, status) => { |
|
for (let i in statusData[type]) { |
|
let val |
|
statusData[type][id].map(item => { |
|
if (item.status == status) { |
|
val = item |
|
} |
|
}) |
|
return val |
|
} |
|
} |
|
}, |
|
}, |
|
mounted() { |
|
console.log('userInfo=============>',this.userInfo) |
|
this.isShowMask = this.userInfo.detail.status == 1 ? false : true |
|
this.role_id = this.userInfo.role_id |
|
|
|
if (this.role_id == '1123598816738675200' || this.role_id == '1123598816738675201' || this.role_id == '1846419477876510721') { |
|
// 实验室角色 |
|
nextTick(() => { |
|
if(!this.isShowMask){ |
|
this.getOverview() |
|
this.getWorkList() |
|
this.getDeviceAlarmList() |
|
this.getbackGroundPic() |
|
this.getUpkeepStat() |
|
this.getPieStat() |
|
this.getRequirement() |
|
this.alarmOption = { |
|
"step": 0.2, // 数值越大速度滚动越快 |
|
"limitMoveNum": 3, // 开始无缝滚动的数据量 this.dataList.length |
|
"hoverStop": true, // 是否开启鼠标悬停stop |
|
"direction": 1, // 0向下 1向上 2向左 3向右 |
|
"openWatch": true, // 开启数据实时监控刷新dom |
|
"singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
"singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
"waitTime": 1000, // 单步运动停止的时间(默认值1000ms) |
|
} |
|
}else{ |
|
this.createBarEcharts() |
|
this.createErrorEcharts() |
|
this.createDeviceEcharts() |
|
} |
|
}) |
|
} else if (this.role_id == '1839536982874193922' || this.role_id == '1839537055389515777') { |
|
nextTick(() => { |
|
if(!this.isShowMask){ |
|
this.getlimsInspecList() |
|
this.getOverviewList() |
|
this.getlimsInspecChart() |
|
this.getPeopleNum() |
|
this.getFaultRatio() |
|
// this.createProblemEcharts() |
|
// this.createProbabilityEcharts() |
|
this.calssOption = { |
|
"step": 0.2, // 数值越大速度滚动越快 |
|
"limitMoveNum": 4, // 开始无缝滚动的数据量 this.dataList.length |
|
"hoverStop": true, // 是否开启鼠标悬停stop |
|
"direction": 1, // 0向下 1向上 2向左 3向右 |
|
"openWatch": true, // 开启数据实时监控刷新dom |
|
"singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
"singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
"waitTime": 1000, // 单步运动停止的时间(默认值1000ms) |
|
} |
|
} |
|
}) |
|
} |
|
}, |
|
methods: { |
|
getPeopleNum(){ |
|
maintenancePersonnel({id:this.userInfo.user_id}).then(res =>{ |
|
console.log('res ==============>',res) |
|
this.peopleXdata = res.data.data.xData |
|
this.peopleNum = res.data.data.repairNum |
|
this.peoplePercent = res.data.data.percent |
|
this.$nextTick(() =>{ |
|
this.creatpeopleEcharts() |
|
}) |
|
}) |
|
}, |
|
clickReqiure(item){ |
|
console.log('item----------->',item) |
|
this.$router.push({ |
|
path:'/operation/hand', |
|
query:item |
|
}) |
|
}, |
|
getRequirement(){ |
|
getList({ |
|
current:1, |
|
size:10, |
|
dataType: 1,//数据权限 |
|
statusSearch: '201,401,402,301,403,202,104',//状态5报错 |
|
}).then(res =>{ |
|
this.requirementList = res.data.data.records |
|
}) |
|
}, |
|
// 获取实验室角色下的背景图 |
|
getbackGroundPic() { |
|
getUserInfo().then(res => { |
|
this.backGroundPic = res.data.data.backGroundPic ? res.data.data.backGroundPic : require('@/assets/images/lab.png') |
|
}) |
|
}, |
|
// 获取实验室下工作台相关信息 |
|
getOverview() { |
|
overview().then(res => { |
|
this.workList = res.data.data |
|
this.isShowOther = this.workList.length == 3 ? true : false |
|
}) |
|
}, |
|
// 获取实验室巡检列表 |
|
getWorkList() { |
|
workList().then(res => { |
|
this.inspectionList = res.data.data |
|
}) |
|
}, |
|
// 获取实验室设备报警列表 |
|
getDeviceAlarmList() { |
|
deviceList().then(res => { |
|
this.alarmList = res.data.data |
|
}) |
|
}, |
|
// 实验室下维修统计切换时间 |
|
changeStaticBarTime(val) { |
|
this.getUpkeepStat() |
|
}, |
|
// 获取实验室下维修统计接口 |
|
getUpkeepStat() { |
|
let query = { |
|
startTime: this.staticBarTime.length != 0 ? this.staticBarTime[0] + ' 00:00:00' : '', |
|
endTime: this.staticBarTime.length != 0 ? this.staticBarTime[1] + ' 23:59:59' : '' |
|
} |
|
upkeepStat(query).then(res => { |
|
this.barXdata = res.data.data.xData |
|
this.totalBardata = res.data.data.total |
|
this.completedBardata = res.data.data.completed |
|
this.unCompletedBardata = res.data.data.unCompleted |
|
nextTick(() => { |
|
this.createBarEcharts() |
|
}) |
|
}) |
|
}, |
|
// 实验室下饼图切换时间 |
|
changestaticPieTime(val) { |
|
this.getPieStat() |
|
}, |
|
// 获取实验室下饼图数据 |
|
getPieStat() { |
|
let query = { |
|
startTime: this.staticPieTime.length != 0 ? this.staticPieTime[0] + ' 00:00:00' : '', |
|
endTime: this.staticPieTime.length != 0 ? this.staticPieTime[1] + ' 23:59:59' : '' |
|
} |
|
pieStat(query).then(res => { |
|
this.errorData = res.data.data.fault |
|
this.deviceData = res.data.data.device |
|
nextTick(() => { |
|
this.createErrorEcharts() |
|
this.createDeviceEcharts() |
|
}) |
|
}) |
|
}, |
|
// 获取客服/运维主管下的巡检列表 |
|
getlimsInspecList() { |
|
limsInspecList({ perType: this.role_id == '1839536982874193922' ? 0 : 1 }).then(res => { |
|
this.labXjList = res.data.data |
|
}) |
|
}, |
|
// 获取客服/运维主管下的工作台 |
|
getOverviewList() { |
|
overviewList({ perType: this.role_id == '1839536982874193922' ? 0 : 1 }).then(res => { |
|
this.benchList = res.data.data |
|
}) |
|
}, |
|
// 切换提报统计图表时间 |
|
changestaticTime(val) { |
|
this.getlimsInspecChart() |
|
}, |
|
// 获取客服、运维主管下的提报统计图表数据 |
|
getlimsInspecChart() { |
|
let query = { |
|
startTime: this.staticTime.length != 0 ? this.staticTime[0] + ' 00:00:00' : '', |
|
endTime: this.staticTime.length != 0 ? this.staticTime[1] + ' 23:59:59' : '', |
|
perType: this.role_id == '1839536982874193922' ? 0 : 1 |
|
} |
|
limsInspecChart(query).then(res => { |
|
this.xData = res.data.data.xData |
|
this.numData = res.data.data.yData |
|
nextTick(() => { |
|
this.creatUnitEcharts() |
|
}) |
|
}) |
|
}, |
|
// 切换故障统计时间 |
|
changeFaultTime(val) { |
|
this.getFaultRatio() |
|
}, |
|
// 获取客服/维修主管下的故障类占比 |
|
getFaultRatio() { |
|
let query = { |
|
startTime: this.faultTime.length != 0 ? this.faultTime[0] + ' 00:00:00' : '', |
|
endTime: this.faultTime.length != 0 ? this.faultTime[1] + ' 23:59:59' : '', //时间范围 |
|
deviceType: '', //设备类型 |
|
deviceId: '', //设备id |
|
brand: '', //品牌 |
|
perType: this.role_id == '1839536982874193922' ? 0 : 1 //人员类型 0-客服 1-维修负责人 |
|
} |
|
faultRatio(query).then(res => { |
|
console.log('res ===================>', res) |
|
this.problemData = res.data.data.fault |
|
this.rateData = res.data.data.rate |
|
|
|
nextTick(() => { |
|
this.createProblemEcharts() |
|
this.createProbabilityEcharts() |
|
}) |
|
}) |
|
}, |
|
// 点击工作台项目 |
|
ckickItem(item) { |
|
if(this.isShowMask){ |
|
return |
|
}else{ |
|
if (item.name == '报送记录') { |
|
this.$router.push('/operation/hand') |
|
}else if(item.name == '实验室巡检'){ |
|
this.$router.push("/labManagement/inspectionManagement") |
|
}else if(item.name == '设备报警'){ |
|
this.$router.push({ |
|
path:'/device/deviceSystem', |
|
query:{ |
|
type:'2' |
|
} |
|
}) |
|
} |
|
} |
|
|
|
}, |
|
createBarEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('bar_echart')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
legend: { //图例组件 |
|
data: ['总计', '已完成', '未完成'] |
|
}, |
|
xAxis: { |
|
data: this.barXdata, |
|
}, |
|
grid: { |
|
top: '15%', |
|
left: '5%', |
|
right: '5%', |
|
bottom: '10%' |
|
}, |
|
yAxis: {}, |
|
series: [ |
|
{ |
|
name: '总计', |
|
type: 'bar', |
|
data: this.totalBardata, |
|
itemStyle: { |
|
// color: '#2478f2' |
|
color:'#2148D1' |
|
} |
|
}, |
|
{ |
|
name: '已完成', |
|
type: 'bar', |
|
data: this.completedBardata, |
|
itemStyle: { |
|
// color: '#84b7f9' |
|
color:'#5E8CFF' |
|
} |
|
}, |
|
{ |
|
name: '未完成', |
|
type: 'bar', |
|
data: this.unCompletedBardata, |
|
itemStyle: { |
|
// color: '#5f9cf8' |
|
color:'#B0CCFF' |
|
} |
|
}, |
|
] |
|
}; |
|
//4.使用刚指定的配置项和数据显示图表。 |
|
myChart.setOption(option); |
|
}, |
|
createErrorEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('error_echarts')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'item', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: '60%', |
|
label: { |
|
formatter: '{b}\n {c}', |
|
color: '#000' |
|
}, |
|
data: this.errorData, |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
createDeviceEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('device_echarts')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'item', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: '70%', |
|
label: { |
|
formatter: '{b}\n {c}', |
|
color: '#000' |
|
}, |
|
data: this.deviceData, |
|
} |
|
] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
creatUnitEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('unitCharts')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
legend: { //图例组件 |
|
data: ['数量'], |
|
}, |
|
xAxis: { |
|
data: this.xData, |
|
}, |
|
grid: { |
|
top: '22%', |
|
left: '5%', |
|
right: '5%', |
|
bottom: '10%' |
|
}, |
|
yAxis: {}, |
|
series: [ |
|
{ |
|
name: '数量', |
|
type: 'bar', |
|
barWidth:this.numData == 1 ? 50 : null, |
|
data: this.numData, |
|
itemStyle: { |
|
color: '#2478f2' |
|
}, |
|
label: { |
|
show: true, |
|
position: 'top', |
|
color: '#2478f2', |
|
}, |
|
}, |
|
] |
|
}; |
|
//4.使用刚指定的配置项和数据显示图表。 |
|
myChart.setOption(option); |
|
}, |
|
creatpeopleEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('peopleCharts')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
transitionDuration: 0,//防止页面抖动 |
|
formatter: params => { |
|
console.log('params',params) |
|
let rander = params.map(item => `<div>${item.marker}${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value != '' ? item.value + "%" : '-'}</div>` ).join('') |
|
return ` |
|
<div>${params[0].axisValue}</div> |
|
${rander} |
|
` |
|
} |
|
}, |
|
legend: { //图例组件 |
|
data: ['维修数量','好评率'], |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
data: this.peopleXdata, |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
grid: { |
|
top: '22%', |
|
left: '5%', |
|
right: '5%', |
|
bottom: '10%' |
|
}, |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
name: '维修数量', |
|
}, |
|
{ |
|
type: 'value', |
|
name: '好评率(%)', |
|
min: 0, |
|
max: 100 |
|
} |
|
], |
|
series: [ |
|
{ |
|
name: '维修数量', |
|
type: 'bar', |
|
barWidth:this.numData == 1 ? 50 : null, |
|
data: this.peopleNum, |
|
itemStyle: { |
|
color: '#2478f2' |
|
}, |
|
}, |
|
{ |
|
name: '好评率', |
|
type: 'line', |
|
yAxisIndex: 1, |
|
data: this.peoplePercent, |
|
itemStyle: { |
|
color: '#2478f2' |
|
}, |
|
}, |
|
] |
|
}; |
|
//4.使用刚指定的配置项和数据显示图表。 |
|
myChart.setOption(option); |
|
}, |
|
createProblemEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('problem_charts')); |
|
var option = { |
|
tooltip: { |
|
trigger: 'item', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
legend: { |
|
type: 'scroll', |
|
orient: 'vertical', |
|
left: 5, |
|
top: 20, |
|
bottom: 20, |
|
}, |
|
grid: { |
|
top: '30%', |
|
left: '80%', |
|
right: '2%' |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '65%'], |
|
label: { |
|
show: true, |
|
formatter: '{b}\n {c}', |
|
color: '#000' |
|
}, |
|
labelLine: { |
|
show: true, |
|
}, |
|
data: this.problemData, |
|
} |
|
] |
|
}; |
|
//4.使用刚指定的配置项和数据显示图表。 |
|
myChart.setOption(option); |
|
}, |
|
createProbabilityEcharts() { |
|
var myChart = this.$echarts.init(document.getElementById('probability_charts')); |
|
var option = { |
|
title: { |
|
text: "故障率", |
|
subtext: "50%", |
|
left: "center", |
|
top: "35%", |
|
textStyle: { |
|
fontSize: 16, |
|
color: '#4f4f4f' |
|
}, |
|
subtextStyle: { |
|
fontSize: 20, |
|
color: '#de4234' |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
transitionDuration: 0,//防止页面抖动 |
|
}, |
|
legend: { |
|
type: 'scroll', |
|
top: 0, |
|
right:5, |
|
orient: 'vertical', |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '65%'], |
|
label: { |
|
show: true, |
|
formatter: '{b}\n {c}', |
|
color: '#000' |
|
}, |
|
labelLine: { |
|
show: true |
|
}, |
|
data: this.rateData, |
|
} |
|
] |
|
}; |
|
//4.使用刚指定的配置项和数据显示图表。 |
|
myChart.setOption(option); |
|
}, |
|
createMapBox() { }, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
width: 99%; |
|
height: 95%; |
|
//background: #fff; |
|
margin: 0 auto; |
|
|
|
.mask{ |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
background: rgba(0, 0, 0, 0.7); |
|
z-index: 2000; |
|
display: flex; |
|
justify-content: center; |
|
font-size: 80px; |
|
// color: #2478f2; |
|
color: rgba(36,120, 242, 0.8); |
|
line-height: 800px; |
|
letter-spacing: 50px; |
|
} |
|
|
|
.top_box { |
|
width: 100%; |
|
height: 51%; |
|
margin: 0 auto; |
|
margin-top: 5px; |
|
// padding: 20px; |
|
display: -webkit-box; |
|
display: -ms-flexbox; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.top_left { |
|
width: 49.5%; |
|
height: 100%; |
|
} |
|
|
|
.top_right { |
|
width: 49%; |
|
height: 100%; |
|
|
|
.work_box { |
|
width: 98%; |
|
height: 30%; |
|
// margin-left: 5%; |
|
|
|
.work_tit { |
|
font-weight: 550; |
|
} |
|
|
|
.work_con { |
|
width: 100%; |
|
height: 80%; |
|
margin-top: 10px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.work_item { |
|
width: 23%; |
|
height:78px; |
|
border-radius: 10px; |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
// flex-direction: column; |
|
|
|
|
|
.item_top { |
|
width: 100%; |
|
height: 100%; |
|
background: #3a62d791; |
|
border-radius: 10px; |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
// flex-direction: column; |
|
color: white; |
|
font-size: 22px; |
|
background: linear-gradient( 90deg, #375DF9 0%, #6DB5FF 100%); |
|
box-shadow: 0px 5px 5px 0px #B6D8FF; |
|
|
|
|
|
|
|
.right_item{ |
|
display: flex; |
|
flex-direction: column; |
|
margin-left: 20px; |
|
} |
|
|
|
// .item_num { |
|
// // position: absolute; |
|
// // top: 0; |
|
// // right: 0; |
|
// // padding: 3px; |
|
// // background: red; |
|
// font-size: 22px; |
|
// height: 25px; |
|
// } |
|
|
|
.item_img { |
|
width: 32px; |
|
height: 32px; |
|
margin-bottom: 10px; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.item_name { |
|
// width: 148px; |
|
// margin-top: 10px; |
|
// display: flex; |
|
// align-items: center; |
|
// -ms-flex-pack: center; |
|
// justify-content: center; |
|
font-size: 14px; |
|
margin-bottom: 5px; |
|
} |
|
} |
|
|
|
&:nth-child(2) .item_top{ |
|
background: linear-gradient( 270deg, #41D9A5 0%, #0BC478 100%); |
|
box-shadow: 0px 10px 10px 0px #BDE7E2; |
|
} |
|
|
|
&:nth-child(3) .item_top{ |
|
background: linear-gradient( 90deg, #F36656 0%, #FF8043 100%); |
|
box-shadow: 0px 10px 10px 0px #FED1D0; |
|
} |
|
|
|
&:nth-child(4) .item_top{ |
|
background: linear-gradient( 90deg, #F3AC56 0%, #FFCA68 100%); |
|
box-shadow: 0px 10px 10px 0px #FEEED0; |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
.xj_box { |
|
width: 98%; |
|
height:30%; |
|
margin-top: 20px; |
|
|
|
.xj_tit { |
|
font-weight: 550; |
|
margin-bottom: 13px; |
|
} |
|
|
|
.xj_con { |
|
width: 100%; |
|
height: calc(89% - 20px); |
|
display: flex; |
|
align-items: flex-end; |
|
justify-content: center; |
|
|
|
.xj_con_box { |
|
width: 100%; |
|
height: 100%; |
|
background: #fff; |
|
border-radius: 10px; |
|
overflow: hidden; |
|
|
|
::v-deep .el-empty__image{ |
|
width: 45px !important; |
|
} |
|
|
|
::v-deep .el-empty__description{ |
|
margin-top: none !important; |
|
} |
|
|
|
::v-deep.el-carousel__container { |
|
height: 100% !important; |
|
} |
|
|
|
::v-deep .el-carousel__indicators--vertical { |
|
display: none !important; |
|
} |
|
|
|
.xj_item { |
|
width: 96%; |
|
margin: 10px auto; |
|
background: #fff; |
|
border-radius: 10px; |
|
padding: 5px; |
|
|
|
.xj_top { |
|
display: flex; |
|
width: 100%; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.tit_box { |
|
display: flex; |
|
|
|
.xj_title { |
|
font-weight: 550; |
|
margin-right: 20px; |
|
} |
|
|
|
.xj_time { |
|
font-size: 14px; |
|
color: #6c6c6c; |
|
} |
|
} |
|
|
|
.xj_task { |
|
color: #3a62d7; |
|
} |
|
} |
|
|
|
.xj_center { |
|
margin: 5px 0; |
|
color: #6c6c6c; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
|
|
.xj_bottom { |
|
display: flex; |
|
|
|
.xj_status { |
|
color: #3a62d7; |
|
margin-right: 20px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.bottom_box { |
|
width: 100%; |
|
height: 46%; |
|
margin-top: 1%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.bottom_left { |
|
width: 25%; |
|
height: 100%; |
|
background: #FFFFFF; |
|
border-radius: 10px; |
|
border: 1px solid #EBEEF5; |
|
|
|
|
|
.left_tit { |
|
font-weight: 550; |
|
margin-top: 15px; |
|
margin-left: 15px; |
|
} |
|
|
|
.left_con { |
|
width: 100%; |
|
height: 88%; |
|
// background: #efefef; |
|
margin-top: 20px; |
|
border-radius: 10px; |
|
display: flex; |
|
flex-direction: column; |
|
// background: #FFFFFF; |
|
// border-radius: 4px; |
|
// border: 1px solid #EBEEF5; |
|
|
|
.nodata{ |
|
// width: 100%; |
|
// height: 100%; |
|
// display: flex; |
|
// align-items: center; |
|
// justify-content: center; |
|
// font-size: 25px; |
|
// color: #a39797; |
|
// letter-spacing: 10px; |
|
|
|
::v-deep .el-empty__image{ |
|
width:120px; |
|
} |
|
} |
|
|
|
.tablebox_item_warp { |
|
height: 90%; |
|
overflow: hidden; |
|
|
|
.left_item { |
|
width: 94%; |
|
height: 128px; |
|
background: #fff; |
|
border: 1px solid #EBEEF5; |
|
border-radius: 10px; |
|
margin: 0 auto; |
|
margin-bottom: 20px; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.item_left { |
|
width: 30%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
.item_circle { |
|
width: 80px; |
|
height: 80px; |
|
border-radius: 50%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
&.one { |
|
border: 5px solid #bd3124; |
|
} |
|
|
|
&.two { |
|
border: 5px solid #e99d42; |
|
} |
|
|
|
.status { |
|
color: #101010; |
|
margin-bottom: 5px; |
|
} |
|
|
|
.status_txt { |
|
font-size: 12px; |
|
color: #bebebe; |
|
} |
|
} |
|
} |
|
|
|
.item_right { |
|
width: 69%; |
|
height: 100%; |
|
|
|
.item_con { |
|
margin: 14px 10px 0; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.item_top { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.item_btn { |
|
background: #3a62d729; |
|
padding: 5px 10px; |
|
color: #3a62d7; |
|
font-size: 14px; |
|
border-radius: 5px; |
|
} |
|
} |
|
|
|
.item_bot { |
|
line-height: 25px; |
|
margin-top: 5px; |
|
font-size: 14px; |
|
color: #9a9a9a; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
} |
|
|
|
.bottom_right { |
|
width: 74%; |
|
height: 100%; |
|
background: #FFFFFF; |
|
border-radius: 10px; |
|
border: 1px solid #EBEEF5; |
|
|
|
.right_tit { |
|
font-weight: 550; |
|
margin-top: 15px; |
|
margin-left: 15px; |
|
} |
|
|
|
.right_con { |
|
width: 100%; |
|
height: 88%; |
|
// background: #efefef; |
|
margin-top: 10px; |
|
border-radius: 10px; |
|
display: flex; |
|
align-items: center; |
|
// background: #FFFFFF; |
|
// border-radius: 4px; |
|
// border: 1px solid #EBEEF5; |
|
|
|
.bar_box { |
|
width: 49%; |
|
height: 100%; |
|
// background: #fff; |
|
border-radius: 10px; |
|
margin-left: 15px; |
|
display: flex; |
|
flex-direction: column; |
|
// background: #FFFFFF; |
|
// border-radius: 4px; |
|
// border: 1px solid #EBEEF5; |
|
|
|
.bar_top { |
|
margin: 10px; |
|
} |
|
|
|
.bar_charts { |
|
width: 96%; |
|
height: 80%; |
|
margin-left: 10px; |
|
} |
|
} |
|
|
|
.pie_box { |
|
width: 49%; |
|
height: 100%; |
|
margin-left: 2%; |
|
border-radius: 10px; |
|
// background: #FFFFFF; |
|
// border-radius: 4px; |
|
// border: 1px solid #EBEEF5; |
|
|
|
.pie_top { |
|
margin: 10px; |
|
} |
|
|
|
.pie_charts { |
|
width: 96%; |
|
height: 80%; |
|
margin-left: 10px; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.pie_chart { |
|
width: 49%; |
|
height: 100%; |
|
|
|
.charts_box { |
|
width: 100%; |
|
height: 80%; |
|
} |
|
|
|
.charts_tit { |
|
width: 100%; |
|
height: 15%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.left_box { |
|
width: 35%; |
|
height: 100%; |
|
float: left; |
|
|
|
.map_box { |
|
width: 100%; |
|
height: 69%; |
|
} |
|
|
|
.bench_box { |
|
width: 100%; |
|
height: 30%; |
|
margin-top: 1%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
|
|
.bench_tit { |
|
width: 100%; |
|
display: flex; |
|
margin: 20px 0 20px; |
|
|
|
.bench_num { |
|
padding: 5px; |
|
width: 15px; |
|
height: 15px; |
|
border-radius: 5px; |
|
text-align: center; |
|
line-height: 15px; |
|
margin-left: 10px; |
|
background: rgb(253, 209, 67); |
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; |
|
} |
|
} |
|
|
|
.bench_con { |
|
width: 100%; |
|
height: 73%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.bench_item { |
|
width: 25%; |
|
height: 100%; |
|
border-radius: 10px; |
|
background: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.right_box { |
|
width: 64%; |
|
height: 100%; |
|
float: left; |
|
margin-left: 1%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.right_top { |
|
width: 100%; |
|
height: 25%; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.top_tit { |
|
font-size: 20px; |
|
font-weight: 550; |
|
width: 95%; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.top_con { |
|
width: 100%; |
|
height: 80%; |
|
margin: 0 auto; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 10px; |
|
|
|
.top_container { |
|
width: 100%; |
|
height: 100%; |
|
background: #fff; |
|
border-radius: 10px; |
|
|
|
.tablebox_item_warp { |
|
height: 90%; |
|
margin-top: 15px; |
|
overflow: hidden; |
|
|
|
.top_item { |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 10px 20px; |
|
|
|
&:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
.item_left { |
|
color: #101010; |
|
} |
|
|
|
.item_right { |
|
color: #6c6c6c; |
|
} |
|
} |
|
} |
|
|
|
|
|
} |
|
} |
|
} |
|
|
|
.right_bottom { |
|
width: 100%; |
|
height: 75%; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.bottom_tit { |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin: 20px auto; |
|
width: 100%; |
|
} |
|
|
|
.bottom_con { |
|
width: 100%; |
|
height: 88%; |
|
border-radius: 10px; |
|
margin: 0 auto; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.static_box { |
|
width: 100%; |
|
height: 48%; |
|
border-radius: 10px; |
|
background: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.static_top { |
|
width: 96%; |
|
display: flex; |
|
align-items: center; |
|
//justify-content: space-between; |
|
margin: 0 auto; |
|
margin-top: 10px; |
|
|
|
::v-deep .el-select { |
|
width: 120px !important; |
|
margin: 0 5px; |
|
} |
|
|
|
::v-deep.el-date-editor--daterange { |
|
width: 240px !important; |
|
} |
|
} |
|
|
|
.static_chart { |
|
width: 96%; |
|
height: 74%; |
|
margin: 0 auto; |
|
} |
|
|
|
.static_bot_chart { |
|
width: 96%; |
|
height: 74%; |
|
margin: 0 auto; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.problem_box { |
|
width: 60%; |
|
height: 100%; |
|
} |
|
|
|
.probability_box { |
|
width: 39%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
</style>
|
|
|