|
@@ -0,0 +1,450 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="Ds1bc3">
|
|
|
|
+ <div class="left-box">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="border"></div>
|
|
|
|
+ <div class="text">今日大厅各时段人流量分析</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="datas">
|
|
|
|
+ <dv-charts :option="option" style="width: 100; height: 100%" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right-box">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="text">业务平均办理时长(窗口办理)</div>
|
|
|
|
+ <div class="border"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="datas">
|
|
|
|
+ <div class="infos">
|
|
|
|
+ <transition-group class="active" name="active" tag="div">
|
|
|
|
+ <div
|
|
|
|
+ class="list"
|
|
|
|
+ v-for="(item, index) in pjblscData"
|
|
|
|
+ :key="item + index"
|
|
|
|
+ >
|
|
|
|
+ <div class="value">{{ item.value }}</div>
|
|
|
|
+ <div class="key">
|
|
|
|
+ {{
|
|
|
|
+ item.key.length > 5
|
|
|
|
+ ? item.key.substring(0, 5) + "..."
|
|
|
|
+ : item.key
|
|
|
|
+ }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ name: "Ds1bc3",
|
|
|
|
+
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ option: {
|
|
|
|
+ title: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ top: 80,
|
|
|
|
+ left: 50,
|
|
|
|
+ right: 20,
|
|
|
|
+ bottom: 40,
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ top: 35,
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ name: "自助机办理",
|
|
|
|
+ color: "#2FB383",
|
|
|
|
+ icon: "rect",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "排号办理",
|
|
|
|
+ color: "#4FACFE",
|
|
|
|
+ icon: "rect",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "智能设备办理",
|
|
|
|
+ color: "#FFC2A1",
|
|
|
|
+ icon: "rect",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "电子税务局办理",
|
|
|
|
+ color: "#A1C4FD",
|
|
|
|
+ icon: "rect",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontFamily: "苹方简R",
|
|
|
|
+ fontSize: 11,
|
|
|
|
+ fill: "#FFFFFF",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ data: [
|
|
|
|
+ "9:00",
|
|
|
|
+ "10:00",
|
|
|
|
+ "11:00",
|
|
|
|
+ "12:00",
|
|
|
|
+ "13:00",
|
|
|
|
+ "14:00",
|
|
|
|
+ "15:00",
|
|
|
|
+ "16:00",
|
|
|
|
+ "17:00",
|
|
|
|
+ ],
|
|
|
|
+ axisLine: {
|
|
|
|
+ style: {
|
|
|
|
+ stroke: "#D4D4D8",
|
|
|
|
+ lineWidth: 1,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ style: {
|
|
|
|
+ fill: "#FFFFFF",
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ fontFamily: "苹方简R",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ name: "单位:人次",
|
|
|
|
+ data: "value",
|
|
|
|
+ min: 0,
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ fill: "#FFFFFF",
|
|
|
|
+ fontSize: 10,
|
|
|
|
+ fontFamily: "苹方简R",
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ style: {
|
|
|
|
+ fill: "#FFFFFF",
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ fontFamily: "苹方简R",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ splitLine: {
|
|
|
|
+ style: {
|
|
|
|
+ stroke: "#D4D4D8",
|
|
|
|
+ lineWidth: 1,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: "自助机办理",
|
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
+ type: "line",
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ lineWidth: 4,
|
|
|
|
+ stroke: "#2FB383",
|
|
|
|
+ },
|
|
|
|
+ linePoint: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ lineArea: {
|
|
|
|
+ show: true,
|
|
|
|
+ gradient: ["rgba(47, 179, 131, 0.6)", "rgba(47, 179, 131, 0)"],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "排号办理",
|
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
+ type: "line",
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ lineWidth: 4,
|
|
|
|
+ stroke: "#4FACFE",
|
|
|
|
+ },
|
|
|
|
+ linePoint: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ lineArea: {
|
|
|
|
+ show: true,
|
|
|
|
+ gradient: ["rgba(79, 172, 254, 0.6)", "rgba(79, 172, 254, 0)"],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "智能设备办理",
|
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
+ type: "line",
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ lineWidth: 4,
|
|
|
|
+ stroke: "#FFC2A1",
|
|
|
|
+ },
|
|
|
|
+ linePoint: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ lineArea: {
|
|
|
|
+ show: true,
|
|
|
|
+ gradient: ["rgba(255, 194, 161, 0.6)", "rgba(255, 194, 161, 0)"],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "电子税务局办理",
|
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
+ type: "line",
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ lineWidth: 4,
|
|
|
|
+ stroke: "#A1C4FD",
|
|
|
|
+ },
|
|
|
|
+ linePoint: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ lineArea: {
|
|
|
|
+ show: true,
|
|
|
|
+ gradient: ["rgba(161, 196, 253, 0.6)", "rgba(253, 196, 161, 0)"],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ pjblscData: [],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ mounted() {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getYwpjblsc();
|
|
|
|
+ this.getJrdtgsdrllfx();
|
|
|
|
+ }, 1000);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ methods: {
|
|
|
|
+ getJrdtgsdrllfx() {
|
|
|
|
+ let a = [
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ ];
|
|
|
|
+ let b = [
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ ];
|
|
|
|
+ let c = [
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ ];
|
|
|
|
+ let d = [
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ Math.round(Math.random() * 1000),
|
|
|
|
+ ];
|
|
|
|
+ this.updeteJrdtgsdrllfx(a, b, c, d);
|
|
|
|
+ },
|
|
|
|
+ updeteJrdtgsdrllfx(zzj, ph, znsb, dzswj) {
|
|
|
|
+ let data = this.option;
|
|
|
|
+ data.series[0].data = zzj;
|
|
|
|
+ data.series[1].data = ph;
|
|
|
|
+ data.series[2].data = znsb;
|
|
|
|
+ data.series[3].data = dzswj;
|
|
|
|
+ this.option = { ...data };
|
|
|
|
+ },
|
|
|
|
+ getYwpjblsc() {
|
|
|
|
+ let data = [
|
|
|
|
+ { key: "办理业务一", value: "4分20秒" },
|
|
|
|
+ { key: "办理业务二", value: "3分12秒" },
|
|
|
|
+ { key: "办理业务三", value: "4分25秒" },
|
|
|
|
+ { key: "办理业务四办理业务四", value: "5分33秒" },
|
|
|
|
+ { key: "办理业务五", value: "4分44秒" },
|
|
|
|
+ { key: "办理业务六", value: "5分21秒" },
|
|
|
|
+ { key: "办理业务七", value: "4分20秒" },
|
|
|
|
+ { key: "办理业务八", value: "4分20秒" },
|
|
|
|
+ { key: "办理业务九", value: "4分20秒" },
|
|
|
|
+ ];
|
|
|
|
+ this.pjblscData = data;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.Ds1bc3 {
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ font-family: "苹方简R";
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .left-box,
|
|
|
|
+ .right-box {
|
|
|
|
+ width: calc(50% - 10px);
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+
|
|
|
|
+ .datas {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 0;
|
|
|
|
+ flex: 1;
|
|
|
|
+ background-image: url("@/assets/dataScreen1/bottom-center-3-bg.png");
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+
|
|
|
|
+ .infos {
|
|
|
|
+ padding: 30px 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ max-height: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .active-enter-active,
|
|
|
|
+ .active-leave-active {
|
|
|
|
+ transition: all 0.5s;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active-enter,
|
|
|
|
+ .active-leave-to {
|
|
|
|
+ opacity: 0;
|
|
|
|
+ transform: scale(0.5);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+
|
|
|
|
+ .list {
|
|
|
|
+ width: 33.33%;
|
|
|
|
+ height: 33.33%;
|
|
|
|
+ max-height: 85px;
|
|
|
|
+ background-image: var(--pjblscBg);
|
|
|
|
+ background-size: 100%;
|
|
|
|
+
|
|
|
|
+ .value,
|
|
|
|
+ .key {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 50%;
|
|
|
|
+ font-family: "苹方简R";
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ .value {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: var(--pjblscValue);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .key {
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list:nth-child(3n-2) {
|
|
|
|
+ --pjblscValue: #66ffff;
|
|
|
|
+ --pjblscBg: url("@/assets/dataScreen1/bottom-center-3-bg001.png");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list:nth-child(3n-1) {
|
|
|
|
+ --pjblscValue: #fdbc52;
|
|
|
|
+ --pjblscBg: url("@/assets/dataScreen1/bottom-center-3-bg002.png");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list:nth-child(3n) {
|
|
|
|
+ --pjblscValue: #29a3fe;
|
|
|
|
+ --pjblscBg: url("@/assets/dataScreen1/bottom-center-3-bg003.png");
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-box {
|
|
|
|
+ .title {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ background-image: linear-gradient(to right, #0825b7 0%, #01b3ff15 100%);
|
|
|
|
+
|
|
|
|
+ .border {
|
|
|
|
+ width: 3px;
|
|
|
|
+ height: 15px;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ margin-left: 15px;
|
|
|
|
+ width: max-content;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ color: #00edff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-box {
|
|
|
|
+ .title {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ background-image: linear-gradient(to left, #0825b7 0%, #01b3ff15 100%);
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ width: max-content;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ color: #00edff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .border {
|
|
|
|
+ margin-left: 15px;
|
|
|
|
+ width: 3px;
|
|
|
|
+ height: 15px;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|