1

src/component/panel.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="Panel">
-    <dv-border-box-11 :title="hallName" :titleWidth="280">
+    <dv-border-box-10>
+      <div class="title">{{ hallName }}</div>
       <div v-if="enable" class="panel-box" @click="naviga(hallUrl)">
         <div class="tips" :style="labelStyle">
           当天窗口业务量：<span :style="valueStyle">{{
@@ -16,8 +17,7 @@
       <div v-if="!enable" class="panel-box">
         <div class="none">未启用</div>
       </div>
-    </dv-border-box-11>
-    <!-- <div class="title">高新区税务局</div> -->
+    </dv-border-box-10>
   </div>
 </template>
 
@@ -94,7 +94,6 @@ export default {
               this.getInfo();
             }, 10 * 1000);
           } else {
-            
             setTimeout(() => {
               this.getInfo();
             }, 10 * 1000);
@@ -105,8 +104,8 @@ export default {
 
     naviga(e) {
       if (this.enable && e) {
-        console.log(e)
-        window.location.href = e
+        console.log(e);
+        window.location.href = e;
       }
     },
   },
@@ -121,10 +120,21 @@ export default {
   box-sizing: border-box;
   font-family: "苹方简M";
 
+  .title {
+    padding-top: 10px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    text-align: center;
+    font-family: "苹方简M";
+    color: #ffffff;
+  }
+
   .panel-box {
-    padding: 55px 20px 10px 20px;
+    padding: 10px 20px 10px 20px;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 50px);
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -153,16 +163,6 @@ export default {
       justify-content: center;
     }
   }
-
-  .title {
-    width: 100%;
-    height: 80px;
-    font-size: 30px;
-    line-height: 80px;
-    text-align: center;
-    font-family: "苹方简M";
-    color: #ffffff;
-  }
 }
 
 .Panel:active {

src/router/index.js

@@ -13,6 +13,12 @@ const routes = [
         name: 'index',
         component: () => import('@/views/login/index.vue')
     },
+    // 首页
+    {
+        path: '/handmode',
+        name: 'handmode',
+        component: () => import('@/views/login/handmode.vue')
+    },
 ]
 const router = new VueRouter({
     mode: 'history',

src/views/login/handmode.vue

@@ -0,0 +1,337 @@
+<template>
+  <!-- //背景图动态渲染 -->
+  <div
+    id="home"
+    :style="
+      background != ''
+        ? 'backgroundImage: url(' +
+          background +
+          ');width:' +
+          width +
+          ';height:' +
+          height +
+          '; position: relative;top: ' +
+          top +
+          ';left: ' +
+          left +
+          ';'
+        : 'width:' +
+          width +
+          ';height:' +
+          height +
+          '; position: relative;top: ' +
+          top +
+          ';left: ' +
+          left +
+          ';'
+    "
+  >
+    <div
+      v-if="backvideo != null && backvideo != ''"
+      style="position: absolute; z-index: 1"
+    >
+      <video autoplay loop muted>
+        <source :src="backvideo" type="video/mp4" />
+      </video>
+    </div>
+
+    <!-- 模块渲染（模块位置） -->
+    <div
+      :id="'aaa' + index"
+      :style="
+        'width:' +
+        item.positionWidth +
+        'px;height:' +
+        item.positionHeight +
+        'px; top:' +
+        item.positionY +
+        'px;left:' +
+        item.positionX +
+        'px;position: absolute;z-index: 999'
+      "
+      v-for="(item, index) in modelList"
+      :key="index"
+    >
+      <div
+        class="type-item"
+        :id="'zj' + index"
+        v-for="(ele, index) in item.fourTableVoList"
+        :key="index"
+        :style="
+          item.fourTableVoList.length == 1 ? ' opacity: 1;' : ' opacity: 0;'
+        "
+      >
+        <component
+          :is="ele.enName"
+          :list.sync="ele"
+          :height.sync="item.positionHeight"
+          :width.sync="item.positionWidth"
+        />
+      </div>
+    </div>
+    <div
+      ref="back"
+      v-if="showBack"
+      class="back"
+      :style="`left: ${backStyle.left}px;top: ${backStyle.top}px`"
+      :draggable="false"
+      @mousedown="backDown"
+      @mouseup="backUp"
+      @dblclick="goBack"
+    >
+      返回
+    </div>
+  </div>
+</template>
+
+<script>
+import maps from "@/component/gxmap.vue"; //地图
+import pie from "@/component/pie.vue"; //饼图
+import pie2 from "@/component/pie2.vue"; //饼图
+import pie3 from "@/component/pie3.vue"; //饼图
+import ModuleTitle from "@/component/title.vue"; //标题部分
+import ModuleTemplate from "@/component/template.vue"; //气温部分
+import ModuleTime from "@/component/time.vue"; //时间部分
+import ModuleCalendar from "@/component/calendar.vue"; //日历部分
+import ModuleNews from "@/component/news.vue"; //左边新闻部分
+import ModuleTable from "@/component/table.vue"; //表格部分
+import ModuleBaricon from "@/component/baricon.vue"; //自定义进度条部分
+import ModuleMoreandless from "@/component/moreandless.vue"; //正负轴交错部分
+import ModuleBar from "@/component/bar.vue"; //柱状图部分
+import ModuleFoldline from "@/component/foldline.vue"; //折线图部分
+import ModuleBarline from "@/component/barline.vue"; //柱状折线图部分
+import ModuleStatistics from "@/component/statistics.vue"; //数据统计部分
+import ModuleCustom1 from "@/component/custom1.vue"; //自定义组件1
+import ModuleCustom2 from "@/component/custom2.vue"; //自定义组件2
+import ModuleCustom3 from "@/component/custom3.vue"; //自定义组件3
+import ModuleCustom4 from "@/component/custom4.vue"; //自定义组件4
+import ModuleCustom5 from "@/component/custom5.vue"; //自定义组件5
+import ModuleCustom6 from "@/component/custom6.vue"; //自定义组件6
+import ModuleCustom7 from "@/component/custom7.vue"; //自定义组件7
+import ModuleCustom8 from "@/component/custom8.vue"; //自定义组件8
+import ModulePanel from "@/component/panel.vue"; //面板组件
+import ModuleMoreBar from "@/component/moreBar.vue"; //面板组件
+import ModuleCustom9 from "@/component/custom9.vue"; //自定义组件9
+import { templateAndArea } from "@/api/index";
+import { Message } from "element-ui";
+export default {
+  components: {
+    pie,
+    pie2,
+    pie3,
+    maps,
+    ModuleTitle,
+    ModuleTemplate,
+    ModuleTime,
+    ModuleCalendar,
+    ModuleNews,
+    ModuleTable,
+    ModuleBaricon,
+    ModuleMoreandless,
+    ModuleFoldline,
+    ModuleBar,
+    ModuleBarline,
+    ModuleStatistics,
+    ModuleCustom1,
+    ModuleCustom2,
+    ModuleCustom3,
+    ModuleCustom4,
+    ModuleCustom5,
+    ModuleCustom6,
+    ModuleCustom7,
+    ModuleCustom8,
+    ModulePanel,
+    ModuleMoreBar,
+    ModuleCustom9,
+  },
+  data() {
+    return {
+      showBack: false,
+      backStyle: {
+        top: 20,
+        left: 1800,
+      },
+      backStart: {},
+      // 背景图
+      background: "",
+      // 背景视频
+      backvideo: "",
+      // 模块相关数据
+      modelList: [],
+      // 控制反转
+      count: 0,
+      width: "100vw",
+      height: "100vh",
+      top: "0px",
+      left: "0px",
+    };
+  },
+  mounted() {
+    this.getlList();
+    this.showBack = this.$route.query.back || false;
+  },
+  methods: {
+    // 获取首页相关数据（背景图等相关配置）
+    getlList() {
+      if (this.$route.query.swjgdm) {
+        let form = {
+          swjgdm: this.$route.query.id || this.$route.query.swjgdm,
+        };
+        templateAndArea(form).then((res) => {
+          this.background = res.template.bjImg;
+          this.backvideo = res.template.spUrl;
+          this.width = res.template.dpfblX + "px";
+          this.height = res.template.dpfblY + "px";
+          let a = "[20,30]";
+          a = res.template.bjtwz || "[0,0]";
+
+          this.top = JSON.parse(a)[0] + "px";
+          this.left = JSON.parse(a)[1] + "px";
+          this.modelList = res.list;
+          setTimeout(() => {
+            this.setCSS(res.list);
+          }, 1000);
+          if (this.$route.query.nwbg) {
+            this.background = require("@/assets/background/" +
+              this.$route.query.nwbg);
+          }
+        });
+      } else {
+        Message.error("请配置相关参数!");
+      }
+    },
+    // 反转
+    setCSS(e) {
+      for (let i = 0; i < e.length; i++) {
+        if (document.querySelector("#aaa" + i).children.length > 1) {
+          let aaa = e[i];
+
+          // 定时方法
+          let count = 0;
+          // 第一次进入
+          if (count + 1 == document.querySelector("#aaa" + i).children.length) {
+            count = 0;
+          } else {
+            count++;
+          }
+
+          for (
+            let n = 0;
+            n < document.querySelector("#aaa" + i).children.length;
+            n++
+          ) {
+            document.querySelector("#aaa" + i).children[n].style.cssText =
+              "opacity: 0;";
+          }
+          document.querySelector("#aaa" + i).children[count].style.cssText =
+            "opacity: 1;transition: all 2s;";
+          time();
+          function time() {
+            let times = 15;
+            if (
+              JSON.parse(aaa.fourTableVoList[count].config).showtime &&
+              JSON.parse(aaa.fourTableVoList[count].config).showtime != ""
+            ) {
+              times = JSON.parse(aaa.fourTableVoList[count].config).showtime;
+            }
+
+            setTimeout(() => {
+              if (
+                count + 1 ==
+                document.querySelector("#aaa" + i).children.length
+              ) {
+                count = 0;
+              } else {
+                count++;
+              }
+
+              for (
+                let n = 0;
+                n < document.querySelector("#aaa" + i).children.length;
+                n++
+              ) {
+                document.querySelector("#aaa" + i).children[n].style.cssText =
+                  "opacity: 0;transform:rotateY(-180deg);transition: all 1s;";
+              }
+              document.querySelector("#aaa" + i).children[count].style.cssText =
+                "opacity: 1; transform:rotateY(0);transition: all 1s;";
+
+              time();
+            }, times * 1000);
+          }
+        }
+      }
+    },
+
+    backDown(e) {
+      this.backStart = {
+        x: e.x - this.backStyle.left,
+        y: e.y - this.backStyle.top,
+      };
+      window.addEventListener("mousemove", this.mouseMove);
+      window.addEventListener("mouseup", this.backUp);
+    },
+
+    backUp(e) {
+      window.removeEventListener("mousemove", this.mouseMove);
+      window.removeEventListener("mouseup", this.backUp);
+      this.backStart = {};
+    },
+
+    mouseMove(e) {
+      let start = this.backStart;
+      let x = e.x - start.x;
+      let y = e.y - start.y;
+      let style = {
+        top: y,
+        left: x,
+      };
+      this.backStyle = style;
+    },
+
+    goBack() {
+      window.history.back();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+body {
+  width: 100%;
+  height: 100%;
+}
+#home {
+  // width: 100vw;
+  // height: 1080px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
+
+  .type-item {
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.back {
+  position: fixed;
+  z-index: 999999;
+  width: 80px;
+  height: 80px;
+  background: #ff5500;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5);
+  user-select: none;
+  font-size: 20px;
+  font-family: "苹方简M";
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>