+
+
+
辖区管理配变详情
+
- | 序号 |
- 供电单位 |
- 用户类型 |
- 应采数 |
+ 单位名称 |
+ 供电所名称 |
+ 配变名称 |
- | {{ index+1}} |
{{ item.name }} |
{{ item.stationNumber }} |
- {{ item.alternatorNumber }} |
+ {{ item.alternatorNumber }} |
@@ -313,307 +333,193 @@ export default {
rowTime: "",
pvTable: [
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
- },
- {
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
- },
- {
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
- },
- {
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
{
- name: "南阳供电所",
- stationNumber: "06",
- alternatorNumber: "4630",
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
+ },
+ {
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
+ },
+ {
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
+ },
+ {
+ name: "建湖县供电公司",
+ stationNumber: "上岗供电所",
+ alternatorNumber: "PMS_三港***配变更换",
},
],
};
},
created() {},
mounted() {
+ this.xianDuan();
this.detailedTwo11();
this.detailedTwo22();
this.detailedTwo33();
- this.barCharts();
+ this.detailedTwo44();
+ this.detailedTwo55();
this.detailen();
},
methods: {
+ //地图画线
+ xianDuan() {
+ var canvas = document.getElementById("myCanvas");
+ var ctx = canvas.getContext("2d");
+ 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 myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
- var data = {
- id: 'multipleBarsLines',
- title: '',
- subTitle: '最近更新：07月18日',
- legendBar: ['正面占比', '中立占比', '负面占比'],
- symbol: '%', //数值是否带百分号 --默认为空 ''
- legendLine: ['折线一', '折线二'],
- xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念',
- '不找了', '闻窗一如初见', '关于春天的一切', '流程', '世界上另一个我'
- ],
- yAxis: [
- [8, 10, 10, 11, 4, 13, 6, 5, 9, 7],
- [10, 7, 8, 8, 7, 9, 8, 7, 3, 5],
- [6, 5, 4, 7, 9, 4, 5, 3, 7, 11]
- ],
- lines: [
- [10, 10, 9, 11, 7, 4, 13, 8, 2, 1],
- [6, 12, 12, 2, 4, 4, 10, 8, 13, 12]
- ],
- barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
- lineColor: ['#638862', '#DA8084'], // 折线颜色
-
-}
-/////////////end/////////
-
-var myData = (function test() {
- let yAxis = data.yAxis || []
- let lines = data.lines || []
- let legendBar = data.legendBar || []
- let legendLine = data.legendLine || []
- var symbol = data.symbol || ' '
- let seriesArr = []
- let legendArr = []
- yAxis && yAxis.forEach((item, index) => {
- legendArr.push({
- name: legendBar && legendBar.length > 0 && legendBar[index]
- })
- seriesArr.push({
- name: legendBar && legendBar.length > 0 && legendBar[index],
- type: 'bar',
- barGap: '0.5px',
- data: item,
- barWidth: data.barWidth || 12,
- label: {
- normal: {
- show: true,
- formatter: '{c}' + symbol,
- position: 'top',
- textStyle: {
- color: '#414957',
- fontStyle: 'normal',
- fontFamily: '微软雅黑',
- textAlign: 'left',
- fontSize: 11,
- },
- },
- },
- itemStyle: { //图形样式
- normal: {
- barBorderRadius: 4,
- color: data.barColor[index]
- },
- }
- })
- })
-
- lines && lines.forEach((item, index) => {
- legendArr.push({
- name: legendLine && legendLine.length > 0 && legendLine[index]
- })
- seriesArr.push({
- name: legendLine && legendLine.length > 0 && legendLine[index],
- type: 'line',
- data: item,
- itemStyle: {
- normal: {
- color: data.lineColor[index],
- lineStyle: {
- width: 3,
- type: 'solid',
- }
- }
- },
- label: {
- normal: {
- show: false, //折线上方label控制显示隐藏
- position: 'top',
- }
- },
- symbol: 'circle',
- symbolSize: 10
- })
- })
-
- return {
- seriesArr,
- legendArr
- }
-})()
-
-
-var option = {
- // title: {
- // show: true,
- // text: data.title,
- // subtext: data.subTitle,
- // link: 'http://gallery.echartsjs.com/editor.html?c=xB1j9UgsXQ'
- // },
- tooltip: {
- trigger: 'axis',
- formatter: function(params) {
- var time = '';
- var str = '';
- for (var i of params) {
- time = i.name.replace(/\n/g, '') + '
';
- if (i.data == 'null' || i.data == null) {
- str += i.seriesName + '：无数据' + '
'
- } else {
- str += i.seriesName + '：' + i.data + symbol + '%
'
- }
-
- }
- return time + str;
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
},
- axisPointer: {
- type: 'none'
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["2021", "2022"],
+ },
},
- },
- legend: {
- right: data.legendRight || '30%',
- top: 12,
- itemGap: 16,
- itemWidth: 10,
- itemHeight: 10,
- data: myData.legendArr,
- textStyle: {
- color: '#414957',
- fontStyle: 'normal',
- fontFamily: '微软雅黑',
- fontSize: 12,
- }
- },
- grid: {
- x: 30,
- y: 80,
- x2: 30,
- y2: 60,
- },
- xAxis: {
- type: 'category',
- data: data.xAxis,
- axisTick: {
- show: false,
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
-
- axisLine: {
- show: false
- },
- axisLabel: {
- show: true,
- interval: '0',
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
textStyle: {
- lineHeight: 16,
- padding: [2, 2, 0, 2],
- height: 50,
- fontSize: 12,
+ color: "#ffffff",
+ fontSize: 16,
},
- rich: {
- Sunny: {
- height: 50,
- // width: 60,
- padding: [0, 5, 0, 5],
- align: 'center',
- },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
},
- formatter: function(params, index) {
- var newParamsName = "";
- var splitNumber = 5;
- var paramsNameNumber = params && params.length;
- if (paramsNameNumber && paramsNameNumber <= 4) {
- splitNumber = 4;
- } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
- splitNumber = 4;
- } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
- splitNumber = 5;
- } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
- splitNumber = 5;
- } else {
- params = params && params.slice(0, 15);
- }
-
- var provideNumber = splitNumber; //一行显示几个字
- var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
- if (paramsNameNumber > provideNumber) {
- for (var p = 0; p < rowNumber; p++) {
- var tempStr = "";
- var start = p * provideNumber;
- var end = start + provideNumber;
- if (p == rowNumber - 1) {
- tempStr = params.substring(start, paramsNameNumber);
- } else {
- tempStr = params.substring(start, end) + "\n";
- }
- newParamsName += tempStr;
- }
-
- } else {
- newParamsName = params;
- }
- params = newParamsName
- return '{Sunny|' + params + '}';
+ },
+ data: [
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ "8月",
+ "9月",
+ "10月",
+ "11月",
+ "12月",
+ ],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
},
- color: '#687284',
- },
-
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false
- },
- splitLine: {
+ },
+ axisLabel: {
+ textStyle: { fontSize: 16, color: "#fff" },
+ },
+ splitLine: {
show: true,
lineStyle: {
- color: '#F1F3F5',
- type: 'solid'
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
},
- interval: 2
+ },
},
- splitNumber: 4,
- },
- series: myData.seriesArr
-}
+ series: [
+ {
+ name: "2021",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ {
+ name: "2022",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ symbol: "none",
+ data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+ itemStyle: {
+ normal: {
+ color: "rgba(0,212,199,1)",
+ lineStyle: {
+ color: "rgba(0,212,199,1)",
+ },
+ },
+ },
+ },
+ ],
+ };
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
@@ -622,667 +528,333 @@ var option = {
detailedTwo22() {
var fontColor = "#30eee9";
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
- var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];
-var data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];
-var xData = function() {
- var data = [];
- for (var i = 1; i < 13; i++) {
- data.push(i + "月");
- }
- return data;
- }();
-var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
-
+ var option = {
+ tooltip: {
+ show: true,
+ trigger: "item",
+ },
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["2021", "2022"],
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
textStyle: {
- color: '#05294D',
- },
- },
- backgroundColor: '#05294D',
- borderColor: '#135469',
- borderWidth: 2,
- padding: [20, 20, 20, 20],
- formatter: function (params) {
- // console.log(params.length == 0);
- if (params.length === 0) {
- let result =
- '
' +
- '至少选中一条图例' +
- '' +
- '
';
- return result;
- } else if (params.length == 1) {
- const paramsArray = [];
- params.forEach((v) => {
- // console.log(v.name);
- if (v.seriesName == '趋势') {
- v.color = '#F3C452';
- } else {
- v.color = '#02DBF1';
- }
- paramsArray.push({
- name: v.name,
- seriesName: v.seriesName,
- data: v.data,
- color: v.color,
- });
- });
- // console.log(paramsArray);
- let result =
- '
' +
- paramsArray[0].name +
- '' +
- '
';
- result +=
- '
' +
- '
' +
- '旅客' +
- paramsArray[0].seriesName +
- '
' +
- paramsArray[0].data +
- '人公里' +
- '
' +
- '
' +
- '
';
- return result;
- } else {
- let result =
- '
' +
- params[0].name +
- '' +
- '
';
- result +=
- '
' +
- '
' +
- '旅客' +
- params[0].seriesName +
- '
' +
- params[0].data +
- '人公里' +
- '
' +
- '
' +
- '
' +
- '旅客' +
- params[1].seriesName +
- '
' +
- params[1].data +
- '人公里' +
- '
' +
- '
' +
- '
';
- return result;
- }
- },
- },
- grid: {
- borderWidth: 0,
- top: '20%',
- left: '65',
- bottom: '25%',
- textStyle: {
- color: '#fff',
- },
- },
- legend: {
- top: '0%',
- right: '10%',
- textStyle: {
- fontSize: '20px',
- fontFamily: 'MicrosoftYaHeiUI',
- color: '#FFFFFF',
- },
- itemWidth: 28,
- itemHeight: 28,
- data: [
- {
- name: '周转量',
- icon:
- 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
- },
- {
- name: '趋势',
- icon:
- 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
- },
- ],
- },
- xAxis: [
- {
- type: 'category',
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.5)',
- },
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitArea: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: 'rgba(255,255,255,0.7)',
- fontSize: 18,
- },
- data: xData,
- },
- ],
- yAxis: [
- {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: 'rgba(255,255,255,0.5)',
- fontSize: 20,
- },
- splitArea: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: '周转量',
- type: 'bar',
- // "stack": "总量",
- barMaxWidth: 35,
- barGap: '10%',
- itemStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#05F5FF', // 0% 处的颜色
- },
- {
- offset: 1,
- color: '#020D20', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- },
- },
- data: data1,
- },
- {
- name: '趋势',
- type: 'line',
- symbolSize: 10,
- symbol: 'circle',
- itemStyle: {
- normal: {
- color: 'rgba(255, 196, 53, 1)',
- barBorderRadius: 0,
- },
+ color: "#ffffff",
+ fontSize: 16,
},
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
lineStyle: {
- normal: {
- width: 4,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#F0B62A', // 0% 处的颜色
- },
- {
- offset: 0.45,
- color: '#FFC12B', // 45% 处的颜色
- },
- {
- offset: 0.85,
- color: '#FFC12B', // 85% 处的颜色
- },
- {
- offset: 1,
- color: '#FFC12B', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- },
+ color: "#195384",
},
- data: data2,
+ },
+ data: [
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ "8月",
+ "9月",
+ "10月",
+ "11月",
+ "12月",
+ ],
},
- ],
-};
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ axisLabel: {
+ textStyle: { fontSize: 16, 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: "2021",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+ itemStyle: {
+ normal: {
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
+ },
+ },
+ },
+ },
+ {
+ name: "2022",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ symbol: "none",
+ data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+ itemStyle: {
+ normal: {
+ color: "rgba(0,212,199,1)",
+ lineStyle: {
+ color: "rgba(0,212,199,1)",
+ },
+ },
+ },
+ },
+ ],
+ };
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",
- },
+ show: true,
+ trigger: "item",
},
-
legend: {
- right: 5,
- top: "5%",
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 15,
textStyle: {
- color: "#ACCFFF",
- fontSize: 16,
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ data: ["2021", "2022"],
},
},
grid: {
- left: "5%",
- right: "5%",
- bottom: "5%",
- top: "10%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
},
- xAxis: [
- {
- type: "value",
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 16,
+ },
+ },
+ axisTick: {
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,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
},
},
- ],
- yAxis: [
- {
- type: "category",
- axisLine: {
- show: false,
+ data: [
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ "8月",
+ "9月",
+ "10月",
+ "11月",
+ "12月",
+ ],
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
},
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#6B9DD7",
- fontSize: 16, // 文字大小
- fontWeight: 400,
- interval: 0,
- },
- offset: 20,
- data: honorXAxisData,
},
- ],
+ axisLabel: {
+ textStyle: { fontSize: 16, 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: "2019末",
- type: "bar",
- stack: "zongliang",
- barWidth: "35%",
- zlevel: 10,
- label: {
+ name: "2021",
+ type: "line",
+ stack: "Total",
+ smooth: true,
+ symbol: "none",
+ data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+ itemStyle: {
normal: {
- show: true,
- position: "inside",
- textStyle: {
- color: "#fff",
- fontSize: 14,
+ color: "yellow",
+ lineStyle: {
+ color: "yellow",
},
},
},
- data: honorData[0].data,
},
{
- name: "2020上半年",
- type: "bar",
- stack: "zongliang",
- barWidth: "35%",
- zlevel: 10,
- label: {
+ name: "2022",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ symbol: "none",
+ data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+ itemStyle: {
normal: {
- show: true,
- position: "top",
- formatter: function (params) {
- console.log(params);
- // return params.seriesName + params.value ;
- return "完成" + params.value;
- },
- textStyle: {
- color: "#fff",
- fontSize: 12,
+ color: "rgba(0,212,199,1)",
+ lineStyle: {
+ color: "rgba(0,212,199,1)",
},
},
},
- 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"));
+ detailedTwo44() {
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
var option = {
- title: [
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ grid: {
+ left: "10%", // grid布局设置适当调整避免X轴文字只能部分显示
+ right: "1%", // grid布局设置适当调整避免X轴文字只能部分显示
+ },
+
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ },
+
+ data: ["2021", "2022"],
+ },
+ xAxis: [
{
- text: "总计",
- subtext: 59.53 + "万",
- textStyle: {
- fontSize: 20,
+ type: "category",
+ data: [
+ "苗庄河西泵",
+ "中堡排涝泵",
+ "新东排涝泵",
+ "山河村泵",
+ "花垛南泵",
+ "吉兴北泵",
+ ],
+ axisLabel: {
+ interval: 0,
color: "#fff",
+ fontSize: "16",
},
- subtextStyle: {
- fontSize: 20,
- color: "yellow",
- },
- textAlign: "center",
- x: "34.5%",
- y: "44%",
},
],
- tooltip: {
- trigger: "item",
- formatter: function (parms) {
- var str =
- parms.seriesName +
- "" +
- parms.marker +
- "" +
- parms.data.legendname +
- "" +
- "数量：" +
- parms.data.value +
- "" +
- "占比：" +
- parms.percent +
- "%";
- return str;
+ yAxis: [
+ {
+ type: "value",
+ min: 0,
+ max: 160,
+ interval: 40,
+ axisLabel: {
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 18,
+ },
+ },
+ 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,
+ },
+ },
},
- },
- 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)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
- },
- },
- },
-
+ name: "2021",
+ type: "bar",
itemStyle: {
- normal: {
- borderRadius: 10,
- borderColor: "transparent",
- borderWidth: 2,
- label: {
- show: true,
- formatter: " {d}% ",
- fontSize: 20,
- color: "#fff",
- },
- },
+ 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: m2R2Data,
+ emphasis: {
+ focus: "series",
+ },
+ data: [150, 63, 72, 33, 47, 88],
+ },
+ {
+ name: "2022",
+ type: "bar",
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(255,255,0,.2) " },
+ { offset: 0.5, color: "rgb(255,255,0,.6)" },
+ { offset: 0, color: "rgb(255,255,0)" },
+ ]),
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ emphasis: {
+ focus: "series",
+ },
+ data: [45, 123, 35, 67, 58, 124],
},
],
};
@@ -1291,263 +863,345 @@ var option = {
myChart.resize();
});
},
+ detailedTwo55() {
+ var myChart = this.$echarts.init(document.getElementById("detailedTwo5"));
+ var img =
+ "data:image/png;base64,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";
+ var trafficWay = [
+ {
+ name: "启用",
+ value: 32,
+ },
+ {
+ name: "未启用",
+ value: 67,
+ },
+ ];
+
+ var data = [];
+ var color = [
+ "#00ffff",
+ "#00cfff",
+ "#006ced",
+ "#ffe000",
+ "#ffa800",
+ "#ff5b00",
+ "#ff3000",
+ ];
+ for (var i = 0; i < trafficWay.length; i++) {
+ data.push(
+ {
+ value: trafficWay[i].value,
+ name: trafficWay[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: color[i],
+ },
+ },
+ },
+ {
+ value: 2,
+ name: "",
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ color: "rgba(0, 0, 0, 0)",
+ borderColor: "rgba(0, 0, 0, 0)",
+ borderWidth: 0,
+ },
+ },
+ }
+ );
+ }
+ var seriesOption = [
+ {
+ name: "",
+ type: "pie",
+ clockWise: false,
+ radius: [70, 75],
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: "outside",
+ color: "#fff",
+ fontSize: 16,
+ formatter: function (params) {
+ var percent = 0;
+ var total = 0;
+ for (var i = 0; i < trafficWay.length; i++) {
+ total += trafficWay[i].value;
+ }
+ percent = ((params.value / total) * 100).toFixed(0);
+ if (params.name !== "") {
+ return "" + params.name + "\n" + "\n" + "" + percent + "%";
+ } else {
+ return "";
+ }
+ },
+ },
+ labelLine: {
+ length: 10,
+ length2: 5,
+ show: true,
+ color: "#00ffff",
+ },
+ },
+ },
+ data: data,
+ },
+ ];
+ var option = {
+ // backgroundColor: "#013A54",
+ color: color,
+ title: {
+ text: "",
+ top: "48%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "#fff",
+ fontSize: 18,
+ fontWeight: "400",
+ },
+ },
+ graphic: {
+ elements: [
+ {
+ type: "image",
+ z: 3,
+ style: {
+ image: img,
+ width: 120,
+ height: 120,
+ },
+ left: "center",
+ top: "center",
+ position: [50, 50],
+ },
+ ],
+ },
+
+ tooltip: {
+ show: false,
+ },
+
+ toolbox: {
+ show: false,
+ },
+ series: seriesOption,
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
detailen() {
var myChart = this.$echarts.init(document.getElementById("detailen"));
- var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];
-var data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];
-var xData = function() {
- var data = [];
- for (var i = 1; i < 13; i++) {
- data.push(i + "月");
- }
- return data;
- }();
-var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
-
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ crossStyle: {
+ color: "#999",
+ },
+ },
+ },
+ grid: {
+ bottom: "10%", //图表距离容器上面多少距离
+ top: "20%", //图表距离容器上面多少距离
+ containLabel: true, //防止标签溢出
+ },
+ legend: [
+ {
+ x: "center",
+ data: ["投运15年以上设备数量", "统计时间所辖线路设备数量"],
textStyle: {
- color: '#05294D',
+ fontSize: 18,
+ color: "#fff",
},
- },
- backgroundColor: '#05294D',
- borderColor: '#135469',
- borderWidth: 2,
- padding: [20, 20, 20, 20],
- formatter: function (params) {
- // console.log(params.length == 0);
- if (params.length === 0) {
- let result =
- '
' +
- '至少选中一条图例' +
- '' +
- '
';
- return result;
- } else if (params.length == 1) {
- const paramsArray = [];
- params.forEach((v) => {
- // console.log(v.name);
- if (v.seriesName == '趋势') {
- v.color = '#F3C452';
- } else {
- v.color = '#02DBF1';
- }
- paramsArray.push({
- name: v.name,
- seriesName: v.seriesName,
- data: v.data,
- color: v.color,
- });
- });
- // console.log(paramsArray);
- let result =
- '
' +
- paramsArray[0].name +
- '' +
- '
';
- result +=
- '
' +
- '
' +
- '旅客' +
- paramsArray[0].seriesName +
- '
' +
- paramsArray[0].data +
- '人公里' +
- '
' +
- '
' +
- '
';
- return result;
- } else {
- let result =
- '
' +
- params[0].name +
- '' +
- '
';
- result +=
- '
' +
- '
' +
- '旅客' +
- params[0].seriesName +
- '
' +
- params[0].data +
- '人公里' +
- '
' +
- '
' +
- '
' +
- '旅客' +
- params[1].seriesName +
- '
' +
- params[1].data +
- '人公里' +
- '
' +
- '
' +
- '
';
- return result;
- }
- },
- },
- grid: {
- borderWidth: 0,
- top: '20%',
- left: '65',
- bottom: '25%',
- textStyle: {
- color: '#fff',
- },
- },
- legend: {
- top: '0%',
- right: '10%',
- textStyle: {
- fontSize: '20px',
- fontFamily: 'MicrosoftYaHeiUI',
- color: '#FFFFFF',
- },
- itemWidth: 28,
- itemHeight: 28,
- data: [
- {
- name: '周转量',
- icon:
- 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
- },
- {
- name: '趋势',
- icon:
- 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
+ },
+ {
+ x: "center",
+ top: "8%",
+ data: ["设备老化占比", "设备绝缘率"],
+ textStyle: {
+ fontSize: 18,
+ color: "#fff",
},
+ },
],
- },
- xAxis: [
- {
- type: 'category',
+ xAxis: [
+ {
+ type: "category",
+ show: true,
+ data: [
+ "10kv星雨线163",
+ "10kv智谋线183",
+ "10kv朝阳线164",
+ "10kv杨庄线1811",
+ "10kv森达线174",
+ "10kv武港线176",
+ ],
+ axisPointer: {
+ type: "shadow",
+ },
+ axisLabel: {
+ interval: 0, //设置成 0 强制显示所有标签
+ rotate: -20, //使文本旋转
+ color: "#fff",
+ fontSize: "16",
+ },
+ axisTick: {
+ //x轴刻度相关设置
+ alignWithLabel: true,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ min: 0,
+ max: 160,
+ interval: 40,
+ axisLabel: {
+ textStyle: {
+ fontSize: "18",
+ },
+ },
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,
+ },
+ },
+ },
+ {
+ type: "value",
+ min: 0,
+ max: 100,
+ interval: 20,
+ axisLabel: {
+ formatter: "{value}%",
+ textStyle: {
+ fontSize: "18",
+ },
+ },
+ 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: "投运15年以上设备数量",
+ type: "bar",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ },
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(255,255,0,.2) " },
+ { offset: 0.5, color: "rgb(255,255,0,.6)" },
+ { offset: 0, color: "rgb(255,255,0)" },
+ ]),
+ borderRadius: [7, 7, 0, 0], // 柱状图圆角
+ borderWidth: 0,
+ },
+ data: [89, 78, 89, 56, 100, 56],
+ },
+ {
+ name: "统计时间所辖线路设备数量",
+ 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: [56, 78, 99, 76, 55, 67],
+ },
+ {
+ name: "设备老化占比",
+ type: "line",
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "orange",
lineStyle: {
- color: 'rgba(255,255,255,.5)',
+ color: "orange",
},
+ },
},
- splitLine: {
- show: false,
+ data: [40, 77, 56, 89, 70, 50],
+ },
+ {
+ name: "设备绝缘率",
+ type: "line",
+ yAxisIndex: 1,
+
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ },
},
- axisTick: {
- show: false,
- },
- splitArea: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: 'rgba(255,255,255,0.7)',
- fontSize: 18,
- },
- data: xData,
- },
- ],
- yAxis: [
- {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: 'rgba(255,255,255,0.5)',
- fontSize: 20,
- },
- splitArea: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: '周转量',
- type: 'bar',
- // "stack": "总量",
- barMaxWidth: 35,
- barGap: '10%',
itemStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#05F5FF', // 0% 处的颜色
- },
- {
- offset: 1,
- color: '#020D20', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
+ normal: {
+ color: "Cyan",
+ lineStyle: {
+ color: "Cyan",
},
+ },
},
- data: data1,
- },
- {
- name: '趋势',
- type: 'line',
- symbolSize: 10,
- symbol: 'circle',
- itemStyle: {
- normal: {
- color: 'rgba(255, 196, 53, 1)',
- barBorderRadius: 0,
- },
- },
- lineStyle: {
- normal: {
- width: 4,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#F0B62A', // 0% 处的颜色
- },
- {
- offset: 0.45,
- color: '#FFC12B', // 45% 处的颜色
- },
- {
- offset: 0.85,
- color: '#FFC12B', // 85% 处的颜色
- },
- {
- offset: 1,
- color: '#FFC12B', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- },
- },
- data: data2,
- },
- ],
-};
+ data: [45, 56, 76, 43, 66, 60],
+ },
+ ],
+ };
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
@@ -1667,10 +1321,6 @@ var option = {
width: 100% !important;
}
- /deep/ .el-table__body td .cell {
- // width: 60px !important;
- }
-
// &::before {
// //去除底部白线
// left: 0;
@@ -1720,7 +1370,11 @@ var option = {
justify-content: space-between;
#detailedTwo3 {
width: 100%;
- height: 500px;
+ height: 350px;
+ }
+ #detailedTwo4 {
+ width: 100%;
+ height: 400px;
}
}
@@ -1731,27 +1385,54 @@ var option = {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
- .imgboxone {
- background: url("../assets/04/总数据外框.png") no-repeat;
+ #detailedTwo5 {
+ height: 100%;
width: 100%;
- height: 17%;
+ }
+ .imgboxtwo {
+ background: url("../assets/09/启用清单框.png") no-repeat;
+ background-size: 100%;
+ float: left;
+ left: 20%;
+ top: 70%;
+ width: 28vh;
+ height: 28vh;
position: relative;
- top: 45%;
- left: 30%;
- .contents {
- // height: 90%;
- position: absolute;
- padding: 10px;
- height: 100%;
- width: 53%;
+ .cartitle {
+ height: 32px;
+ width: 100%;
+ // background: url("../assets/images/carTitle.png") no-repeat;
+ font-size: 17px;
+ font-weight: 600;
+ color: #ffffff;
+ line-height: 32px;
+ // text-align: left;
+ text-indent: 26px;
+ }
+ .content {
+ height: 65%;
+ padding: 0 15px 0 15px;
+ box-sizing: border-box;
display: flex;
- flex-direction: row;
- /* 平分剩余空间 */
- justify-content: space-around;
- .lines {
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .line {
width: 100%;
- padding: 10px 0 0 1px;
- background: url("../assets/index/总数据小框.png") no-repeat;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ display: flex;
+ flex-wrap: wrap;
+ ul {
+ height: 100%;
+ li {
+ text-align: left;
+ height: 33%;
+ font-size: 23px;
+ color: #f8f8f8;
+ }
+ }
}
.total {
@@ -1759,25 +1440,20 @@ var option = {
display: flex;
flex-flow: column nowrap;
justify-content: center;
- align-items: left;
+ align-items: center;
color: #ffffff;
- span {
- font-size: 20px;
- }
h5 {
- font-size: 34px;
+ font-size: 28px;
}
.yellow {
- padding-top: 30px;
color: yellow;
}
.orange {
- padding-top: 30px;
color: orange;
}
- .yellows {
- padding-top: 20px;
- color: yellow;
+ span {
+ float: left;
+ font-size: 18px;
}
}
}
@@ -1804,28 +1480,62 @@ var option = {
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;
+ height: 400px;
}
- .eqselect {
- span {
- font-size: 20px;
- color: #f8f8f8;
- }
- img {
- margin-right: 7px;
+ .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 {
+ width: 33%;
+ height: 49%;
+ list-style: none;
+ img {
+ margin-top: 30%;
+ }
+ .text {
+ position: absolute;
+ z-index: 2;
+ left: 30%;
+ top: 20%;
+ align-items: center;
+ font-size: 32px;
+ color: yellow;
+ }
+ .texts {
+ color: orange;
+ position: absolute;
+ z-index: 2;
+ left: 25%;
+ top: 20%;
+ align-items: center;
+ font-size: 32px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ }
}
}
}
@@ -1837,6 +1547,26 @@ var option = {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
+ .enselect {
+ position: absolute;
+ // margin-bottom: 30%;
+ // left: 30px;
+ img {
+ // position: relative;
+ float: left;
+ }
+ .text {
+ position: absolute;
+ top: 5px;
+ left: 20px;
+ // right: -10px;
+ font-size: 22px;
+ color: #fff;
+ }
+ }
+ table {
+ margin-top: 70px;
+ }
#detailstop {
width: 100%;
height: 400px;
diff --git a/src/views/enterprisePollutionMonitoring.vue b/src/views/enterprisePollutionMonitoring.vue
index 11037acb..a8eaad7f 100644
--- a/src/views/enterprisePollutionMonitoring.vue
+++ b/src/views/enterprisePollutionMonitoring.vue
@@ -1,8 +1,7 @@
-
-
+
@@ -12,16 +11,12 @@
-
+
@@ -39,8 +34,8 @@
2022
-->
-
-
+
+
@@ -65,22 +60,55 @@
- 
- 电压月合格率
- 
- 合格率底用户数
- 
+