高新区数据大屏

src/styles/index.css

@@ -21,4 +21,16 @@
 @font-face {
      font-family: 'YouSheBiaoTiHei';
      src: url('./files/YS.TTF');
+}
+
+/* dateScreen1 */
+
+@font-face {
+     font-family: 'DINOT-Regular';
+     src: url('./files/DINOT-REGULAR.TTF');
+}
+
+@font-face {
+     font-family: 'DS-Digital';
+     src: url('./files/DS-DIGI-1.TTF');
 }

src/utils/calendar.js

@@ -0,0 +1,62 @@
+const calendar = function (year, month) {
+    // 7 * 6 星期日 - 星期六 日历布局
+    let dates = [];
+    let lastMonth = month - 1 < 1 ? 12 : month - 1;
+    let lastYear = month - 1 < 1 ? year - 1 : year;
+    let firstDayWeek = getFirstDayWeek(year, month);
+    for (let i = 0; i < 42; i++) {
+        // 向日历补充插入上月后几天
+        if (i < firstDayWeek) {
+            let calendarData = {
+                day: countDays(lastYear, lastMonth) - firstDayWeek + i + 1,
+                month: lastMonth,
+                year: lastYear,
+                type: "last",
+            };
+            dates.push(calendarData);
+        }
+        // 向日历补充插入下月前几天
+        else if (i >= firstDayWeek + countDays(year, month)) {
+            let calendarData = {
+                day: i - (firstDayWeek + countDays(year, month)) + 1,
+                month: month + 1 > 12 ? 1 : month + 1,
+                year: month + 1 > 12 ? year + 1 : year,
+                type: "next",
+            };
+            dates.push(calendarData);
+        }
+        // 插入日历数据
+        else {
+            let calendarData = {
+                day: i - firstDayWeek + 1,
+                month: month,
+                year: year,
+                type: "now",
+            };
+            dates.push(calendarData);
+        }
+    }
+    // 获取当月总天数
+    function countDays(year, month) {
+        let date = new Date(year, month, 0); //传入年、月(这里的月份是 1 - 12)
+        return date.getDate();
+    }
+    // 获取当月第一天的星期
+    function getFirstDayWeek(year, month) {
+        let date = new Date(year, month - 1, 1); //传入年、月(这里的月份是 0 - 11)
+        return date.getDay(); // 0 - 6 （0 为星期日）
+    }
+
+    let calendar = {
+        dates: dates,
+        layout: ['日', '一', '二', '三', '四', '五', '六'],
+        nowDate: {
+            year: year,
+            month: month
+        }
+    }
+
+    return calendar;
+}
+
+export default calendar

