wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

bug14305

pull/3/head
LiuJiaNan 2024-02-28 09:49:13 +08:00
parent 5024a89dbe
commit fb94683b9b
1 changed files with 47 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/views/large_screen_data_display/components/troubleshooting_type.vue
View File

@ -29,17 +29,46 @@
<div>
<div class="dunpai1" />
<div class="bottom_title">现场排查数</div>
<div id="main1" />
<el-progress
:percentage="
typeList.filter((item) => item.NAME === '现场清单')[0].percentage
"
color="#ec2c26"
text-inside
:stroke-width="20"
>
{{ typeList.filter((item) => item.NAME === "现场清单")[0].count }}
</el-progress>
</div>
<div>
<div class="dunpai2" />
<div class="bottom_title">基础排查数</div>
<div id="main2" />
<el-progress
:percentage="
typeList.filter((item) => item.NAME === '基础类清单')[0]
.percentage
"
color="#ea4e26"
text-inside
:stroke-width="20"
>
{{ typeList.filter((item) => item.NAME === "基础类清单")[0].count }}
</el-progress>
</div>
<div>
<div class="dunpai3" />
<div class="bottom_title">综合排查数</div>
<div id="main3" />
<el-progress
:percentage="
typeList.filter((item) => item.NAME === '综合类清单')[0]
.percentage
"
color="#ea6e27"
text-inside
:stroke-width="20"
>
{{ typeList.filter((item) => item.NAME === "综合类清单")[0].count }}
</el-progress>
</div>
</div>
</div>
@ -47,18 +76,21 @@
</template>
<script setup>
import { onMounted, ref } from "vue";
import { ref } from "vue";
import {
getTroubleshootingTypeEcharts,
getTroubleshootingTypeNumber,
} from "@/request/large_screen_data_display.js";
import { sumBy } from "lodash-es";
import { arrayObjectDeduplication } from "@/assets/js/utils.js";
import * as echarts from "echarts";
import CountTo from "vue-countup-v3";
const info = ref({});
const typeList = ref([
{ count: 0, percentage: 0, NAME: "现场清单" },
{ count: 0, percentage: 0, NAME: "基础类清单" },
{ count: 0, percentage: 0, NAME: "综合类清单" },
]);
const fnGetData = async () => {
const resDataNumber = await getTroubleshootingTypeNumber();
resDataNumber.typeList.forEach((item) => {
@ -66,73 +98,15 @@ const fnGetData = async () => {
});
const resDataEcharts = await getTroubleshootingTypeEcharts();
const total = sumBy(resDataEcharts.typeList, (item) => item.count);
const key = {
现场清单: { color: "#ec2c26", el: "#main1" },
基础类清单: { color: "#ea4e26", el: "#main2" },
综合类清单: { color: "#ea6e27", el: "#main3" },
};
const typeList = [
...resDataEcharts.typeList,
{ count: 0, NAME: "现场清单" },
{ count: 0, NAME: "基础类清单" },
{ count: 0, NAME: "综合类清单" },
];
arrayObjectDeduplication(typeList, "NAME").forEach((item) => {
fnInitEcharts(item.count, total, key[item.NAME].color, key[item.NAME].el);
resDataEcharts.typeList.forEach((item) => {
item.percentage = (item.count / total) * 100;
});
typeList.value = arrayObjectDeduplication(
[...resDataEcharts.typeList, ...typeList.value],
"NAME"
);
};
onMounted(() => {
fnGetData();
});
const fnInitEcharts = (count, total, color, el) => {
const myChart = echarts.init(document.querySelector(el));
const option = {
grid: {
left: "10%",
right: "0%",
bottom: "0%",
top: "100%",
containLabel: true,
},
xAxis: {
show: false,
type: "value",
},
yAxis: {
type: "category",
show: false,
},
series: [
{
name: "次数",
type: "bar",
zlevel: 1,
itemStyle: {
barBorderRadius: 0,
color,
},
label: {
show: true,
position: "inside",
},
barWidth: 15,
data: [count],
},
{
name: "背景",
type: "bar",
barWidth: 15,
barGap: "-100%",
data: [total],
itemStyle: {
color: "#101f48",
barBorderRadius: 0,
},
},
],
};
myChart.setOption(option);
};
</script>
<style scoped lang="scss">
@ -199,11 +173,9 @@ const fnInitEcharts = (count, total, color, el) => {
}
}
#main1,
#main2,
#main3 {
.el-progress {
margin-left: 10px;
flex: 1;
height: 20px;
}
}
}