2050 lines
51 KiB
Vue
2050 lines
51 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="left">
|
||
<div class="one" style="height: 405px">
|
||
<div class="cartitle">
|
||
<div class="titleFont">盐都区供电公司概况</div></div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<div class="total">
|
||
<div class="pic">
|
||
<img src="@/assets/images/rouer.png" alt="" />
|
||
</div>
|
||
<div class="num">
|
||
<span style="font-size: 45px; font-weight: 600;
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));"
|
||
>304</span>
|
||
<span style="font-size: 18px;">配电路线</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="lists">
|
||
<div class="title">电缆化率</div>
|
||
<div class="number">43.6%</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">配电站开关</div>
|
||
<div class="number">169</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">配电室</div>
|
||
<div class="number">579</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">户外环网柜</div>
|
||
<div class="number">1440</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line">
|
||
<div class="total">
|
||
<div class="pic">
|
||
<img src="@/assets/images/routerLong.png" alt="" />
|
||
</div>
|
||
<div class="num">
|
||
<span style="font-size: 45px; font-weight: 600;
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));
|
||
">4128</span>
|
||
<span style="font-size: 18px">路线长度</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="lists">
|
||
<div class="title">架空路线</div>
|
||
<div class="number">2328</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">架空绝缘导线</div>
|
||
<div class="number">2012.6</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">架空绝缘化率</div>
|
||
<div class="number">86.45%</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">电缆路线</div>
|
||
<div class="number">1800</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="two" style="height: 570px">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
全市本周配网故障次数
|
||
</div>
|
||
</div>
|
||
<div class="table user_skills">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%; height: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
|
||
>
|
||
<el-table-column label="" align="center" width="20">
|
||
<template slot-scope="scop">
|
||
{{ scop.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="bz" label="班组" width="80" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="gzxl" label="故障路线" width="80" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="gzyy" label="故障原因" width="80" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="chcg" label="重合成功" width="60">
|
||
<template slot-scope="scope">
|
||
<div style="color:#ffbc3a">
|
||
{{ scope.row.chcg}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="chbc" label="重合不成" width="80">
|
||
<template slot-scope="scope">
|
||
<div style="color:#ffbc3a">
|
||
{{ scope.row.chbc}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="wchz" label="无重合闸" width="60">
|
||
<template slot-scope="scope">
|
||
<div style="color:#2793ff">
|
||
{{ scope.row.wchz}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="jiedi" label="接地" width="60">
|
||
<template slot-scope="scope">
|
||
<div style="color:#794af8">
|
||
{{ scope.row.jiedi}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="heji" label="合计" width="60">
|
||
<template slot-scope="scope">
|
||
<div style="color:#ee8316">
|
||
{{ scope.row.heji}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle">
|
||
<div class="one" style="height: 635px; width: 100%">
|
||
<iframe src="/unityWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||
ref="iframe"></iframe>
|
||
<div class="unityBtn">
|
||
<div
|
||
class="btn"
|
||
:class="{ btnAct: btnActive == index }"
|
||
v-for="(item, index) in btnArr"
|
||
:key="index"
|
||
@click="handleUnity(index,item)"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div class="unityIcon">
|
||
<div class="unityIconGround" v-for="(item,index) in iconGround" :key="index">
|
||
<img :src="item.icon"/>
|
||
<div style="color:#ffffff">{{item.name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="unityEnlargeBtn">
|
||
<div class="content" v-for="(item,index) in btnEnlarge" :key="index" @click="enlargeBtn(index)">
|
||
<img :src="item.icon" style="margin:7px"/>
|
||
</div>
|
||
</div>
|
||
<div class="unitySelect">
|
||
<div class="unitySuosou">
|
||
<img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
|
||
</div>
|
||
<el-select v-model="value" clearable placeholder="请选择线路" >
|
||
<el-option
|
||
v-for="(item,index) in options"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="detailed">
|
||
<div class="two" style="height: 350px; width: 780px;display: flex;flex-direction: column;align-items: center;">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
本周路线故障跳闸明细
|
||
</div>
|
||
</div>
|
||
<div class="detailedOneList">
|
||
<div>
|
||
单位
|
||
</div>
|
||
<!-- <div>
|
||
工区
|
||
</div>
|
||
<div>
|
||
三新
|
||
</div>
|
||
<div>
|
||
盐都
|
||
</div>
|
||
<div>
|
||
滨海
|
||
</div>
|
||
<div>
|
||
大丰
|
||
</div>
|
||
<div>
|
||
东台
|
||
</div>
|
||
<div>
|
||
阜宁
|
||
</div>
|
||
<div>
|
||
建湖
|
||
</div>
|
||
<div>
|
||
射阳
|
||
</div>
|
||
<div>
|
||
响水
|
||
</div> -->
|
||
</div>
|
||
<div id="detailedOne" style="height:90%"></div>
|
||
</div>
|
||
<div class="three" style="height: 350px; width: 780px">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
本年度路线故障调查明细</div>
|
||
</div>
|
||
<div id="detailedFour"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="one" style="height: 310px">
|
||
<div class="cartitle">
|
||
<div style="width: 82%;display: flex;justify-content: space-between;align-items: center;">
|
||
<div class="titleFont">
|
||
盐都配变停运管理情况
|
||
</div>
|
||
<div class="dateSelect">
|
||
<div style="text-indent: 15px;" @click="handleDate(index)" :class="addColor(index)" v-for="(item,index) in dateList" :key="index">
|
||
{{item}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top">
|
||
<div class="topContent" v-for="(item,index) in topContent" :key="index">
|
||
<div style="color:#ffffff">{{item.name}}</div>
|
||
<div style="color:rgb(86,254,226);font-size:22px">{{item.count}}</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:90%" id="detailedFive"></div>
|
||
</div>
|
||
<div class="two" style="height: 340px">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
盐都供电质量统计
|
||
</div>
|
||
</div>
|
||
<div id="detailedTwo"></div>
|
||
</div>
|
||
<div class="three" style="height: 310px">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
工单统计
|
||
</div>
|
||
</div>
|
||
<div id="detailedThree"></div>
|
||
</div>
|
||
</div>
|
||
<div class="realTimeAlarm" v-show="realTimeAlarmShow">
|
||
<div class="content">
|
||
<img src="../assets/images/baojing.png"/>
|
||
<div>都政线XXX环网柜间隔3发生局部放电故障</div>
|
||
</div>
|
||
</div>
|
||
<div class="alarmInformation" v-show="alarmInformationShow">
|
||
<div class="top">
|
||
<div class="title">报警详情信息</div>
|
||
<div class="close">
|
||
<img
|
||
@click="handleClose"
|
||
src="@/assets/images/close.png"
|
||
style="cursor: pointer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="table user_skills">
|
||
<el-table
|
||
:data="alarmInformationData"
|
||
style="width: 100%; height: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
stripe
|
||
>
|
||
<el-table-column label="序号" align="center" >
|
||
<template slot-scope="scop">
|
||
{{ scop.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="报警信息" align="center" >
|
||
</el-table-column>
|
||
<el-table-column prop="date" label="发生时间" align="center" >
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div style="height:20px;width:20px" class="icon">
|
||
<img src="../assets/images/btnFangDa.png"/>
|
||
</div> -->
|
||
<div class="componentShow" v-if="modelOthers">
|
||
<keep-alive>
|
||
<component
|
||
:is="componentShow"
|
||
:ringMainUnit="device"
|
||
></component>
|
||
</keep-alive>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk} from "../api/index.js";
|
||
import ringMainUnit from "./HomePop/ringMainUnit.vue"
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
ringMainUnit,//环网柜弹窗
|
||
},
|
||
data() {
|
||
return {
|
||
dataGzList:[], //年故障数组
|
||
dateList: ['周','月'],
|
||
acolor: true,//是否展示颜色
|
||
currentIndex : -1,
|
||
alarmInformationData:[
|
||
{
|
||
name:'告警信息',
|
||
date:'2022'
|
||
}],
|
||
alarmInformationShow: false, //报警详情信息弹窗
|
||
realTimeAlarmShow: false,//实时报警弹窗
|
||
modelOthers: false,
|
||
componentShow: "",
|
||
CompanyInfo: {},
|
||
tableData: [],
|
||
btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所", "热力图"],
|
||
btnActive: 0,
|
||
iconGround:[
|
||
{
|
||
icon: require("@/assets/images/huanwanggui.png"),
|
||
name: "环网柜"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/fenzhixiang.png"),
|
||
name: "分支箱"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/xiangbian.png"),
|
||
name: "箱变"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/kaibisuo.png"),
|
||
name: "开闭所"
|
||
},
|
||
],
|
||
btnEnlarge:[
|
||
{
|
||
icon: require("@/assets/images/btnTiShi.png"),
|
||
},{
|
||
icon: require("@/assets/images/btnFangDa.png"),
|
||
}
|
||
],
|
||
options: [
|
||
{
|
||
value:'',
|
||
label:''
|
||
}
|
||
],
|
||
value: '',
|
||
topContent:[
|
||
{
|
||
name:'配变数量',
|
||
count:''
|
||
},
|
||
{
|
||
name:'重复停运台次',
|
||
count:''
|
||
},
|
||
{
|
||
name:'配变重复停运率',
|
||
count:''
|
||
},
|
||
],
|
||
device:''
|
||
};
|
||
},
|
||
mounted() {
|
||
// 盐都区供电公司概况
|
||
getCompanyInfo().then((res) => {
|
||
this.CompanyInfo = res.data.data;
|
||
});
|
||
// 查询总线路
|
||
getLine(
|
||
{action:'all'}
|
||
).then((res)=>{
|
||
if (res.data != '') {
|
||
this.options = Object.keys(res.data.data).map((item,index)=>{
|
||
return {value:res.data.data[index].line_code,label:res.data.data[index].line_name}
|
||
})
|
||
}
|
||
|
||
})
|
||
//周查询班组
|
||
getBanzugz(
|
||
{
|
||
action: 'week'
|
||
}
|
||
).then((res)=>{
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
this.tableData.push(res.data.data[i])
|
||
}
|
||
})
|
||
//工单统计
|
||
getGdtj().then((res)=>{
|
||
let dataList = res.data.data
|
||
this.detailedThree(dataList);
|
||
})
|
||
//年度查询班组
|
||
getBanzugz(
|
||
{
|
||
action: 'year'
|
||
}
|
||
).then((res)=>{
|
||
this.dataGzList=res.data.data
|
||
this.detailedFour(this.dataGzList);
|
||
})
|
||
//本周故障
|
||
getDwbzgz().then((res)=>{
|
||
let dataBzgz = []
|
||
dataBzgz = res.data.data;
|
||
this.detailedOne(dataBzgz);
|
||
})
|
||
//供电质量统计
|
||
getGdsgdzl().then((res)=>{
|
||
let dataGdzl = []
|
||
dataGdzl = res.data.data
|
||
this.detailedTwo(dataGdzl);
|
||
})
|
||
//配变停运
|
||
getPbtyqk({
|
||
action:"week"
|
||
}).then((res)=>{
|
||
let dataPbty = [];
|
||
dataPbty = res.data.data
|
||
console.log(dataPbty,'dataPbty');
|
||
this.detailedFive(dataPbty);
|
||
let dataPb = [];
|
||
let dataCf = [];
|
||
let dataCfl = [];
|
||
for (let i = 0; i < dataPbty.length; i++) {
|
||
dataPb.push(dataPbty[i].pbsl);
|
||
dataCf.push(dataPbty[i].cftytc);
|
||
dataCfl.push(dataPbty[i].pbcftyl)
|
||
}
|
||
this.topContent[0].count = dataPb.reduce((x, y) => x + y)
|
||
this.topContent[1].count = dataCf.reduce((x, y) => x + y)
|
||
this.topContent[2].count = dataCfl.reduce((x, y) => x + y) + '%'
|
||
})
|
||
this.handleDate(0);
|
||
let that = this;
|
||
window.addEventListener('message', function (e) {
|
||
var res = e.data;
|
||
if (res.val != null) {
|
||
that.modelOthers = true
|
||
that.componentShow = 'ringMainUnit'
|
||
that.device = res.val
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
//调用unity方法
|
||
handleUnity(index,item) {
|
||
this.btnActive = index;
|
||
this.$refs.iframe.contentWindow.handleChange(item)
|
||
},
|
||
//选择线路
|
||
selectLine(value){
|
||
getLine(
|
||
{
|
||
action:'query',
|
||
line_code:value
|
||
}
|
||
).then((res)=>{
|
||
if (res.data.data != 0) {
|
||
this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
|
||
}
|
||
})
|
||
},
|
||
detailedOne(dataBzgz) {
|
||
let dataList = [];
|
||
let newArr = [20,20, 20, 20,20, 20, 20,20,20,20];
|
||
let dataDw = []
|
||
for (let i = 0; i < dataBzgz.length; i++) {
|
||
dataList.push(dataBzgz[i].gzcs);
|
||
dataDw.push(dataBzgz[i].dw)
|
||
}
|
||
var myChart = this.$echarts.init(document.getElementById("detailedOne"));
|
||
var option = {
|
||
tooltip: {
|
||
show:true,
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
grid: {
|
||
top:'18%',
|
||
left: "5%",
|
||
right: "3%",
|
||
bottom: "8%",
|
||
containLabel: true,
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: dataDw,
|
||
axisTick: {
|
||
show:false,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLabel:{
|
||
color:'#ffffff',
|
||
interval: 0,
|
||
},
|
||
axisLine: {
|
||
show: false, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: "#01FCE3",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name:'故障次数',
|
||
type: "value",
|
||
data:[0,2,4,6,8,10],
|
||
nameTextStyle:{
|
||
color:'#ffffff',
|
||
// padding:[25,0,0,0]
|
||
},
|
||
axisLabel:{
|
||
color:'#ffffff'
|
||
},
|
||
splitLine:{
|
||
show:true,
|
||
lineStyle: {
|
||
type: 'solid',
|
||
// color: 'rgba(66, 192, 255, .3)',
|
||
color: 'rgba(102,102,102,0.6)',
|
||
width: 1
|
||
// color: 'red'
|
||
},
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type:'bar',
|
||
barWidth:22,
|
||
itemStyle:{
|
||
normal:{
|
||
label:{
|
||
fontSize: 14,
|
||
formatter(params){
|
||
for (let i = 0; i < dataList.length; i++) {
|
||
if (params.dataIndex == i) {
|
||
return dataDw[i] + '\n' + '\n' + dataList[i]
|
||
}
|
||
}
|
||
},
|
||
show:true,
|
||
position:'top',
|
||
color:'#ffffff'
|
||
},
|
||
color:"none",
|
||
}
|
||
},
|
||
silent:true,
|
||
barGap:'-100%',
|
||
data: newArr
|
||
},
|
||
{
|
||
name: "Direct",
|
||
type: "bar",
|
||
barWidth:22,
|
||
itemStyle:{
|
||
color: new this.$echarts.graphic.LinearGradient(
|
||
0, 1, 0, 0,
|
||
[
|
||
{offset: 0, color: 'rgba(23,74,100,0.6)'},
|
||
{offset: 1, color: 'rgb(86,254,226)'}
|
||
]
|
||
)
|
||
},
|
||
data: dataList,
|
||
label: {
|
||
show: false,
|
||
position: 'top',
|
||
fontStyle:'normal',
|
||
fontWeight:'normal',
|
||
color:'#ffffff',
|
||
|
||
},
|
||
// z: -1,
|
||
// //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
|
||
// barGap: '-100%',
|
||
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
},
|
||
detailedTwo(dataGdzl){
|
||
let gdsList = [];
|
||
let xlcczList = [];
|
||
let pbcczList = [];
|
||
let ddyList = [];
|
||
for (let i = 0; i < dataGdzl.length; i++) {
|
||
gdsList.push(dataGdzl[i].gds)
|
||
xlcczList.push(dataGdzl[i].xlccz)
|
||
pbcczList.push(dataGdzl[i].pbccz)
|
||
ddyList.push(dataGdzl[i].ddy)
|
||
}
|
||
let that = this;
|
||
var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
|
||
var option = {
|
||
tooltip : {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "10%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
icon:'rect',
|
||
right:25,
|
||
data: ["线路重超载", "配变重超载", "低电压"],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: gdsList,
|
||
axisLine: {
|
||
// 改变x轴颜色
|
||
lineStyle: {
|
||
color: "none",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// 改变x轴字体颜色和大小
|
||
interval:0,
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: ["#315070"],
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLine: {
|
||
// 改变y轴颜色
|
||
show: false,
|
||
lineStyle: {
|
||
color: "none",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// 改变y轴字体颜色和大小
|
||
//formatter: '{value} m³ ', // 给y轴添加单位
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#315070"],
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 7,
|
||
markPoint: {
|
||
symbol: "circle",
|
||
},
|
||
name: "线路重超载",
|
||
data: xlcczList,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#3D7EEB",
|
||
borderColor: "#3D7EEB",
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "#327BFA",
|
||
shadowColor: "#327BFA",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(61,126,235,0.5)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(61,126,235,0)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 7,
|
||
markPoint: {
|
||
symbol: "circle",
|
||
},
|
||
data: pbcczList,
|
||
name: "配变重超载",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#17D8A1",
|
||
borderColor: "#17D8A1",
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "#17D8A1",
|
||
shadowColor: "#17D8A1",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(23,216,161,0.5)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(23,216,161,0)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 7,
|
||
markPoint: {
|
||
symbol: "circle",
|
||
},
|
||
data: ddyList,
|
||
name: "低电压",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#F4C907",
|
||
borderColor: "#F4C907",
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "#F4C907",
|
||
shadowColor: "#F4C907",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(106,117,79,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(106,117,79,0)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
detailedThree(dataList){
|
||
var equipment = [dataList.yjlts,dataList.yjlyj];
|
||
var colorList = ["#0090ff","#06d3c4","#66b0ed","#7cb79d"]
|
||
var dataList = [{
|
||
value: dataList.pftd,
|
||
name: "频繁停电",
|
||
},
|
||
{
|
||
value: dataList.dctd,
|
||
name: "多次停电",
|
||
},
|
||
{
|
||
value: dataList.clsjc,
|
||
name: "处理时间长",
|
||
},
|
||
{
|
||
value: dataList.mspc,
|
||
name: "民事赔偿",
|
||
},]
|
||
var myChart = this.$echarts.init(document.getElementById("detailedThree"));
|
||
var option = {
|
||
borderColor:'none',
|
||
|
||
tooltip: {
|
||
formatter: function (param) {
|
||
if (param.data.type == null) {
|
||
return param.data.name + ":" + param.value + "个";
|
||
} else {
|
||
return param.data.name + ":" + param.value + "个";
|
||
}
|
||
},
|
||
},
|
||
legend: {
|
||
icon:'pin',
|
||
top: 15,
|
||
data: [
|
||
{
|
||
name:'频繁停电'
|
||
},
|
||
{
|
||
name:'多次停电'
|
||
},
|
||
{
|
||
name:'处理时间长'
|
||
},
|
||
{
|
||
name:'民事赔偿'
|
||
}
|
||
],
|
||
formatter: (name)=> {
|
||
let total = 0
|
||
let target
|
||
let value = dataList.filter(x=>x.name==name)[0].value
|
||
for (let i = 0, l = dataList.length; i < l; i++) {
|
||
total += dataList[i].value
|
||
if (dataList[i].name == name) {
|
||
target = dataList[i].value
|
||
}
|
||
}
|
||
let arr = [
|
||
name + ' '
|
||
+ value
|
||
]
|
||
return arr.join('\n')
|
||
},
|
||
|
||
textStyle: {
|
||
color:'#ffffff'
|
||
}
|
||
},
|
||
series: [
|
||
|
||
{
|
||
name: "整体分类",
|
||
type: "pie",
|
||
radius: [0, "40%"],
|
||
label: {
|
||
position: "inner",
|
||
show:false
|
||
},
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: "none",
|
||
borderWidth: 2,
|
||
color: function (params) {
|
||
return colorList[params.dataIndex];
|
||
},
|
||
},
|
||
},
|
||
|
||
selectedMode: "single",
|
||
data: dataList,
|
||
},
|
||
{
|
||
name: "招标方式",
|
||
type: "pie",
|
||
radius: ["50%", "55%"],
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
return colorList[params.dataIndex];
|
||
},
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: function (params) {
|
||
if (params.value != 0)
|
||
return params.data.name + ":" + params.data.type + "个";
|
||
else return "";
|
||
},
|
||
color:"#ffffff",
|
||
show: true,
|
||
},
|
||
},
|
||
|
||
data: [
|
||
{
|
||
value: equipment[0],
|
||
name: "运检类投诉",
|
||
type: equipment[0],
|
||
},
|
||
{
|
||
value: equipment[1],
|
||
name: "运检类意见",
|
||
type: equipment[1],
|
||
},
|
||
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
detailedFour(dataList){
|
||
let yearBzData = []
|
||
let yearChcg = []
|
||
let yearChbc = []
|
||
let yearWchz = []
|
||
let yearJieDi = []
|
||
for (let i = 0; i < dataList.length; i++) {
|
||
yearBzData.push(dataList[i].bz)
|
||
yearChcg.push(dataList[i].chcg)
|
||
yearChbc.push(dataList[i].chbc)
|
||
yearWchz.push(dataList[i].wchz)
|
||
yearJieDi.push(dataList[i].jiedi)
|
||
}
|
||
let that = this
|
||
var myChart = this.$echarts.init(document.getElementById("detailedFour"));
|
||
var option = {
|
||
tooltip: {
|
||
axisPointer: {
|
||
type: "shadow",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: 30,
|
||
bottom: 40,
|
||
left: '6%',
|
||
right: '6%',
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
right: "4%",
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
data: ["重合成功", "重合不成", "无重合闸","接地"],
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
trigger: "axis",
|
||
axisLine: {
|
||
show:false,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
},
|
||
data: yearBzData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color:"rgb(83,83,83)"
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "重合成功",
|
||
type: "bar",
|
||
stack: "Total1",
|
||
barMaxWidth: 15,
|
||
barGap: "10%",
|
||
label:{
|
||
show:true
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(194,190,190,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(194,190,190,0)",
|
||
},
|
||
]),
|
||
borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(194,190,190,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(194,190,190,0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: yearChcg,
|
||
},
|
||
{
|
||
name: "重合不成",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label:{
|
||
show:true
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(86,254,226,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(86,254,226,0)",
|
||
},
|
||
]),
|
||
borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(86,254,226,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(86,254,226,0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: yearChbc,
|
||
},
|
||
{
|
||
name: "无重合闸",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label:{
|
||
show:true
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(237,125,49,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(237,125,49,0)",
|
||
},
|
||
]),
|
||
borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(237,125,49,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(237,125,49,0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: yearWchz,
|
||
},
|
||
{
|
||
name: "接地",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label:{
|
||
show:true
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(35,160,247,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(35,160,247,0)",
|
||
},
|
||
]),
|
||
borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(35,160,247,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(35,160,247,0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: yearJieDi,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
|
||
},
|
||
detailedFive(dataPbty){
|
||
let dataListx = [];
|
||
let dataPb = [];
|
||
let dataGz = [];
|
||
let dataCf = [];
|
||
for (let i = 0; i < dataPbty.length; i++) {
|
||
dataListx.push(dataPbty[i].gds);
|
||
dataGz.push(dataPbty[i].gztytc);
|
||
dataPb.push(dataPbty[i].pbsl);
|
||
dataCf.push(dataPbty[i].cftytc);
|
||
}
|
||
let that = this;
|
||
var myChart = this.$echarts.init(document.getElementById("detailedFive"));
|
||
var option = {
|
||
grid: {
|
||
top: "15%",
|
||
bottom: "35%", //也可设置left和right设置距离来控制图表的大小
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: ["配变数量", "故障停运","重复停运"],
|
||
top: "0%",
|
||
// icon:'roundRect',
|
||
// itemHeight:2, // 粗细
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: dataListx,
|
||
axisLine: {
|
||
show: false, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: "#01FCE3",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, //隐藏X轴刻度
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval:0,
|
||
textStyle: {
|
||
color: "#ffffff", //X轴文字颜色
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "配变数量",
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval:0,
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
name: "停运台次",
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
position: "right",
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
|
||
// formatter: "{value} %", //右侧Y轴文字显示
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
gridIndex: 0,
|
||
min: 50,
|
||
max: 100,
|
||
splitNumber: 8,
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "故障停运",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
showAllSymbol: true, //显示所有图形。
|
||
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 1, //标记的大小
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
color: "rgb(237,125,49)",
|
||
},
|
||
lineStyle: {
|
||
color: "rgb(237,125,49)",
|
||
},
|
||
// areaStyle: {
|
||
// show:false,
|
||
// color: "rgba(5,140,255, 0.2)",
|
||
// },
|
||
data: dataGz,
|
||
},
|
||
{
|
||
name: "重复停运",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
showAllSymbol: true, //显示所有图形。
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 1, //标记的大小
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
show:false,
|
||
color: "#058cff",
|
||
},
|
||
lineStyle: {
|
||
show:false,
|
||
color: "#058cff",
|
||
},
|
||
// areaStyle: {
|
||
// show:false,
|
||
// color: "rgba(5,140,255, 0.2)",
|
||
// },
|
||
data: dataCf,
|
||
},
|
||
{
|
||
name: "配变数量",
|
||
type: "bar",
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(86,254,226,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(86,254,226,0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: dataPb,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//报警详情信息弹窗
|
||
enlargeBtn(index){
|
||
if (index == 0) {
|
||
this.alarmInformationShow = true;
|
||
this.realTimeAlarmShow = false;
|
||
}else if (index == 1) {
|
||
this.$refs.iframe.contentWindow.fullscreen(1);
|
||
}
|
||
},
|
||
handleClose(){
|
||
this.alarmInformationShow = false
|
||
},
|
||
handleDate(index){
|
||
this.currentIndex = index
|
||
if (index == 0) {
|
||
//周配变停运
|
||
getPbtyqk({
|
||
action:"week"
|
||
}).then((res)=>{
|
||
let dataPbty = [];
|
||
dataPbty = res.data.data
|
||
this.detailedFive(dataPbty);
|
||
let dataPb = [];
|
||
let dataCf = [];
|
||
for (let i = 0; i < dataPbty.length; i++) {
|
||
dataPb.push(dataPbty[i].pbsl);
|
||
dataCf.push(dataPbty[i].cftytc);
|
||
}
|
||
this.topContent[0].count = dataPb.reduce((x, y) => x + y)
|
||
this.topContent[1].count = dataCf.reduce((x, y) => x + y)
|
||
})
|
||
}else if (index == 1) {
|
||
//月配变停运
|
||
getPbtyqk({
|
||
action:"month"
|
||
}).then((res)=>{
|
||
let dataPbty = [];
|
||
dataPbty = res.data.data
|
||
this.detailedFive(dataPbty);
|
||
let dataPb = [];
|
||
let dataCf = [];
|
||
for (let i = 0; i < dataPbty.length; i++) {
|
||
dataPb.push(dataPbty[i].pbsl);
|
||
dataCf.push(dataPbty[i].cftytc);
|
||
}
|
||
this.topContent[0].count = dataPb.reduce((x, y) => x + y)
|
||
this.topContent[1].count = dataCf.reduce((x, y) => x + y)
|
||
})
|
||
}
|
||
},
|
||
addColor(index){
|
||
if(this.currentIndex == index) {
|
||
return {active : this.acolor}
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
//监听内容
|
||
value(newVal,oldVal) {
|
||
console.log(newVal,oldVal,"value发生了变化");
|
||
if (newVal != oldVal && newVal != '') {
|
||
this.selectLine(newVal)
|
||
}else if(newVal == ''){
|
||
console.log(this.value,"value");
|
||
this.value = ''
|
||
let item = '总览'
|
||
this.handleUnity(0,item)
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.user_skills {
|
||
/deep/ .el-table {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table th {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table__header {
|
||
height: 48px;
|
||
background: url("../assets/images/tableBg.png") no-repeat;
|
||
}
|
||
/deep/ .el-table__header th {
|
||
border: none;
|
||
padding: 0;
|
||
height: 48px;
|
||
.cell {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
&.el-table__cell.is-leaf {
|
||
border: none !important;
|
||
}
|
||
}
|
||
/deep/ .el-table tr {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
.el-table .cell {
|
||
background-color: transparent !important;
|
||
border: none;
|
||
color: #ffffff;
|
||
}
|
||
/deep/ .el-table__body td .cell {
|
||
white-space: nowrap !important;
|
||
// word-break: break-all;
|
||
}
|
||
/deep/ .el-table th.el-table__cell>.cell{
|
||
color: rgb(86,254,226);
|
||
}
|
||
&::before {
|
||
//去除底部白线
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 0px;
|
||
}
|
||
}
|
||
|
||
.home {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 15px 28px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
.left {
|
||
width: 604px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
& > div {
|
||
width: 100%;
|
||
background: url("../assets/images/homeCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.cartitle {
|
||
height: 52px;
|
||
width: 100%;
|
||
background: url("../assets/images/carTitle.png") no-repeat;
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 52px;
|
||
text-align: left;
|
||
text-indent: 26px;
|
||
}
|
||
.content {
|
||
padding: 24px 31px 0 31px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
.line {
|
||
width: 262px;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
.total {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-around;
|
||
margin-bottom: 20px;
|
||
.num {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.info {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
.lists {
|
||
width: 100%;
|
||
height: 32px;
|
||
background: url("../assets/images/cardSquare.png") no-repeat;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 12px;
|
||
padding: 0 10px 0 0;
|
||
box-sizing: border-box;
|
||
& > div {
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
}
|
||
.number{
|
||
color: rgb(86,254,226);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table {
|
||
width: 100%;
|
||
padding: 20px 14px 0 14px;
|
||
box-sizing: border-box;
|
||
height: calc(100% - 52px);
|
||
}
|
||
}
|
||
}
|
||
.middle {
|
||
width: 1590px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
.one {
|
||
background: url("../assets/images/ditu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
.unityBtn {
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 40px;
|
||
width: 94px;
|
||
.btn {
|
||
width: 100%;
|
||
height: 38px;
|
||
color: rgb(28, 95, 98);
|
||
font-size: 18px;
|
||
line-height: 38px;
|
||
background: url("../assets/images/btnAct.png") no-repeat;
|
||
margin-bottom: 10px;
|
||
}
|
||
.btnAct {
|
||
color: #ffffff;
|
||
background: url("../assets/images/unityBtn.png") no-repeat;
|
||
}
|
||
}
|
||
.unityIcon{
|
||
background: url("../assets/images/iconCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 110px;
|
||
height: 168px;
|
||
position: absolute;
|
||
right: 40px;
|
||
bottom: 80px;
|
||
display: flex;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.unityIconGround{
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
};
|
||
.unityEnlargeBtn{
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: absolute;
|
||
right: 40px;
|
||
top: 40px;
|
||
.content{
|
||
width:38px;
|
||
height: 36px;
|
||
background: url("../assets/images/btnkuang.png") no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
}
|
||
};
|
||
.unitySelect{
|
||
position: absolute;
|
||
left: 40px;
|
||
width: 222px;
|
||
bottom: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
.unitySuosou{
|
||
width: 57px;
|
||
height: 53px;
|
||
background: url("../assets/images/sousuoKuang.png") no-repeat ;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
};
|
||
}
|
||
|
||
.two{
|
||
.detailedOneList{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
height: 10%;
|
||
align-items: center;
|
||
color:#ffffff;
|
||
background: url("../assets/images/tableBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width:92%;
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.detailed {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
& > div {
|
||
background: url("../assets/images/detailedCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.cartitle {
|
||
height: 52px;
|
||
width: 100%;
|
||
background: url("../assets/images/detailed.png") no-repeat;
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 52px;
|
||
text-align: left;
|
||
text-indent: 26px;
|
||
}
|
||
}
|
||
}
|
||
#detailedOne{
|
||
width: 100%;
|
||
height: calc(100% - 0px) !important;
|
||
z-index: 2;
|
||
margin-top: -3%;
|
||
};
|
||
#detailedFour{
|
||
width: 100%;
|
||
height: calc(100% - 52px);
|
||
}
|
||
}
|
||
.right {
|
||
width: 604px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
& > div {
|
||
width: 100%;
|
||
background: url("../assets/images/homeCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.cartitle {
|
||
height: 52px;
|
||
width: 100%;
|
||
background: url("../assets/images/carTitle.png") no-repeat;
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 52px;
|
||
text-align: left;
|
||
text-indent: 26px;
|
||
|
||
}
|
||
};
|
||
.one{
|
||
.top{
|
||
width: 100%;
|
||
height: 10%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
.topContent{
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
#detailedThree{
|
||
width: 100%;
|
||
height: calc(100% - 52px);
|
||
};
|
||
#detailedTwo{
|
||
width: 100%;
|
||
height: calc(100% - 52px);
|
||
};
|
||
#detailedFive{
|
||
width: 100%;
|
||
height: calc(100% - 52px);
|
||
};
|
||
};
|
||
.titleFont{
|
||
color: transparent ;
|
||
-webkit-background-clip: text;
|
||
background-clip: text ;
|
||
background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(123,247,245))
|
||
}
|
||
//弹窗样式
|
||
.componentShow{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 111;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
}
|
||
.realTimeAlarm{
|
||
width: 517px;
|
||
height: 136px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
margin:0 auto;
|
||
top: 40%;
|
||
background: url('../assets/images/realTimeAlarmKuang.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.content{
|
||
color: #ffffff;
|
||
width: 75%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
margin-top: 4%;
|
||
}
|
||
}
|
||
.alarmInformation{
|
||
width: 517px;
|
||
height: 304px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
margin:0 auto;
|
||
top: 28%;
|
||
background: url('../assets/images/baojingxinxiKuang.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
padding: 10px 13px;
|
||
.top{
|
||
height: 10%;
|
||
width: 91%;
|
||
display: flex;
|
||
align-content: flex-start;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
color: transparent ;
|
||
-webkit-background-clip: text;
|
||
background-clip: text ;
|
||
background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
|
||
}
|
||
}
|
||
.content{
|
||
height: 85%;
|
||
width: 100%;
|
||
.user_skills {
|
||
/deep/ .el-table {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table th {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table__header {
|
||
height: 48px;
|
||
background: url("../assets/images/tableBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
/deep/ .el-table__header th {
|
||
border: none;
|
||
padding: 0;
|
||
height: 40px;
|
||
.cell {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around
|
||
}
|
||
&.el-table__cell.is-leaf {
|
||
border: none !important;
|
||
}
|
||
}
|
||
/deep/ .el-table tr {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
.el-table .cell {
|
||
background-color: transparent !important;
|
||
border: none;
|
||
color: #ffffff;
|
||
}
|
||
/deep/ .el-table__body td .cell {
|
||
white-space: nowrap !important;
|
||
// word-break: break-all;
|
||
}
|
||
/deep/ .el-table th.el-table__cell>.cell{
|
||
color: #FFFFFF;
|
||
}
|
||
/deep/.el-table .el-table__cell{
|
||
padding: 3px 0
|
||
}
|
||
&::before {
|
||
//去除底部白线
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 0px;
|
||
}
|
||
.el-table::before{
|
||
background-color: transparent;
|
||
}
|
||
|
||
::v-deep .el-table .el-table__body tr.el-table__row td{
|
||
background: rgba(79, 218, 255, 0.1) !important;
|
||
}
|
||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
|
||
background: rgba(79, 218, 255, 0.06) !important;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.dateSelect{
|
||
display: flex;
|
||
font-size:12px;
|
||
background: url("../assets/images/dateKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 25px;
|
||
width: 61px;
|
||
align-items: center;
|
||
}
|
||
.active{
|
||
width: 32px;
|
||
height: 25px;
|
||
color: rgb(78,230,207);
|
||
background: url("../assets/images/dateAction.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
.icon{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.el-select{
|
||
margin-left: -44px;
|
||
|
||
.el-input__inner{
|
||
background:url("../assets/images/selectCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
border: none;
|
||
padding-left: 58px;
|
||
}
|
||
.el-input__prefix, .el-input__suffix {
|
||
position: absolute;
|
||
top: 0;
|
||
-webkit-transition: all .3s;
|
||
height: 100%;
|
||
text-align: center;
|
||
margin-right: 17px;
|
||
|
||
}
|
||
.el-input__inner::-webkit-input-placeholder{
|
||
color: rgb(78,230,207) // 初始化的文字颜色
|
||
}
|
||
.el-input__inner{
|
||
color: rgb(78,230,207);
|
||
}
|
||
|
||
}
|
||
.el-select-dropdown{
|
||
background-color: rgba(14,30,46,0.5) !important;
|
||
border: 1px solid rgba(45,143,148,0.5) !important ;
|
||
.el-select-dropdown__item{
|
||
color: rgb(78,230,207) !important;
|
||
}
|
||
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
|
||
background-color: rgb(18,54,87) !important;
|
||
}
|
||
}
|
||
/**
|
||
表格有滚动效果但是不显示滚动条
|
||
*/
|
||
.table ::-webkit-scrollbar{
|
||
display:none;
|
||
}
|
||
</style>
|