2462 lines
70 KiB
Vue
2462 lines
70 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="left" id="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;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
rgb(189, 255, 231),
|
||
rgb(86, 244, 254)
|
||
);
|
||
"
|
||
class="numText"
|
||
:text="CompanyInfo.pdxl"
|
||
>{{ CompanyInfo.pdxl }}</span
|
||
>
|
||
<span style="font-size: 18px">配电路线</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="lists">
|
||
<div class="title">电缆化率</div>
|
||
<div class="number">{{ CompanyInfo.dlhl }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">配电站开关</div>
|
||
<div class="number">{{ CompanyInfo.pdkgz }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">配电室</div>
|
||
<div class="number">{{ CompanyInfo.pds }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">户外环网柜</div>
|
||
<div class="number">{{ CompanyInfo.hwhwg }}</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;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
rgb(189, 255, 231),
|
||
rgb(86, 244, 254)
|
||
);
|
||
"
|
||
class="numText"
|
||
:text="CompanyInfo.xlcd"
|
||
>{{ CompanyInfo.xlcd }}</span
|
||
>
|
||
<span style="font-size: 18px">路线长度</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="lists">
|
||
<div class="title">架空路线</div>
|
||
<div class="number">{{ CompanyInfo.jkxl }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">架空绝缘导线</div>
|
||
<div class="number">{{ CompanyInfo.jkjydx }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">架空绝缘化率</div>
|
||
<div class="number">{{ CompanyInfo.jkjyhl }}</div>
|
||
</div>
|
||
<div class="lists">
|
||
<div class="title">电缆路线</div>
|
||
<div class="number">{{ CompanyInfo.dlxl }}</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"
|
||
height="100%"
|
||
width="100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
ref="tableBox"
|
||
style="font-size: 16px"
|
||
>
|
||
<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="90"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="gzxl"
|
||
label="故障路线"
|
||
width="90"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="gzyy"
|
||
label="故障原因"
|
||
width="90"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="chcg" label="重合成功" width="55">
|
||
<template slot-scope="scope">
|
||
<div style="color: #ffbc3a">
|
||
{{ scope.row.chcg }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="chbc" label="重合不成" width="55">
|
||
<template slot-scope="scope">
|
||
<div style="color: #ffbc3a">
|
||
{{ scope.row.chbc }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="wchz" label="无重合闸" width="55">
|
||
<template slot-scope="scope">
|
||
<div style="color: #2793ff">
|
||
{{ scope.row.wchz }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="jiedi" label="接地" width="55">
|
||
<template slot-scope="scope">
|
||
<div style="color: #794af8">
|
||
{{ scope.row.jiedi }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="heji" label="合计" width="55">
|
||
<template slot-scope="scope">
|
||
<div style="color: #ee8316">
|
||
{{ scope.row.heji }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle" id="middle">
|
||
<div class="one" style="height: 635px; width: 100%" id="threeModel">
|
||
<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 enlargeShow == true ? btnEnlarge : btnEnlarge1"
|
||
:key="index"
|
||
@click="enlargeShow == true ? enlargeBtn(index) : enlargeBtn1(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>
|
||
<div class="selectChange">
|
||
<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>
|
||
<div class="detailed" id="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: 100%"></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" id="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" prop="id">
|
||
</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:40px;width:40px" class="suoxiao">
|
||
<img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
|
||
</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,
|
||
getCabinetInfo,
|
||
getCabinetList,
|
||
getfaultReportList
|
||
} from "../api/index.js";
|
||
import ringMainUnit from "./HomePop/ringMainUnit.vue";
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
ringMainUnit, //环网柜弹窗
|
||
},
|
||
data() {
|
||
return {
|
||
enlargeShow:true,
|
||
dataGzList: [], //年故障数组
|
||
dateList: ["周", "月"],
|
||
acolor: true, //是否展示颜色
|
||
currentIndex: -1,
|
||
alarmInformationData: [],
|
||
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"),
|
||
},
|
||
],
|
||
btnEnlarge1: [
|
||
{
|
||
icon: require("@/assets/images/btnTiShi.png"),
|
||
},
|
||
{
|
||
icon: require("@/assets/images/suoxiao.png"),
|
||
},
|
||
],
|
||
options: [
|
||
{
|
||
value: "",
|
||
label: "",
|
||
},
|
||
],
|
||
value: "",
|
||
topContent: [
|
||
{
|
||
name: "配变数量",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "重复停运台次",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "配变重复停运率",
|
||
count: "",
|
||
},
|
||
],
|
||
device: "",
|
||
tableData: [],
|
||
tableKey: +new Date(),
|
||
scrollTop: 0, //table距离顶部距离
|
||
option: null,
|
||
myChartBin: null,
|
||
};
|
||
},
|
||
created(){
|
||
|
||
},
|
||
mounted() {
|
||
this.beginShowing();
|
||
// 监听浏览器窗口大小变化
|
||
window.onresize = () => {
|
||
clearInterval(this.myTimer);
|
||
this.beginShowing();
|
||
};
|
||
// 盐都区供电公司概况
|
||
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);
|
||
// this.$nextTick(() => {
|
||
// this.detailedThree(dataList);
|
||
// setInterval(() => {
|
||
// this.doing();
|
||
// }, 200);
|
||
// });
|
||
});
|
||
//年度查询班组
|
||
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)
|
||
// let pbCount = (this.topContent[1].count/this.topContent[0].count)*100
|
||
// let pbCountString = pbCount.toString()
|
||
// if (pbCountString.indexOf(".") != -1) {
|
||
// this.topContent[2].count = pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
|
||
// }else{
|
||
// this.topContent[2].count = pbCountString +'%'
|
||
// }
|
||
// })
|
||
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;
|
||
}
|
||
});
|
||
//历史故障接口
|
||
let faultData = {
|
||
token: localStorage.getItem("token"),
|
||
pageSize:'500',
|
||
page:'1'
|
||
};
|
||
getfaultReportList(faultData).then((res)=>{
|
||
this.alarmInformationData = res.data.data.data
|
||
})
|
||
},
|
||
// beforeDestroy() {
|
||
// this.dataDestroy(); // 页面摧毁前，关闭定时器
|
||
// },
|
||
methods: {
|
||
beginShowing() {
|
||
this.$nextTick(function () {
|
||
// 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离
|
||
if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
|
||
this.tableHeight =
|
||
window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
|
||
this.$refs.tableBox.doLayout();
|
||
this.roll();
|
||
}
|
||
});
|
||
},
|
||
roll() {
|
||
// 拿到表格挂载后的真实DOM
|
||
const table = this.$refs.tableBox;
|
||
// 拿到表格中承载数据的div元素
|
||
const bodyWrapper = table.bodyWrapper;
|
||
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)
|
||
this.myTimer = setInterval(() => {
|
||
// 元素自增距离顶部1像素
|
||
bodyWrapper.scrollTop++;
|
||
// 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)
|
||
if (
|
||
bodyWrapper.clientHeight + bodyWrapper.scrollTop ===
|
||
bodyWrapper.scrollHeight
|
||
) {
|
||
// 重置table距离顶部距离
|
||
bodyWrapper.scrollTop = 0;
|
||
}
|
||
}, 100);
|
||
},
|
||
// 鼠标进入表格
|
||
mouseover() {
|
||
clearInterval(this.myTimer);
|
||
},
|
||
// 鼠标离开表格
|
||
mouseout() {
|
||
this.roll();
|
||
},
|
||
//调用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 && res.data.data != null) {
|
||
this.$refs.iframe.contentWindow.handleChangeLine(
|
||
res.data.data.line_name
|
||
);
|
||
} else if (res.data.data == null) {
|
||
this.$refs.iframe.contentWindow.handleChangeLine("");
|
||
}
|
||
});
|
||
},
|
||
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,
|
||
fontSize: 16,
|
||
},
|
||
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]
|
||
fontSize: 16,
|
||
},
|
||
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'
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
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: "",
|
||
type: "bar",
|
||
barWidth: 30,
|
||
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)" },
|
||
]),
|
||
fontSize: 16,
|
||
},
|
||
data: dataList,
|
||
label: {
|
||
show: true,
|
||
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 = {
|
||
// animation: true,
|
||
// animationDuration: 20000,
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "10%",
|
||
top: "15%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
top: 10,
|
||
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 colorList1 = ["rgb(198,123,244)", "#F4C907"];
|
||
var dataList = [
|
||
{
|
||
value: dataList.pftd,
|
||
name: "频繁停电",
|
||
},
|
||
{
|
||
value: dataList.dctd,
|
||
name: "多次停电",
|
||
},
|
||
{
|
||
value: dataList.clsjc,
|
||
name: "处理时间长",
|
||
},
|
||
{
|
||
value: dataList.mspc,
|
||
name: "民事赔偿",
|
||
},
|
||
];
|
||
this.myChartBin = this.$echarts.init(
|
||
document.getElementById("detailedThree")
|
||
);
|
||
this.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: 120,
|
||
// bottom:0,
|
||
right: 20,
|
||
orient: "vertical", //垂直显示
|
||
y: "center", //延Y轴居中
|
||
|
||
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",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [0, "60%"],
|
||
center: ["40%", "50%"],
|
||
startAngle: 60, //默认角度
|
||
label: {
|
||
position: "inner",
|
||
show: false,
|
||
},
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: "none",
|
||
borderWidth: 2,
|
||
fontSize: 16,
|
||
color: function (params) {
|
||
return colorList[params.dataIndex];
|
||
},
|
||
},
|
||
},
|
||
|
||
selectedMode: "single",
|
||
data: dataList,
|
||
},
|
||
{
|
||
name: "运检类",
|
||
type: "pie",
|
||
radius: ["65%", "67%"],
|
||
center: ["40%", "50%"],
|
||
startAngle: 30,
|
||
itemStyle: {
|
||
normal: {
|
||
fontSize: 16,
|
||
color: function (params) {
|
||
return colorList1[params.dataIndex];
|
||
},
|
||
// color:'#F4C907',
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: function (params) {
|
||
return params.data.name + ":" + params.data.type + "个";
|
||
},
|
||
color: "auto",
|
||
show: true,
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
|
||
data: [
|
||
{
|
||
value: equipment[0],
|
||
name: "运检类投诉",
|
||
type: equipment[0],
|
||
},
|
||
{
|
||
value: equipment[1],
|
||
name: "运检类意见",
|
||
type: equipment[1],
|
||
},
|
||
],
|
||
animation: false,
|
||
},
|
||
],
|
||
};
|
||
this.myChartBin.setOption(this.option);
|
||
},
|
||
doing() {
|
||
this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
|
||
this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
|
||
this.myChartBin.setOption(this.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",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: 30,
|
||
bottom: "17%",
|
||
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",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 14,
|
||
rotate: 30,
|
||
},
|
||
data: yearBzData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgb(83,83,83)",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "重合成功",
|
||
type: "bar",
|
||
stack: "Total1",
|
||
barMaxWidth: 15,
|
||
barGap: "10%",
|
||
label: {
|
||
show: true,
|
||
formatter: function (params) {
|
||
if (params.value == 0) {
|
||
return "";
|
||
} else {
|
||
return params.value;
|
||
}
|
||
},
|
||
},
|
||
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,
|
||
formatter: function (params) {
|
||
if (params.value == 0) {
|
||
return "";
|
||
} else {
|
||
return params.value;
|
||
}
|
||
},
|
||
},
|
||
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,
|
||
formatter: function (params) {
|
||
if (params.value == 0) {
|
||
return "";
|
||
} else {
|
||
return params.value;
|
||
}
|
||
},
|
||
},
|
||
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,
|
||
formatter: function (params) {
|
||
if (params.value == 0) {
|
||
return "";
|
||
} else {
|
||
return params.value;
|
||
}
|
||
},
|
||
},
|
||
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);
|
||
}
|
||
var datacoords = [];
|
||
var datacoords1 = [];
|
||
for (var i = 0; i < dataListx.length; i++) {
|
||
datacoords.push([
|
||
{
|
||
coord: [i, dataGz[i]],
|
||
},
|
||
{
|
||
coord: [i + 1, dataGz[i + 1]],
|
||
},
|
||
]);
|
||
}
|
||
for (var i = 0; i < dataListx.length; i++) {
|
||
datacoords1.push([
|
||
{
|
||
coord: [i, dataCf[i]],
|
||
},
|
||
{
|
||
coord: [i + 1, dataCf[i + 1]],
|
||
},
|
||
]);
|
||
}
|
||
let that = this;
|
||
var myChart = this.$echarts.init(document.getElementById("detailedFive"));
|
||
var option = {
|
||
animation: true, //控制动画示否开启
|
||
animationDuration: 2000,
|
||
animationEasing: "bounceOut", //缓动动画
|
||
animationThreshold: 8, //动画元素的阈值
|
||
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轴文字颜色
|
||
fontSize: "16px",
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "配变数量",
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
padding: [0, 30, 0, 0],
|
||
},
|
||
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, //显示所有图形。
|
||
shadowOffsetX: 0, // 折线的X偏移
|
||
shadowOffsetY: 10, // 折线的Y偏移
|
||
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)",
|
||
// },
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: dataGz,
|
||
},
|
||
{
|
||
showSymbol: false,
|
||
name: "故障停运",
|
||
type: "lines",
|
||
yAxisIndex: 1,
|
||
polyline: true,
|
||
smooth: false,
|
||
coordinateSystem: "cartesian2d",
|
||
zlevel: 1,
|
||
effect: {
|
||
show: true,
|
||
smooth: false,
|
||
period: 6,
|
||
trailLenth: 0.1,
|
||
symbolSize: 6,
|
||
symbol: "circle",
|
||
},
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1,
|
||
opacity: 0,
|
||
curveness: 0,
|
||
cap: "round",
|
||
},
|
||
data: datacoords,
|
||
},
|
||
{
|
||
name: "重复停运",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
shadowOffsetX: 0, // 折线的X偏移
|
||
shadowOffsetY: 10, // 折线的Y偏移
|
||
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,
|
||
},
|
||
{
|
||
showSymbol: false,
|
||
name: "重复停运",
|
||
type: "lines",
|
||
yAxisIndex: 1,
|
||
polyline: true,
|
||
smooth: false,
|
||
coordinateSystem: "cartesian2d",
|
||
zlevel: 1,
|
||
effect: {
|
||
show: true,
|
||
smooth: false,
|
||
period: 6,
|
||
trailLenth: 0.1,
|
||
symbolSize: 6,
|
||
symbol: "circle",
|
||
},
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1,
|
||
opacity: 0,
|
||
curveness: 0,
|
||
cap: "round",
|
||
},
|
||
data: datacoords1,
|
||
},
|
||
{
|
||
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.enlargeShow = false
|
||
// this.$refs.iframe.contentWindow.fullscreen(1);
|
||
document.getElementById("left").style.display = "none";
|
||
document.getElementById("right").style.display = "none";
|
||
document.getElementById("middle").style.width = "100%";
|
||
document.getElementById("middle").style.height = "100%";
|
||
document.getElementById("detailed").style.display = "none";
|
||
document.getElementById("threeModel").style.height = "100%";
|
||
document.getElementById("threeModel").style.width = "100%";
|
||
}
|
||
},
|
||
//报警详情信息弹窗
|
||
enlargeBtn1(index) {
|
||
if (index == 0) {
|
||
this.alarmInformationShow = true;
|
||
this.realTimeAlarmShow = false;
|
||
} else if (index == 1) {
|
||
this.enlargeShow = true
|
||
// this.$refs.iframe.contentWindow.fullscreen(1);
|
||
document.getElementById("left").style.display = "flex";
|
||
document.getElementById("left").style.width = "21.18%";
|
||
document.getElementById("right").style.display = "flex";
|
||
document.getElementById("right").style.width = "21.18%";
|
||
document.getElementById("middle").style.width = "55.7%";
|
||
document.getElementById("middle").style.height = "100%";
|
||
document.getElementById("detailed").style.display = "flex";
|
||
document.getElementById("detailed").style.height = "350px";
|
||
}
|
||
},
|
||
handleClose() {
|
||
this.alarmInformationShow = false;
|
||
},
|
||
handleDate(index) {
|
||
this.currentIndex = index;
|
||
// if (index == 0) {
|
||
//周配变停运
|
||
getPbtyqk({
|
||
action: index == 0 ? "week" : "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);
|
||
let pbCount =
|
||
(this.topContent[1].count / this.topContent[0].count) * 100;
|
||
let pbCountString = pbCount.toString();
|
||
if (pbCountString.indexOf(".") != -1) {
|
||
this.topContent[2].count =
|
||
pbCountString.substring(0, pbCountString.indexOf(".") + 3) + "%";
|
||
} else {
|
||
this.topContent[2].count = pbCountString + "%";
|
||
}
|
||
});
|
||
// }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)
|
||
// let pbCount = (this.topContent[1].count/this.topContent[0].count)*100
|
||
// let pbCountString = pbCount.toString()
|
||
// if (pbCountString.indexOf(".") != -1) {
|
||
// this.topContent[2].count = pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
|
||
// }else{
|
||
// this.topContent[2].count = pbCountString +'%'
|
||
// }
|
||
// })
|
||
// }
|
||
},
|
||
addColor(index) {
|
||
if (this.currentIndex == index) {
|
||
return { active: this.acolor };
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
//监听内容
|
||
value(newVal, oldVal) {
|
||
if (newVal != oldVal && newVal != "") {
|
||
this.selectLine(newVal);
|
||
} else if (newVal == "") {
|
||
this.selectLine("");
|
||
this.value = "";
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</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 {
|
||
width: 100% !important;
|
||
height: 70px;
|
||
background: url("../assets/images/tableBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
/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);
|
||
}
|
||
/deep/.el-table__body,
|
||
.el-table__footer,
|
||
.el-table__header {
|
||
width: 100% !important;
|
||
}
|
||
/deep/ .el-table__body td .cell {
|
||
// width: 60px !important;
|
||
}
|
||
// &::before {
|
||
// //去除底部白线
|
||
// left: 0;
|
||
// bottom: 0;
|
||
// width: 100%;
|
||
// height: 0px;
|
||
// }
|
||
.el-table::before {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
width: 21.18%;
|
||
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;
|
||
.numText {
|
||
color: #ffffff;
|
||
}
|
||
.numText:before {
|
||
content: attr(text);
|
||
position: absolute;
|
||
z-index: 10;
|
||
color: rgb(86, 254, 246) !important;
|
||
-webkit-mask: linear-gradient(
|
||
to top,
|
||
rgb(86, 244, 254),
|
||
transparent
|
||
);
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
width: 55.7%;
|
||
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: 30%;
|
||
width: 40%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.btn {
|
||
width: 100%;
|
||
height: 38px;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
line-height: 38px;
|
||
background: url("../assets/images/btnAct.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 10px;
|
||
margin-right: 15px;
|
||
}
|
||
.btnAct {
|
||
color: rgb(244, 201, 7);
|
||
background: url("../assets/images/unityBtn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
.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;
|
||
height: 5%;
|
||
bottom: 20px;
|
||
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: 14%;
|
||
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;
|
||
width: 21.28%;
|
||
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;
|
||
}
|
||
}
|
||
.suoxiao {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
// }
|
||
</style>
|
||
<style lang="less">
|
||
// .selectChange {
|
||
// width: 100% !important;
|
||
// height: 100% !important;
|
||
.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 0.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: rgb(14, 30, 46) !important;
|
||
border: 1px solid rgba(45, 143, 148, 0.5) !important ;
|
||
.el-select-dropdown__item {
|
||
color: #fff !important;
|
||
}
|
||
.el-select-dropdown__item.hover,
|
||
.el-select-dropdown__item:hover {
|
||
background-color: rgb(18, 54, 87) !important;
|
||
}
|
||
}
|
||
// .el-popper {
|
||
// top: 50%;
|
||
// }
|
||
.el-popper[x-placement^=bottom] {
|
||
margin-top: -146px !important;
|
||
}
|
||
.popper__arrow {
|
||
left: 171px !important;
|
||
top: 95px !important;
|
||
}
|
||
// }
|
||
/**
|
||
表格有滚动效果但是不显示滚动条
|
||
*/
|
||
.table ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|