分布式光伏
This commit is contained in:
parent
33e57c6f11
commit
886b0e037a
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue