<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @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
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">燃气供应量统计分析</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
:key="item"
class="left"
:class="{ active: btnV == index }"
@click="btnClick(index)"
>
{{ item }}
</div>
</div>
<div class="num-wrapper">
<div class="left">
<span class="text">{{ textData[0].text }}</span
><span class="num">{{ textData[0].num }}</span
>{{ textData[0].unit }}
</div>
<div class="right">
<span class="text">{{ textData[1].text }}</span
><span class="num">{{ textData[1].num }}</span
>{{ textData[1].unit }}
</div>
</div>
<div class="chars">
<Chars :options="options" />
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
import {selectHiddenCount} from "@/api/standingBook/hidden"
import {selectCount} from "@/api/standingBook/trouble"
export default {
name: "",
components: {
Chars,
},
data() {
return {
btnArr: ["天然气", "液化石油气"],
btnV: 0,
options: null,
textData: [
{ text: "供应量", num: 260, unit: "km³" },
{ text: "需求量", num: 212, unit: "km³" },
],
charData: [[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20]],
charData1:[
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
],
charData2:[
[20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
],
dayList:[]
};
},
mounted() {
//this.gethiddenCount();
this.bottomOptions();
},
methods: {
gethiddenCount(){
this.textData = [
{ text: "供应量", num: 260, unit: "km³" },
{ text: "需求量", num: 212, unit: "km³" },
];
selectHiddenCount().then(response => {
console.log(response)
var ynum =[];
var znum =[];
// for(var item of response.data){
// console.log(item.zcount)
// znum.push(item.zcount)
// this.textData[0].num+=item.zcount;
// ynum.push(item.ycount)
// this.textData[1].num+=item.ycount;
// this.dayList.push(item.month.substr(5,7))
// }
this.charData1.push(znum);
this.charData1.push(ynum);
this.charData = this.charData1;
console.log(this.charData1)
this.bottomOptions();
});
},
gettroubleCount(){
this.textData = [
{ text: "供应量", num: 250, unit: "km³" },
{ text: "需求量", num: 202, unit: "km³" },
];
selectCount().then(response => {
var ynum =[];
var znum =[];
// for(var item of response.data){
// znum.push(item.count)
// this.textData[0].num+=item.count;
// ynum.push(item.hurtNum)
// this.textData[1].num+=item.hurtNum;
// }
this.charData2.push(znum);
this.charData2.push(ynum);
this.charData = this.charData2;
this.bottomOptions();
});
},
btnClick(index) {
if (this.btnV == index) return;
this.btnV = index;
if (index === 0) {
this.gethiddenCount();
// this.charData = [
// [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
// [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
// ];
// this.charData = this.charData1;
// 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.gettroubleCount();
// this.charData = [
// [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
// [2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1],
// ];
// this.charData = this.charData2;
// 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();
},
bottomOptions() {
const colors = ["#1890FF", "#FFC736"];
this.options = {
color: colors,
tooltip: {
// show:false,
// formatter: "{a}: {c}(件)",
formatter: (parm) => {
console.log(parm);
return `${parm.seriesName}：${parm.value}(${
this.textData[parm.seriesIndex].unit
})`;
},
// trigger: "axis",
// axisPointer: {
// type: "cross",
// },
},
grid: {
top: "40",
left: "3%",
right: "10%",
bottom: "3%",
containLabel: true,
},
toolbox: {},
legend: {
// data: ['Evaporation', 'Temperature'],
// left: 'right'
show: false,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
// prettier-ignore
data: [1,2,3,4,5,6,7,8,9,10,11,12],
axisLabel: {
formatter: "{value}",
color: "#333",
// textStyle: {
// },
},
},
],
yAxis: [
{
type: "value",
name: "单位 (件)",
position: "left",
nameTextStyle: {
color: "#333",
},
axisLine: {
show: true,
},
axisLabel: {
formatter: "{value}",
// textStyle: {
color: "#333",
// },
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
},
show: true, //隐藏
},
min: 0,
//max: Math.max.apply(null, this.charData[0]) + 10,
},
],
series: [
{
name: this.textData[0].text,
type: "bar",
data: this.charData[0],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
{
name: this.textData[1].text,
type: "bar",
data: this.charData[1],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[1] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
.chars-box {
width: 100%;
height: 100%;
position: relative;
.title {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
font-size: 12px;
justify-content: flex-end;
margin-right: 34px;
margin-bottom: 12px;
> div {
border-radius: 3px 3px 3px 3px;
border: 1px solid #c5c5c5;
padding: 3px 6px;
cursor: pointer;
margin-left: 3px;
&.active {
background-color: #1a91ff;
color: #fff;
border: 1px solid #1a91ff;
}
&:hover {
background: #1a91ffcc;
color: #fff;
border: 1px solid #3291ebcc;
}
}
}
.num-wrapper {
position: absolute;
display: flex;
top: 100px;
right: 50px;
> div {
font-size: 12px;
margin-left: 19px;
display: inline-block;
position: relative;
.text {
margin-right: 10px;
}
.num {
margin-right: 2px;
}
&.left {
&::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-color: #1a91ff;
border-radius: 50%;
left: -10px;
top: 50%;
margin-top: -3px;
}
&::after {
}
.num {
color: #1a91ff;
}
}
&.right {
&::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-color: #ffcb44;
border-radius: 50%;
left: -10px;
top: 50%;
margin-top: -3px;
}
.num {
color: #ffcb44;
}
}
}
}
.chars {
flex: 1;
// background-color: red;
}
}
</style>