|
|
|
|
@ -1,23 +1,40 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
|
|
|
|
|
<div class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
|
|
|
|
|
<div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
|
|
|
|
|
<div
|
|
|
|
|
class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]"
|
|
|
|
|
ref="echartsContainer"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
|
|
|
|
|
>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
|
|
|
|
|
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
|
|
|
|
|
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80"
|
|
|
|
|
>总人数</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">{{ totalPopulation }}</p>
|
|
|
|
|
<p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">
|
|
|
|
|
{{ totalPopulation }}
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<template v-for="(item, index) in peopleData">
|
|
|
|
|
<div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
|
|
|
|
|
:class="!index && 'mb-[1.85vh]'"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-end">
|
|
|
|
|
<img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
|
|
|
|
|
<span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
|
|
|
|
|
<span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{
|
|
|
|
|
item["itemName"]
|
|
|
|
|
}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<span class="text-[#733FF3] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
|
|
|
|
|
<span class="text-[#733FF3] text-[2.4vh] youshe">{{
|
|
|
|
|
item["itemVal"]
|
|
|
|
|
}}</span>
|
|
|
|
|
<span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -28,9 +45,9 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import { GetMonitorOperationCount } from '@/api/monitor';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import { GetMonitorOperationCount } from "@/api/monitor";
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
let chart = null;
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
@ -38,15 +55,15 @@ export default {
|
|
|
|
|
chartOptions: {
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
type: "gauge",
|
|
|
|
|
startAngle: 90,
|
|
|
|
|
endAngle: -270,
|
|
|
|
|
pointer: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
max: 100,
|
|
|
|
|
radius: '100%',
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
radius: "100%",
|
|
|
|
|
center: ["50%", "50%"],
|
|
|
|
|
progress: {
|
|
|
|
|
show: true,
|
|
|
|
|
overlap: false,
|
|
|
|
|
@ -54,7 +71,7 @@ export default {
|
|
|
|
|
clip: false,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
@ -62,11 +79,11 @@ export default {
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#9C85FA',
|
|
|
|
|
color: "#9C85FA",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#5531E7',
|
|
|
|
|
color: "#5531E7",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
global: false,
|
|
|
|
|
@ -75,7 +92,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: [[1, '#4F518C']],
|
|
|
|
|
color: [[1, "#4F518C"]],
|
|
|
|
|
opacity: 0.7,
|
|
|
|
|
width: 30,
|
|
|
|
|
},
|
|
|
|
|
@ -95,21 +112,21 @@ export default {
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: 86,
|
|
|
|
|
name: '首台准点率',
|
|
|
|
|
name: "首台准点率",
|
|
|
|
|
title: {
|
|
|
|
|
offsetCenter: ['0%', '20%'],
|
|
|
|
|
offsetCenter: ["0%", "20%"],
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
fontFamily: 'Microsoft YaHei',
|
|
|
|
|
color: '#fff',
|
|
|
|
|
overflow: 'break',
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
overflow: "break",
|
|
|
|
|
lineHeight: 20,
|
|
|
|
|
},
|
|
|
|
|
detail: {
|
|
|
|
|
valueAnimation: true,
|
|
|
|
|
offsetCenter: ['0%', '-15%'],
|
|
|
|
|
offsetCenter: ["0%", "-15%"],
|
|
|
|
|
fontSize: 40,
|
|
|
|
|
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
|
|
|
color: '#03FFFF',
|
|
|
|
|
fontFamily: "DIN-Bold,Microsoft YaHei",
|
|
|
|
|
color: "#03FFFF",
|
|
|
|
|
formatter: `{value}%`,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
@ -119,12 +136,12 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
peopleData: [
|
|
|
|
|
{
|
|
|
|
|
itemName: '进行中',
|
|
|
|
|
itemVal: '50',
|
|
|
|
|
itemName: "进行中",
|
|
|
|
|
itemVal: "50",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
itemName: '待进行',
|
|
|
|
|
itemVal: '300',
|
|
|
|
|
itemName: "待进行",
|
|
|
|
|
itemVal: "300",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
totalPopulation: 0,
|
|
|
|
|
@ -133,15 +150,21 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onGetPageData() {
|
|
|
|
|
let nowDay = dayjs().format('YYYY-MM-DD');
|
|
|
|
|
let nowDay = dayjs().format("YYYY-MM-DD");
|
|
|
|
|
if (this.$store.getters.isMock) {
|
|
|
|
|
nowDay = '2024-06-06';
|
|
|
|
|
nowDay = "2024-06-06";
|
|
|
|
|
}
|
|
|
|
|
GetMonitorOperationCount(nowDay).then(res => {
|
|
|
|
|
this.chartOptions['series'][0]['data'][0]['value'] = res['data']['firstPunctualityRate'].slice(0, -1);
|
|
|
|
|
this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
|
|
|
|
|
this.peopleData[1]['itemVal'] = res['data']['patWating'];
|
|
|
|
|
this.totalPopulation = res['data']['patCount'];
|
|
|
|
|
GetMonitorOperationCount(nowDay).then((res) => {
|
|
|
|
|
if (!res.data) {
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.chartOptions["series"][0]["data"][0]["value"] = res["data"][
|
|
|
|
|
"firstPunctualityRate"
|
|
|
|
|
].slice(0, -1);
|
|
|
|
|
this.peopleData[0]["itemVal"] = res["data"]["patOperationing"];
|
|
|
|
|
this.peopleData[1]["itemVal"] = res["data"]["patWating"];
|
|
|
|
|
this.totalPopulation = res["data"]["patCount"];
|
|
|
|
|
chart.setOption(this.chartOptions);
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
});
|
|
|
|
|
@ -156,20 +179,29 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.bgLeftTopBox {
|
|
|
|
|
background-image: url('@/assets/svg/Operation/LeftTop/Box.svg');
|
|
|
|
|
background-image: url("@/assets/svg/Operation/LeftTop/Box.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.bgTopLeftItemBox {
|
|
|
|
|
background-image: url('@/assets/svg/Operation/LeftTop/ItemBox.svg');
|
|
|
|
|
background-image: url("@/assets/svg/Operation/LeftTop/ItemBox.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.peopleItemBox {
|
|
|
|
|
background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
271deg,
|
|
|
|
|
rgba(85, 255, 212, 0.045) 2%,
|
|
|
|
|
rgba(35, 150, 121, 0.066) 99%
|
|
|
|
|
);
|
|
|
|
|
border: 1.5px solid;
|
|
|
|
|
border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
|
|
|
|
|
border-image: linear-gradient(
|
|
|
|
|
159deg,
|
|
|
|
|
rgba(169, 213, 255, 0.4) -8%,
|
|
|
|
|
rgba(169, 213, 255, 0) 38%
|
|
|
|
|
)
|
|
|
|
|
1.5;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
