@@ -884,6 +925,8 @@ export default {
this.detailedTwo11()
this.horizontalChart()
this.barCharts()
+ this.roseCharts()
+ this.detailen1();
// 盐都区供电公司概况
getCompanyInfo().then((res) => {
// console.log(res,'....');
@@ -1083,6 +1126,87 @@ export default {
if (data == '盐城地区分布光伏运行监测') {
this.$router.push("/stationBuilding");
}
+ },
+ detailen1() {
+ var fontColor = "#30eee9";
+ var myChart = this.$echarts.init(document.getElementById("detailen"));
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ },
+
+ data: ["关联电网事故", "关联检修单"],
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: [
+ "10kv北红线124",
+ "10kv北红线125",
+ "10kv北红线126",
+ "10kv北红线127",
+ "10kv北红线128",
+ ],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#ffffff",
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "",
+ axisLabel: {
+ textStyle: {
+ color: "#ffffff",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "关联电网事故",
+ type: "bar",
+ itemStyle: {
+ color: "#00ffff", // 柱状图颜色
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ emphasis: {
+ focus: "series",
+ },
+ data: [320, 332, 301, 334, 390],
+ },
+ {
+ name: "关联检修单",
+ type: "bar",
+ itemStyle: {
+ color: "yellow", // 柱状图颜色
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ emphasis: {
+ focus: "series",
+ },
+ data: [220, 182, 191, 234, 290],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
},
//班组
getbanzhu() {
@@ -2167,12 +2291,12 @@ export default {
// }
// },
title: {
- text: '3246',
- subtext: '重点人员(人)',
+ subtext: '59.53万',
+ text: '总计',
x: 'center',
- y: '43%',
+ y: '40%',
textStyle: {
- fontSize: 80,
+ fontSize: 24,
fontWeight: 'normal',
color: '#00FFFF',
},
@@ -2185,7 +2309,7 @@ export default {
},
series: [{
type: 'pie',
- radius: ['140', '180'],
+ radius: ['80', '120'],
center: ['50%', '50%'],
color: ['#80C269', '#00FFFF', '#0090F1', '#FFA800', '#4658F6'],
itemStyle: {
@@ -2232,7 +2356,7 @@ export default {
formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
rich: {
b: {
- fontSize: 32,
+ fontSize:14,
color: '#FFF',
align: 'left',
padding: 4
@@ -2244,7 +2368,7 @@ export default {
height: 0
},
c: {
- fontSize: 32,
+ fontSize: 14,
align: 'center',
padding: 4,
color: '#00EDED'
@@ -2260,6 +2384,207 @@ export default {
window.addEventListener("resize", () => {
myChart.resize();
});
+ },
+ roseCharts() {
+ var myChart = this.$echarts.init(document.getElementById("roseCharts"));
+ var option = {
+ color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
+ // title: {
+ // text: '网络/安全设备',
+ // left: '60',
+ // top: 0,
+ // textAlign: 'center',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: 14,
+ // fontWeight: 0
+ // }
+ // },
+ grid: {
+ left: -100,
+ top: 50,
+ bottom: 10,
+ right: 10,
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{b} : {c} ({d}%)"
+ },
+ legend: {
+ type: "scroll",
+ orient: "vartical",
+ // x: "right",
+ top: "center",
+ right: "15",
+ // bottom: "0%",
+ itemWidth: 16,
+ itemHeight: 8,
+ itemGap: 16,
+ textStyle: {
+ color: '#A3E2F4',
+ fontSize: 12,
+ fontWeight: 0
+ },
+ data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']
+ },
+ 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: 30,
+ length2: 55
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ data: [{
+ name: '',
+ value: 0,
+ itemStyle: {
+ normal: {
+ color: "#0B4A6B"
+ }
+ }
+ }]
+ }, {
+ type: 'pie',
+ radius: ["90%", "95%"],
+ hoverAnimation: false,
+ labelLine: {
+ normal: {
+ show: false,
+ length: 30,
+ length2: 55
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ name: "",
+ data: [{
+ name: '',
+ value: 0,
+ itemStyle: {
+ normal: {
+ color: "#0B4A6B"
+ }
+ }
+ }]
+ },{
+ stack: 'a',
+ type: 'pie',
+ radius: ['20%', '80%'],
+ roseType: 'area',
+ zlevel:10,
+ label: {
+ normal: {
+ show: true,
+ formatter: "{c}",
+ textStyle: {
+ fontSize: 12,
+ },
+ position: 'outside'
+ },
+ emphasis: {
+ show: true
+ }
+ },
+ labelLine: {
+ normal: {
+ show: true,
+ length: 20,
+ length2: 55
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ data: [{
+ value: 10,
+ name: 'IDS'
+ },
+ {
+ value: 5,
+ name: 'VPN'
+ },
+ {
+ value: 15,
+ name: '交换机'
+ },
+ {
+ value: 25,
+ name: '防火墙'
+ },
+ {
+ value: 20,
+ name: 'WAF'
+ },
+ {
+ value: 35,
+ name: '堡垒机'
+ }
+ ]
+ }, ]
+}
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
},
detailedThree(dataList) {
// console.log(this.threeImg,'图片');
@@ -3598,157 +3923,100 @@ export default {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
-
- .table {
- width: 100%;
- padding: 20px 14px 0 14px;
- box-sizing: border-box;
- height: calc(100% - 52px);
- }
-
- .one {
- background: url("../assets/images/ditu.png") no-repeat;
- background-size: 100% 100%;
+ .imgboxone {
+ background: url("../assets/02/地图弹窗三个数据外框.png") no-repeat;
+ background-size: 100%;
+ float: right;
+ width: 40vh;
+ height: 25vh;
position: relative;
-
- .unityBtn {
- position: absolute;
- top: 40px;
- left: 30%;
- width: 40%;
+ top: 5vh;
+ right: 1vh;
+ .contents {
+ padding: 10px 10px 10px 10px;
+ box-sizing: border-box;
display: flex;
+ flex-flow: row nowrap;
justify-content: space-between;
- .btn {
+ .lines {
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;
+ flex-flow: column nowrap;
+ background: url("../assets/02/弹窗里的小框子.png") no-repeat;
}
- }
- .unityEnlargeBtn {
- width: 100px;
- display: flex;
- justify-content: space-around;
- position: absolute;
- right: 40px;
- top: 40px;
+ .total {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-around;
+ margin-bottom: 15%;
- .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%;
+ .num {
+ float: left;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ align-items: center;
+ color: #ffffff;
+ }
}
}
}
-
- .two {
- #detailedOne {
- width: 100%;
- height: calc(100% - 100px) !important;
- z-index: 2;
- margin-top: -3%;
- }
- }
-
- .detailed {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
-
- &>div {
- background: url("../assets/images/detailedCard.png") no-repeat;
- background-size: 100% 100%;
-
- .cartitle {
- height: 52px;
- width: 100%;
- background: url("../assets/images/detailed.png") no-repeat;
- font-size: 21px;
- font-weight: 600;
- color: #ffffff;
- line-height: 52px;
- text-align: left;
- text-indent: 26px;
- }
- }
- }
-
- // ...
- .detailedOneList {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- height: 14%;
- align-items: center;
- color: #ffffff;
- background: url("../assets/images/tableBg.png") no-repeat;
- background-size: 100% 100%;
- width: 92%;
- z-index: 1;
+ .imgboxtwo {
+ padding: 0 0 0 20px;
+ background: url("../assets/02/地图弹窗四个内容的框.png") no-repeat;
+ background-size: 100%;
+ float: left;
+ width: 40vh;
+ height: 25vh;
position: relative;
+ top: 52vh;
+ left: 30vh;
+ display: flex;
+ .contentUl {
+ display: flex;
+ margin: 0;
+ padding: 10px;
+ width: 100%;
+ height: 100%;
+ /* flex布局 */
+ display: flex;
+ // 开启换行
+ flex-wrap: wrap;
+ // 主轴上两端对齐
+ justify-content: space-between;
+ // 副轴上两端对齐
+ align-content: space-between;
+ //li盒子大小设置
+ li {
+ h5 {
+ float: left;
+ }
+ span {
+ font-size: 30px;
+ }
+ width: 49.5%;
+ //高度调整
+ height: 49%;
+ list-style: none;
+ font-size: 24px;
+ color: #fff;
+ background: url("../assets/02/弹窗里的小框子.png") no-repeat;
+ }
+ }
}
- #detailedFour {
- width: 100%;
- height: calc(100% - 52px);
+ .map {
+ background: url("../assets/indexN/地图.png") no-repeat;
+ vertical-align: middle;
+ display: table-cell;
+ text-align: center;
+ margin-left: -20%;
}
}
+
.right {
// width: 604px;
width: 17.18%;
@@ -3756,12 +4024,12 @@ export default {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
-
+
&>div {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
-
+ position: relative;
.cartitle {
height: 52px;
width: 100%;
@@ -3823,7 +4091,7 @@ export default {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
-
+ position: relative;
.cartitle {
height: 52px;
width: 100%;
@@ -3836,7 +4104,10 @@ export default {
text-indent: 26px;
}
}
-
+ #detailen {
+ width: 100%;
+ height: 400px;
+ }
.one {
.top {
width: 100%;
@@ -3880,6 +4151,9 @@ export default {
background-image: linear-gradient(to bottom,
rgb(255, 255, 255),
rgb(123, 247, 245));
+ img {
+ margin: 20px;
+ }
}
//弹窗样式
@@ -4113,6 +4387,87 @@ export default {
}
}
}
+ .content {
+ padding: 24px 31px 0 31px;
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .line {
+ width: 262px;
+ display: flex;
+ flex-flow: column nowrap;
+
+ .total {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-around;
+ margin-bottom: 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);
+ }
+ }
+ }
+ }
+
+ }
+ #roseCharts {
+ // width: 100%;
+ // height: calc(100% - 52px);
+ width: 60%;
+ height: calc(100% - 200px);
+ position: absolute;
+ top: 28%;
+ left: 33%;
+ }
+
}
.selectChange {
![](\"@/assets/images/shiliangIcon1.png\")
\r\n 电缆沟水位 : {{ waterLevel }}米\r\n \r\n ![](\"@/assets/images/shiliangIcon2.png\")
\r\n 小电流接地故障状态 : {{ grounding }}\r\n