1723 lines
44 KiB
Vue
1723 lines
44 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="left" 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="detailedTwo1"></div>
|
|
<div style="color: #fff; font-size: 30px">乡级行政区</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="detailedTwo2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle" id="middle">
|
|
<div class="map" style="height: 100%">
|
|
<canvas
|
|
id="myCanvas"
|
|
width="1000"
|
|
height="700"
|
|
style="position: absolute"
|
|
></canvas>
|
|
<img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
|
|
<div class="imgboxtwo">
|
|
<div class="cartitle">
|
|
<div class="titleFont" style="color: #fff; font-size: 26px">
|
|
大丰区
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="line">
|
|
电量 (kwh)
|
|
<span style="color: yellow; display: contents">255.1万</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
7.23
|
|
<span style="color: #fff">万kw/h</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">
|
|
1250<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">
|
|
3673
|
|
<span style="color: #fff">吨/日</span>
|
|
</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="contentUl">
|
|
<div class="top">
|
|
<img src="../assets/05/数据分析图标.png" />
|
|
<div class="texts" style="color: yellow">
|
|
99
|
|
<span style="font-size: 15px; color: #fff">个</span>
|
|
</div>
|
|
<h4>乡村行政区</h4>
|
|
</div>
|
|
<div class="top">
|
|
<img src="../assets/05/数据分析图标.png" />
|
|
<div class="texts" style="color: yellow">
|
|
0
|
|
<span style="font-size: 15px; color: #fff">个</span>
|
|
</div>
|
|
<h4>行政村</h4>
|
|
</div>
|
|
<div class="top">
|
|
<img src="../assets/05/数据分析图标.png" />
|
|
<div class="texts" style="color: yellow">
|
|
0
|
|
<span style="font-size: 15px; color: #fff">个</span>
|
|
</div>
|
|
<h4>自然村</h4>
|
|
</div>
|
|
<div class="bottom"></div>
|
|
<div class="bottom">
|
|
<img class="img1" src="../assets/05/数据分析图标.png" />
|
|
<div class="texts">
|
|
0
|
|
<span style="font-size: 15px; color: #fff">个</span>
|
|
</div>
|
|
<h4 style="float: left">已治理自然村</h4>
|
|
</div>
|
|
<div class="bottom">
|
|
<img class="img2" src="../assets/05/数据分析图标.png" />
|
|
<div class="text">
|
|
593
|
|
<span style="font-size: 15px; color: #fff">个</span>
|
|
</div>
|
|
<h4>独立电表数</h4>
|
|
</div>
|
|
<div class="bottom"></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="detailedTwo3"></div>
|
|
<div style="font-size: 30px; color: #fff">月份</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>
|
|
<td>自然村个数</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in pvTable" :key="index">
|
|
<td>{{ item.Counties }}</td>
|
|
<td>{{ item.Township }}</td>
|
|
<td>{{ item.administrative }}</td>
|
|
<td class="titleFont">{{ item.Natural }}</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: "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: [
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "义仓村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "临海村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "义仓村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "八一镇",
|
|
administrative: "义仓村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "临海村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "义仓村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "义仓村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "八一村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "兰芝村",
|
|
Natural: "25",
|
|
},
|
|
{
|
|
Counties: "东台市",
|
|
Township: "三仓镇",
|
|
administrative: "兰芝村",
|
|
Natural: "25",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.xianDuan();
|
|
this.detailedTwo11();
|
|
this.detailedTwo22();
|
|
this.detailedTwo33();
|
|
},
|
|
methods: {
|
|
//地图画线
|
|
xianDuan() {
|
|
var canvas = document.getElementById("myCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.moveTo(600, 500); // moveTo(x,y) 定义线条开始坐标
|
|
ctx.lineTo(770, 140); // lineTo(x,y) 定义线条结束坐标
|
|
ctx.strokeStyle = "orange";
|
|
ctx.lineWidth = 5;
|
|
ctx.font = "26px Arial";
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillText("11.87万", 320, 140);
|
|
ctx.fillText("14.76万", 400, 200);
|
|
ctx.fillText("2.113万", 270, 360);
|
|
ctx.fillText("39.12万", 480, 285);
|
|
ctx.fillText("7.399万", 320, 440);
|
|
ctx.fillText("7.399万", 480, 410);
|
|
ctx.fillText("255.1万", 640, 465);
|
|
ctx.fillText("298.4万", 750, 660);
|
|
ctx.stroke();
|
|
},
|
|
detailedTwo11() {
|
|
var fontColor = "#fff";
|
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: "#fff",
|
|
},
|
|
data: ["电量KWh"],
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: [
|
|
"安丰镇",
|
|
"草堰镇",
|
|
"龙岗镇",
|
|
"新丰镇",
|
|
"伍佑街道",
|
|
"步凤镇",
|
|
],
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: "18",
|
|
interval: 0, //使x轴文字显示全
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
// color: 'rgba(66, 192, 255, .3)',
|
|
color: "rgba(102,102,102,0.6)",
|
|
width: 1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "电量KWh",
|
|
type: "bar",
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
},
|
|
},
|
|
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: [4000, 7000, 6000, 8000, 7000, 9000],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
detailedTwo22() {
|
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
|
|
var option = {
|
|
color: [
|
|
"#EAEA26",
|
|
"#906BF9",
|
|
"#FE5656",
|
|
"#01E17E",
|
|
"#3DD1F9",
|
|
"#FFAD05",
|
|
],
|
|
grid: {
|
|
left: -100,
|
|
top: 50,
|
|
bottom: 10,
|
|
right: 10,
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b} : {c} ({d}%)",
|
|
},
|
|
legend: {
|
|
left: 120,
|
|
bottom: 20,
|
|
width: 400, //尺寸需要自己调节
|
|
height: 20,
|
|
formatter: ["{a|{name}}"].join("\n"),
|
|
textStyle: {},
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
width: 95,
|
|
fontSize: 18,
|
|
color: "#fff",
|
|
lineHeight: 12,
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
"125018,2万",
|
|
"125016,3万",
|
|
"12501,3万",
|
|
"10001,4万",
|
|
"11399,5万",
|
|
"12523,6万",
|
|
"125017,7万",
|
|
"125014,8万",
|
|
"125011,9万",
|
|
],
|
|
},
|
|
polar: {},
|
|
angleAxis: {
|
|
interval: 1,
|
|
type: "category",
|
|
data: [],
|
|
z: 10,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0B4A6B",
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
show: true,
|
|
color: "#0B4A6B",
|
|
margin: 8,
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
radiusAxis: {
|
|
min: 40,
|
|
max: 120,
|
|
interval: 20,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0B3E5E",
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value} %",
|
|
show: false,
|
|
padding: [0, 0, 20, 0],
|
|
color: "#0B3E5E",
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#0B3E5E",
|
|
width: 2,
|
|
type: "solid",
|
|
},
|
|
},
|
|
},
|
|
calculable: true,
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["5%", "10%"],
|
|
hoverAnimation: false,
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: 5,
|
|
length2: 10,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
name: "",
|
|
value: 0,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#0B4A6B",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["10%", "15%"],
|
|
hoverAnimation: false,
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: 5,
|
|
length2: 10,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
name: "",
|
|
data: [
|
|
{
|
|
name: "",
|
|
value: 0,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#0B4A6B",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
stack: "a",
|
|
type: "pie",
|
|
radius: ["20%", "60%"],
|
|
roseType: "area",
|
|
zlevel: 10,
|
|
// label: {
|
|
// normal: {
|
|
// show: true,
|
|
// formatter: "{name}",
|
|
// textStyle: {
|
|
// fontSize: 20,
|
|
// color: "#fff",
|
|
// },
|
|
// position: "outside",
|
|
// },
|
|
// emphasis: {
|
|
// show: true,
|
|
// },
|
|
// },
|
|
// labelLine: {
|
|
// normal: {
|
|
// show: true,
|
|
// length: 10,
|
|
// length2: 30,
|
|
// },
|
|
// emphasis: {
|
|
// show: false,
|
|
// },
|
|
// },
|
|
|
|
labelLine: {
|
|
normal: {
|
|
length: 30, //第一条线
|
|
length: 10, //第二条线
|
|
lineStyle: {
|
|
width: 3, // 线条的宽度
|
|
color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 20,
|
|
color: "#fff",
|
|
formatter: "{b}\n\n({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
|
|
},
|
|
},
|
|
},
|
|
|
|
data: [
|
|
{
|
|
value: 10,
|
|
name: "125018,2万",
|
|
},
|
|
{
|
|
value: 5,
|
|
name: "125016,3万",
|
|
},
|
|
{
|
|
value: 15,
|
|
name: "12501,3万",
|
|
},
|
|
{
|
|
value: 25,
|
|
name: "10001,4万",
|
|
},
|
|
{
|
|
value: 20,
|
|
name: "11399,5万",
|
|
},
|
|
{
|
|
value: 35,
|
|
name: "12523,6万",
|
|
},
|
|
{
|
|
value: 35,
|
|
name: "125017,7万",
|
|
},
|
|
{
|
|
value: 35,
|
|
name: "125014,8万",
|
|
},
|
|
{
|
|
value: 35,
|
|
name: "125011,9万",
|
|
},
|
|
{
|
|
value: 60,
|
|
name: "125011,9万",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
detailedTwo33() {
|
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
|
|
var option = {
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
fontSize: 18, //字体大小
|
|
color: "#ffffff", //字体颜色
|
|
data: ["电量KWh"],
|
|
},
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "7%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#195384",
|
|
},
|
|
},
|
|
data: ["202301", "202302", "202303", "202304", "202305", "202306"],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
// color: 'rgba(66, 192, 255, .3)',
|
|
color: "rgba(102,102,102,0.6)",
|
|
width: 1,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "电量KWh",
|
|
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();
|
|
});
|
|
},
|
|
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>
|
|
.content {
|
|
/deep/ .el-table__body td .cell {
|
|
white-space: normal !important;
|
|
}
|
|
}
|
|
|
|
.two {
|
|
/deep/ .el-table__body-wrapper {
|
|
height: 195px !important;
|
|
}
|
|
}
|
|
|
|
// 滚动条的宽度
|
|
/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: calc(100vh - 350px);
|
|
}
|
|
}
|
|
|
|
.left1 {
|
|
// width: 604px;
|
|
// padding: 0 10px;
|
|
width: 17.18%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
|
|
#detailedTwo2 {
|
|
width: 100%;
|
|
height: calc(100vh - 250px);
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
// width: 1590px;
|
|
width: 32.7%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
.imgboxone {
|
|
background: url("../assets/02/地图弹窗三个数据外框.png") no-repeat;
|
|
width: 100%;
|
|
height: 25%;
|
|
position: relative;
|
|
top: 45%;
|
|
left: 40%;
|
|
.contents {
|
|
// height: 90%;
|
|
position: absolute;
|
|
padding: 10px;
|
|
height: 100%;
|
|
width: 32%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* 平分剩余空间 */
|
|
justify-content: space-around;
|
|
.lines {
|
|
width: 100%;
|
|
padding: 10px 0 0 1px;
|
|
background: url("../assets/02/弹窗里的小框子.png") no-repeat;
|
|
}
|
|
|
|
.total {
|
|
.num {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: left;
|
|
color: #ffffff;
|
|
span {
|
|
font-size: 16px;
|
|
}
|
|
h5 {
|
|
font-size: 28px;
|
|
}
|
|
.yellow {
|
|
color: yellow;
|
|
}
|
|
.orange {
|
|
color: orange;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.imgboxtwo {
|
|
background: url("../assets/07/弹窗.png") no-repeat;
|
|
background-size: 100%;
|
|
float: right;
|
|
right: 5%;
|
|
top: 5%;
|
|
width: 28vh;
|
|
height: 100%;
|
|
position: relative;
|
|
.content {
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: left;
|
|
font-size: 26px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.map {
|
|
background: url("../assets/indexN/地图.png") no-repeat;
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
text-align: center;
|
|
margin-left: -20%;
|
|
.allimg {
|
|
position: relative;
|
|
left: 30%;
|
|
top: 35%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
// width: 604px;
|
|
width: 16.8%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
#detailedTwo3 {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.contentUl {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 300px;
|
|
width: 100%;
|
|
|
|
.top {
|
|
position: relative;
|
|
flex-basis: calc(100% / 3);
|
|
height: 50%;
|
|
img {
|
|
margin-top: 30%;
|
|
}
|
|
.texts {
|
|
color: orange;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 43%;
|
|
top: 25%;
|
|
align-items: center;
|
|
font-size: 32px;
|
|
}
|
|
h4 {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
line-height: 1;
|
|
padding-top: 10%;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: relative;
|
|
flex-basis: calc(100% / 4);
|
|
height: 50%;
|
|
.img1 {
|
|
margin-top: 40%;
|
|
margin-right: 25%;
|
|
}
|
|
.img2 {
|
|
margin-top: 40%;
|
|
// margin-right: 25%;
|
|
}
|
|
.texts {
|
|
color: orange;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 30%;
|
|
top: 25%;
|
|
align-items: center;
|
|
font-size: 32px;
|
|
}
|
|
.text {
|
|
color: orange;
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 13%;
|
|
top: 25%;
|
|
align-items: center;
|
|
font-size: 32px;
|
|
}
|
|
h4 {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
line-height: 1;
|
|
padding-top: 10%;
|
|
right: 20%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#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>
|