src/views/dataScreen1/components/bottomCenter.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="dataScreen1BottomCenter">
+    <div class="DS1BC DS1BC_1">
+      <ds1bc1></ds1bc1>
+    </div>
+    <div class="DS1BC DS1BC_2">
+      <ds1bc2></ds1bc2>
+    </div>
+    <div class="DS1BC DS1BC_3">
+      <ds1bc3></ds1bc3>
+    </div>
+  </div>
+</template>
+
+<script>
+import ds1bc1 from "@/views/dataScreen1/components/bottomCenter/ds1bc1";
+import ds1bc2 from "@/views/dataScreen1/components/bottomCenter/ds1bc2";
+import ds1bc3 from "@/views/dataScreen1/components/bottomCenter/ds1bc3";
+export default {
+  name: "dataScreen1BottomCenter",
+
+  components: {
+    ds1bc1,
+    ds1bc2,
+    ds1bc3
+  },
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.dataScreen1BottomCenter {
+  padding: 0 0 10px 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .DS1BC {
+    width: 100%;
+    height: 0;
+  }
+
+  .DS1BC_1 {
+    flex: 13;
+  }
+
+  .DS1BC_2 {
+    flex: 45;
+  }
+
+  .DS1BC_3 {
+    flex: 39;
+  }
+}
+</style>

src/views/dataScreen1/components/bottomCenter/ds1bc1.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="Ds1bc1">
+    <div class="dates">
+      <div class="key">当天自助机办理</div>
+      <div class="value">{{ datas.zzj }}<span>件</span></div>
+    </div>
+    <div class="dates">
+      <div class="key">当天排队叫号办理</div>
+      <div class="value">{{ datas.pdjh }}<span>件</span></div>
+    </div>
+    <div class="dates">
+      <div class="key">当天电子税务局办理</div>
+      <div class="value">{{ datas.dzswj }}<span>件</span></div>
+    </div>
+    <div class="dates">
+      <div class="key">当天智能设备办理</div>
+      <div class="value">{{ datas.znsb }}<span>件</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bc1",
+
+  data() {
+    return {
+      datas: {},
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let data = {
+        zzj: Math.round(Math.random() * 1000),
+        pdjh: Math.round(Math.random() * 1000),
+        dzswj: Math.round(Math.random() * 1000),
+        znsb: Math.round(Math.random() * 1000),
+      };
+      this.datas = data;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bc1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  .dates {
+    width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .key {
+      padding: 8px 0;
+      width: 100%;
+      text-align: center;
+      font-size: 22px;
+      font-family: "苹方简R";
+      color: #0df2fe;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .value {
+      margin: 0 auto;
+      margin-bottom: 10px;
+      width: 190px;
+      height: 55px;
+      text-align: center;
+      font-size: 47px;
+      color: #0df2fe;
+      font-family: "DS-Digital";
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image: url("@/assets/dataScreen1/bottom-center-1-bg.png");
+      background-size: 100% 100%;
+
+      span {
+        margin-top: 8px;
+        margin-left: 15px;
+        font-family: "苹方简R";
+        font-size: 22.25px;
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomCenter/ds1bc2.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="Ds1bc2">
+    <div class="tip">数据根据当天&当月累计分析</div>
+    <div class="box">
+      <div class="title">电子税务局办理业务数据分析</div>
+      <div class="datas">
+        <div class="left">
+          <div class="charts-box">
+            <div class="charts">
+              <div class="chart-bg chart-bg-left"></div>
+              <div class="chart-tip">
+                <div class="chart-tip1">当天业务数据分析</div>
+              </div>
+              <div class="chart">
+                <dv-active-ring-chart
+                  :config="dayDatas"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <div class="infos">
+              <div class="info-list" v-if="dayDatas.data">
+                <div
+                  class="text"
+                  v-for="(item, index) in dayDatas.data"
+                  :key="index"
+                >
+                  {{
+                    item.name.length > 5
+                      ? item.name.substring(0, 4) + "..."
+                      : item.name
+                  }}<span>{{ item.value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="charts-box">
+            <div class="charts">
+              <div class="chart-bg chart-bg-right"></div>
+              <div class="chart-tip">
+                <div class="chart-tip1">当月业务数据分析</div>
+              </div>
+              <div class="chart">
+                <dv-active-ring-chart
+                  :config="monthDatas"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <div class="infos">
+              <div class="info-list" v-if="monthDatas.data">
+                <div
+                  class="text"
+                  v-for="(item, index) in monthDatas.data"
+                  :key="index"
+                >
+                  {{
+                    item.name.length > 5
+                      ? item.name.substring(0, 4) + "..."
+                      : item.name
+                  }}<span>{{ item.value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bc2",
+
+  data() {
+    return {
+      config: {
+        radius: "40%",
+        activeRadius: "40%",
+        lineWidth: 80,
+        activeTimeGap: 10000 * 10000,
+        color: ["#2DE1FD", "#6DD400", "#5C64FF", "#0099ff"],
+        data: [],
+        digitalFlopStyle: {
+          fontSize: 0,
+        },
+      },
+      dayDatas: {},
+      monthDatas: {},
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let day = [
+        {
+          name: "发票业务",
+          value: 120,
+        },
+        {
+          name: "文书业务",
+          value: 78,
+        },
+        {
+          name: "申报业务",
+          value: 66,
+        },
+        {
+          name: "其他业务",
+          value: 80,
+        },
+      ];
+      let month = [
+        {
+          name: "发票业务",
+          value: 1200,
+        },
+        {
+          name: "文书业务",
+          value: 780,
+        },
+        {
+          name: "申报业务",
+          value: 660,
+        },
+        {
+          name: "其他业务",
+          value: 800,
+        },
+      ];
+      this.updateDatas(day, month);
+    },
+    updateDatas(day, month) {
+      let config = this.config;
+      let dayDatas = Object.assign({}, config);
+      let monthDatas = Object.assign({}, config);
+      dayDatas.data = day;
+      monthDatas.data = month;
+      this.dayDatas = { ...dayDatas };
+      this.monthDatas = { ...monthDatas };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bc2 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url("@/assets/dataScreen1/bottom-center-2-bg.png");
+  background-size: 100% 100%;
+
+  .tip {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    width: max-content;
+    height: 16px;
+    line-height: 16px;
+    font-size: 14px;
+    font-family: "苹方简R";
+    color: #70c6fc;
+  }
+
+  .box {
+    padding: 15px 0 25px 0;
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简M";
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    .title {
+      padding-left: 25px;
+      width: 100%;
+      height: 42px;
+      line-height: 42px;
+      font-size: 30px;
+      color: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .datas {
+      width: 100%;
+      height: 0;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+
+      .left,
+      .right {
+        width: 0;
+        flex: 1;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .charts-box {
+          width: 255px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+
+          .charts {
+            padding: 30px;
+            position: relative;
+            margin-top: 30px;
+            width: 255px;
+            height: 255px;
+            box-sizing: border-box;
+
+            .chart-bg {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: 0;
+              width: 100%;
+              height: 100%;
+              background-image: url("@/assets/dataScreen1/bottom-center-2-bg1.png");
+              background-size: 100% 100%;
+              animation: chartsBg linear 6s infinite;
+              @keyframes chartsBg {
+                from {
+                  transform: rotate(0deg);
+                }
+                to {
+                  transform: var(--rotate);
+                }
+              }
+            }
+
+            .chart-tip {
+              position: absolute;
+              top: calc(50% - 50px);
+              left: calc(50% - 50px);
+              z-index: 10;
+              width: 100px;
+              height: 100px;
+              background: rgba(0, 19, 66, 0.7);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .chart-tip1 {
+                padding: 10px;
+                width: 70px;
+                height: 70px;
+                background: rgba(0, 19, 66, 0.7);
+                border-radius: 50%;
+                font-size: 10px;
+                font-family: "苹方简R";
+                color: #ffffff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+              }
+            }
+
+            .chart {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .infos {
+            padding-top: 10px;
+            width: 100%;
+            height: 0;
+            flex: 1;
+            box-sizing: border-box;
+
+            .info-list {
+              height: min-content;
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: space-between;
+
+              .text {
+                position: relative;
+                width: min-content;
+                min-width: 35%;
+                max-width: 50%;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: 14px;
+                color: #ffffff;
+                font-family: "苹方简R";
+
+                span {
+                  margin-left: 10px;
+                  font-family: "DS-Digital";
+                  color: #66ffff;
+                  font-size: 22px;
+                }
+              }
+
+              .text::before {
+                position: absolute;
+                left: -15px;
+                top: calc(50% - 5px);
+                content: "";
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: var(--infoTip);
+              }
+
+              .text:nth-child(2n) {
+                text-align: right;
+              }
+              .text:nth-child(4n-3) {
+                --infoTip: #2de1fd;
+              }
+
+              .text:nth-child(4n-2) {
+                --infoTip: #6dd400;
+              }
+
+              .text:nth-child(4n-1) {
+                --infoTip: #5c64ff;
+              }
+              .text:nth-child(4n) {
+                --infoTip: #0099ff;
+              }
+            }
+          }
+        }
+      }
+      .left {
+        margin-left: 40px;
+        --rotate: rotate(-360deg);
+      }
+      .right {
+        margin-right: 40px;
+        --rotate: rotate(360deg);
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomCenter/ds1bc3.vue

@@ -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>

src/views/dataScreen1/components/bottomLeft.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="dataScreen1BottomLeft">
+    <div class="DS1BL DS1BL_1">
+      <ds1bl1></ds1bl1>
+    </div>
+    <div class="DS1BL DS1BL_2">
+      <ds1bl2></ds1bl2>
+    </div>
+    <div class="DS1BL DS1BL_3">
+      <ds1bl3></ds1bl3>
+    </div>
+    <div class="DS1BL DS1BL_4">
+      <ds1bl4></ds1bl4>
+    </div>
+  </div>
+</template>
+
+<script>
+import ds1bl1 from "@/views/dataScreen1/components/bottomLeft/ds1bl1";
+import ds1bl2 from "@/views/dataScreen1/components/bottomLeft/ds1bl2";
+import ds1bl3 from "@/views/dataScreen1/components/bottomLeft/ds1bl3";
+import ds1bl4 from "@/views/dataScreen1/components/bottomLeft/ds1bl4";
+export default {
+  name: "dataScreen1BottomLeft",
+
+  components: {
+    ds1bl1,
+    ds1bl2,
+    ds1bl3,
+    ds1bl4,
+  },
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.dataScreen1BottomLeft {
+  padding: 5px 20px 10px 20px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .DS1BL {
+    width: 100%;
+    height: 0;
+  }
+
+  .DS1BL_1 {
+    flex: 24;
+  }
+
+  .DS1BL_2 {
+    flex: 29;
+  }
+
+  .DS1BL_3 {
+    flex: 24;
+  }
+
+  .DS1BL_4 {
+    flex: 20;
+  }
+}
+</style>

src/views/dataScreen1/components/bottomLeft/ds1bl1.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="Ds1bl1">
+    <div class="box">
+      <div class="title">
+        <div class="border"></div>
+        <div class="text">高新区营商环境</div>
+      </div>
+      <div class="datas">
+        <transition name="active">
+          <div class="infos" v-if="datas.length > 0">
+            <div class="left">
+              <div class="round-contrainer">
+                <div
+                  :class="Index == index ? 'round round-active' : 'round'"
+                  v-for="(item, index) in datas"
+                  :key="index"
+                  @click="chage(index)"
+                >
+                  <div class="text">{{ item.name }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="title">{{ datas[Index].name }}</div>
+              <div class="content" :key="Index">
+                <marquee class="marquee" scrollamount="3" direction="up">
+                  <div
+                    class="list"
+                    v-for="(item, index) in datas[Index].datas"
+                    :key="index"
+                  >
+                    <span>{{ item.time }}</span
+                    >{{ item.content }}
+                  </div>
+                </marquee>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bl1",
+
+  data() {
+    return {
+      chageTimer: null,
+      datas: [],
+      Index: 0,
+    };
+  },
+
+  mounted() {
+    this.chage(0);
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    chage(e) {
+      this.Index = e;
+      clearTimeout(this.chageTimer);
+      this.chageTimer = setTimeout(() => {
+        let index = this.Index < this.datas.length - 1 ? this.Index + 1 : 0;
+        this.chage(index);
+      }, 15 * 1000);
+    },
+    getDatas() {
+      let data = [
+        {
+          name: "营商环境",
+          datas: [
+            {
+              time: "2023-06-19",
+              content: "“小”方寸里的“大”服务",
+            },
+            {
+              time: "2023-06-19",
+              content: "“小”方寸里的“大”服务",
+            },
+            {
+              time: "2023-06-19",
+              content: "“小”方寸里的“大”服务",
+            },
+            {
+              time: "2023-06-19",
+              content: "“小”方寸里的“大”服务",
+            },
+            {
+              time: "2023-06-19",
+              content: "“小”方寸里的“大”服务",
+            },
+            {
+              time: "2023-06-19",
+              content:
+                "“小”方寸里的“大”服务“小”方寸里的“大”服务“小”方寸里的“大”服务“小”方寸里的“大”服务“小”方寸里的“大”服务",
+            },
+          ],
+        },
+        {
+          name: "投资高新",
+          datas: [
+            {
+              time: "2023-06-19",
+              content: "投资高新投资高新投资高新投资高新",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资高新投资高新投资高新投资高新投资高新",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资高新投资高新投资高新投资高新投资高新投资高新",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资高新投资高新投资高新投资高新投资高新投资高新",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资高新投资高新投资高新投资高新",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资高新",
+            },
+          ],
+        },
+        {
+          name: "投资指南",
+          datas: [
+            {
+              time: "2023-06-19",
+              content: "投资指南投资指南投资指南投资指南",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资指南投资指南投资指南投资指南投资指南投资指南",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资指南投资指南投资指南投资指南投资指南投资指南",
+            },
+            {
+              time: "2023-06-19",
+              content:
+                "投资指南投资指南投资指南投资指南投资指南投资指南投资指南",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资指南投资指南投资指南",
+            },
+            {
+              time: "2023-06-19",
+              content: "投资指南投资指南投资指南投资指南投资指南",
+            },
+          ],
+        },
+        {
+          name: "优惠政策",
+          datas: [
+            {
+              time: "2023-06-19",
+              content: "优惠政策",
+            },
+            {
+              time: "2023-06-19",
+              content: "优惠政策优惠政策",
+            },
+            {
+              time: "2023-06-19",
+              content: "优惠政策优惠政策优惠政策",
+            },
+            {
+              time: "2023-06-19",
+              content: "优惠政策优惠政策优惠政策优惠政策优惠政策",
+            },
+            {
+              time: "2023-06-19",
+              content: "优惠政策优惠政策",
+            },
+            {
+              time: "2023-06-19",
+              content: "优惠政策优惠政策优惠政策优惠政策优惠政策优惠政策",
+            },
+          ],
+        },
+      ];
+      this.datas = data;
+    },
+  },
+  beforeDestroy() {
+    clearTimeout(this.chageTimer);
+    this.chageTimer = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bl1 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-bottom: 10px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      background-image: linear-gradient(to right, #0825b7 0%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+
+      .active-enter-active,
+      .active-leave-active {
+        transition: all 0.5s;
+      }
+
+      .active-enter,
+      .active-leave-to {
+        opacity: 0;
+        transform: scale(0);
+      }
+
+      .infos {
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .left {
+          width: 175px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+
+          .round-contrainer {
+            padding-left: 15px;
+            padding-right: 10px;
+            width: 150px;
+            height: 150px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+
+            .round {
+              padding: 20px;
+              width: 70px;
+              height: 70px;
+              background-image: url("@/assets/dataScreen1/bottom-left-1-button2.png");
+              background-size: 100% 100%;
+              user-select: none;
+              cursor: pointer;
+              box-sizing: border-box;
+              --bl1RoundBg: rotate(-360deg);
+              animation: 5s round linear infinite;
+
+              .text {
+                width: 100%;
+                height: 100%;
+                font-size: 12px;
+                text-align: center;
+                color: #ffffff;
+                letter-spacing: 2px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                --bl1RoundBg: rotate(360deg);
+                animation: 5s round linear infinite;
+              }
+            }
+
+            @keyframes round {
+              from {
+                transform: rotate(0);
+              }
+              to {
+                transform: var(--bl1RoundBg);
+              }
+            }
+
+            .round-active {
+              --bl1RoundBg: rotate(360deg);
+              animation: 5s round linear infinite, 1s opacitys;
+              background-image: url("@/assets/dataScreen1/bottom-left-1-button1.png");
+
+              .text {
+                --bl1RoundBg: rotate(-360deg);
+                animation: 5s round linear infinite;
+              }
+            }
+
+            @keyframes opacitys {
+              0% {
+                opacity: 0.8;
+                scale: 1;
+              }
+              50% {
+                opacity: 0.25;
+                scale: 0.9;
+              }
+              100% {
+                opacity: 1;
+                scale: 1;
+              }
+            }
+          }
+        }
+
+        .right {
+          padding: 6px 15px 6px 0;
+          width: 0;
+          flex: 1;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+
+          .title {
+            width: 100%;
+            height: 21px;
+            line-height: 21px;
+            font-size: 15px;
+            color: #ffffff;
+            background: transparent;
+          }
+
+          .content {
+            width: 100%;
+            height: 0;
+            flex: 1;
+
+            .marquee {
+              width: 100%;
+              height: 100%;
+
+              .list {
+                padding: 2px 5px;
+                margin-top: 8px;
+                width: 100%;
+                min-height: 22px;
+                line-height: 22px;
+                font-size: 12px;
+                color: #ffffff;
+                background: rgba(0, 95, 178, 0.53);
+                box-sizing: border-box;
+                word-break: break-all;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+
+                span {
+                  margin-right: 5px;
+                  color: #ffb956;
+                }
+              }
+              .list:nth-child(2n) {
+                background: rgba(1, 75, 140, 0.53);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomLeft/ds1bl2.vue

@@ -0,0 +1,455 @@
+<template>
+  <div class="Ds1bl2">
+    <div class="box">
+      <div class="title">
+        <div class="border"></div>
+        <div class="text">税局管户情况分析</div>
+      </div>
+      <div class="datas">
+        <div class="infos">
+          <div class="controls">
+            <div class="left">
+              <div
+                class="week"
+                :style="type == 'week' ? 'color:#ffffff' : 'color:#25A4FF'"
+                @click="chage('week')"
+              >
+                近一周
+              </div>
+              <div
+                class="year"
+                :style="type == 'year' ? 'color:#ffffff' : 'color:#25A4FF'"
+                @click="chage('year')"
+              >
+                近半年
+              </div>
+            </div>
+            <div class="right">
+              <div class="tip1">注销管户</div>
+              <div class="tip2">新增管户</div>
+            </div>
+          </div>
+          <div class="chart">
+            <transition-group class="active" name="active" tag="div">
+              <div
+                class="list"
+                v-for="(item, index) in datas[type]"
+                :key="item + index"
+              >
+                <div class="time">{{ item.time }}</div>
+                <div class="data">
+                  <div class="data1">
+                    <div
+                      class="pro-box"
+                      :style="'width:' + setStyle(item, 'zxgh')"
+                    >
+                      <div class="value">{{ item.zxgh }}</div>
+                      <div class="pro"></div>
+                    </div>
+                  </div>
+                  <div class="data2">
+                    <div
+                      class="pro-box"
+                      :style="'width:' + setStyle(item, 'xzgh')"
+                    >
+                      <div class="pro"></div>
+                      <div class="value">{{ item.xzgh }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </transition-group>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bl2",
+
+  data() {
+    return {
+      chageTimer: null,
+      type: "week",
+      datas: {
+        week: [],
+        year: [],
+      },
+    };
+  },
+
+  mounted() {
+    this.chage("week");
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    chage(e) {
+      this.type = e;
+      clearTimeout(this.chageTimer);
+      this.chageTimer = setTimeout(() => {
+        let type = this.type == "week" ? "year" : "week";
+        this.chage(type);
+      }, 10 * 1000);
+    },
+    async getDatas() {
+      let week = [
+        {
+          time: "08-01",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-02",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-03",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-04",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-05",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-06",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08-07",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+      ];
+      let year = [
+        {
+          time: "03",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "04",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "05",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "06",
+          zxgh: 0,
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "07",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+        {
+          time: "08",
+          zxgh: Math.round(Math.random() * 1000),
+          xzgh: Math.round(Math.random() * 1000),
+        },
+      ];
+      this.datas = {
+        week: await this.formatDatas(week),
+        year: await this.formatDatas(year),
+      };
+    },
+    formatDatas(e) {
+      return new Promise((resolve, reject) => {
+        let zxghArr = Object.assign([], e);
+        let xzghArr = Object.assign([], e);
+        zxghArr.sort((a, b) => {
+          return b.zxgh - a.zxgh;
+        });
+        xzghArr.sort((a, b) => {
+          return b.xzgh - a.xzgh;
+        });
+        let pros = {
+          zxgh: zxghArr[0].zxgh / 100,
+          xzgh: xzghArr[0].xzgh / 100,
+        };
+        let res = e.map((item) => {
+          item.pros = pros;
+          return item;
+        });
+        resolve(res);
+      });
+    },
+    setStyle(item, type) {
+      if (item.pros) {
+        if (item.pros[type]) {
+          return item[type] / item.pros[type] + "%";
+        } else {
+          return "max-content";
+        }
+      } else {
+        return "max-content";
+      }
+    },
+  },
+  beforeDestroy() {
+    clearTimeout(this.chageTimer);
+    this.chageTimer = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bl2 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-bottom: 10px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      background-image: linear-gradient(to right, #0825b7 0%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+
+      .infos {
+        padding: 10px;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+
+        .controls {
+          width: 100%;
+          height: 28px;
+          display: flex;
+          align-items: flex-end;
+          justify-content: space-between;
+
+          .left {
+            width: max-content;
+            height: 100%;
+            display: flex;
+
+            .week,
+            .year {
+              width: 76px;
+              height: 100%;
+              font-size: 12px;
+              color: #ffffff;
+              background-image: url("@/assets/dataScreen1/bottom-left-2-button.png");
+              background-size: cover;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              user-select: none;
+              cursor: pointer;
+              transition: all 1s;
+            }
+
+            .year {
+              margin-left: 10px;
+            }
+          }
+
+          .right {
+            width: max-content;
+            height: 16px;
+            display: flex;
+
+            .tip1,
+            .tip2 {
+              position: relative;
+              padding-left: 20px;
+              width: max-content;
+              height: 16px;
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.6);
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+            }
+
+            .tip1 {
+              --blTipBg: linear-gradient(180deg, #ffc2a1, #ffb1bd);
+            }
+
+            .tip2 {
+              margin-left: 15px;
+              --blTipBg: linear-gradient(43deg, #2de1fd 13%, #0e5fff 86%);
+            }
+            .tip1::before,
+            .tip2::before {
+              position: absolute;
+              left: 0;
+              top: 3px;
+              content: "";
+              width: 10px;
+              height: 10px;
+              background: var(--blTipBg);
+            }
+          }
+        }
+
+        .chart {
+          margin-top: 10px;
+          width: 100%;
+          height: calc(100% - 38px);
+
+          .active-enter-active,
+          .active-leave-active {
+            transition: all 0.5s;
+          }
+
+          .active-enter,
+          .active-leave-to {
+            opacity: 0;
+            transform: scale(0);
+          }
+
+          .active {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .list {
+              width: 100%;
+              height: 18px;
+              display: flex;
+
+              .time {
+                margin: 0 10px;
+                width: 50px;
+                height: 100%;
+                font-size: 12px;
+                color: #ffffff;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+
+              .data {
+                width: 0;
+                flex: 1;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+
+                .data1,
+                .data2 {
+                  width: calc(50% - 30px);
+                  height: 100%;
+                  display: flex;
+
+                  .pro-box {
+                    position: relative;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    transition: all 1s 0.4s;
+
+                    .value {
+                      position: absolute;
+                      top: 0;
+                      width: max-content;
+                      height: 100%;
+                      font-size: 12px;
+                      color: rgba(255, 255, 255, 0.4);
+                      display: flex;
+                      align-items: center;
+                    }
+                    .pro {
+                      width: 0;
+                      flex: 1;
+                      height: 100%;
+                      background: var(--bl2ProBg);
+                    }
+                  }
+                }
+
+                .data1 {
+                  justify-content: flex-end;
+                  --bl2ProBg: linear-gradient(
+                    to left,
+                    rgba(255, 194, 161, 1) 0%,
+                    rgba(255, 194, 161, 0) 100%
+                  );
+
+                  .pro-box {
+                    .value {
+                      left: -30px;
+                      justify-content: flex-start;
+                    }
+                  }
+                }
+
+                .data2 {
+                  margin-left: 6px;
+                  justify-content: flex-start;
+                  --bl2ProBg: linear-gradient(
+                    to right,
+                    rgba(14, 95, 255, 1) 20%,
+                    rgba(45, 225, 253, 1) 100%
+                  );
+
+                  .pro-box {
+                    .value {
+                      right: -30px;
+                      justify-content: flex-end;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomLeft/ds1bl3.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="Ds1bl3">
+    <div class="box">
+      <div class="title">
+        <div class="border"></div>
+        <div class="text">大厅办理业务量TOP5</div>
+      </div>
+      <div class="datas">
+        <div class="infos">
+          <transition-group class="active" name="active" tag="div">
+            <div
+              class="list"
+              v-for="(item, index) in datas"
+              :key="item + index"
+            >
+              <div class="title">
+                <span v-if="item.name.length < 7">{{ item.name }}</span>
+                <marquee v-else>{{ item.name }}</marquee>
+              </div>
+              <div class="content">
+                <div class="pro-contrain">
+                  <div class="pro" :style="'--pro:' + setStyle(item.pro)">
+                    <div class="text">{{ item.value }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition-group>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bl3",
+
+  data() {
+    return { datas: [] };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let data = [
+        {
+          name: "申报业务",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "发票代开业务",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "双屏辅导",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "车购税缴纳",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "发票领用",
+          value: Math.round(Math.random() * 10000),
+        },
+      ];
+      this.toSort(data);
+    },
+    async toSort(data) {
+      let newData = data.slice();
+      newData = newData.sort((a, b) => {
+        return b.value - a.value;
+      });
+      this.datas = [...newData];
+      let pro = await this.scale(newData[0].value);
+      let res = newData.map((item) => {
+        let obj = item;
+        obj.pro = (obj.value / pro).toFixed(0) + "%";
+        return obj;
+      });
+      setTimeout(() => {
+        this.datas = [...res];
+      }, 0);
+    },
+    scale(e) {
+      return new Promise((resolve, reject) => {
+        let max = e + e / 20;
+        let pro = max / 100;
+        resolve(pro);
+      });
+    },
+    setStyle(e) {
+      if (e) {
+        return e;
+      } else {
+        return "0%";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bl3 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-bottom: 10px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      background-image: linear-gradient(to right, #0825b7 0%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+
+      .infos {
+        padding: 8px 15px 8px 20px;
+        width: 100%;
+        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-direction: column;
+          justify-content: space-between;
+
+          .list {
+            width: 100%;
+            height: 20px;
+            display: flex;
+
+            .title {
+              width: 72px;
+              height: 100%;
+              font-size: 12px;
+              color: #ffffff;
+              display: flex;
+              align-items: center;
+              justify-content: flex-end;
+              background: transparent;
+            }
+
+            .content {
+              margin-left: 10px;
+              width: 0;
+              flex: 1;
+              height: 100%;
+              display: flex;
+              align-items: center;
+
+              .pro-contrain {
+                position: relative;
+                width: 100%;
+                height: 12px;
+                border-radius: 6px;
+                background: #183a78;
+
+                .pro {
+                  position: absolute;
+                  left: 0;
+                  top: -4px;
+                  z-index: 1;
+                  width: var(--pro);
+                  height: 20px;
+                  border-radius: 10px;
+                  background: var(--dtbl5Bg);
+                  transition: all 1s 0.5s;
+
+                  .text {
+                    padding-left: 15px;
+                    width: 100%;
+                    height: 100%;
+                    font-size: 10px;
+                    color: #ffffff;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    box-sizing: border-box;
+                  }
+                }
+              }
+            }
+          }
+
+          .list:nth-child(1) {
+            --dtbl5Bg: linear-gradient(90deg, #2a3c9f, #2982ff);
+          }
+          .list:nth-child(2) {
+            --dtbl5Bg: linear-gradient(90deg, #236b59, #29ffc9);
+          }
+          .list:nth-child(3) {
+            --dtbl5Bg: linear-gradient(90deg, #4d3f1e, #facd7f);
+          }
+          .list:nth-child(4) {
+            --dtbl5Bg: linear-gradient(90deg, #3a144f, #7948ea);
+          }
+          .list:nth-child(5) {
+            --dtbl5Bg: linear-gradient(90deg, #0a3e91, #817fff);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomLeft/ds1bl4.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="Ds1bl4">
+    <div class="box">
+      <div class="title">
+        <div class="border"></div>
+        <div class="text">税局热门事项TOP3</div>
+      </div>
+      <div class="datas">
+        <div class="infos">
+          <transition-group class="active" name="active" tag="div">
+            <div
+              class="list"
+              v-for="(item, index) in datas"
+              :key="item + index"
+            >
+              <div class="icon"></div>
+              <div class="content">
+                <div class="text">
+                  <span v-if="item.name.length < 23">{{ item.name }}</span>
+                  <marquee v-else>{{ item.name }}</marquee>
+                </div>
+                <div class="pro-contrain">
+                  <div class="pro" :style="'--pro:' + setStyle(item.pro)"></div>
+                </div>
+              </div>
+              <div class="count">{{ item.value }}<span>件</span></div>
+            </div>
+          </transition-group>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1bl4",
+
+  data() {
+    return {
+      datas: [],
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let data = [
+        {
+          name: "《残疾人就业保障金缴费申报表》《残疾人就业保障金缴费申报表》",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "《通用申报表（税及附征税费）》",
+          value: Math.round(Math.random() * 10000),
+        },
+        {
+          name: "《增值税及附加税费申报表（一般纳税人适用）》",
+          value: Math.round(Math.random() * 10000),
+        },
+      ];
+      this.toSort(data);
+    },
+    async toSort(data) {
+      let newData = data.slice();
+      newData = newData.sort((a, b) => {
+        return b.value - a.value;
+      });
+      this.datas = [...newData];
+      let pro = await this.scale(newData[0].value);
+      let res = newData.map((item) => {
+        let obj = item;
+        obj.pro = (obj.value / pro).toFixed(0) + "%";
+        return obj;
+      });
+      setTimeout(() => {
+        this.datas = [...res];
+      }, 0);
+    },
+    scale(e) {
+      return new Promise((resolve, reject) => {
+        let max = e + e / 20;
+        let pro = max / 100;
+        resolve(pro);
+      });
+    },
+    setStyle(e) {
+      if (e) {
+        return e;
+      } else {
+        return "0%";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1bl4 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-bottom: 10px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      background-image: linear-gradient(to right, #0825b7 0%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+
+      .infos {
+        padding: 10px 15px 10px 20px;
+        width: 100%;
+        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-direction: column;
+          justify-content: space-between;
+
+          .list {
+            width: 100%;
+            height: 30px;
+            display: flex;
+
+            .icon {
+              width: 25px;
+              height: 30px;
+              background-image: var(--pmIcon);
+              background-size: 100% 100%;
+            }
+
+            .content {
+              margin-left: 15px;
+              width: 0;
+              flex: 1;
+              height: 30px;
+              display: flex;
+              flex-direction: column;
+
+              .text {
+                width: 100%;
+                height: 0;
+                flex: 1;
+                font-size: 13px;
+                color: #fdfffe;
+                font-family: "苹方简R";
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+
+              .pro-contrain {
+                width: 100%;
+                height: 7px;
+                border-radius: 3.5px;
+                background: #183a78;
+
+                .pro {
+                  width: var(--pro);
+                  height: 7px;
+                  border-radius: 3.5px;
+                  background: linear-gradient(90deg, #4facfe, #00f2fe);
+                  transition: all 1s 0.5s;
+                }
+              }
+            }
+
+            .count {
+              margin-left: 5px;
+              width: 60px;
+              height: 100%;
+              font-size: 16px;
+              color: #fea932;
+              font-family: "苹方简R";
+              display: flex;
+              align-items: flex-end;
+              justify-content: flex-end;
+
+              span {
+                margin-left: 2px;
+                color: #3dbcfe;
+                font-size: 12px;
+              }
+            }
+          }
+          .list:nth-child(1) {
+            --pmIcon: url("@/assets/dataScreen1/bottom-left-pm1.png");
+          }
+          .list:nth-child(2) {
+            --pmIcon: url("@/assets/dataScreen1/bottom-left-pm2.png");
+          }
+          .list:nth-child(3) {
+            --pmIcon: url("@/assets/dataScreen1/bottom-left-pm3.png");
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="dataScreen1BottomRight">
+    <div class="DS1BR DS1BR_1">
+      <ds1br1></ds1br1>
+    </div>
+    <div class="DS1BR DS1BR_2">
+      <ds1br2></ds1br2>
+    </div>
+    <div class="DS1BR DS1BR_3">
+      <ds1br3></ds1br3>
+    </div>
+    <div class="DS1BR DS1BR_4">
+      <ds1br4></ds1br4>
+    </div>
+  </div>
+</template>
+
+<script>
+import ds1br1 from "@/views/dataScreen1/components/bottomRight/ds1br1";
+import ds1br2 from "@/views/dataScreen1/components/bottomRight/ds1br2";
+import ds1br3 from "@/views/dataScreen1/components/bottomRight/ds1br3";
+import ds1br4 from "@/views/dataScreen1/components/bottomRight/ds1br4";
+export default {
+  name: "dataScreen1BottomRight",
+
+  components: {
+    ds1br1,
+    ds1br2,
+    ds1br3,
+    ds1br4,
+  },
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.dataScreen1BottomRight {
+  padding: 5px 20px 10px 20px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .DS1BR {
+    width: 100%;
+    height: 0;
+  }
+
+  .DS1BR_1 {
+    flex: 24;
+  }
+
+  .DS1BR_2 {
+    flex: 29;
+  }
+
+  .DS1BR_3 {
+    flex: 24;
+  }
+
+  .DS1BR_4 {
+    flex: 20;
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight/ds1br1.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="Ds1br1">
+    <div class="box">
+      <div class="title">
+        <div class="text">便民办税日历</div>
+        <div class="border"></div>
+      </div>
+      <div class="datas">
+        <div class="left">
+          <marquee class="marquee" scrollamount="3" direction="up">
+            <div class="list" v-for="(item, index) in 10" :key="index">
+              <div class="title">[01日-31日]</div>
+              <div class="content">
+                次申报缴纳防空地下室易地建设费、排污权出让收入、水土保持补偿费、国有土地使用权出让收入、国有土地收益基金收入、农业土地开发资金收入、矿产资源专项收入（矿业权出让收益、探矿权、采矿权使用费收入）、土地闲置费。申报缴纳海域使用金、无居民海岛使用金[0
+              </div>
+            </div>
+          </marquee>
+        </div>
+        <div class="right">
+          <transition name="active">
+            <div v-if="calendars.nowDate" class="calendar">
+              <div class="title">
+                <div class="year lasty" @click="lastChage(1)"></div>
+                <div class="month lastm" @click="lastChage(0)"></div>
+                <div class="text" @click="toNowDate()">
+                  {{ calendars.nowDate.year }}年{{ calendars.nowDate.month }}月
+                </div>
+                <div class="month nextm" @click="nextChage(0)"></div>
+                <div class="year nexty" @click="nextChage(1)"></div>
+              </div>
+              <div class="weeks">
+                <div
+                  class="week"
+                  v-for="(item, index) in calendars.layout"
+                  :key="index"
+                >
+                  <span>{{ item }}</span>
+                </div>
+              </div>
+              <div class="dates">
+                <div
+                  class="date"
+                  v-for="(item, index) in calendars.dates"
+                  :key="index"
+                >
+                  <div
+                    :class="
+                      item.year === nowDate.year
+                        ? item.month === nowDate.month
+                          ? item.day === nowDate.day
+                            ? item.type === 'now'
+                              ? 'day day-active'
+                              : 'day'
+                            : 'day'
+                          : 'day'
+                        : 'day'
+                    "
+                    @click="dayFun(item)"
+                  >
+                    <span
+                      :class="
+                        item.type !== 'now'
+                          ? 'dayText1'
+                          : index % 7 === 0
+                          ? 'dayText2'
+                          : (index + 1) % 7 === 0
+                          ? 'dayText2'
+                          : ''
+                      "
+                      >{{ item.day }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import calendar from "@/utils/calendar";
+export default {
+  name: "Ds1br1",
+
+  data() {
+    return {
+      calendars: {},
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getCalendar();
+    }, 1000);
+  },
+
+  methods: {
+    getCalendar() {
+      let year = new Date().getFullYear();
+      let month = new Date().getMonth() + 1;
+      let calendars = calendar(year, month);
+      this.calendars = calendars;
+      let date = new Date();
+      let now = {
+        day: date.getDate(),
+        month: date.getMonth() + 1,
+        year: date.getFullYear(),
+      };
+      this.nowDate = now;
+      clearTimeout(this.dateTimer);
+      this.dateTimer = setTimeout(() => {
+        this.getCalendar();
+      }, 60 * 60 * 1000);
+    },
+    toNowDate() {
+      this.getCalendar();
+    },
+    lastChage(e) {
+      let now = this.calendars.nowDate;
+      switch (e) {
+        default:
+          return;
+        case 0:
+          var year = now.month - 1 < 1 ? now.year - 1 : now.year;
+          var month = now.month - 1 < 1 ? 12 : now.month - 1;
+          var calendars = calendar(year, month);
+          this.calendars = calendars;
+          break;
+        case 1:
+          var year = now.year - 1;
+          var month = now.month;
+          var calendars = calendar(year, month);
+          this.calendars = calendars;
+          break;
+      }
+    },
+    nextChage(e) {
+      let now = this.calendars.nowDate;
+      switch (e) {
+        default:
+          return;
+        case 0:
+          var year = now.month + 1 > 12 ? now.year + 1 : now.year;
+          var month = now.month + 1 > 12 ? 12 : now.month + 1;
+          var calendars = calendar(year, month);
+          this.calendars = calendars;
+          break;
+        case 1:
+          var year = now.year + 1;
+          var month = now.month;
+          var calendars = calendar(year, month);
+          this.calendars = calendars;
+          break;
+      }
+    },
+    dayFun(e) {
+      if (e.type === "last") {
+        this.lastChage(0);
+      } else if (e.type === "next") {
+        this.nextChage(0);
+      }
+    },
+  },
+  beforeDestroy() {
+    clearTimeout(this.dateTimer);
+    this.dateTimer = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1br1 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .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%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+      display: flex;
+
+      .left {
+        padding: 10px 0 2px 15px;
+        width: 0;
+        flex: 1;
+        box-sizing: border-box;
+
+        .marquee {
+          width: 100%;
+          height: 100%;
+
+          .title {
+            margin: 0;
+            width: 100%;
+            height: 18px;
+            min-height: 18px;
+            line-height: 18px;
+            font-size: 12px;
+            color: #ffb956;
+            justify-content: flex-start;
+            background: transparent;
+          }
+
+          .content {
+            width: 100%;
+            min-height: 18px;
+            line-height: 18px;
+            font-size: 10px;
+            color: #fffefe;
+          }
+        }
+      }
+
+      .active-enter-active,
+      .active-leave-active {
+        transition: all 0.5s;
+      }
+
+      .active-enter,
+      .active-leave-to {
+        opacity: 0;
+        transform: scale(0);
+      }
+
+      .right {
+        padding: 8px 10px;
+        width: 235px;
+        height: 100%;
+        box-sizing: border-box;
+
+        .calendar {
+          width: 100%;
+          height: 100%;
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.1);
+          user-select: none;
+
+          .title {
+            margin: 0;
+            width: 100%;
+            height: 25px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 5px 5px 0px 0px;
+            display: flex;
+            align-items: center;
+
+            .year {
+              width: 22px;
+              height: 21px;
+              transform: scale(0.6);
+              cursor: pointer;
+            }
+            .lasty {
+              margin: 0 0 0 8px;
+              background-image: url("@/assets/dataScreen1/lastY.png");
+            }
+            .nexty {
+              margin: 0 8px 0 0;
+              background-image: url("@/assets/dataScreen1/nextY.png");
+            }
+
+            .text {
+              width: 0;
+              flex: 1;
+              height: 100%;
+              font-size: 12px;
+              color: #fdfffe;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+
+            .month {
+              width: 14px;
+              height: 21px;
+              transform: scale(0.6);
+              cursor: pointer;
+            }
+            .lastm {
+              background-image: url("@/assets/dataScreen1/lastM.png");
+            }
+            .nextm {
+              background-image: url("@/assets/dataScreen1/nextM.png");
+            }
+          }
+
+          .weeks {
+            width: 100%;
+            height: calc((100% - 25px) / 7);
+            display: flex;
+
+            .week {
+              width: 0;
+              flex: 1;
+              height: 100%;
+              color: #fdfffe;
+              font-size: 10px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              span {
+                transform: scale(0.8);
+              }
+            }
+          }
+
+          .dates {
+            width: 100%;
+            height: calc((100% - 25px) / 7 * 6);
+            display: flex;
+            flex-wrap: wrap;
+
+            .date {
+              width: calc(100% / 7);
+              height: calc(100% / 6);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .day {
+                width: 16px;
+                height: 16px;
+                font-size: 8px;
+                color: #fdfffe;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                span {
+                  transform: scale(0.7);
+                }
+
+                .dayText1 {
+                  color: rgba(253, 255, 254, 0.4);
+                }
+
+                .dayText2 {
+                  color: #ff0101;
+                }
+              }
+
+              .day:hover {
+                background: #00257a;
+              }
+
+              .day-active {
+                background: #fbaf07 !important;
+                color: #011562 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight/ds1br2.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="Ds1br2">
+    <div class="box">
+      <div class="title">
+        <div class="text">近五年税收情况公示</div>
+        <div class="border"></div>
+      </div>
+      <div class="datas">
+        <dv-charts :option="option" style="width: 100%; height: 100%" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1br2",
+
+  data() {
+    return {
+      option: {
+        title: {
+          show: false,
+        },
+        grid: {
+          top: 45,
+          left: 60,
+          right: 20,
+          bottom: 35,
+        },
+        xAxis: {
+          name: "",
+          data: ["", "", "", "", ""],
+          axisLine: {
+            style: {
+              stroke: "#193691",
+              lineWidth: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            style: {
+              fill: "#FFFFFF",
+              fontSize: 12,
+              fontFamily: "苹方简R",
+            },
+          },
+        },
+        yAxis: {
+          name: "单位:亿元",
+          data: "value",
+          min: 0,
+          nameTextStyle: {
+            fill: "#ffffff",
+            fontSize: 14,
+            fontFamily: "苹方简R",
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            style: {
+              fill: "#fff",
+              fontSize: 12,
+              fontFamily: "苹方简R",
+            },
+          },
+          splitLine: {
+            style: {
+              stroke: "#193691",
+              lineWidth: 1,
+            },
+          },
+        },
+        series: [
+          {
+            data: [0, 0, 0, 0, 0],
+            type: "bar",
+            gradient: {
+              color: ["#00A2FF", "#00CCD2"],
+            },
+            backgroundBar: {
+              show: true,
+              style: {
+                fill: "rgba(255, 255, 255, .1)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let x = ["2018", "2019", "2020", "2021", "2022", "2023"];
+      let y = [
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+      ];
+      this.updateDatas(x, y);
+      setTimeout(() => {
+        this.getDatas();
+      }, 3000);
+    },
+    updateDatas(x, y) {
+      let option = this.option;
+      option.xAxis.data = x;
+      option.series[0].data = y;
+      this.option = { ...option };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1br2 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .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%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight/ds1br3 copy.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="Ds1br3">
+    <div class="box">
+      <div class="title">
+        <div class="text">近半年高新区车购税缴纳数据</div>
+        <div class="border"></div>
+      </div>
+      <div class="datas">
+        <dv-charts :option="option" style="width: 100; height: 100%" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1br3",
+
+  data() {
+    return {
+      option: {
+        title: {
+          show: false,
+        },
+        grid: {
+          top: 35,
+          left: 60,
+          right: 60,
+          bottom: 35,
+        },
+        xAxis: {
+          data: [""],
+          axisLine: {
+            style: {
+              stroke: "#2E3F44",
+              lineWidth: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            style: {
+              fill: "#FFFFFF",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: "缴税金额(万元)",
+            data: "value",
+            min: 0,
+            max: 300,
+            nameTextStyle: {
+              fill: "#00E0DB",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              style: {
+                fill: "#fff",
+                fontSize: 10,
+                fontFamily: "苹方简R",
+              },
+            },
+            splitLine: {
+              style: {
+                stroke: "#2E3F44",
+                lineWidth: 1,
+              },
+            },
+          },
+          {
+            name: "缴税笔数(笔)",
+            data: "value",
+            min: 0,
+            max: 1000,
+            position: "right",
+            nameTextStyle: {
+              fill: "#F7B500",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              style: {
+                fill: "#fff",
+                fontSize: 10,
+                fontFamily: "苹方简R",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "缴税金额(万元)",
+            data: [0],
+            type: "line",
+            lineStyle: {
+              lineWidth: 3,
+              stroke: "#00E0DB",
+            },
+            linePoint: {
+              style: {
+                fill: "#fff",
+                lineWidth: 12,
+                stroke: "#00E0DB",
+              },
+            },
+          },
+          {
+            name: "缴税笔数(笔)",
+            data: [0],
+            type: "line",
+            lineStyle: {
+              lineWidth: 3,
+              stroke: "#F7B500",
+            },
+            linePoint: {
+              style: {
+                fill: "#fff",
+                lineWidth: 12,
+                stroke: "#F7B500",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let month = ["1月", "2月", "3月", "4月", "5月", "6月"];
+      let money = [80, 50, 60, 80, 30, 90];
+      let num = [0, 99, 200, 40, 10, 0];
+      this.updateDatas(month, money, num);
+    },
+    updateDatas(month, money, num) {
+      let datas = this.option;
+      datas.xAxis.data = month;
+      datas.series[0].data = money;
+      datas.series[1].data = num;
+      this.option = { ...datas };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1br3 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .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%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight/ds1br3.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="Ds1br3">
+    <div class="box">
+      <div class="title">
+        <div class="text">近半年高新区车购税缴纳数据</div>
+        <div class="border"></div>
+      </div>
+      <div class="datas">
+        <div id="main" style="width: 100%; height: 100%"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "Ds1br3",
+
+  data() {
+    return {
+      myChart: null,
+      showTipTimer: null,
+      currentIndex: 0,
+      option: {
+        title: {
+          show: false,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 10,
+            fontFamily: "苹方简R",
+          },
+          confine: true,
+          position: function (point, params, dom, rect, size) {
+            return [point[0] * 1.3, "15%"];
+          },
+          padding: [6, 10],
+          backgroundColor: "rgba(48,82,168,0.9)",
+          borderWidth: 0,
+          borderColor: "rgba(0,0,0,0.0)",
+          extraCssText: "scale: 0.75;",
+        },
+        grid: {
+          top: 35,
+          left: 50,
+          right: 40,
+          bottom: 30,
+        },
+        legend: {
+          show: false,
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLine: {
+            onZero: false,
+            lineStyle: {
+              color: "#2E3F44",
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#FFFFFF",
+            fontSize: 10,
+            fontFamily: "苹方简R",
+          },
+        },
+        yAxis: [
+          {
+            name: "缴税金额(万元)",
+            nameTextStyle: {
+              color: "#00E0DB",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 2,
+              color: "#fff",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#2E3F44",
+                width: 1,
+                type: "dashed",
+              },
+            },
+          },
+          {
+            name: "缴税笔数(笔)",
+            nameTextStyle: {
+              color: "#F7B500",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              interval: 2,
+              color: "#fff",
+              fontSize: 10,
+              fontFamily: "苹方简R",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "缴税金额",
+            type: "line",
+            data: [],
+            lineStyle: {
+              width: 2,
+            },
+            itemStyle: {
+              color: "#00E0DB",
+            },
+            symbolSize: 8,
+          },
+          {
+            name: "缴税笔数",
+            type: "line",
+            data: [],
+            lineStyle: {
+              width: 2,
+            },
+            itemStyle: {
+              color: "#F7B500",
+            },
+            symbolSize: 8,
+          },
+        ],
+        animationDelayUpdate: function (idx) {
+          // 越往后的数据延迟越大
+          return idx * 100;
+        },
+      },
+    };
+  },
+
+  mounted() {
+    this.myChart = echarts.init(document.getElementById("main"));
+
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let date = ["1月", "2月", "3月", "4月", "5月", "6月"];
+      let jsje = [
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+      ];
+      let jnbs = [
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+        Math.round(Math.random() * 10000),
+      ];
+      this.updateDatas(date, jsje, jnbs);
+      setTimeout(() => {
+        this.getDatas();
+      }, 3000);
+    },
+    updateDatas(date, jsje, jnbs) {
+      let option = this.option;
+      option.xAxis.data = date;
+      option.series[0].data = jsje;
+      option.series[1].data = jnbs;
+      this.option = { ...option };
+      this.myChart.setOption(this.option);
+      this.loopShowTip();
+    },
+    loopShowTip() {
+      let currentIndex = this.currentIndex;
+      clearTimeout(this.showTipTimer);
+      var dataLen = this.option.series[0].data.length;
+      this.currentIndex = (currentIndex + 1) % dataLen;
+      this.myChart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: currentIndex,
+      });
+      this.showTipTimer = setInterval(() => {
+        this.loopShowTip();
+      }, 1000 * 5);
+    },
+  },
+
+  beforeDestroy() {
+    clearTimeout(this.showTipTimer);
+    this.showTipTimer = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1br3 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .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%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      margin-bottom: 20px;
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/bottomRight/ds1br4.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="Ds1br4">
+    <div class="box">
+      <div class="title">
+        <div class="text">A级纳税人信息展示</div>
+        <div class="border"></div>
+      </div>
+      <div class="datas">
+        <dv-scroll-board :config="config" style="width: 100%; height: 100%" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ds1br4",
+
+  data() {
+    return {
+      config: {
+        header: [
+          "<span style='color:#FFB956; font-size: 16px;'>纳税人名称</span>",
+          "<span style='color:#FFB956; font-size: 16px;'>纳税人识别号</span>",
+          "<span style='color:#FFB956; font-size: 16px;'>评价年度</span>",
+        ],
+        rowNum: 3,
+        headerBGC: "rgba(0,0,0,0)",
+        oddRowBGC: "rgba(0,0,0,0)",
+        evenRowBGC: "rgba(0,0,0,0)",
+        waitTime: 3000,
+        align: ["left", "center", "left"],
+        columnWidth: [210, 160],
+        data: [],
+      },
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.getDatas();
+    }, 1000);
+  },
+
+  methods: {
+    getDatas() {
+      let a = [
+        ["陕西亿杰金赋信息科技有限公司", "91610000054788016G", "2022年度"],
+        ["陕西帕尼尔生物科技有限公司", "91610000054788016G", "2022年度"],
+        ["陕西钜信达工程项目管理有限公司", "91610000054788016G", "2022年度"],
+        ["陕西博维建设工程有限公司", "91610000054788016G", "2022年度"],
+      ];
+      this.updateDatas(a);
+    },
+    updateDatas(data) {
+      let datas = this.config;
+      datas.data = data;
+      this.config = { ...datas };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.Ds1br4 {
+  width: 100%;
+  height: 100%;
+
+  .box {
+    width: 100%;
+    height: 100%;
+    font-family: "苹方简R";
+    display: flex;
+    flex-direction: column;
+
+    .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%, #01b3ff00 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;
+      }
+    }
+
+    .datas {
+      width: 100%;
+      height: 0;
+      flex: 1;
+      background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dataScreen1/components/top.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="dataScreen1Top">
+    <div class="bg-line">
+      <img src="@/assets/dataScreen1/top-line.png" />
+    </div>
+    <div class="content">
+      <div class="weather">
+        <div class="icon"></div>
+        <div class="text">21-34℃ &nbsp;&nbsp;&nbsp; 空气质量：良</div>
+      </div>
+      <div class="title">
+        <img src="@/assets/dataScreen1/top-title.png" />
+      </div>
+      <div class="date">
+        <div class="icon"></div>
+        <div class="text">
+          {{ dateTime.nl }}
+          &nbsp;&nbsp;{{ dateTime.rq }}&nbsp;&nbsp;{{
+            dateTime.xq
+          }}&nbsp;&nbsp;{{ dateTime.sj }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mainService from "@/utils/time";
+export default {
+  name: "dataScreen1Top",
+
+  data() {
+    return {
+      dateTimer: null,
+      dateTime: {},
+    };
+  },
+
+  mounted() {
+    // 时间
+    this.dateTimer = setInterval(() => {
+      this.getDate();
+    }, 1 * 1000);
+  },
+
+  methods: {
+    // 获取时间
+    getDate() {
+      // 阳历
+      var date = new Date();
+      var year = date.getFullYear();
+      var month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      var mytime = date.toLocaleTimeString();
+      var r = year + "/" + month + "/" + day;
+      // 农历及星期
+      var d = new Date();
+      var week = ["日", "一", "二", "三", "四", "五", "六"];
+      var w = "星期" + week[d.getDay()];
+      var l = "农历" + mainService.getLunar();
+      var dateTime = {
+        nl: l,
+        xq: w,
+        rq: r,
+        sj: mytime,
+      };
+      this.dateTime = dateTime;
+    },
+  },
+  beforeRouteLeave() {
+    clearInterval(this.dateTimer);
+    this.dateTimer = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dataScreen1Top {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .bg-line {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 0;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .content {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    padding: 10px 20px;
+    width: 100%;
+    height: 100%;
+    font-family: "DINOT-Regular";
+    display: flex;
+    box-sizing: border-box;
+
+    .weather,
+    .date {
+      width: 475px;
+      height: 100%;
+      display: flex;
+      align-items: flex-start;
+
+      .icon {
+        margin-right: 10px;
+        width: 24px;
+        height: 24px;
+        background-size: 100% 100%;
+      }
+
+      .text {
+        width: max-content;
+        height: 24px;
+        line-height: 24px;
+        font-size: 18px;
+        color: #fdfffe;
+      }
+    }
+
+    .weather {
+      justify-content: flex-start;
+
+      .icon {
+        background-image: url("@/assets/dataScreen1/top-weather.png");
+      }
+    }
+
+    .date {
+      justify-content: flex-end;
+
+      .icon {
+        background-image: url("@/assets/dataScreen1/top-date.png");
+      }
+    }
+
+    .title {
+      width: 0;
+      flex: 1;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        max-width: 930px;
+      }
+    }
+  }
+}
+</style>

src/views/dataScreen1/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="contrainer">
+    <div class="top">
+      <top></top>
+    </div>
+    <div class="bottom">
+      <div class="bottom-left">
+        <bottom-left></bottom-left>
+      </div>
+      <div class="bottom-center">
+        <bottom-center></bottom-center>
+      </div>
+      <div class="bottom-right">
+        <bottom-right></bottom-right>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import top from "@/views/dataScreen1/components/top";
+import bottomLeft from "@/views/dataScreen1/components/bottomLeft";
+import bottomCenter from "@/views/dataScreen1/components/bottomCenter";
+import bottomRight from "@/views/dataScreen1/components/bottomRight";
+export default {
+  name: "dataScreen1Index",
+
+  components: {
+    top,
+    bottomLeft,
+    bottomCenter,
+    bottomRight,
+  },
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.contrainer {
+  width: 100%;
+  height: 100vh;
+  min-height: 1080px;
+  font-family: "苹方简R";
+  background: #010f43;
+  background-image: url("@/assets/dataScreen1/bg.png");
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 110px;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 0;
+    flex: 1;
+    display: flex;
+
+    .bottom-left,
+    .bottom-right {
+      width: 500px;
+      height: 100%;
+    }
+
+    .bottom-center {
+      width: 0;
+      flex: 1;
+      height: 100%;
+    }
+  }
+}
+</style>