Web/big-screen
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

提交代码

Browse Source
This commit is contained in:
guanj
2025-12-23 11:15:33 +08:00
commit 4d68725c02
110 changed files with 202156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

776
src/views/center/components/MonitoringPointScale.vue Normal file
View File

@@ -0,0 +1,776 @@
<template>
<div class="MonitoringPointScale">
<div class="boxT" @mouseleave="handleMouseLeave">
<img class="imgicon" src="../images/GM.png" alt="" srcset="" />
<span>监测点规模</span>
<div class="divSpan">
<span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
∣
<span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
</div>
</div>
<div class="boxB" ref="electr0_7" v-show="isshow">
<div id="electr0_7" style="width: 100%; height: 100%" />
<div class="boxnum" id="boxnum">
<div class="zong">
<div class="zong_title" id="zong_title">总数</div>
<div class="zong_num" id="zong_num">{{ total }}</div>
</div>
<div class="add">
<div class="add_title" id="add_title">本月新增</div>
<div class="add_num" id="add_num">{{ add }}</div>
</div>
</div>
</div>
<div class="boxB" ref="electr0_8" v-show="!isshow">
<div id="electr0_8" style="width: 100%; height: 100%" />
</div>
</div>
</template>
<script>
import {
getMonitoringPointScale,
getLoadTypeData,
} from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
isshow: true,
flag: 0,
Num: 0,
zoom: "", //图表焦点校验
total: "", //图表焦点校验
add: "", //图表焦点校验
formData: {
deptIndex: "",
searchBeginTime: this.getCurrentMonthFirst(),
searchEndTime: this.getNowFormatDate(),
},
piedata: [
{ value: 1048, name: "安徽省" },
{ value: 735, name: "江苏省" },
{ value: 580, name: "浙江省" },
{ value: 484, name: "云南省" },
{ value: 300, name: "海南省" },
{ value: 300, name: "福建省" },
{ value: 300, name: "广东省" },
],
timeA: null,
timeB: null,
calm: false,
electr7List: [],
electr8List: [],
myChart2: null,
};
},
created() {
this.formData.deptIndex = JSON.parse(
window.localStorage.getItem("adminInfo")
).deptId;
},
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
getMonitoringPointScale(this.formData).then((res) => {
this.total = res.data.monitorTotalCount;
this.add = res.data.monitorAddCount;
this.electr7List = res;
this.electr7();
});
getLoadTypeData(this.formData).then((res) => {
this.electr8List = res;
});
this.info();
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
for (let i = 1; i < 10000; i++) {
clearTimeout(i);
}
},
methods: {
info() {
this.timeA = setTimeout(() => {
this.tab2();
}, 15000);
this.timeB = setTimeout(() => {
this.tab1();
this.info();
}, 60000);
},
handleMouseLeave() {
if (this.calm) {
this.calm = false;
this.$emit("Remove");
// this.info();
}
},
//获取当月第一天日期
getCurrentMonthFirst() {
var date = new Date();
var year = date.getFullYear();
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//获取当天日期
getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
fontSize(res) {
let clientWidth = document.documentElement.clientWidth;
if (!clientWidth) return;
let fontSize = clientWidth / 1920;
return res * fontSize;
},
tab1(e, v) {
this.flag = 0;
this.electr7();
this.isshow = true;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "MonitoringPointScale", val: 1 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
tab2(e, v) {
this.flag = 1;
this.electr8();
this.isshow = false;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "MonitoringPointScale", val: 2 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
// 监测点规模片区
async electr7() {
let EchartsData = [];
let arrData = this.electr7List.data.param;
arrData.forEach((item) => {
item.name = item.name;
item.value = item.count;
});
EchartsData = arrData;
let echarts = require("echarts");
let domID1 = document.getElementById("electr0_7");
let boxnum = document.getElementById("boxnum");
let zong_title = document.getElementById("zong_title");
let zong_num = document.getElementById("zong_num");
let add_title = document.getElementById("add_title");
let add_num = document.getElementById("add_num");
setTimeout(() => {
(domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
zong_title.style.fontSize = ".75rem";
zong_num.style.fontSize = "1.5rem";
add_title.style.fontSize = ".75rem";
add_num.style.fontSize = "1.5rem";
}, 0);
let color = [
"#d909e0",
"#ffe400",
"#ff9a09",
"#ef1e5f",
"#23cbe5",
"#ec561b",
"#ffa500",
"#41E398",
"#12AFA6",
"#FF0000",
"#CC99FF",
"#0099CC",
"#FF6699",
"#00FF7F",
"#D2691E",
"#FF6347",
"#A52A2A",
"#808080",
"#DEB887",
"#FFD700",
"#556B2F",
"#7FFF00",
"#808000",
"#40E0D0",
"#00FFFF",
"#8A2BE2",
"#EE82EE",
"#000080",
"#DC143C",
"#008080",
"#8FBC8F",
"#F5DEB3",
"#FF7F50",
"#FFF5EE",
];
let myChart2 = echarts.init(domID1);
let option = {
title: {
text: "片区分布",
left: "center",
top: "center",
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
},
legend: {
type: "scroll",
orient: "vertical",
left: 0,
top: 5,
bottom: 10,
// itemHeight: 8,
pageIconColor: "white", //激活的分页按钮颜色
pageTextStyle: {
color: "#35ffff",
},
pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
textStyle: {
color: "#fff",
fontSize: 12,
},
//设置自定义legend 的重点
// formatter: function(name) {
// // 获取legend显示内容
// let data = EchartsData;//这个是展示的数据
// let total = 0;
// let tarValue = 0;
// let value = 0;
// for (let i = 0, l = data.length; i < l; i++) {
// total += data[i].value;
// if (data[i].name == name) {
// tarValue = data[i].value;
// value = data[i].value;
// }
// }
// let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
// return [
// "{a|" +
// echarts.format.truncateText(
// name,
// 80,
// "14px Microsoft Yahei",
// "…"//如果宽度超过80会出现...
// ) +
// "}",
// "{b|" + p + "%}",
// "{x|" + value + "}" //a、b、x、跟下面的rich对应
// ].join(" ");
// },
},
series: [
{
type: "pie",
radius: ["55%", "65%"],
// center: ['60%', '60%'],
data: EchartsData.map((item, index) => {
item.label = {
color: color[index],
};
return item;
}),
itemStyle: {
color: (params) => {
var index = params.dataIndex;
var color = [
"#d909e0",
"#ffe400",
"#ff9a09",
"#ef1e5f",
"#23cbe5",
"#ec561b",
"#ffa500",
"#41E398",
"#12AFA6",
"#FF0000",
"#CC99FF",
"#0099CC",
"#FF6699",
"#00FF7F",
"#D2691E",
"#FF6347",
"#A52A2A",
"#808080",
"#DEB887",
"#FFD700",
"#556B2F",
"#7FFF00",
"#808000",
"#40E0D0",
"#00FFFF",
"#8A2BE2",
"#EE82EE",
"#000080",
"#DC143C",
"#008080",
"#8FBC8F",
"#F5DEB3",
"#FF7F50",
"#FFF5EE",
];
return color[index];
},
},
},
],
};
option && myChart2.setOption(option, true);
//window.echartsArr.push(myChart2);
setTimeout(function () {
myChart2.resize();
}, 0);
},
async electr8() {
let echarts = require("echarts");
let _this = this;
let domID1 = document.getElementById("electr0_8");
setTimeout(() => {
(domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
}, 0);
if (_this.myChart2 != null) {
_this.myChart2.dispose();
clearInterval(_this.time2);
}
_this.myChart2 = echarts.init(domID1);
// const data = await getLoadTypeData(this.formData);
let cityList = [];
let cityData = [];
this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
if (item.count != 0) {
cityList.push(item.name);
cityData.push(item.count);
}
});
// 数据处理
var charts = {
// 按顺序排列从大到小
cityList: cityList,
cityData: cityData,
};
var top10CityList = charts.cityList;
var top10CityData = charts.cityData;
var color = [
"rgba(3,255,238",
"rgba(218,3,255",
"rgba(255,248,3",
"rgba(120,255,3",
"rgba(255,218,3",
"rgba(3,204,255",
"rgba(3,72,255",
"rgba(255,101,3",
"rgba(3,255,155",
"rgba(218,255,3",
"rgba(135,3,255",
"rgba(107,146,168",
"rgba(7,230,163",
"rgba(52,162,191",
"rgba(147,112,219",
"rgba(100,149,237",
"rgba(72,209,204",
"rgba(152,251,152",
"rgba(255,99,71",
"rgba(188,143,143",
"rgba(105,105,105",
"rgba(210,105,30",
"rgba(255,165,0",
"rgba(189,183,107",
"rgba(124,252,0",
"rgba(0,255,127",
"rgba(0,139,139",
"rgba(0,191,255",
"rgba(225,255,255",
"rgba(112,128,144",
"rgba(176,196,222",
"rgba(123,104,238",
"rgba(153,50,204",
"rgba(255,0,255",
"rgba(255,105,180",
];
// 图表option整理
let lineY = [];
var yData = [];
for (var i = 0; i < charts.cityList.length; i++) {
yData.push(top10CityData[i] + "个");
var EchartsData = {
name: charts.cityList[i],
color: color[i] + ")",
value: top10CityData[i],
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: color[i] + ", 0.3)",
},
{
offset: 1,
color: color[i] + ", 1)",
},
],
false
),
barBorderRadius: 10,
},
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
};
lineY.push(EchartsData);
}
let maxValue = 0;
for (const item of lineY) {
if (item.value > maxValue) {
maxValue = item.value;
}
}
var option = {
// backgroundColor: '#000',
title: {
show: false,
},
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
// formatter: function (params) {
// for (var i = 0; i < params.length; i++) {
// if (params[i].name !== "") {
// str += params[i].name +":" +
// params[i].value +
// "<br/>";
// }
// }
// return str;
// },
},
grid: {
borderWidth: 0,
top: "10px",
left: "30px",
right: "35px",
bottom: "15px",
},
color: color,
dataZoom: [
{
type: "slider",
show: true,
// 设置组件控制的y轴
yAxisIndex: [0, 1],
left: 5,
// top: 60,
// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
// 也可以用 startValue设置起始值
start: 0,
end: lineY.length < 10 ? 100 : 50, //默认为100
width: 6,
// height: 450,
// 组件的背景颜色
// left: 600, //左边的距离
// right: 8,//右边的距离
borderRadius: 5,
// borderColor: "rgba(43,48,67,0.8)",
// fillerColor: '#ccc',//滑动块的颜色
// backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 控制手柄的尺寸
handleSize: 12,
// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
showDataShadow: false,
},
{
type: "inside",
yAxisIndex: [0, 1],
start: 1,
// end: 36,
// 不按任何功能键，鼠标滚轮能触发缩放
// zoomOnMouseWheel: false,
// 不按任何功能键，鼠标移动能触发数据窗口平移
// moveOnMouseWheel: true,
},
],
yAxis: [
{
type: "category",
inverse: true,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 3,
},
},
axisLabel: {
show: false,
inside: false,
},
data: top10CityList,
},
{
name: "单位:个",
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
inside: false,
textStyle: {
color: "#03E9FF",
fontSize: "10",
fontFamily: "PingFangSC-Regular",
},
// formatter: function (val) {
// return `${val}个`;
// },
},
data: yData,
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
],
xAxis: {
type: "value",
axisTick: {
show: false,
},
max: maxValue + 30,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
fontSize: "10",
},
},
},
series: [
{
name: "",
type: "bar",
// zlevel: 2,
barMaxWidth: 20,
barGap: `10%`,
data: lineY,
animationDuration: 1500,
label: {
normal: {
color: "#03FDFF",
show: true,
position: "right",
textStyle: {
fontSize: "0.9rem",
},
formatter: function (a, b) {
return a.name;
},
},
},
},
],
animationEasing: "cubicOut",
};
option && _this.myChart2.setOption(option, true);
//window.echartsArr.push(myChart2);
setTimeout(function () {
_this.myChart2.resize();
}, 0);
if (lineY.length >= 10) {
_this.time2 = setInterval(() => {
if (option.dataZoom[0].end == 50) {
option.dataZoom[0].end = 100;
option.dataZoom[0].start = 50;
} else if (option.dataZoom[0].end == 100) {
option.dataZoom[0].end = 50;
option.dataZoom[0].start = 0;
}
// else if (option.dataZoom[0].end == 75) {
// option.dataZoom[0].end = 100;
// option.dataZoom[0].start = 75;
// } else if (option.dataZoom[0].end == 100) {
// option.dataZoom[0].end = 25;
// option.dataZoom[0].start = 0;
// }
_this.myChart2.setOption(option);
//window.echartsArr.push(_this.myChart2);
}, 8000);
}
},
},
computed: {},
watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../center/css/home.less");
// @import url("../center/css/change.less");
@font-face {
font-family: sszh;
src: url("../../center/fonts/sszh.ttf");
/* IE9+ */
}
.MonitoringPointScale {
width: 100%;
height: 100%;
.boxT {
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
// background-color: #29707f;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.imgicon {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.divSpan {
padding-left: 5%;
font-size: 0.85rem;
color: #fff;
cursor: pointer;
}
}
.boxB {
position: relative;
height: 92%;
// background-color: rgb(41, 16, 16);
}
.boxnum {
position: absolute;
top: 0;
right: 0;
z-index: 100000000;
}
.zong_title {
text-align: center;
}
.zong_num {
font-family: electricFont;
color: rgb(0, 238, 255);
text-align: center;
}
.add_title {
color: rgb(0, 238, 255);
text-align: center;
}
.add_num {
font-family: electricFont;
color: #00ff7f;
text-align: center;
}
.zong {
margin-top: 5px;
border: 1px solid yellow;
border-radius: 8px;
}
.add {
margin-top: 5px;
border: 1px solid rgb(0, 238, 255);
border-radius: 8px;
}
}
</style>