diff --git a/src/views/index.vue b/src/views/index.vue
index aa02810c..61c86ff3 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -69,7 +69,7 @@
<div id="detailedTwo1"></div>
</div>
<div class="two" style="height: 49%">
- <div class="cartitle">
+ <div class="cartitle" @click="routerTo('配网工程全过程物资审计')">
<div class="titleFont">配网工程全过程物资审计</div>
</div>
<div class="content" style="display:inline">
@@ -138,7 +138,7 @@
</div>
<div class="left1" id="left">
<div class="one" style="height: 48%">
- <div class="cartitle">
+ <div class="cartitle" @click="routerTo('盐都东台区供电所数字化分析')">
<div class="titleFont">盐都东台区供电所数字化分析</div>
</div>
<div class="content">
@@ -1083,6 +1083,12 @@ export default {
if (data == '盐城地区分布光伏运行监测') {
this.$router.push("/stationBuilding");
}
+ if (data == '盐都东台区供电所数字化分析') {
+ this.$router.push("/twentyKV");
+ }
+ if (data == '配网工程全过程物资审计') {
+ this.$router.push("/thirtyFiveKV");
+ }
},
//班组
getbanzhu() {
diff --git a/src/views/stationBuilding.vue b/src/views/stationBuilding.vue
index 0ebad1f9..b5138009 100644
--- a/src/views/stationBuilding.vue
+++ b/src/views/stationBuilding.vue
@@ -65,29 +65,37 @@
</div>
<div class="middle" id="middle">
<div class="map" style="height: 100%">
+ <canvas
+ id="myCanvas"
+ width="1000"
+ height="600"
+ style="position: absolute"
+ ></canvas>
+
+ <img src="../assets/indexN/大丰市选中.png" alt="" />
<div class="imgboxone">
<div class="contents">
<div class="lines">
<div class="total">
<div class="num">
- <span style="font-size: 18px">户数高渗透率</span>
- <h5 style="font-size: 28px; color: yellow">3.40%</h5>
+ <span>户数高渗透率</span>
+ <h5 class="yellow">3.40%</h5>
</div>
</div>
</div>
<div class="lines">
<div class="total">
<div class="num">
- <span style="font-size: 18px">容量渗透率</span>
- <h5 style="font-size: 28px; color: orange">0.01%</h5>
+ <span>容量渗透率</span>
+ <h5 class="orange">0.01%</h5>
</div>
</div>
</div>
<div class="lines">
<div class="total">
<div class="num">
- <span style="font-size: 18px">能量渗透率</span>
- <h5 style="font-size: 28px; color: yellow">0.44%</h5>
+ <span>能量渗透率</span>
+ <h5 class="yellow">0.44%</h5>
</div>
</div>
</div>
@@ -175,23 +183,6 @@
</div>
<div class="content">
<div class="line">
- <!-- <div class="total">
- <div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
- <span style="font-size: 18px">户数高渗透率 </span>
- <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>
-
- </div>
- </div> -->
<table>
<thead style="color: #fff; font-size: 30px">
<tr>
@@ -215,10 +206,6 @@
</div>
</div>
- <!-- <div style="height:40px;width:40px" class="suoxiao">
- <img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
- </div> -->
-
<audio
controls="controls"
hidden
@@ -229,6 +216,8 @@
</template>
<script>
+//引入echarts
+import * as echarts from "echarts";
// 工单统计弹窗组件
import workOrder from "../component/workOrder.vue";
import ringMainUnit from "./HomePop/ringMainUnit.vue";
@@ -237,7 +226,7 @@ import routeDetail from "../component/routeDetail.vue";
// 线路详情
import lineDetail from "../component/lineDetail.vue";
export default {
- name: "home",
+ name: "stationRuilding",
components: {
ringMainUnit, //环网柜弹窗
workOrder, //工单统计弹窗
@@ -493,8 +482,20 @@ export default {
this.detailedTwo22();
this.detailqe1();
this.detailen1();
+ this.xianDuan();
},
methods: {
+ xianDuan() {
+ var canvas = document.getElementById("myCanvas");
+ var ctx = canvas.getContext("2d");
+ ctx.moveTo(500, 500); // moveTo(x,y) 定义线条开始坐标
+ ctx.lineTo(700, 150); // lineTo(x,y) 定义线条结束坐标
+ ctx.moveTo(400, 500); // moveTo(x,y) 定义线条开始坐标
+ ctx.lineTo(160, 600); // lineTo(x,y) 定义线条结束坐标
+ ctx.strokeStyle = "orange";
+ ctx.lineWidth = 5;
+ ctx.stroke();
+ },
detailedTwo11() {
var fontColor = "#fff";
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
@@ -607,70 +608,268 @@ export default {
});
},
detailedTwo22() {
- var fontColor = "#30eee9";
+ // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
+ var honorData = [
+ {
+ name: "2019末",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020上半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020下半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2021年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ ];
+ var honorXAxisData = [
+ "电机有限公司（合并）",
+ "电机有限公司（本部）",
+ "电气有限公司",
+ "西安电气有限公司",
+ "先锋电气有限公司",
+ "南非电机有限公司",
+ ];
+ // // 设置灰色背景色的长度
+ var isMax = 2000;
+ var bjData1 = [
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ ];
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
+
var option = {
+ color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ },
+ backgroundColor: "#031f2d",
+
+ legend: {
+ right: 5,
+ top: "5%",
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 15,
+ textStyle: {
+ color: "#ACCFFF",
+ fontSize: 16,
+ },
+ },
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: "5%",
+ right: "5%",
+ bottom: "5%",
+ top: "10%",
containLabel: true,
},
- xAxis: {
- type: "value",
- show: false,
- },
- yAxis: {
- type: "category",
- axisLine: {
- lineStyle: {
- color: "#206489",
+ xAxis: [
+ {
+ type: "value",
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ formatter: function (value) {
+ return value + "(万元)";
+ },
+ },
+ splitLine: {
+ show: false,
},
},
- axisLabel: {
- color: "#fff",
- fontSize: "18",
+ ],
+ yAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ },
+ offset: 20,
+ data: honorXAxisData,
},
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- alignWithLabel: true,
- },
- splitArea: { show: false },
- data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
- },
+ ],
series: [
{
- name: "Direct",
+ name: "2019末",
type: "bar",
- stack: "total",
- barWidth: 10,
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
label: {
- show: true,
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
},
- emphasis: {
- focus: "series",
- },
- data: [320, 302, 310, 299, 288],
+ data: honorData[0].data,
},
{
- name: "Mail Ad",
+ name: "2020上半年",
type: "bar",
- stack: "total",
- barWidth: 10,
-
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
label: {
- show: true,
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "完成" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
},
- emphasis: {
- focus: "series",
+ data: honorData[1].data,
+ },
+ {
+ name: "2020下半年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "预算" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
},
- data: [99, 88, 100, 101, 97],
+ data: honorData[2].data,
+ },
+ {
+ name: "2021年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
+ },
+ data: honorData[3].data,
},
],
};
+
+ // var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
+ // var option = {
+ // grid: {
+ // left: "3%",
+ // right: "4%",
+ // bottom: "3%",
+ // containLabel: true,
+ // },
+ // xAxis: {
+ // type: "value",
+ // show: false,
+ // },
+ // yAxis: {
+ // type: "category",
+ // axisLine: {
+ // lineStyle: {
+ // color: "#206489",
+ // },
+ // },
+ // axisLabel: {
+ // color: "#fff",
+ // fontSize: "18",
+ // },
+ // axisLine: {
+ // show: false,
+ // },
+ // axisTick: {
+ // show: false,
+ // alignWithLabel: true,
+ // },
+ // splitArea: { show: false },
+ // data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
+ // },
+ // series: [
+ // {
+ // name: "Direct",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [320, 302, 310, 299, 288],
+ // },
+ // {
+ // name: "Mail Ad",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [99, 88, 100, 101, 97],
+ // },
+ // ],
+ // };
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
@@ -818,7 +1017,11 @@ export default {
name: "关联电网事故",
type: "bar",
itemStyle: {
- color: "#00ffff", // 柱状图颜色
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(86,254,226,.2) " },
+ { offset: 0.5, color: "rgb(86,254,226,.6)" },
+ { offset: 0, color: "rgb(86,254,226)" },
+ ]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
@@ -831,7 +1034,11 @@ export default {
name: "关联检修单",
type: "bar",
itemStyle: {
- color: "yellow", // 柱状图颜色
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(237,125,49,.2) " },
+ { offset: 0.5, color: "rgb(237,125,49,.6)" },
+ { offset: 0, color: "rgb(237,125,49)" },
+ ]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
@@ -1026,11 +1233,12 @@ export default {
background-size: 100%;
float: right;
width: 40vh;
- height: 25vh;
+ height: 10vh;
position: relative;
top: 5vh;
right: 1vh;
.contents {
+ height: 90%;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display: flex;
@@ -1045,18 +1253,25 @@ export default {
}
.total {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-around;
- margin-bottom: 15%;
-
.num {
- float: left;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #ffffff;
+ h5 {
+ font-size: 28px;
+ }
+ .yellow {
+ color: yellow;
+ }
+ .orange {
+ color: orange;
+ }
+ span {
+ float: left;
+ font-size: 18px;
+ }
}
}
}
@@ -1077,7 +1292,6 @@ export default {
margin: 0;
padding: 10px;
width: 100%;
- height: 100%;
/* flex布局 */
display: flex;
// 开启换行
@@ -1096,11 +1310,12 @@ export default {
}
width: 49.5%;
//高度调整
- height: 49%;
+ height: 50%;
list-style: none;
font-size: 24px;
color: #fff;
background: url("../assets/02/弹窗里的小框子.png") no-repeat;
+ background-size: 100%;
}
}
}
@@ -1111,6 +1326,11 @@ export default {
display: table-cell;
text-align: center;
margin-left: -20%;
+ img {
+ position: relative;
+ left: 20%;
+ top: 35%;
+ }
}
}
diff --git a/src/views/thirtyFiveKV.vue b/src/views/thirtyFiveKV.vue
index 3554d4ef..7a008191 100644
--- a/src/views/thirtyFiveKV.vue
+++ b/src/views/thirtyFiveKV.vue
@@ -1,81 +1,1562 @@
<template>
- <div class="stationBuilding">
- <!-- <video-player
- class="video-player vjs-custom-skin"
- style="heght:100%;width:100%"
- ref="VideoPlayer"
- :playsinline="true"
- :options="playerOptions"
- >
- </video-player> -->
- <div class="stationContent">
- <div class="systemText">
- <i class="el-icon-loading" style="color: #4bfffd; font-size: 80px"></i>
- <p style="font-size: 30px;color:#fff">系统正在加载中...</p>
+ <div class="home">
+ <div class="left" id="left">
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>预计年/月变化趋势</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div class="enselect">
+ <img src="../assets/02/地区选择下拉菜单.png" alt="" />
+ <span class="text">2022</span>
+ </div>
+ <div id="detailedTwo1"></div>
+ </div>
+ </div>
+ </div>
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>年/月总投资变化趋势</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div class="enselect">
+ <img src="../assets/02/地区选择下拉菜单.png" alt="" />
+ <span class="text">2022</span>
+ </div>
+ <div id="detailedTwo2"></div>
+ </div>
+ </div>
</div>
</div>
+ <div class="left1" id="left">
+ <div class="one" style="height: 100%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>县公司预算统计</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailedTwo3"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="middle" id="middle">
+ <div class="map" style="height: 100%">
+ <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
+ <div class="imgboxone">
+ <div class="contents">
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inline-block">
+ <img
+ style="float: left"
+ src="../assets/index/总数据图标1.png"
+ alt=""
+ />
+ <span>项目数</span>
+ </div>
+ <h5 class="yellow">
+ 9.279 <span style="color: #fff">万</span>
+ </h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inline-block">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标2.png"
+ alt=""
+ />
+ <span>预算费用总和</span>
+ </div>
+ <h5 class="orange">
+ 118.5<span style="color: #fff">万</span>
+ </h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inline-block">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标1.png"
+ alt=""
+ />
+ <span>计划数</span>
+ </div>
+ <h5 class="yellow"> 44</h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inline-block">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标2.png"
+ alt=""
+ />
+ <span>物科数</span>
+ </div>
+ <h5 class="orange"> 10</h5>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right" id="right">
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>县物项目总投资比</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="barCharts"></div>
+ </div>
+ </div>
+ </div>
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>县物资占比分配</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailen"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right1" id="right">
+ <div class="one" style="height: 100%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>县公司预算统计</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <table>
+ <thead style="color: #fff; font-size: 30px">
+ <tr>
+ <td>县公司名称</td>
+ <td>物科数量</td>
+ <td>计划数量</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in pvTable" :key="index">
+ <td>{{ item.name }}</td>
+ <td>{{ item.stationNumber }}</td>
+ <td class="titleFont">{{ item.alternatorNumber }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <audio
+ controls="controls"
+ hidden
+ src="../assets/videos/police.wav"
+ ref="audio"
+ ></audio>
</div>
</template>
<script>
+//引入echarts
+import * as echarts from "echarts";
+// 工单统计弹窗组件
+import workOrder from "../component/workOrder.vue";
+import ringMainUnit from "./HomePop/ringMainUnit.vue";
+import routeDetail from "../component/routeDetail.vue";
+
+// 线路详情
+import lineDetail from "../component/lineDetail.vue";
export default {
- name: "thirtyFiveKV",
+ name: "twentyKV",
+ components: {
+ ringMainUnit, //环网柜弹窗
+ workOrder, //工单统计弹窗
+ routeDetail, //线路故障跳闸明细
+ lineDetail, //线路详情弹窗
+ },
data() {
return {
- // 视频播放器配置
- playerOptions: {
- height: 400,
- playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
- autoplay: false, // 如果true,浏览器准备好时开始回放。
- muted: false, // 默认情况下将会消除任何音频。
- loop: false, // 导致视频一结束就重新开始。
- preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
- language: "zh-CN",
- aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
- fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
- sources: [
- {
- type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
- src: require("../assets/videos/video.mp4"), // url地址
- },
- ],
- poster: require("../assets/images/sun.png"), // 你的封面地址
- // width: document.documentElement.clientWidth, //播放器宽度
- notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
- controlBar: {
- timeDivider: true,
- durationDisplay: true,
- remainingTimeDisplay: false,
- fullscreenToggle: true, // 全屏按钮
+ pageShow: true,
+ totals: 5,
+ pageSize: 10,
+ page: 1,
+ threeImg: require("../assets/images/pieBorder.png"),
+ enlargeShow: true,
+ 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,
+ // 工单
+ orderItem: null,
+ orderShow: "",
+ // 线路故障明细
+ routeItem: null,
+ routeShow: "",
+ // 配电线路
+ lineItem: null,
+ lineShow: "",
+ timer: null, //定时器
+ emergencyList: [], //告警数据
+ rowTime: "",
+ pvTable: [
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "0",
+ alternatorNumber: "1",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "23",
+ alternatorNumber: "1",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "1",
+ alternatorNumber: "3",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "1",
+ alternatorNumber: "2",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "14",
+ alternatorNumber: "3",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "45.3w",
+ alternatorNumber: "2",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "13.3w",
+ alternatorNumber: "1",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "23",
+ alternatorNumber: "0",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "23",
+ alternatorNumber: "0",
+ },
+ {
+ name: "国网东台区供电公司",
+ stationNumber: "356.3w",
+ alternatorNumber: "2",
+ },
+ ],
};
},
+ created() {},
+ mounted() {
+ this.detailedTwo11();
+ this.detailedTwo22();
+ this.detailedTwo33();
+ this.barCharts();
+ this.detailen();
+ },
+ methods: {
+ detailedTwo11() {
+ var fontColor = "#fff";
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: ["2018", "2019", "2020", "2021", "2022"],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#ffffff",
+ fontSize: "18",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ alignWithLabel: true,
+ },
+ splitArea: { show: false },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "",
+ axisLabel: {
+ textStyle: {
+ color: "#ffffff",
+ fontSize: "18",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "预计年变化趋势",
+ type: "bar",
+ barWidth: 40,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(86,254,226,.2) " },
+ { offset: 0.5, color: "rgb(86,254,226,.6)" },
+ { offset: 0, color: "rgb(86,254,226)" },
+ ]),
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ emphasis: {
+ focus: "series",
+ },
+ data: [320, 332, 301, 334, 390],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailedTwo22() {
+ var fontColor = "#30eee9";
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff",
+ fontSize: "16",
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ },
+ },
+ data: ["2018", "2019", "2020", "2021", "2022"],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ series: [
+ {
+ name: "总投资",
+ type: "line",
+ stack: "Total",
+ symbol: "none",
+ data: [80, 132, 101, 134, 121],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailedTwo33() {
+ // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
+ var honorData = [
+ {
+ name: "2019末",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020上半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020下半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2021年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ ];
+ var honorXAxisData = [
+ "电机有限公司（合并）",
+ "电机有限公司（本部）",
+ "电气有限公司",
+ "西安电气有限公司",
+ "先锋电气有限公司",
+ "南非电机有限公司",
+ ];
+ // // 设置灰色背景色的长度
+ var isMax = 2000;
+ var bjData1 = [
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ ];
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
+
+ var option = {
+ color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ },
+ backgroundColor: "#031f2d",
+
+ legend: {
+ right: 5,
+ top: "5%",
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 15,
+ textStyle: {
+ color: "#ACCFFF",
+ fontSize: 16,
+ },
+ },
+ grid: {
+ left: "5%",
+ right: "5%",
+ bottom: "5%",
+ top: "10%",
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: "value",
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ formatter: function (value) {
+ return value + "(万元)";
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ },
+ offset: 20,
+ data: honorXAxisData,
+ },
+ ],
+ series: [
+ {
+ name: "2019末",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
+ },
+ data: honorData[0].data,
+ },
+ {
+ name: "2020上半年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "完成" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
+ },
+ data: honorData[1].data,
+ },
+ {
+ name: "2020下半年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "预算" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
+ },
+ data: honorData[2].data,
+ },
+ {
+ name: "2021年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
+ },
+ data: honorData[3].data,
+ },
+ ],
+ };
+
+ // var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
+ // var option = {
+ // grid: {
+ // left: "3%",
+ // right: "4%",
+ // bottom: "3%",
+ // containLabel: true,
+ // },
+ // xAxis: {
+ // type: "value",
+ // show: false,
+ // },
+ // yAxis: {
+ // type: "category",
+ // axisLine: {
+ // lineStyle: {
+ // color: "#206489",
+ // },
+ // },
+ // axisLabel: {
+ // color: "#fff",
+ // fontSize: "18",
+ // },
+ // axisLine: {
+ // show: false,
+ // },
+ // axisTick: {
+ // show: false,
+ // alignWithLabel: true,
+ // },
+ // splitArea: { show: false },
+ // data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
+ // },
+ // series: [
+ // {
+ // name: "Direct",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [320, 302, 310, 299, 288],
+ // },
+ // {
+ // name: "Mail Ad",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [99, 88, 100, 101, 97],
+ // },
+ // ],
+ // };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ barCharts() {
+ var m2R2Data = [
+ {
+ value: 335,
+ legendname: "22%",
+ name: "国网大丰市供电公司",
+ itemStyle: { color: "#8d7fec" },
+ },
+ {
+ value: 310,
+ legendname: "22%",
+ name: "盐城运维检修部(检修分公司)",
+ itemStyle: { color: "#5085f2" },
+ },
+ {
+ value: 234,
+ legendname: "22%",
+ name: "国网射阳县供电公司",
+ itemStyle: { color: "#e75fc3" },
+ },
+ {
+ value: 154,
+ legendname: "22%",
+ name: "国网响水县供电公司",
+ itemStyle: { color: "#f87be2" },
+ },
+ {
+ value: 335,
+ legendname: "22%",
+ name: "设备管理部",
+ itemStyle: { color: "#f2719a" },
+ },
+ {
+ value: 335,
+ legendname: "22%",
+ name: "开发区供电服务中心",
+ itemStyle: { color: "#fca4bb" },
+ },
+ ];
+ var myChart = this.$echarts.init(document.getElementById("barCharts"));
+ var option = {
+ title: [
+ {
+ text: "总计",
+ subtext: 59.53 + "万",
+ textStyle: {
+ fontSize: 20,
+ color: "#fff",
+ },
+ subtextStyle: {
+ fontSize: 20,
+ color: "yellow",
+ },
+ textAlign: "center",
+ x: "34.5%",
+ y: "44%",
+ },
+ ],
+ tooltip: {
+ trigger: "item",
+ formatter: function (parms) {
+ var str =
+ parms.seriesName +
+ "</br>" +
+ parms.marker +
+ "" +
+ parms.data.legendname +
+ "</br>" +
+ "数量：" +
+ parms.data.value +
+ "</br>" +
+ "占比：" +
+ parms.percent +
+ "%";
+ return str;
+ },
+ },
+ legend: {
+ type: "scroll",
+ orient: "vertical",
+ left: "70%",
+ align: "left",
+ top: "middle",
+ textStyle: {
+ color: "white",
+ fontSize: 16,
+ },
+ height: 250,
+ },
+ series: [
+ {
+ type: "pie",
+ center: ["35%", "50%"],
+ radius: ["40%", "65%"],
+ clockwise: false, //饼图的扇区是否是顺时针排布
+ avoidLabelOverlap: false,
+ lable: {
+ normal: {
+ show: true,
+ textStyle: {
+ fontSize: 18,
+ },
+ },
+ emphasis: {
+ show: true,
+ },
+ },
+
+ labelLine: {
+ normal: {
+ length: 40, //第一条线
+ length: 10, //第二条线
+ lineStyle: {
+ width: 3, // 线条的宽度
+ color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+ },
+ },
+ },
+
+ itemStyle: {
+ normal: {
+ borderRadius: 10,
+ borderColor: "transparent",
+ borderWidth: 2,
+ label: {
+ show: true,
+ formatter: " {d}% ",
+ fontSize: 20,
+ color: "#fff",
+ },
+ },
+ },
+
+ data: m2R2Data,
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailen() {
+ var myChart = this.$echarts.init(document.getElementById("detailen"));
+ var option = {
+ color: [
+ "#A0CE3A",
+ "#31C5C0",
+ "#1E9BD1",
+ "#0F347B",
+ "#585247",
+ "#7F6AAD",
+ "#009D85",
+ "rgba(250,250,250,0.3)",
+ ],
+
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c} ({d}%)",
+ },
+
+ legend: {
+ orient: "vertical",
+ top: "middle",
+ right: "5%",
+ textStyle: {
+ color: "#fff",
+ fontSize: 18,
+ },
+ //格式化图例文本
+ formatter(name) {
+ // console.log(option);
+ let than = option.series[0].data; //获取series中的data
+ let total = 0;
+ let tarValue;
+ for (let i = 0, l = than.length; i < l; i++) {
+ total += than[i].value;
+ if (than[i].name == name) {
+ tarValue = than[i].value;
+ }
+ }
+ let p = (tarValue / total) * 100;
+ return p.toFixed(2) + "%";
+ },
+ icon: "roundRect",
+ data: [
+ "国网大丰市供电公司",
+ "设备管理部",
+ "国网射阳县供电公司",
+ "国网响水县供电公司",
+ "盐城运维检修部(检修分公司)",
+ "开发区供电服务中心",
+ ],
+ },
+
+ calculable: true,
+ series: [
+ {
+ type: "pie",
+ center: ["35%", "50%"],
+ radius: [30, 120],
+ roseType: "area",
+ labelLine: {
+ normal: {
+ length: 20, //第一条线
+ length: 5, //第二条线
+ lineStyle: {
+ width: 3, // 线条的宽度
+ color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+ },
+ },
+ },
+
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ fontSize: 20,
+ color: "#fff",
+ },
+ },
+ },
+ data: [
+ { value: 22, name: "国网大丰市供电公司" },
+ { value: 20, name: "设备管理部" },
+ { value: 21, name: "国网射阳县供电公司" },
+ { value: 25, name: "国网响水县供电公司" },
+ { value: 20, name: "盐城运维检修部(检修分公司)" },
+ { value: 30, name: "开发区供电服务中心" },
+ ],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ },
+ watch: {},
};
</script>
-
<style lang="less" scoped>
-.stationBuilding {
- width: 1722px;
- height: 982px;
- background: url("../assets/images/stationBuildingKuang.png") no-repeat;
- background-size: 100% 100%;
- padding: 15px 25px;
- z-index: 100;
- .stationContent {
- width: 100%;
- height: 100%;
- background: url("../assets/images/zhifu.png") no-repeat;
- background-size: 100% 100%;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- .systemText {
- position: absolute;
- display: flex;
- flex-direction: column;
+.content {
+ /deep/ .el-table__body td .cell {
+ white-space: normal !important;
+ }
+}
+
+.two {
+ /deep/ .el-table__body-wrapper {
+ height: 195px !important;
+ }
+ .enselect {
+ position: absolute;
+ right: 30px;
+ img {
+ float: right;
+ }
+ .text {
+ float: right;
+ // right: -10px;
+ margin-right: -60px;
+ font-size: 20px;
+
+ color: #fff;
}
}
}
-</style>
\ No newline at end of file
+
+// 滚动条的宽度
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 6px; // 横向滚动条
+ height: 6px; // 纵向滚动条 必写
+ // display: block !important;
+}
+
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ background-color: rgba(35, 160, 247, 1);
+ border-radius: 3px;
+}
+
+/deep/ .el-table--scrollable-x .el-table__body-wrapper {
+ overflow-x: hidden;
+}
+
+.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%;
+
+ .cell {
+ text-align: center !important;
+ justify-content: center;
+ }
+ }
+
+ /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;
+ }
+
+ /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;
+ // word-break: break-all;
+ display: flex !important;
+ justify-content: center !important;
+ }
+
+ /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 {
+ padding-right: 15px;
+ // width: 604px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailedTwo1 {
+ width: 100%;
+ height: 350px;
+ }
+ #detailedTwo2 {
+ width: 100%;
+ height: 350px;
+ }
+ }
+
+ .left1 {
+ // width: 604px;
+ // padding: 0 10px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailedTwo3 {
+ width: 100%;
+ height: 500px;
+ }
+ }
+
+ .middle {
+ // width: 1590px;
+ width: 32.7%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ .imgboxone {
+ background: url("../assets/04/总数据外框.png") no-repeat;
+ width: 100%;
+ height: 17%;
+ position: relative;
+ top: 45%;
+ left: 30%;
+ .contents {
+ // height: 90%;
+ position: absolute;
+ padding: 10px;
+ height: 100%;
+ width: 53%;
+ display: flex;
+ flex-direction: row;
+ /* 平分剩余空间 */
+ justify-content: space-around;
+ .lines {
+ width: 100%;
+ padding: 10px 0 0 1px;
+ background: url("../assets/index/总数据小框.png") no-repeat;
+ }
+
+ .total {
+ .num {
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ align-items: left;
+ color: #ffffff;
+ span {
+ font-size: 20px;
+ }
+ h5 {
+ font-size: 34px;
+ }
+ .yellow {
+ padding-top: 30px;
+ color: yellow;
+ }
+ .orange {
+ padding-top: 30px;
+ color: orange;
+ }
+ .yellows {
+ padding-top: 20px;
+ color: yellow;
+ }
+ }
+ }
+ }
+ }
+ .map {
+ background: url("../assets/indexN/地图.png") no-repeat;
+ vertical-align: middle;
+ display: table-cell;
+ text-align: center;
+ margin-left: -20%;
+ .allimg {
+ position: relative;
+ left: 20.5%;
+ top: 35%;
+ }
+ }
+ }
+
+ .right {
+ // width: 604px;
+ width: 16.8%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #barCharts {
+ // width: 100%;
+ // height: calc(100% - 52px);
+ width: 90%;
+ height: calc(100% - 100px);
+ position: absolute;
+ }
+ #detailqe {
+ width: 100%;
+ height: 350px;
+ }
+ #detailen {
+ width: 100%;
+ height: 350px;
+ }
+ .eqselect {
+ span {
+ font-size: 20px;
+ color: #f8f8f8;
+ }
+ img {
+ margin-right: 7px;
+ }
+ }
+ }
+
+ .right1 {
+ // width: 604px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailstop {
+ width: 100%;
+ height: 400px;
+ }
+ }
+}
+
+// }
+</style>
+<style lang="less" scoped>
+// .el-popper {
+// top: 50%;
+// }
+
+/deep/ .popper__arrow {
+ left: 171px !important;
+ top: 95px !important;
+}
+
+/deep/ .el-select-dropdown {
+ background-color: rgb(14, 30, 46) !important;
+ border: 1px solid rgba(45, 143, 148, 0.5) !important;
+
+ /deep/ .el-select-dropdown__item {
+ color: #fff !important;
+ }
+
+ /deep/ .el-select-dropdown__item.hover,
+ /deep/ .el-select-dropdown__item:hover {
+ background-color: rgb(18, 54, 87) !important;
+ }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+ margin-top: -146px !important;
+}
+
+/**
+表格有滚动效果但是不显示滚动条
+*/
+</style>
+<style lang="less">
+.el-table .rowColor0 {
+ background: red !important;
+ animation: fade 2000ms infinite ease-in-out;
+}
+
+@keyframes fade {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.6;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+// .el-pager li:hover{
+// color:black
+// }
+.cartitle {
+ height: 52px;
+ width: 100%;
+ // background: url("../assets/images/carTitle.png") no-repeat;
+ font-size: 24px;
+ font-weight: 600;
+ color: #ffffff;
+ line-height: 52px;
+ // text-align: left;
+ text-indent: 26px;
+}
+.titleFont {
+ color: transparent;
+ -webkit-background-clip: text;
+ background-clip: text;
+ background-image: linear-gradient(
+ to bottom,
+ rgb(255, 255, 255),
+ rgb(123, 247, 245)
+ );
+ img {
+ margin: 20px;
+ }
+}
+.content {
+ padding: 24px 31px 0 31px;
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .line {
+ width: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ table {
+ thead {
+ font-size: 22px !important;
+ height: 50px;
+ background: url("../assets/02/表格标题行.png") no-repeat;
+ }
+ tbody {
+ tr {
+ height: 50px;
+ font-size: 18px !important;
+ color: #fff;
+ background: url("../assets/02/表格其他行.png") no-repeat;
+ }
+ }
+ }
+
+ .total {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-around;
+ margin-bottom: 15%;
+
+ .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: 9%;
+ padding: 0 10px 0 0;
+ box-sizing: border-box;
+
+ & > div {
+ font-size: 18px;
+ color: #ffffff;
+ }
+
+ .number {
+ color: rgb(86, 254, 226);
+ }
+ }
+ }
+ }
+}
+.two {
+ background: url("../assets/indexN/boxLr.png") no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+}
+.one {
+ background: url("../assets/02/表格框.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%;
+ }
+ }
+}
+</style>
diff --git a/src/views/twentyKV.vue b/src/views/twentyKV.vue
index 6dd5f1f3..c1aab04d 100644
--- a/src/views/twentyKV.vue
+++ b/src/views/twentyKV.vue
@@ -1,25 +1,1585 @@
<template>
- <div class="twentyKV">
- twentyKV
+ <div class="home">
+ <div class="left" id="left">
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>园区供电所居民用户异常月电量</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailedTwo1"></div>
+ </div>
+ </div>
+ </div>
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>园区供电所居民用户月电量</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailedTwo2"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="left1" id="left">
+ <div class="one" style="height: 100%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>60天内台区掉电客户数TOP10</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailedTwo3"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="middle" id="middle">
+ <div class="map" style="height: 100%">
+ <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
+ <div class="imgboxone">
+ <div class="contents">
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inline-block">
+ <img
+ style="float: left"
+ src="../assets/index/总数据图标1.png"
+ alt=""
+ />
+ <span
+ > 台区总数</span
+ >
+ </div>
+ <h5 class="yellow">679</h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inherit">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标2.png"
+ alt=""
+ />
+ <span>近60天内发生过停电的配变数</span>
+ </div>
+
+ <h5 class="oranges">234</h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inherit">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标1.png"
+ alt=""
+ />
+ <span>近60天三相不平衡台区数</span>
+ </div>
+
+ <h5 class="yellow">0</h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inherit">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标2.png"
+ alt=""
+ />
+ <span>近一周线损异常台区数</span>
+ </div>
+
+ <h5 class="orange">0</h5>
+ </div>
+ </div>
+ </div>
+ <div class="lines">
+ <div class="total">
+ <div class="num">
+ <div style="display: inherit">
+ <img
+ style="float: left; height: 30px; width: 30px"
+ src="../assets/index/总数据图标1.png"
+ alt=""
+ />
+ <span>近60天内发生过停电的中压线路数</span>
+ </div>
+
+ <h5 class="yellows">0</h5>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right" id="right">
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>月合格率波动图</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailqe"></div>
+ </div>
+ </div>
+ </div>
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>日合格率波动图</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailen"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right1" id="right">
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>进60天配变停电时间分析</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <table>
+ <thead style="color: #fff; font-size: 30px">
+ <tr>
+ <td>序号</td>
+ <td>配变名称</td>
+ <td>所属电路</td>
+ <td>停电次数</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in pvTable" :key="index">
+ <td>{{ item.id }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ item.stationNumber }}</td>
+ <td class="titleFont">{{ item.alternatorNumber }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="two" style="height: 49%">
+ <div class="cartitle">
+ <div class="titleFont">
+ <img src="./../assets/indexN/标题箭头.png" alt="" />
+ <span>近60天频繁停电配变</span>
+ <img src="./../assets/indexN/标题箭头1.png" alt="" />
+ </div>
+ </div>
+ <div class="content">
+ <div class="line">
+ <div id="detailstop"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <audio
+ controls="controls"
+ hidden
+ src="../assets/videos/police.wav"
+ ref="audio"
+ ></audio>
</div>
</template>
<script>
+//引入echarts
+import * as echarts from "echarts";
+// 工单统计弹窗组件
+import workOrder from "../component/workOrder.vue";
+import ringMainUnit from "./HomePop/ringMainUnit.vue";
+import routeDetail from "../component/routeDetail.vue";
+
+// 线路详情
+import lineDetail from "../component/lineDetail.vue";
export default {
- name:"twentyKV",
- data() {
- return {
+ name: "twentyKV",
+ components: {
+ ringMainUnit, //环网柜弹窗
+ workOrder, //工单统计弹窗
+ routeDetail, //线路故障跳闸明细
+ lineDetail, //线路详情弹窗
+ },
+ data() {
+ return {
+ pageShow: true,
+ totals: 5,
+ pageSize: 10,
+ page: 1,
+ threeImg: require("../assets/images/pieBorder.png"),
+ enlargeShow: true,
+ 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,
+ // 工单
+ orderItem: null,
+ orderShow: "",
+ // 线路故障明细
+ routeItem: null,
+ routeShow: "",
+ // 配电线路
+ lineItem: null,
+ lineShow: "",
+ timer: null, //定时器
+ emergencyList: [], //告警数据
+ rowTime: "",
+ pvTable: [
+ {
+ id: 1,
+ name: "10#变压器",
+ stationNumber: "10kv中北线151",
+ alternatorNumber: "1",
+ },
+ {
+ id: 2,
+ name: "10#变压器",
+ stationNumber: "10kv中北线151",
+ alternatorNumber: "1",
+ },
+ {
+ id: 3,
+ name: "10#变压器",
+ stationNumber: "10kv中北线151",
+ alternatorNumber: "1",
+ },
+ {
+ id: 4,
+ name: "10#变压器",
+ stationNumber: "10kv中北线151",
+ alternatorNumber: "2",
+ },
+ {
+ id: 5,
+ name: "10#变压器",
+ stationNumber: "10kv中北线151",
+ alternatorNumber: "2",
+ },
+ ],
+ };
+ },
+ created() {},
+ mounted() {
+ this.detailedTwo11();
+ this.detailedTwo22();
+ this.detailedTwo33();
+ this.detailqe1();
+ this.detailen1();
+ this.detailstop();
+ },
+ methods: {
+ detailedTwo11() {
+ var fontColor = "#fff";
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["月用电变化率", "社会整体月变化率"],
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: fontColor,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ },
+ },
+ data: [
+ "高进军1",
+ "高进军2",
+ "高进军3",
+ "高进军4",
+ "高进军5",
+ "高进军6",
+ "高进军7",
+ ],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ series: [
+ {
+ name: "月用电变化率",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ {
+ name: "社会整体月变化率",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ symbol: "none",
+ data: [220, 182, 191, 234, 290, 330, 310],
+ itemStyle: {
+ normal: {
+ color: "rgba(0,212,199,1)",
+ lineStyle: {
+ color: "rgba(0,212,199,1)",
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailedTwo22() {
+ var fontColor = "#30eee9";
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["本月用电总量"],
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff",
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ },
+ },
+ data: [
+ "高进军1",
+ "高进军2",
+ "高进军3",
+ "高进军4",
+ "高进军5",
+ "高进军6",
+ "高进军7",
+ ],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ series: [
+ {
+ name: "本月用电总量",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailedTwo33() {
+ // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
+ var honorData = [
+ {
+ name: "2019末",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020上半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2020下半年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ {
+ name: "2021年",
+ data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
+ },
+ ];
+ var honorXAxisData = [
+ "电机有限公司（合并）",
+ "电机有限公司（本部）",
+ "电气有限公司",
+ "西安电气有限公司",
+ "先锋电气有限公司",
+ "南非电机有限公司",
+ ];
+ // // 设置灰色背景色的长度
+ var isMax = 2000;
+ var bjData1 = [
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ isMax,
+ ];
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
- }
-}
-}
+ var option = {
+ color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ },
+ backgroundColor: "#031f2d",
+
+ legend: {
+ right: 5,
+ top: "5%",
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 15,
+ textStyle: {
+ color: "#ACCFFF",
+ fontSize: 16,
+ },
+ },
+ grid: {
+ left: "5%",
+ right: "5%",
+ bottom: "5%",
+ top: "10%",
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: "value",
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ formatter: function (value) {
+ return value + "(万元)";
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6B9DD7",
+ fontSize: 16, // 文字大小
+ fontWeight: 400,
+ interval: 0,
+ },
+ offset: 20,
+ data: honorXAxisData,
+ },
+ ],
+ series: [
+ {
+ name: "2019末",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
+ },
+ data: honorData[0].data,
+ },
+ {
+ name: "2020上半年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "完成" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
+ },
+ data: honorData[1].data,
+ },
+ {
+ name: "2020下半年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ console.log(params);
+ // return params.seriesName + params.value ;
+ return "预算" + params.value;
+ },
+ textStyle: {
+ color: "#fff",
+ fontSize: 12,
+ },
+ },
+ },
+ data: honorData[2].data,
+ },
+ {
+ name: "2021年",
+ type: "bar",
+ stack: "zongliang",
+ barWidth: "35%",
+ zlevel: 10,
+ label: {
+ normal: {
+ show: true,
+ position: "inside",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ },
+ },
+ data: honorData[3].data,
+ },
+ ],
+ };
+
+ // var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
+ // var option = {
+ // grid: {
+ // left: "3%",
+ // right: "4%",
+ // bottom: "3%",
+ // containLabel: true,
+ // },
+ // xAxis: {
+ // type: "value",
+ // show: false,
+ // },
+ // yAxis: {
+ // type: "category",
+ // axisLine: {
+ // lineStyle: {
+ // color: "#206489",
+ // },
+ // },
+ // axisLabel: {
+ // color: "#fff",
+ // fontSize: "18",
+ // },
+ // axisLine: {
+ // show: false,
+ // },
+ // axisTick: {
+ // show: false,
+ // alignWithLabel: true,
+ // },
+ // splitArea: { show: false },
+ // data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
+ // },
+ // series: [
+ // {
+ // name: "Direct",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [320, 302, 310, 299, 288],
+ // },
+ // {
+ // name: "Mail Ad",
+ // type: "bar",
+ // stack: "total",
+ // barWidth: 10,
+
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: "series",
+ // },
+ // data: [99, 88, 100, 101, 97],
+ // },
+ // ],
+ // };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailqe1() {
+ var fontColor = "#fff";
+ var myChart = this.$echarts.init(document.getElementById("detailqe"));
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["电压合格率"],
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff",
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ },
+ },
+ data: [
+ "202111",
+ "202201",
+ "202203",
+ "202205",
+ "202207",
+ "202209",
+ "202211",
+ ],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ series: [
+ {
+ name: "电压合格率",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailen1() {
+ var fontColor = "#30eee9";
+ var myChart = this.$echarts.init(document.getElementById("detailen"));
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["电压合格率"],
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff",
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ },
+ },
+ data: ["05-05", "05-06", "05-07", "05-08"],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ series: [
+ {
+ name: "电压合格率",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134],
+ itemStyle: {
+ normal: {
+ color: "rgba(0,212,199,1)",
+ lineStyle: {
+ color: "rgba(0,212,199,1)",
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ detailstop() {
+ var myChart = this.$echarts.init(document.getElementById("detailstop"));
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ },
+
+ data: ["配变名称"],
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: [
+ "钱南1配变",
+ "钱南2配变",
+ "钱南3配变",
+ "钱南4配变",
+ "钱南5配变",
+ ],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#ffffff",
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "",
+ axisLabel: {
+ textStyle: {
+ color: "#ffffff",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "配变名称",
+ type: "bar",
+ barWidth: 40, // 柱子宽度核心代码
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(86,254,226,.2) " },
+ { offset: 0.5, color: "rgb(86,254,226,.6)" },
+ { offset: 0, color: "rgb(86,254,226)" },
+ ]),
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ data: [320, 332, 301, 334, 390],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
+ },
+ watch: {},
+};
</script>
-
<style lang="less" scoped>
-.twentyKV{
+.content {
+ /deep/ .el-table__body td .cell {
+ white-space: normal !important;
+ }
+}
+
+.two {
+ /deep/ .el-table__body-wrapper {
+ height: 195px !important;
+ }
+ .enselect {
+ position: absolute;
+ right: 30px;
+ img {
+ float: right;
+ }
+ .text {
+ float: right;
+ // right: -10px;
+ margin-right: -60px;
+ font-size: 20px;
+
+ color: #fff;
+ }
+ }
+}
+
+// 滚动条的宽度
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 6px; // 横向滚动条
+ height: 6px; // 纵向滚动条 必写
+ // display: block !important;
+}
+
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ background-color: rgba(35, 160, 247, 1);
+ border-radius: 3px;
+}
+
+/deep/ .el-table--scrollable-x .el-table__body-wrapper {
+ overflow-x: hidden;
+}
+
+.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%;
+
+ .cell {
+ text-align: center !important;
+ justify-content: center;
+ }
+ }
+
+ /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;
+ }
+
+ /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;
+ // word-break: break-all;
+ display: flex !important;
+ justify-content: center !important;
+ }
+
+ /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 25px;
+ padding: 15px 28px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ box-sizing: border-box;
+
+ .left {
+ padding-right: 15px;
+ // width: 604px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailedTwo1 {
+ width: 100%;
+ height: 350px;
+ }
+ #detailedTwo2 {
+ width: 100%;
+ height: 350px;
+ }
+ }
+
+ .left1 {
+ // width: 604px;
+ // padding: 0 10px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailedTwo3 {
+ width: 100%;
+ height: 500px;
+ }
+ }
+
+ .middle {
+ // width: 1590px;
+ width: 32.7%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ .imgboxone {
+ background: url("../assets/indexN/中间总数据外框.png") no-repeat;
+ width: 100%;
+ height: 17%;
+ position: relative;
+ top: 45%;
+ left: 25%;
+ .contents {
+ // height: 90%;
+ position: absolute;
+ padding: 10px;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ /* 平分剩余空间 */
+ justify-content: space-around;
+ .lines {
+ width: 100%;
+ margin: 0 1px;
+ background: url("../assets/index/总数据小框.png") no-repeat;
+ }
+
+ .total {
+ .num {
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ align-items: left;
+ color: #ffffff;
+ h5 {
+ font-size: 36px;
+ }
+ .yellow {
+ padding-top: 30px;
+ color: yellow;
+ }
+ .orange {
+ padding-top: 30px;
+ color: orange;
+ }
+ .yellows {
+ padding-top: 20px;
+ color: yellow;
+ }
+ .oranges {
+ padding-top: 20px;
+ color: orange;
+ }
+ span {
+ float: left;
+ font-size: 16px;
+ vertical-align: bottom;
+ }
+ }
+ }
+ }
+ }
+ .map {
+ background: url("../assets/indexN/地图.png") no-repeat;
+ vertical-align: middle;
+ display: table-cell;
+ text-align: center;
+ margin-left: -20%;
+ .allimg {
+ position: relative;
+ left: 20.5%;
+ top: 35%;
+ }
+ }
+ }
+
+ .right {
+ // width: 604px;
+ width: 16.8%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailqe {
+ width: 100%;
+ height: 350px;
+ }
+ #detailen {
+ width: 100%;
+ height: 350px;
+ }
+ .eqselect {
+ span {
+ font-size: 20px;
+ color: #f8f8f8;
+ }
+ img {
+ margin-right: 7px;
+ }
+ }
+ }
+
+ .right1 {
+ // width: 604px;
+ width: 17.18%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ #detailstop {
+ width: 100%;
+ height: 400px;
+ }
+ }
}
-</style>
\ No newline at end of file
+// }
+</style>
+<style lang="less" scoped>
+// .el-popper {
+// top: 50%;
+// }
+
+/deep/ .popper__arrow {
+ left: 171px !important;
+ top: 95px !important;
+}
+
+/deep/ .el-select-dropdown {
+ background-color: rgb(14, 30, 46) !important;
+ border: 1px solid rgba(45, 143, 148, 0.5) !important;
+
+ /deep/ .el-select-dropdown__item {
+ color: #fff !important;
+ }
+
+ /deep/ .el-select-dropdown__item.hover,
+ /deep/ .el-select-dropdown__item:hover {
+ background-color: rgb(18, 54, 87) !important;
+ }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+ margin-top: -146px !important;
+}
+
+/**
+表格有滚动效果但是不显示滚动条
+*/
+</style>
+<style lang="less">
+.el-table .rowColor0 {
+ background: red !important;
+ animation: fade 2000ms infinite ease-in-out;
+}
+
+@keyframes fade {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.6;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+// .el-pager li:hover{
+// color:black
+// }
+.cartitle {
+ height: 52px;
+ width: 100%;
+ // background: url("../assets/images/carTitle.png") no-repeat;
+ font-size: 24px;
+ font-weight: 600;
+ color: #ffffff;
+ line-height: 52px;
+ // text-align: left;
+ text-indent: 26px;
+}
+.titleFont {
+ color: transparent;
+ -webkit-background-clip: text;
+ background-clip: text;
+ background-image: linear-gradient(
+ to bottom,
+ rgb(255, 255, 255),
+ rgb(123, 247, 245)
+ );
+ img {
+ margin: 20px;
+ }
+}
+.content {
+ padding: 24px 31px 0 31px;
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .line {
+ width: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ table {
+ thead {
+ font-size: 22px !important;
+ height: 50px;
+ background: url("../assets/02/表格标题行.png") no-repeat;
+ }
+ tbody {
+ tr {
+ height: 50px;
+ font-size: 18px !important;
+ color: #fff;
+ background: url("../assets/02/表格其他行.png") no-repeat;
+ }
+ }
+ }
+
+ .total {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-around;
+ margin-bottom: 15%;
+
+ .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: 9%;
+ padding: 0 10px 0 0;
+ box-sizing: border-box;
+
+ & > div {
+ font-size: 18px;
+ color: #ffffff;
+ }
+
+ .number {
+ color: rgb(86, 254, 226);
+ }
+ }
+ }
+ }
+}
+.two {
+ background: url("../assets/indexN/boxLr.png") no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+}
+.one {
+ background: url("../assets/02/表格框.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%;
+ }
+ }
+}
+</style>