Skip to content

G
gassafety-progress
Commit 26cb3f56 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

修改统计页面的chars数据

parent 3093e51f
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 53 deletions
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-28 13:34:42
* @LastEditTime: 2022-05-05 11:16:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
......@@ -22,10 +22,14 @@
</div>
<div class="num-wrapper">
<div class="left">
<span class="text">隐患总数</span><span class="num">12</span>件
<span class="text">{{ textData[0].text }}</span
><span class="num">{{ textData[0].num }}</span
>{{ textData[0].unit }}
</div>
<div class="right">
<span class="text">已整改</span><span class="num">10</span>件
<span class="text">{{ textData[1].text }}</span
><span class="num">{{ textData[1].num }}</span
>{{ textData[1].unit }}
</div>
</div>
......@@ -48,9 +52,13 @@ export default {
btnArr: ["隐患处置", "事故数量"],
btnV: 0,
options: null,
textData: [
{ text: "隐患总数", num: 192, unit: "件" },
{ text: "已整改", num: 182, unit: "件" },
],
charData: [
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
[10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
],
};
},
......@@ -64,12 +72,36 @@ export default {
if (index === 0) {
this.charData = [
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
[10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
];
const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
// 更改按钮下的文字
this.textData = [
{ text: "隐患总数", num: num1, unit: "件" },
{ text: "已整改", num: num2, unit: "件" },
];
} else {
this.charData = [
[20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
[20, 30, 10, 20, 30, 20, 10, 30, 40, 40, 20, 20],
[2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1],
];
const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
// 更改按钮下的文字
this.textData = [
{ text: "事故数量", num: num1, unit: "件" },
{ text: "伤亡人数", num: num2, unit: "人" },
];
}
this.bottomOptions();
......@@ -80,7 +112,13 @@ export default {
color: colors,
tooltip: {
// show:false,
formatter: "{a}: {c}(件)",
// formatter: "{a}: {c}(件)",
formatter: (parm) => {
console.log(parm);
return `${parm.seriesName}：${parm.value}(${
this.textData[parm.seriesIndex].unit
})`;
},
// trigger: "axis",
// axisPointer: {
// type: "cross",
......@@ -142,11 +180,12 @@ export default {
},
min: 0,
max: 60,
max: Math.max.apply(null, this.charData[0]) + 10,
},
],
series: [
{
name: "隐患数量",
name: this.textData[0].text,
type: "bar",
data: this.charData[0],
yAxisIndex: 0,
......@@ -160,7 +199,7 @@ export default {
barGap: "0%",
},
{
name: "已整改",
name: this.textData[1].text,
type: "bar",
data: this.charData[1],
yAxisIndex: 0,
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxB.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-28 13:35:16
* @LastEditTime: 2022-05-05 11:36:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">燃气事故排名</div>
<div class="title">隐患/事故排名</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
......@@ -48,23 +48,157 @@ export default {
btnArr: ["隐患处置", "事故数量"],
btnV: 0,
options: null,
charData: [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]],
// charData: [50, 40, 20, 40, 10, 10, 30, 10, 30, 50],
// xData:['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
arr: [
{
name: "营里乡",
value: 50,
},
{
name: "下槐镇",
value: 40,
},
{
name: "宅北乡",
value: 20,
},
{
name: "合河口乡",
value: 40,
},
{
name: "蛟潭庄镇",
value: 10,
},
{
name: "孟家庄镇",
value: 10,
},
{
name: "苏家庄乡",
value: 30,
},
{
name: "东王坡乡",
value: 10,
},
{
name: "上观音堂乡",
value: 30,
},
{
name: "杨家桥乡",
value: 50,
},
],
};
},
computed: {},
mounted() {
this.bottomOptions();
},
computed: {
charsArr() {
return (this.arr = this.arr.sort((a, b) => {
return b.value - a.value;
}));
},
},
methods: {
btnClick(index) {
if (this.btnV == index) return;
this.btnV = index;
if (index === 0) {
this.charData = [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]];
this.arr = [
{
name: "营里乡",
value: 50,
},
{
name: "下槐镇",
value: 40,
},
{
name: "宅北乡",
value: 20,
},
{
name: "合河口乡",
value: 40,
},
{
name: "蛟潭庄镇",
value: 10,
},
{
name: "孟家庄镇",
value: 10,
},
{
name: "苏家庄乡",
value: 30,
},
{
name: "东王坡乡",
value: 10,
},
{
name: "上观音堂乡",
value: 30,
},
{
name: "杨家桥乡",
value: 50,
},
];
} else {
this.charData = [[20, 10, 40, 30, 20, 20, 20, 10, 20, 10]];
this.arr = [
{
name: "营里乡",
value: 50,
},
{
name: "下槐镇",
value: 40,
},
{
name: "宅北乡",
value: 20,
},
{
name: "合河口乡",
value: 40,
},
{
name: "蛟潭庄镇",
value: 10,
},
{
name: "孟家庄镇",
value: 10,
},
{
name: "苏家庄乡",
value: 10,
},
{
name: "东王坡乡",
value: 20,
},
{
name: "上观音堂乡",
value: 30,
},
{
name: "杨家桥乡",
value: 20,
},
];
}
this.bottomOptions();
},
bottomOptions() {
const colors = ["#1890FF"];
this.options = {
......@@ -75,7 +209,6 @@ export default {
// type: "cross",
// },
formatter: "{b}: {c}(个)",
},
grid: {
top: "30",
......@@ -107,9 +240,9 @@ export default {
color: "#333",
// },
},
max:"dataMax",
// prettier-ignore
data: ['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
data: this.charsArr.map(item=>item.name),
},
],
yAxis: [
......@@ -137,14 +270,14 @@ export default {
// },
},
min: 0,
max: 60,
max: "dataMax"
},
],
series: [
{
name: "Evaporation",
type: "bar",
data: this.charData[0],
data: this.charsArr.map((item) => item.value),
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
......@@ -170,7 +303,6 @@ export default {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-19 10:17:05
* @LastEditTime: 2022-04-21 17:24:15
* @LastEditTime: 2022-05-05 10:40:44
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue
......@@ -13,7 +13,7 @@
<div class="left ">
<div class="top ">{{ left.text }}</div>
<div class="bottom">
<div class="number" v-for="item in left.numArr" :key="item">
<div class="number" v-for="item in left.numArr" :key="item.text">
{{ item }}
</div>
<div class="unit">{{ left.unit }}</div>
......@@ -22,7 +22,7 @@
<div class="right">
<div class="top">{{ right.text }}</div>
<div class="bottom">
<div class="number" v-for="item in right.numArr" :key="item">
<div class="number" v-for="item in right.numArr" :key="item.text">
{{ item }}
</div>
<div class="unit">{{ right.unit }}</div>
......@@ -43,7 +43,7 @@ export default {
type: Object,
default: () => ({
text: "驻村安全员",
numArr: [1, 2],
numArr: "397",
unit: "名",
}),
},
......@@ -51,7 +51,7 @@ export default {
type: Object,
default: () => ({
text: "燃气协管员",
numArr: [1, 9],
numArr: "472",
unit: "名",
}),
},
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/index.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-04-19 17:20:50
* @LastEditTime: 2022-05-05 10:38:23
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left.vue
......@@ -40,12 +40,12 @@ export default {
two: {
left: {
text: "电代煤",
numArr: [1,8],
numArr: "442",
unit: "个",
},
right:{
text: "气代煤",
numArr: [1, 6],
numArr: "393",
unit: "个",
}
},
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxC.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-28 13:41:12
* @LastEditTime: 2022-05-05 13:45:13
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">燃气事故排名</div>
<div class="title">燃气事故占比</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
......@@ -66,29 +66,33 @@ export default {
this.btnV = index;
if (index === 2) {
this.bottomData = [
{ name: "裂缝", value: 10, color: "#604AFF" },
{ name: "管道称重", value: 20, color: "#FFC337" },
{ name: "其他", value: 100, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
{ name: "安检", value: 20, color: "#604AFF" },
{ name: "巡检", value: 30, color: "#FFC337" },
{ name: "专项检查", value: 40, color: "#86FF5B" },
{ name: "大排查整治", value: 99, color: "#03C4F1" },
{ name: "工程事故隐患", value: 18, color: "#1F8DF3" },
{ name: "其他", value: 18, color: "pink" },
];
} else if (index === 1) {
// 居民用气、工商用气、场站、加气站
this.bottomData = [
{ name: "裂缝", value: 40, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 20, color: "#86FF5B" },
{ name: "腐蚀", value: 19, color: "#03C4F1" },
{ name: "漏气", value: 50, color: "#1F8DF3" },
{ name: "居民用气", value: 40, color: "#604AFF" },
{ name: "工商用气", value: 30, color: "#FFC337" },
{ name: "场站", value: 20, color: "#86FF5B" },
{ name: "加气站", value: 19, color: "#03C4F1" },
];
} else {
this.bottomData = [
{ name: "裂缝", value: 20, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 40, color: "#86FF5B" },
{ name: "裂缝", value: 10, color: "#604AFF" },
{ name: "管道称重", value: 20, color: "#FFC337" },
{ name: "其他", value: 100, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
];
}
// this.bottomData.sort((a,b)=>{
// return Math.random()-0.5
// })
this.bottomOptions();
},
bottomOptions() {
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxD.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-28 13:40:47
* @LastEditTime: 2022-05-05 11:46:58
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">隐患处理和事故数量</div>
<div class="title">隐患、事故趋势</div>
<div class="btn-wrapper">
<!-- <div @click="btnClick(0)">燃气事故</div> -->
<div
......
gassafetyprogress-web/src/views/statistic/overview/index.vue
View file @ 26cb3f56
<!--
* @Author: your name
* @Date: 2022-04-18 17:21:51
* @LastEditTime: 2022-04-19 10:08:56
* @LastEditTime: 2022-05-05 10:36:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/index.vue
......@@ -11,8 +11,8 @@
<div class="left">
<Left />
</div>
<div class="middle"><Middle/></div>
<div class="right"><Right/></div>
<div class="middle"><Middle /></div>
<div class="right"><Right /></div>
</div>
</template>
......@@ -24,7 +24,7 @@ export default {
components: {
Left,
Right,
Middle
Middle,
},
};
</script>
......@@ -34,16 +34,16 @@ export default {
width: 100%;
height: calc(100vh - 50px) !important;
> div {
flex:1;
flex: 1;
// background-color: red;
height: 100%;
margin-right:3px;
margin-right: 3px;
&.middle {
width: 40%;
flex:none;
flex: none;
// background-color: blue;
}
&.right{
&.right {
margin-right: 0px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment