4 years ago · 137fc4355b
--- a/dist/css/chunk-12ee4ba7.75dbefa2.css
+++ b/dist/css/chunk-12ee4ba7.75dbefa2.css
@@ -0,0 +1 @@
 
																+.leader-home[data-v-54bfedc5]{width:90%;margin:0 auto;display:flex;justify-content:space-around}.leader-home li[data-v-54bfedc5]{width:33%;text-align:center}.leader-home li img[data-v-54bfedc5]{width:100%}.van-nav-bar[data-v-54bfedc5]{background:#39f}[data-v-54bfedc5] .van-nav-bar .van-icon,[data-v-54bfedc5] .van-nav-bar__title{color:#fff}[class*=van-hairline][data-v-54bfedc5]:after{border:none}
															
--- a/dist/css/chunk-5359fcfc.7bc245e3.css
+++ b/dist/css/chunk-5359fcfc.7bc245e3.css
--- a/dist/css/chunk-73acbfa2.74549f19.css
+++ b/dist/css/chunk-73acbfa2.74549f19.css
@@ -1 +0,0 @@
 
																-.leader-home[data-v-42be67eb]{width:90%;margin:0 auto;display:flex;justify-content:space-around}.leader-home li[data-v-42be67eb]{width:33%;text-align:center}.leader-home li img[data-v-42be67eb]{width:100%}.van-nav-bar[data-v-42be67eb]{background:#39f}[data-v-42be67eb] .van-nav-bar .van-icon,[data-v-42be67eb] .van-nav-bar__title{color:#fff}[class*=van-hairline][data-v-42be67eb]:after{border:none}
															
--- a/dist/img/头部.8cef78bf.png
+++ b/dist/img/头部.8cef78bf.png
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/js/app.5ea5ad4b.js
+++ b/dist/js/app.5ea5ad4b.js
--- a/dist/js/app.5ea5ad4b.js.map
+++ b/dist/js/app.5ea5ad4b.js.map
--- a/dist/js/chunk-12ee4ba7.2af3e330.js
+++ b/dist/js/chunk-12ee4ba7.2af3e330.js
--- a/dist/js/chunk-12ee4ba7.2af3e330.js.map
+++ b/dist/js/chunk-12ee4ba7.2af3e330.js.map
--- a/dist/js/chunk-2ed13906.02819ae2.js
+++ b/dist/js/chunk-2ed13906.02819ae2.js
--- a/dist/js/chunk-2ed13906.02819ae2.js.map
+++ b/dist/js/chunk-2ed13906.02819ae2.js.map
--- a/dist/js/chunk-2ed13906.1dbc84c5.js
+++ b/dist/js/chunk-2ed13906.1dbc84c5.js
--- a/dist/js/chunk-2ed13906.1dbc84c5.js.map
+++ b/dist/js/chunk-2ed13906.1dbc84c5.js.map
--- a/dist/js/chunk-32bd2a5c.056b9c0c.js
+++ b/dist/js/chunk-32bd2a5c.056b9c0c.js
--- a/dist/js/chunk-32bd2a5c.056b9c0c.js.map
+++ b/dist/js/chunk-32bd2a5c.056b9c0c.js.map
--- a/dist/js/chunk-32bd2a5c.da36888a.js
+++ b/dist/js/chunk-32bd2a5c.da36888a.js
--- a/dist/js/chunk-32bd2a5c.da36888a.js.map
+++ b/dist/js/chunk-32bd2a5c.da36888a.js.map
--- a/dist/js/chunk-5359fcfc.1de8f9bb.js
+++ b/dist/js/chunk-5359fcfc.1de8f9bb.js
--- a/dist/js/chunk-5359fcfc.1de8f9bb.js.map
+++ b/dist/js/chunk-5359fcfc.1de8f9bb.js.map
--- a/dist/js/chunk-5f77cb3a.137279c4.js
+++ b/dist/js/chunk-5f77cb3a.137279c4.js
--- a/dist/js/chunk-5f77cb3a.137279c4.js.map
+++ b/dist/js/chunk-5f77cb3a.137279c4.js.map
--- a/dist/js/chunk-5f77cb3a.f642447b.js
+++ b/dist/js/chunk-5f77cb3a.f642447b.js
--- a/dist/js/chunk-5f77cb3a.f642447b.js.map
+++ b/dist/js/chunk-5f77cb3a.f642447b.js.map
--- a/dist/js/chunk-673edbc0.5e01d564.js
+++ b/dist/js/chunk-673edbc0.5e01d564.js
--- a/dist/js/chunk-673edbc0.5e01d564.js.map
+++ b/dist/js/chunk-673edbc0.5e01d564.js.map
--- a/dist/js/chunk-673edbc0.e357d71e.js
+++ b/dist/js/chunk-673edbc0.e357d71e.js
--- a/dist/js/chunk-673edbc0.e357d71e.js.map
+++ b/dist/js/chunk-673edbc0.e357d71e.js.map
--- a/dist/js/chunk-73acbfa2.b2544780.js.map
+++ b/dist/js/chunk-73acbfa2.b2544780.js.map
--- a/dist/js/chunk-e1666184.54061440.js
+++ b/dist/js/chunk-e1666184.54061440.js
--- a/dist/js/chunk-e1666184.54061440.js.map
+++ b/dist/js/chunk-e1666184.54061440.js.map
--- a/dist/js/chunk-e1666184.6753aba1.js
+++ b/dist/js/chunk-e1666184.6753aba1.js
--- a/dist/js/chunk-e1666184.6753aba1.js.map
+++ b/dist/js/chunk-e1666184.6753aba1.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,10 +11,14 @@
 
																   "dependencies": {
															
 
																     "axios": "^0.21.1",
															
 
																     "core-js": "^3.6.5",
															
 
																+    "dayjs": "^1.10.6",
															
 
																+    "echarts": "^5.1.2",
															
 
																+    "echarts-liquidfill": "^3.0.0",
															
 
																     "vant": "^2.12.22",
															
 
																     "vue": "^2.6.11",
															
 
																     "vue-router": "^3.2.0",
															
 
																-    "vuex": "^3.4.0"
															
 
																+    "vuex": "^3.4.0",
															
 
																+    "vusui-layer": "^1.0.0"
															
 
																   },
															
 
																   "devDependencies": {
															
 
																     "@vue/cli-plugin-babel": "~4.5.0",
															
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,16 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="">
															
 
																+  <head>
															
 
																+    <meta charset="utf-8">
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
															
 
																+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
															
 
																+    <title><%= htmlWebpackPlugin.options.title %></title>
															
 
																+  </head>
															
 
																+  <body>
															
 
																+    <noscript>
															
 
																+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
															
 
																+    </noscript>
															
 
																+    <div id="app"></div>
															
 
																+    <!-- built files will be auto injected -->
															
 
																+  </body>
															
 
																+</html>
															
--- a/src/assets/images/ningdongyunying/puzzle/下边云.png
+++ b/src/assets/images/ningdongyunying/puzzle/下边云.png
--- a/src/assets/images/ningdongyunying/puzzle/前往.png
+++ b/src/assets/images/ningdongyunying/puzzle/前往.png
--- a/src/assets/images/ningdongyunying/puzzle/单位.png
+++ b/src/assets/images/ningdongyunying/puzzle/单位.png
--- a/src/assets/images/ningdongyunying/puzzle/抬头.png
+++ b/src/assets/images/ningdongyunying/puzzle/抬头.png
--- a/src/assets/images/ningdongyunying/puzzle/未按.png
+++ b/src/assets/images/ningdongyunying/puzzle/未按.png
--- a/src/assets/images/ningdongyunying/puzzle/灰按钮.png
+++ b/src/assets/images/ningdongyunying/puzzle/灰按钮.png
--- a/src/assets/images/ningdongyunying/puzzle/蓝框.png
+++ b/src/assets/images/ningdongyunying/puzzle/蓝框.png
--- a/src/assets/images/ningdongyunying/puzzle/限时灰.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时灰.png
--- a/src/assets/images/ningdongyunying/puzzle/限时蓝.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时蓝.png
--- a/src/assets/images/ningdongyunying/puzzle/限时黄.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时黄.png
--- a/src/assets/images/ningdongyunying/puzzle/黄按钮.png
+++ b/src/assets/images/ningdongyunying/puzzle/黄按钮.png
--- a/src/assets/images/ningdongyunying/puzzle/黄框.png
+++ b/src/assets/images/ningdongyunying/puzzle/黄框.png
--- a/src/assets/images/puzzles/2020-10-22-pic1.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic1.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic2.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic2.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic3.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic3.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic4.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic4.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic47.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic47.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic5.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic5.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic7.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic7.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic8.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic8.jpeg
--- a/src/assets/images/puzzles/caixushen.jpg
+++ b/src/assets/images/puzzles/caixushen.jpg
--- a/src/assets/images/puzzles/code.jpg
+++ b/src/assets/images/puzzles/code.jpg
--- a/src/assets/images/puzzles/logo.png
+++ b/src/assets/images/puzzles/logo.png
--- a/src/assets/images/puzzles/re.jpeg
+++ b/src/assets/images/puzzles/re.jpeg
--- a/src/assets/images/puzzles/share.png
+++ b/src/assets/images/puzzles/share.png
--- a/src/assets/images/puzzles/timg.jpeg
+++ b/src/assets/images/puzzles/timg.jpeg
--- a/src/assets/images/puzzles/timg2.jpeg
+++ b/src/assets/images/puzzles/timg2.jpeg
--- a/src/assets/images/puzzles/timg3.jpeg
+++ b/src/assets/images/puzzles/timg3.jpeg
--- a/src/assets/images/puzzles/timg4.jpeg
+++ b/src/assets/images/puzzles/timg4.jpeg
--- a/src/assets/images/puzzles/timg6.jpeg
+++ b/src/assets/images/puzzles/timg6.jpeg
--- a/src/assets/images/puzzles/yang.jpeg
+++ b/src/assets/images/puzzles/yang.jpeg
--- a/src/assets/images/zaoquan/kuangjingshui/头部.png
+++ b/src/assets/images/zaoquan/kuangjingshui/头部.png
--- a/src/assets/images/zaoquan/kuangjingshui/快滤池.png
+++ b/src/assets/images/zaoquan/kuangjingshui/快滤池.png
--- a/src/assets/images/zaoquan/kuangjingshui/高密沉淀.png
+++ b/src/assets/images/zaoquan/kuangjingshui/高密沉淀.png
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -4,36 +4,13 @@
 
																         <!-- 例如当前模块多个页面需要，我们可以把这个模块封装出来，达到组件复用的效果
															
 
																              可以按需载入，也可以全局载入，按照项目需求来完成
															
 
																          -->
															
 
																-        <div v-for="(item,index) in header" :key="index" @click="gethome">
															
 
																-            <h1 class="h1">{{item.value}}</h1>
															
 
																-        </div>
															
 
																+        <h1>123</h1>
															
 
																     </div>
															
 
																 </template>
															
 
																 <script>
															
 
																     export default {
															
 
																-        data(){
															
 
																-            return{
															
 
																-                header:[]
															
 
																-            }
															
 
																-        },
															
 
																-        methods:{
															
 
																-            //获取头部标题
															
 
																-            getheader(){
															
 
																-                this.$http.get("/config/values?keys=mallName").then(res=>{
															
 
																-                    // console.log(res.data.data);
															
 
																-                    this.header=res.data.data
															
 
																-                })
															
 
																-            },
															
 
																-            //点击事件，当处于其他页面时返回首页
															
 
																-            gethome(){
															
 
																-                this.$router.push("/home/homepage" ?"/home/homepage" : "");
															
 
																-            }
															
 
																-            
															
 
																-        },
															
 
																-        mounted(){
															
 
																-            this.getheader()
															
 
																-        }
															
 
																+        
															
 
																     }
															
 
																 </script>
															
--- a/src/main.js
+++ b/src/main.js
@@ -2,8 +2,12 @@ import Vue from 'vue'
 
																 import App from './App.vue'
															
 
																 import router from './router'
															
 
																 import store from './store'
															
 
																+<<<<<<< HEAD
															
 
																 import './assets/css/global.css'
															
 
																+=======
															
 
																+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
															
 
																 import "./plugins/axios.js"
															
 
																+
															
 
																 // import axios from "axios"
															
 
																 //区别开发环境和测试环境
															
 
																 // axios.defaults.baseURL=process.env.VUE_APP_APIURL
															
@@ -20,6 +24,12 @@ Vue.use(Lazyload);
 
																 Vue.use(Dialog);
															
 
																 Vue.use(Vant);
															
 
																 Vue.config.productionTip = false
															
 
																+router.beforeEach((to,from,next)=>{
															
 
																+  if(to.meta.title){
															
 
																+    document.title=to.meta.title
															
 
																+  }
															
 
																+  next()
															
 
																+})
															
 
																 new Vue({
															
 
																   router,
															
 
																   store,
															
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,7 @@ const routes = [
 
																     name:'leader-mailbox-reply',
															
 
																     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
															
 
																   },
															
 
																+<<<<<<< HEAD
															
@@ -50,11 +51,52 @@ const routes = [
 
																     path:'/tongfeng/zaoquan/tongfeng_xijin',
															
 
																     name:'tongfeng_xijin',
															
 
																     component:()=>import('../views/tongfeng/zaoquan/tongfeng_xijin.vue')
															
 
																+=======
															
 
																+  //枣泉矿井水系统
															
 
																+  {
															
 
																+    path:'/zaoquan/kuangjingshui/kuangjingshui',
															
 
																+    name:'kuangjingshui',
															
 
																+    component:()=>import('../views/zaoquan/kuangjingshui/kuangjingshui.vue'),
															
 
																+    meta:{
															
 
																+      title:'矿井水处理'
															
 
																+    }
															
 
																+  },
															
 
																+  //宁东运营部拼图游戏
															
 
																+  {
															
 
																+    path:"/ningdongyunying/puzzle/puzzle",
															
 
																+    name:'puzzle',
															
 
																+    component:()=>import('../views/ningdongyunying/puzzle/puzzle.vue'),
															
 
																+    meta:{
															
 
																+      title:'拼图游戏'
															
 
																+    }
															
 
																+  },
															
 
																+  //宁东运营部拼图游戏详情
															
 
																+  {
															
 
																+    path:"/ningdongyunying/puzzle/puzzle-info",
															
 
																+    name:'puzzle-info',
															
 
																+    component:()=>import('../views/ningdongyunying/puzzle/puzzle-info.vue'),
															
 
																+    meta:{
															
 
																+      title:'拼图游戏'
															
 
																+    }
															
 
																+  },
															
 
																+  //宁东运营部拼图游戏详情1
															
 
																+  {
															
 
																+    path:"/ningdongyunying/puzzle/puzzle-infos",
															
 
																+    name:'puzzle-infos',
															
 
																+    component:()=>import('../views/ningdongyunying/puzzle/puzzle-infos.vue'),
															
 
																+    meta:{
															
 
																+      title:'拼图游戏'
															
 
																+    }
															
 
																+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
															
 
																   },
															
 
																   //路由重定向
															
 
																   {
															
 
																     path:'/',
															
 
																+<<<<<<< HEAD
															
 
																     redirect:{"name":"tongfeng_xijin"}
															
 
																+=======
															
 
																+    redirect:{"name":"puzzle-infos"}
															
 
																+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
															
 
																   }
															
 
																 ]
															
--- a/src/views/ningdongyunying/puzzle/Cutdown.vue
+++ b/src/views/ningdongyunying/puzzle/Cutdown.vue
@@ -0,0 +1,76 @@
 
																+<template>
															
 
																+  <div>
															
 
																+      <div class="deloy">倒计时：<span id="time">{{count}}</span></div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+export default {
															
 
																+  data() {
															
 
																+    return {
															
 
																+      count: 180,
															
 
																+      dealTime:0,
															
 
																+      timer: null
															
 
																+    };
															
 
																+  },
															
 
																+
															
 
																+  props:{
															
 
																+      success:{
															
 
																+        type: Boolean,
															
 
																+        default :false
															
 
																+      },
															
 
																+  },
															
 
																+
															
 
																+  created(){
															
 
																+      this.cutDown();
															
 
																+  },
															
 
																+//   mounted(){
															
 
																+// this.cutDown();
															
 
																+//   },
															
 
																+
															
 
																+  methods: {
															
 
																+    cutDown() {
															
 
																+    //   const TIME_COUNT = 180;
															
 
																+      if (!this.timer) {
															
 
																+        // this.count = TIME_COUNT;
															
 
																+        this.timer = setInterval(() => {
															
 
																+          if (this.count > 0 ) {
															
 
																+            this.count--;
															
 
																+            if(this.success) {
															
 
																+                this.stopCutdown();
															
 
																+            }
															
 
																+          } else {
															
 
																+            clearInterval(this.timer);
															
 
																+            this.timer = null;
															
 
																+          }
															
 
																+        }, 1000);
															
 
																+      }
															
 
																+    },
															
 
																+    initTime(){ // 返回的时候初始化倒计时
															
 
																+        // this.clearTimer();
															
 
																+         clearInterval(this.timer);
															
 
																+        this.timer = null;
															
 
																+        this.count = 180;
															
 
																+        this.cutDown();
															
 
																+    },
															
 
																+    stopCutdown(){ //拼图成功要清理掉倒计时,然后向父组件传递用时
															
 
																+       
															
 
																+        this.dealTime = 180-this.count;
															
 
																+        this.$emit('overtime',this.dealTime);
															
 
																+        clearInterval(this.timer);
															
 
																+        this.timer = null;
															
 
																+    },
															
 
																+    clearTimer(){ //拼图成功后清除定时器
															
 
																+        clearInterval(this.timer);
															
 
																+        this.timer = null;
															
 
																+    }
															
 
																+  }
															
 
																+};
															
 
																+</script>
															
 
																+
															
 
																+<style  scoped>
															
 
																+.play-page .deloy {
															
 
																+  padding: 10px 20px;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+</style>
															
--- a/src/views/ningdongyunying/puzzle/puzzle-info.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle-info.vue
@@ -0,0 +1,264 @@
 
																+<template>
															
 
																+  <div>
															
 
																+    <div v-if="shows">
															
 
																+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
															
 
																+    </div>
															
 
																+    <div class="headers">
															
 
																+      <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
															
 
																+      <div class="headers-left">5</div>
															
 
																+      <div class="headers-right">4</div>
															
 
																+      <div class="header-content">
															
 
																+        <div
															
 
																+          style="width: 100px; height: 100px"
															
 
																+          ref="hygrometer"
															
 
																+          id="hygrometer"
															
 
																+        ></div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <div class="contents">
															
 
																+      <div class="contents-list">
															
 
																+        <div class="contents-list-item">
															
 
																+          <div class="contents-list-item-img">
															
 
																+            <img src="../../../assets/images/puzzles/timg.jpeg" />
															
 
																+            <p>最快时长 1:23:25</p>
															
 
																+          </div>
															
 
																+          <div class="contents-list-item-button">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
															
 
																+            />
															
 
																+            <p>图片名称</p>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="contents-list-item">
															
 
																+          <div class="contents-list-item-img">
															
 
																+            <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
															
 
																+          </div>
															
 
																+          <div class="contents-list-item-button">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
															
 
																+            />
															
 
																+            <p>未破解</p>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+
															
 
																+        <div class="contents-list-item">
															
 
																+          <div class="contents-list-item-img">
															
 
																+            <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
															
 
																+          </div>
															
 
																+          <div class="contents-list-item-button">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
															
 
																+            />
															
 
																+            <p>未破解</p>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <div class="footed">
															
 
																+      <div class="footed-img">
															
 
																+        <img src="../../../assets/images/ningdongyunying/puzzle/下边云.png" />
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from "echarts"; //引入echarts
															
 
																+import "echarts-liquidfill";
															
 
																+export default {
															
 
																+  data() {
															
 
																+    return {
															
 
																+      shows: true,
															
 
																+    };
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    document.body.style.backgroundColor = "#39f"; //背景色
															
 
																+    this.drawLiquidfill();
															
 
																+  },
															
 
																+  methods: {
															
 
																+    drawLiquidfill() {
															
 
																+      // 基于准备好的dom，初始化echarts实例
															
 
																+      let hygrometer = echarts.init(document.getElementById("hygrometer"));
															
 
																+      // 使用指定的配置项和数据显示图表
															
 
																+      hygrometer.setOption({
															
 
																+        tooltip: {
															
 
																+          show: true,
															
 
																+        },
															
 
																+
															
 
																+        series: [
															
 
																+          {
															
 
																+            name: "puzzle",
															
 
																+            type: "liquidFill",
															
 
																+            radius: "80px",
															
 
																+            data: [0.45],
															
 
																+            direction: "none",//取消移动方向
															
 
																+            amplitude: 0,//波的振幅
															
 
																+            waveAnimation: false,//动画效果
															
 
																+            animationDuration: 0,
															
 
																+            animationDurationUpdate: 0,
															
 
																+            label: {
															
 
																+              normal: {
															
 
																+                color: "#ff7900",
															
 
																+                insideColor: "#ff7900",
															
 
																+                textStyle: {
															
 
																+                  fontSize: 20,
															
 
																+                  fontWeight: "bold",
															
 
																+                },
															
 
																+              },
															
 
																+            },
															
 
																+            backgroundStyle: {
															
 
																+              color: "#fff",
															
 
																+            },
															
 
																+            color: [
															
 
																+              {
															
 
																+                type: "linear",
															
 
																+                x: 0,
															
 
																+                y: 1,
															
 
																+                x2: 0,
															
 
																+                y2: 0,
															
 
																+                colorStops: [
															
 
																+                  {
															
 
																+                    offset: 1,
															
 
																+                    color: ["#ffff00"], // 0% 处的颜色
															
 
																+                  },
															
 
																+                  {
															
 
																+                    offset: 0,
															
 
																+                    color: ["#ffff00"], // 100% 处的颜色
															
 
																+                  },
															
 
																+                ],
															
 
																+                global: false, // 缺省为 false
															
 
																+              },
															
 
																+            ],
															
 
																+            outline: {
															
 
																+              show: true,
															
 
																+              borderDistance: 0,
															
 
																+              itemStyle: {
															
 
																+                borderColor: "#fdd35d",
															
 
																+                borderWidth: 3,
															
 
																+              },
															
 
																+            },
															
 
																+          },
															
 
																+        ],
															
 
																+      });
															
 
																+    },
															
 
																+  },
															
 
																+};
															
 
																+</script>
															
 
																+
															
 
																+<style scoped>
															
 
																+.van-nav-bar {
															
 
																+  background: #39f;
															
 
																+}
															
 
																+>>> .van-nav-bar__title {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+>>> .van-nav-bar .van-icon {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+[class*="van-hairline"]:after {
															
 
																+  border: none;
															
 
																+}
															
 
																+.footed {
															
 
																+  width: 100%;
															
 
																+  position: fixed;
															
 
																+  bottom: 0;
															
 
																+  z-index: -1;
															
 
																+}
															
 
																+.footed > .footed-img {
															
 
																+  width: 100%;
															
 
																+  height: 76px;
															
 
																+  position: fixed;
															
 
																+  bottom: 0;
															
 
																+}
															
 
																+.footed-img > img {
															
 
																+  width: 100%;
															
 
																+  height: 76px;
															
 
																+}
															
 
																+.headers {
															
 
																+  width: 90%;
															
 
																+  margin: 2% auto;
															
 
																+  position: relative;
															
 
																+}
															
 
																+.headers > img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+.headers-left {
															
 
																+  width: 20%;
															
 
																+  text-align: center;
															
 
																+  position: absolute;
															
 
																+  left: 4%;
															
 
																+  top: 37%;
															
 
																+  font-size: 30px;
															
 
																+  color: #fbd91f;
															
 
																+}
															
 
																+.headers-right {
															
 
																+  width: 20%;
															
 
																+  text-align: center;
															
 
																+  position: absolute;
															
 
																+  left: 76%;
															
 
																+  top: 37%;
															
 
																+  font-size: 30px;
															
 
																+  color: #fbd91f;
															
 
																+}
															
 
																+.header-content {
															
 
																+  position: absolute;
															
 
																+  left: 35%;
															
 
																+  top: 27%;
															
 
																+}
															
 
																+.contents {
															
 
																+  width: 90%;
															
 
																+  margin: 0 auto 8%;
															
 
																+  background: #1559de;
															
 
																+  border: 2px solid #0938d0;
															
 
																+}
															
 
																+.contents-list {
															
 
																+  width: 97%;
															
 
																+  margin: 1% auto;
															
 
																+  background: #39f;
															
 
																+  border: 2px solid #0938d0;
															
 
																+  display: flex;
															
 
																+  justify-content: space-around;
															
 
																+  flex-wrap: wrap;
															
 
																+}
															
 
																+.contents-list::after {
															
 
																+  content: "";
															
 
																+  width: 45%;
															
 
																+}
															
 
																+.contents-list-item {
															
 
																+  width: 45%;
															
 
																+  text-align: center;
															
 
																+  margin-top: 3%;
															
 
																+  margin-bottom: 5%;
															
 
																+}
															
 
																+.contents-list-item-img {
															
 
																+  width: 100%;
															
 
																+  text-align: center;
															
 
																+  border-bottom: 1px solid transparent;
															
 
																+  height: 97px;
															
 
																+}
															
 
																+.contents-list-item-img > img {
															
 
																+  width: 100%;
															
 
																+  height: 97px;
															
 
																+}
															
 
																+.contents-list-item-img > p {
															
 
																+  margin-top: -19%;
															
 
																+  border-bottom: 1px solid transparent;
															
 
																+  font-size: 13px;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.contents-list-item-button {
															
 
																+  width: 65%;
															
 
																+  text-align: center;
															
 
																+  margin: 3% auto;
															
 
																+}
															
 
																+.contents-list-item-button > img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+.contents-list-item-button > p {
															
 
																+  margin-top: -31%;
															
 
																+  font-size: 13px;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+</style>
															
--- a/src/views/ningdongyunying/puzzle/puzzle-infos.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle-infos.vue
@@ -0,0 +1,812 @@
 
																+<template>
															
 
																+  <!-- :style="{transform: `translateX(${clickStartBtn?-100:0}vw)`}" -->
															
 
																+  <div class="wrap" ref="wrap">
															
 
																+    <div class="start-page">
															
 
																+      <!-- <h1>{{ msg }}</h1> -->
															
 
																+      <div class="headers">
															
 
																+        <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
															
 
																+        <div class="headers-left">5</div>
															
 
																+        <div class="headers-right">4</div>
															
 
																+        <div class="header-content">
															
 
																+          <div
															
 
																+            style="width: 100px; height: 100px"
															
 
																+            ref="hygrometer"
															
 
																+            id="hygrometer"
															
 
																+          ></div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <div class="album-list">
															
 
																+        <div
															
 
																+          class="img-wrap"
															
 
																+          v-for="(item, index) in imgArr"
															
 
																+          :class="activeClass == index ? 'active' : ''"
															
 
																+          :key="index"
															
 
																+          @click="getItem(index)"
															
 
																+        >
															
 
																+          <img :src="item.url" alt="" />
															
 
																+          <!-- <button @click="startGame(index)">开始</button> -->
															
 
																+          <div class="contents-list-item-button" @click="startGame(index)">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
															
 
																+            />
															
 
																+            <p>图片名称</p>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+
															
 
																+        <!-- <div class="img-wrap" v-if="!uploadimg">
															
 
																+          <div class="file-wrap" ref="filewrap">
															
 
																+            <input type="file" id="file" @change="onFileChange">
															
 
																+          </div>
															
 
																+        </div> -->
															
 
																+        <!-- <div class="btn" id="start" @click="startGame(activeClass)">开始游戏</div> -->
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <div class="play-page">
															
 
																+      <div class="deloy">
															
 
																+        倒计时：<span id="time">{{ dealtime }}</span>
															
 
																+      </div>
															
 
																+      <!-- <Cutdown ref="child" :success="issuccess" @overtime="overtime"></Cutdown> -->
															
 
																+      <div class="play-area" id="playArea">
															
 
																+        <!-- :style="{backgroundImage:'url('+selectedImg+')',transform: `translate(${matrixArr[item].x}vw, ${matrixArr[item].y}vh)`}" -->
															
 
																+        <div
															
 
																+          v-for="item in boxArr"
															
 
																+          :index="item"
															
 
																+          :key="item"
															
 
																+          :class="[
															
 
																+            'piece',
															
 
																+            'piece-' + item,
															
 
																+            item == boxArractivelass ? 'active' : '',
															
 
																+          ]"
															
 
																+          :style="{ backgroundImage: 'url(' + selectedImg + ')' }"
															
 
																+          @click="changePositon($event, item)"
															
 
																+          :ref="'piece' + item"
															
 
																+        ></div>
															
 
																+      </div>
															
 
																+      <div class="btn" id="change" @click="reOrder()">重新排序</div>
															
 
																+      <div class="btn" id="back" @click="goBack()">返回</div>
															
 
																+    </div>
															
 
																+
															
 
																+    <div class="result-page">
															
 
																+      <div class="success-text">恭喜闯关成功~!</div>
															
 
																+      <div class="total-time">
															
 
																+        用时: <span id="use_time">{{ 180 - dealtime }}</span
															
 
																+        >s
															
 
																+      </div>
															
 
																+      <div class="btn" @click="generateImg">生成战绩海报</div>
															
 
																+      <div class="btn" @click="onceAgain()">再来一次</div>
															
 
																+    </div>
															
 
																+
															
 
																+    <div class="preview-page last-page">
															
 
																+      <img :src="canvasUrl" alt="图片" />
															
 
																+      <div class="btn play-again" @click="reStart()">重新再来</div>
															
 
																+      <div class="btn share-other" @click="isVisible = true">我要分享</div>
															
 
																+    </div>
															
 
																+    <div class="share-bg" v-if="isVisible" @click="isVisible = false" />
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from "echarts"; //引入echarts
															
 
																+import "echarts-liquidfill";
															
 
																+export default {
															
 
																+  name: "HelloWorld",
															
 
																+  props: {
															
 
																+    msg: String,
															
 
																+  },
															
 
																+  data() {
															
 
																+    return {
															
 
																+      startDx: 0, // 初始位移，用于返回上一页
															
 
																+      activeClass: -1,
															
 
																+      boxArractivelass: -1,
															
 
																+      prevIndex: null,
															
 
																+      curIndex: 0,
															
 
																+      curposArr: [],
															
 
																+      clickStartBtn: false,
															
 
																+      uploadimg: "",
															
 
																+      selectedImg: "",
															
 
																+      boxArr: new Array(9).fill(1).map((item, index) => {
															
 
																+        return index;
															
 
																+      }),
															
 
																+      pieces: document.querySelectorAll(".piece"),
															
 
																+      pool: this.generateMatrix(3, 28, 20),
															
 
																+      matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
															
 
																+      //  matrixArr:this.shuffle(this.pieces, this.pool),
															
 
																+      imgArr: [
															
 
																+        // { url: require("../assets/images/timg2.jpeg") },
															
 
																+        // { url: require("../assets/images/timg3.jpeg") },
															
 
																+        // { url: require("../assets/images/timg.jpeg") },
															
 
																+        // { url: require("../assets/images/caixushen.jpg") },
															
 
																+        // { url: require("../assets/images/yang.jpeg") },
															
 
																+        // { url: require("../assets/images/re.jpeg") },
															
 
																+        // { url: require("../assets/images/timg4.jpeg") },
															
 
																+        // { url: require("../assets/images/timg6.jpeg") }
															
 
																+        { url: require("../../../assets/images/puzzles/2020-10-22-pic2.jpeg") },
															
 
																+        {
															
 
																+          url: require("../../../assets/images/puzzles/2020-10-22-pic47.jpeg"),
															
 
																+        },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic3.jpeg") },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic5.jpeg") },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic4.jpeg") },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic1.jpeg") },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic7.jpeg") },
															
 
																+        // { url: require("../assets/images/2020-10-22-pic8.jpeg") }
															
 
																+      ],
															
 
																+      wall: 0,
															
 
																+      prevEl: null, // 上一个元素,
															
 
																+      dealtime: 180,
															
 
																+      timer: null,
															
 
																+      issuccess: false,
															
 
																+      canvasUrl: "",
															
 
																+      isVisible: false,
															
 
																+    };
															
 
																+  },
															
 
																+  methods: {
															
 
																+    getItem(index) {
															
 
																+      this.activeClass = index;
															
 
																+    },
															
 
																+    onFileChange(e) {
															
 
																+      var files = e.target.files || e.dataTransfer.files;
															
 
																+      if (!files.length) return;
															
 
																+      this.createImage(files[0]);
															
 
																+    },
															
 
																+    createImage(file) {
															
 
																+      //   var image = new Image();
															
 
																+      var reader = new FileReader();
															
 
																+      var vm = this;
															
 
																+
															
 
																+      reader.onload = (e) => {
															
 
																+        vm.uploadimg = e.target.result;
															
 
																+        // console.log(123,e.target.result)
															
 
																+        this.imgArr.push({
															
 
																+          url: e.target.result,
															
 
																+        });
															
 
																+      };
															
 
																+      reader.readAsDataURL(file);
															
 
																+    },
															
 
																+    startGame(picIndex) {
															
 
																+      // if (this.activeClass == -1) {
															
 
																+      //   alert("请选择图片");
															
 
																+      //   return;
															
 
																+      // }
															
 
																+      //   this.dealtime = 180;
															
 
																+      this.timer = setInterval(this.timeStart, 1000);
															
 
																+      this.startDx = this.startDx - 100;
															
 
																+      this.transformX(this.$refs.wrap, this.startDx + "vw");
															
 
																+      this.selectedImg = this.imgArr[picIndex].url;
															
 
																+
															
 
																+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
															
 
																+      //   console.log(222);
															
 
																+    },
															
 
																+    reOrder() {
															
 
																+      //this.matrixArr = this.upsetArr(this.generateMatrix(3, 28, 20));
															
 
																+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
															
 
																+    },
															
 
																+    // 点击高亮并且切换对应位置 (想办法交换对应索引位置的x,y值即可)
															
 
																+    changePositon(e, item) {
															
 
																+      //点击小图片切换位置方法
															
 
																+      let reg = /active/g;
															
 
																+      // console.log(e, item);
															
 
																+      this.boxArractivelass = item;
															
 
																+      let pieces = document.querySelectorAll(".piece");
															
 
																+      if (!this.wall) {
															
 
																+        this.wall = 1;
															
 
																+        this.prevEl = e.target;
															
 
																+        for (var i = 0, len = pieces.length; i < len; i++) {
															
 
																+          // 使用replace为了避免元素后期加入其他类名
															
 
																+          pieces[i].className = pieces[i].className.replace(" active", "");
															
 
																+        }
															
 
																+        !reg.test(this.className) && (this.className += " active");
															
 
																+        // this.className= this.className.replace(' active', '');
															
 
																+      } else {
															
 
																+        this.wall = 0;
															
 
																+        var prevIndex = +this.prevEl.getAttribute("index"),
															
 
																+          curIndex = +e.target.getAttribute("index");
															
 
																+
															
 
																+        // 置换数组
															
 
																+        this.swap(this.pool, prevIndex, curIndex);
															
 
																+        // console.log("prevIndex", "curIndex", prevIndex, curIndex);
															
 
																+        this.prevEl.style.transform =
															
 
																+          "translate(" +
															
 
																+          this.pool[prevIndex].x +
															
 
																+          "vw," +
															
 
																+          this.pool[prevIndex].y +
															
 
																+          "vh" +
															
 
																+          ")";
															
 
																+        e.target.style.transform =
															
 
																+          "translate(" +
															
 
																+          this.pool[curIndex].x +
															
 
																+          "vw," +
															
 
																+          this.pool[curIndex].y +
															
 
																+          "vh" +
															
 
																+          ")";
															
 
																+        // 清除样式
															
 
																+        // this.prevEl.className= this.prevEl.className.replace(' active', '');
															
 
																+        this.boxArractivelass = -1;
															
 
																+
															
 
																+        // 校验是否成功
															
 
																+        if (this.isTestSuccess(this.pool)) {
															
 
																+          // 清除计时器
															
 
																+          // alert('success');
															
 
																+          // this.clickStartBtn = true;
															
 
																+          clearInterval(this.timer);
															
 
																+          this.startDx -= 100;
															
 
																+          this.issuccess = true;
															
 
																+
															
 
																+          // $('#playArea')[0].classList.add('active');
															
 
																+          // $('#use_time').html(180-dealtime);
															
 
																+          //   setTimeout(function() {
															
 
																+          this.transformX(this.$refs.wrap, this.startDx + "vw");
															
 
																+          //   }, 1200);
															
 
																+        }
															
 
																+      }
															
 
																+    },
															
 
																+
															
 
																+    timeStart() {
															
 
																+      this.dealtime--;
															
 
																+      if (this.dealtime < 1) {
															
 
																+        clearInterval(this.timer);
															
 
																+        alert("挑战失败，请返回重新开始");
															
 
																+      }
															
 
																+    },
															
 
																+    // overtime(num) {
															
 
																+    //   this.step = num;
															
 
																+    // },
															
 
																+    // 滑动元素
															
 
																+    transformX(el, dx) {
															
 
																+      el.style.transform = "translateX(" + dx + ")";
															
 
																+    },
															
 
																+    resetTime() {
															
 
																+      this.dealtime = 180;
															
 
																+      clearInterval(this.timer);
															
 
																+    },
															
 
																+    goBack() {
															
 
																+      // 清理定时器,返回
															
 
																+      //   this.clickStartBtn = false;
															
 
																+      this.startDx += 100;
															
 
																+      this.transformX(this.$refs.wrap, this.startDx + "vw");
															
 
																+      this.resetTime();
															
 
																+    },
															
 
																+    onceAgain() {
															
 
																+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
															
 
																+      this.startDx = -100;
															
 
																+      this.transformX(this.$refs.wrap, this.startDx + "vw");
															
 
																+      this.resetTime();
															
 
																+      this.dealtime = 180;
															
 
																+      this.timer = setInterval(this.timeStart, 1000);
															
 
																+      //    this.$refs.child.initTime();
															
 
																+    },
															
 
																+    reStart() {
															
 
																+      this.startDx = this.startDx + 300;
															
 
																+      this.transformX(this.$refs.wrap, this.startDx + "vw");
															
 
																+      this.resetTime();
															
 
																+      // this.dealtime = 180;
															
 
																+      // this.timer = setInterval(this.timeStart, 1000);
															
 
																+    },
															
 
																+    // 生成战绩海报
															
 
																+    generateImg() {
															
 
																+      var canvas = document.createElement("canvas");
															
 
																+
															
 
																+      if (canvas.getContext) {
															
 
																+        var winW = window.innerWidth,
															
 
																+          winH = window.innerHeight,
															
 
																+          ctx = canvas.getContext("2d");
															
 
																+        canvas.width = winW;
															
 
																+        canvas.height = winH;
															
 
																+
															
 
																+        // 绘制背景
															
 
																+        // ctx.fillStyle = '#06c';
															
 
																+        var linear = ctx.createLinearGradient(0, 0, 0, winH);
															
 
																+        linear.addColorStop(0, "#a1c4fd");
															
 
																+        linear.addColorStop(1, "#c2e9fb");
															
 
																+        ctx.fillStyle = linear;
															
 
																+        ctx.fillRect(0, 0, winW, winH);
															
 
																+        ctx.fill();
															
 
																+
															
 
																+        // 绘制顶部图像
															
 
																+        var imgH = 0;
															
 
																+        var that = this;
															
 
																+        var img = new Image();
															
 
																+        img.src = that.selectedImg;
															
 
																+        img.setAttribute("crossOrigin", "Anonymous");
															
 
																+        img.onload = function () {
															
 
																+          // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
															
 
																+          imgH = (0.5 * winW * this.height) / this.width;
															
 
																+          // ctx.drawImage(img, 0.2 * winW, 0.1 * winH, 0.6 * winW, imgH);
															
 
																+          ctx.drawImage(img, 0.2 * winW, 20, 0.6 * winW, imgH);
															
 
																+          // drawText();
															
 
																+          // ctx.save();
															
 
																+          ctx.fillStyle = "#fff";
															
 
																+          ctx.font = 20 + "px Helvetica";
															
 
																+          ctx.textBaseline = "hanging";
															
 
																+          ctx.textAlign = "center";
															
 
																+          ctx.moveTo(10, 10);
															
 
																+          ctx.fillText(
															
 
																+            "我只用了" + (180 - that.dealtime) + "s," + "快来挑战！",
															
 
																+            winW / 2,
															
 
																+            0.1 * winH + imgH
															
 
																+            // 80+imgH
															
 
																+            // 100
															
 
																+          );
															
 
																+          // ctx.restore();
															
 
																+          // drawTip();
															
 
																+
															
 
																+          // ctx.save();
															
 
																+          ctx.fillStyle = "#000";
															
 
																+          ctx.font = 14 + "px Helvetica";
															
 
																+          ctx.textBaseline = "hanging";
															
 
																+          ctx.textAlign = "center";
															
 
																+          ctx.moveTo(-30, 10);
															
 
																+          ctx.fillText("关注下方二维码开始游戏", winW / 2, 0.18 * winH + imgH);
															
 
																+          // ctx.restore();
															
 
																+          // drawCode();
															
 
																+
															
 
																+          var imgCode = new Image();
															
 
																+          imgCode.src = require("../../../assets/images/puzzles/code.jpg");
															
 
																+          imgCode.onload = function () {
															
 
																+            ctx.drawImage(
															
 
																+              imgCode,
															
 
																+              0.35 * winW,
															
 
																+              0.25 * winH + imgH,
															
 
																+              0.3 * winW,
															
 
																+              0.3 * winW
															
 
																+            );
															
 
																+
															
 
																+            // 生成预览图
															
 
																+            var img = new Image();
															
 
																+            img.src = that.convertCanvasToImage(canvas, 1).src;
															
 
																+            img.setAttribute("crossOrigin", "Anonymous");
															
 
																+            img.className = "previewImg";
															
 
																+            img.onload = function () {
															
 
																+              that.canvasUrl = this.src;
															
 
																+              that.startDx = that.startDx - 100;
															
 
																+              that.transformX(that.$refs.wrap, that.startDx + "vw");
															
 
																+            };
															
 
																+          };
															
 
																+        };
															
 
																+      } else {
															
 
																+        alert("浏览器不支持canvas！");
															
 
																+      }
															
 
																+    },
															
 
																+
															
 
																+    // 生成n维矩阵
															
 
																+    generateMatrix(n, dx, dy) {
															
 
																+      var arr = [],
															
 
																+        index = 0;
															
 
																+      for (var i = 0; i < n; i++) {
															
 
																+        for (var j = 0; j < n; j++) {
															
 
																+          arr.push({ x: j * dx, y: i * dy, index: index });
															
 
																+          index++;
															
 
																+        }
															
 
																+      }
															
 
																+      return arr;
															
 
																+    },
															
 
																+
															
 
																+    shuffle(els, arr) {
															
 
																+      this.upsetArr(arr);
															
 
																+      for (var i = 0, len = els.length; i < len; i++) {
															
 
																+        var el = els[i];
															
 
																+        el.setAttribute("index", i); // 将打乱后的数组索引缓存到元素中
															
 
																+        el.style.transform =
															
 
																+          "translate(" + arr[i].x + "vw," + arr[i].y + "vh" + ")";
															
 
																+      }
															
 
																+    },
															
 
																+    // https://www.xiabingbao.com/post/javascript/js-random-array.html
															
 
																+    upsetArr(arr) {
															
 
																+      //   console.log("arr", JSON.stringify(arr));
															
 
																+      // 方法1:
															
 
																+      return arr.sort(function () {
															
 
																+        return Math.random() > 0.5 ? -1 : 1;
															
 
																+      });
															
 
																+    },
															
 
																+    // 置换数组(对应索引的x,y值进行交换)
															
 
																+    swap(arr, indexA, indexB) {
															
 
																+      // let targetArr = [];
															
 
																+      // arr.map(item => {
															
 
																+      //   if (item.index == indexA || item.index == indexB) {
															
 
																+      //     targetArr.push(item);
															
 
																+      //   }
															
 
																+      // });
															
 
																+      // [targetArr[0].x, targetArr[1].x] = [targetArr[1].x, targetArr[0].x];
															
 
																+      // [targetArr[0].y, targetArr[1].y] = [targetArr[1].y, targetArr[0].y];
															
 
																+
															
 
																+      // return targetArr;
															
 
																+      // var cache = arr[indexA];
															
 
																+      // arr[indexA] = arr[indexB];
															
 
																+      // arr[indexB] = cache;
															
 
																+
															
 
																+      // ES6的解耦交换方式： [arr[index], arr[n]] = [arr[n], arr[index]];
															
 
																+      [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
															
 
																+    },
															
 
																+
															
 
																+    // 校验是否成功方法
															
 
																+    isTestSuccess(arr) {
															
 
																+      return arr.every(function (item, i) {
															
 
																+        return item.index === i;
															
 
																+      });
															
 
																+    },
															
 
																+    // 将canvas转化为图片
															
 
																+    convertCanvasToImage(canvas, quality) {
															
 
																+      var image = new Image();
															
 
																+      image.src = canvas.toDataURL("image/png", quality);
															
 
																+      return image;
															
 
																+    },
															
 
																+
															
 
																+    drawLiquidfill() {
															
 
																+      // 基于准备好的dom，初始化echarts实例
															
 
																+      let hygrometer = echarts.init(document.getElementById("hygrometer"));
															
 
																+      // 使用指定的配置项和数据显示图表
															
 
																+      hygrometer.setOption({
															
 
																+        tooltip: {
															
 
																+          show: true,
															
 
																+        },
															
 
																+
															
 
																+        series: [
															
 
																+          {
															
 
																+            name: "puzzle",
															
 
																+            type: "liquidFill",
															
 
																+            radius: "80px",
															
 
																+            data: [0.45],
															
 
																+            direction: "none", //取消移动方向
															
 
																+            amplitude: 0, //波的振幅
															
 
																+            waveAnimation: false, //动画效果
															
 
																+            animationDuration: 0,
															
 
																+            animationDurationUpdate: 0,
															
 
																+            label: {
															
 
																+              normal: {
															
 
																+                color: "#ff7900",
															
 
																+                insideColor: "#ff7900",
															
 
																+                textStyle: {
															
 
																+                  fontSize: 20,
															
 
																+                  fontWeight: "bold",
															
 
																+                },
															
 
																+              },
															
 
																+            },
															
 
																+            backgroundStyle: {
															
 
																+              color: "#fff",
															
 
																+            },
															
 
																+            color: [
															
 
																+              {
															
 
																+                type: "linear",
															
 
																+                x: 0,
															
 
																+                y: 1,
															
 
																+                x2: 0,
															
 
																+                y2: 0,
															
 
																+                colorStops: [
															
 
																+                  {
															
 
																+                    offset: 1,
															
 
																+                    color: ["#ffff00"], // 0% 处的颜色
															
 
																+                  },
															
 
																+                  {
															
 
																+                    offset: 0,
															
 
																+                    color: ["#ffff00"], // 100% 处的颜色
															
 
																+                  },
															
 
																+                ],
															
 
																+                global: false, // 缺省为 false
															
 
																+              },
															
 
																+            ],
															
 
																+            outline: {
															
 
																+              show: true,
															
 
																+              borderDistance: 0,
															
 
																+              itemStyle: {
															
 
																+                borderColor: "#fdd35d",
															
 
																+                borderWidth: 3,
															
 
																+              },
															
 
																+            },
															
 
																+          },
															
 
																+        ],
															
 
																+      });
															
 
																+    },
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    document.body.style.backgroundColor = "#39f"; //背景色
															
 
																+    this.drawLiquidfill();
															
 
																+  },
															
 
																+};
															
 
																+</script>
															
 
																+
															
 
																+<!-- Add "scoped" attribute to limit CSS to this component only -->
															
 
																+<style scoped>
															
 
																+.wrap {
															
 
																+  display: flex;
															
 
																+  width: 400vw;
															
 
																+  transition: transform 1s cubic-bezier(0.52, 0.37, 0.16, 1.32);
															
 
																+}
															
 
																+
															
 
																+div {
															
 
																+  box-sizing: border-box;
															
 
																+}
															
 
																+
															
 
																+.btn {
															
 
																+  display: inline-block;
															
 
																+  padding: 10px 60px;
															
 
																+  width: 300px;
															
 
																+  background-color: #06c;
															
 
																+  color: #fff;
															
 
																+  cursor: pointer;
															
 
																+  margin: 40px auto 10px;
															
 
																+}
															
 
																+#back {
															
 
																+  margin-top: 10px;
															
 
																+}
															
 
																+.play-page,
															
 
																+.result-page,
															
 
																+.start-page,
															
 
																+.start-page .title {
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.play-page,
															
 
																+.preview-page,
															
 
																+.result-page,
															
 
																+.start-page {
															
 
																+  position: relative;
															
 
																+  width: 100vw;
															
 
																+  height: 100vh;
															
 
																+}
															
 
																+
															
 
																+.start-page .title {
															
 
																+  line-height: 4em;
															
 
																+  font-size: 24px;
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list {
															
 
																+  width: 90%;
															
 
																+  display: flex;
															
 
																+  flex-wrap: wrap;
															
 
																+  margin: 0 auto;
															
 
																+  border: 3px solid;
															
 
																+  justify-content: space-around;
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list .img-wrap {
															
 
																+  margin-bottom: 0;
															
 
																+  width: 45%;
															
 
																+  /* height: 22vh; */
															
 
																+  /* overflow: hidden; */
															
 
																+}
															
 
																+.img-wrap>img{
															
 
																+  width: 100%;
															
 
																+  height: 97px;
															
 
																+}
															
 
																+.start-page .album-list .img-wrap.active {
															
 
																+  /* border: 4px solid #f00; */
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list .img-wrap img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list .img-wrap .file-wrap {
															
 
																+  position: relative;
															
 
																+  height: 100%;
															
 
																+  background-position: center center;
															
 
																+  background-size: 100%;
															
 
																+  background-repeat: no-repeat;
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list .img-wrap .file-wrap::before {
															
 
																+  content: "+";
															
 
																+  position: absolute;
															
 
																+  top: 50%;
															
 
																+  left: 50%;
															
 
																+  transform: translate(-50%, -50%);
															
 
																+  font-size: 60px;
															
 
																+  color: #ccc;
															
 
																+  cursor: pointer;
															
 
																+}
															
 
																+
															
 
																+.start-page .album-list .img-wrap .file-wrap input {
															
 
																+  position: absolute;
															
 
																+  left: 0;
															
 
																+  top: 0;
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  opacity: 0;
															
 
																+}
															
 
																+
															
 
																+.start-page-ft {
															
 
																+  position: absolute;
															
 
																+  width: 100%;
															
 
																+  bottom: 20px;
															
 
																+  font-size: 12px;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+
															
 
																+.start-page-ft a {
															
 
																+  color: #06c;
															
 
																+}
															
 
																+
															
 
																+.play-page {
															
 
																+  background-color: #4e2503;
															
 
																+}
															
 
																+.play-page .deloy {
															
 
																+  padding: 10px 20px;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.play-page .play-area {
															
 
																+  position: relative;
															
 
																+  width: 84vw;
															
 
																+  height: 60vh;
															
 
																+  display: flex;
															
 
																+  flex-wrap: wrap;
															
 
																+  margin: 20px auto;
															
 
																+  outline: #ccc solid 4px;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area.active {
															
 
																+  outline-color: #1f8b40;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece {
															
 
																+  position: absolute;
															
 
																+  left: 0;
															
 
																+  top: 0;
															
 
																+  width: 28vw;
															
 
																+  height: 20vh;
															
 
																+  border: 1px solid transparent;
															
 
																+  /* background-image: url(../assets/images/caixushen.jpg); */
															
 
																+  background-repeat: no-repeat;
															
 
																+  background-size: 84vw 60vh;
															
 
																+  transition: transform 0.6s ease-in-out;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece.active {
															
 
																+  border: 3px solid red;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-0 {
															
 
																+  background-position: 0 0;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-1 {
															
 
																+  background-position: -28vw 0;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-2 {
															
 
																+  background-position: -56vw 0;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-3 {
															
 
																+  background-position: 0 -20vh;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-4 {
															
 
																+  background-position: -28vw -20vh;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-5 {
															
 
																+  background-position: -56vw -20vh;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-6 {
															
 
																+  background-position: 0 -40vh;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-7 {
															
 
																+  background-position: -28vw -40vh;
															
 
																+}
															
 
																+
															
 
																+.play-page .play-area .piece-8 {
															
 
																+  background-position: -56vw -40vh;
															
 
																+}
															
 
																+
															
 
																+.result-page {
															
 
																+  padding-left: 20px;
															
 
																+  padding-right: 20px;
															
 
																+  background-color: #2b2929;
															
 
																+}
															
 
																+
															
 
																+.result-page .success-text {
															
 
																+  padding-top: 160px;
															
 
																+  padding-bottom: 20px;
															
 
																+  font-size: 36px;
															
 
																+  color: #e4d721;
															
 
																+  font-weight: 700;
															
 
																+}
															
 
																+
															
 
																+.result-page .total-time {
															
 
																+  display: block;
															
 
																+  margin-bottom: 30px;
															
 
																+  color: #fff;
															
 
																+  font-size: 24px;
															
 
																+}
															
 
																+.last-page {
															
 
																+  position: relative;
															
 
																+}
															
 
																+
															
 
																+.last-page img {
															
 
																+  position: absolute;
															
 
																+  left: 0;
															
 
																+  top: 0;
															
 
																+}
															
 
																+
															
 
																+.play-again {
															
 
																+  position: absolute;
															
 
																+  bottom: 10px;
															
 
																+  left: 5px;
															
 
																+  z-index: 10;
															
 
																+  width: 48%;
															
 
																+}
															
 
																+
															
 
																+.share-other {
															
 
																+  position: absolute;
															
 
																+  bottom: 10px;
															
 
																+  right: 5px;
															
 
																+  z-index: 10;
															
 
																+  width: 48%;
															
 
																+}
															
 
																+
															
 
																+.share-bg {
															
 
																+  position: fixed;
															
 
																+  top: 0;
															
 
																+  width: 0;
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  background: url("../../../assets/images/puzzles/share.png") no-repeat
															
 
																+    rgba(0, 0, 0, 0.8);
															
 
																+  background-position: top right;
															
 
																+  z-index: 11;
															
 
																+  /* background-size:75%; */
															
 
																+}
															
 
																+
															
 
																+.footed {
															
 
																+  width: 100%;
															
 
																+  position: fixed;
															
 
																+  bottom: 0;
															
 
																+  z-index: -1;
															
 
																+}
															
 
																+.footed > .footed-img {
															
 
																+  width: 100%;
															
 
																+  height: 76px;
															
 
																+  position: fixed;
															
 
																+  bottom: 0;
															
 
																+}
															
 
																+.footed-img > img {
															
 
																+  width: 100%;
															
 
																+  height: 76px;
															
 
																+}
															
 
																+.headers {
															
 
																+  width: 90%;
															
 
																+  margin: 2% auto;
															
 
																+  position: relative;
															
 
																+}
															
 
																+.headers > img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+.headers-left {
															
 
																+  width: 20%;
															
 
																+  text-align: center;
															
 
																+  position: absolute;
															
 
																+  left: 4%;
															
 
																+  top: 37%;
															
 
																+  font-size: 30px;
															
 
																+  color: #fbd91f;
															
 
																+}
															
 
																+.headers-right {
															
 
																+  width: 20%;
															
 
																+  text-align: center;
															
 
																+  position: absolute;
															
 
																+  left: 76%;
															
 
																+  top: 37%;
															
 
																+  font-size: 30px;
															
 
																+  color: #fbd91f;
															
 
																+}
															
 
																+.header-content {
															
 
																+  position: absolute;
															
 
																+  left: 35%;
															
 
																+  top: 27%;
															
 
																+}
															
 
																+.contents-list-item-button {
															
 
																+  width: 65%;
															
 
																+  text-align: center;
															
 
																+  margin: 3% auto;
															
 
																+}
															
 
																+.contents-list-item-button > img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+.contents-list-item-button > p {
															
 
																+  margin-top: -31%;
															
 
																+  font-size: 13px;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+</style>
															
--- a/src/views/ningdongyunying/puzzle/puzzle.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle.vue
@@ -0,0 +1,254 @@
 
																+<template>
															
 
																+  <div>
															
 
																+    <div v-if="show">
															
 
																+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
															
 
																+    </div>
															
 
																+    <div class="kj">
															
 
																+      <div class="kj-position">
															
 
																+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
															
 
																+        <p class="mk">梅花井煤矿</p>
															
 
																+      </div>
															
 
																+      <div class="kj-background " id="kj-backgrounds">
															
 
																+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
															
 
																+        <div class="kj-content">
															
 
																+          <p>专题标题专题标题专题标题专题标题专题标题</p>
															
 
																+          <div class="kj-content-item">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
															
 
																+              alt=""
															
 
																+            />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="kj-progress">
															
 
																+          <div class="kj-progress-item">
															
 
																+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
															
 
																+          </div>
															
 
																+          <span>50%</span>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <div class="kj-background">
															
 
																+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
															
 
																+        <div class="kj-content">
															
 
																+          <p>专题标题专题标题专题标题专题标题专题标题</p>
															
 
																+          <div class="kj-content-item">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
															
 
																+              alt=""
															
 
																+            />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="kj-progress">
															
 
																+          <div class="kj-progress-item">
															
 
																+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
															
 
																+          </div>
															
 
																+          <span>50%</span>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+    <div class="kj">
															
 
																+      <div class="kj-position">
															
 
																+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
															
 
																+        <p class="mk">单位</p>
															
 
																+      </div>
															
 
																+      <div class="kj-background1 " id="kj-backgrounds1">
															
 
																+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
															
 
																+        <div class="kj-content">
															
 
																+          <p>专题标题专题标题专题标题专题标题专题标题</p>
															
 
																+          <div class="kj-content-item">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
															
 
																+              alt=""
															
 
																+            />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="kj-progress">
															
 
																+          <div class="kj-progress-item">
															
 
																+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
															
 
																+          </div>
															
 
																+          <span>50%</span>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <div class="kj-background1 " >
															
 
																+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
															
 
																+        <div class="kj-content">
															
 
																+          <p>专题标题专题标题专题标题专题标题专题标题</p>
															
 
																+          <div class="kj-content-item">
															
 
																+            <img
															
 
																+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
															
 
																+              alt=""
															
 
																+            />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="kj-progress">
															
 
																+          <div class="kj-progress-item">
															
 
																+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
															
 
																+          </div>
															
 
																+          <span>50%</span>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import {} from "../../../assets/images/ningdongyunying/puzzle/单位.png";
															
 
																+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
															
 
																+export default {
															
 
																+  data() {
															
 
																+    return {
															
 
																+      show: true,
															
 
																+      token: sessionStorage.getItem("mytoken")
															
 
																+        ? sessionStorage.getItem("mytoken")
															
 
																+        : "", //token值保存在本地，有的话取值，没有为空
															
 
																+    };
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    document.body.style.backgroundColor = "#39f"; //背景色
															
 
																+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
															
 
																+    this.token = `Bearer ${this.gettoken}`; //获取token值
															
 
																+    sessionStorage.setItem("mytoken", this.token); //存入token值
															
 
																+    // this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
															
 
																+  },
															
 
																+  methods: {
															
 
																+    //tabber返回按钮
															
 
																+    onClickLeft() {
															
 
																+      window.history.back();
															
 
																+    },
															
 
																+
															
 
																+  },
															
 
																+};
															
 
																+</script>
															
 
																+
															
 
																+<style scoped>
															
 
																+.van-nav-bar {
															
 
																+  background: #39f;
															
 
																+}
															
 
																+>>> .van-nav-bar__title {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+>>> .van-nav-bar .van-icon {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+[class*="van-hairline"]:after {
															
 
																+  border: none;
															
 
																+}
															
 
																+.kj {
															
 
																+  width: 90%;
															
 
																+  height: 250px;
															
 
																+  margin: 5% auto 10%;
															
 
																+  background: #fff;
															
 
																+  border: 2px solid #242290;
															
 
																+  border-radius: 5px;
															
 
																+  position: relative;
															
 
																+}
															
 
																+.kj > .kj-position {
															
 
																+  width: 40%;
															
 
																+  height: 45px;
															
 
																+  position: absolute;
															
 
																+  top: -10%;
															
 
																+  left: 8%;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kj-position > img {
															
 
																+  width: 100%;
															
 
																+}
															
 
																+.kj-position > .mk {
															
 
																+  font-size: 20px;
															
 
																+  color: #06a3f4;
															
 
																+  font-weight: 600;
															
 
																+  text-shadow: 0px 2px 0px #fff;
															
 
																+  margin-top: -26%;
															
 
																+}
															
 
																+#kj-backgrounds{
															
 
																+    margin-top: 9%;
															
 
																+}
															
 
																+.kj-background {
															
 
																+  width: 95%;
															
 
																+  height: 95px;
															
 
																+  background: url("../../../assets/images/ningdongyunying/puzzle/蓝框.png");
															
 
																+  background-size: cover;
															
 
																+  margin: 5% auto ;
															
 
																+  border: 1px solid transparent;
															
 
																+}
															
 
																+.kj-background-header {
															
 
																+  width: 54%;
															
 
																+  height: 19px;
															
 
																+  background: url("../../../assets/images/ningdongyunying/puzzle/限时黄.png");
															
 
																+  background-size: cover;
															
 
																+  margin-top: 3%;
															
 
																+  margin-left: 3%;
															
 
																+  font-size: 10px;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kj-content {
															
 
																+  width: 95%;
															
 
																+  height: 40px;
															
 
																+  display: flex;
															
 
																+  justify-content: left;
															
 
																+  margin-left: 3%;
															
 
																+}
															
 
																+.kj-content > p {
															
 
																+  width: 85%;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.kj-content > .kj-content-item {
															
 
																+  width: 18%;
															
 
																+  padding-left: 2%;
															
 
																+}
															
 
																+.kj-content-item > img {
															
 
																+  width: 40px;
															
 
																+}
															
 
																+.kj-content-size {
															
 
																+  font-size: 30px;
															
 
																+}
															
 
																+.kj-progress {
															
 
																+  width: 95%;
															
 
																+  display: flex;
															
 
																+  justify-content: left;
															
 
																+  margin-left: 3%;
															
 
																+}
															
 
																+.kj-progress .kj-progress-item {
															
 
																+  width: 84%;
															
 
																+  margin-top: 3%;
															
 
																+}
															
 
																+.kj-progress > span {
															
 
																+  font-size: 10px;
															
 
																+  margin-top: 1%;
															
 
																+  margin-left: 2%;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.kj-background-header1 {
															
 
																+  width: 54%;
															
 
																+  height: 19px;
															
 
																+  background: url("../../../assets/images/ningdongyunying/puzzle/限时灰.png");
															
 
																+  background-size: cover;
															
 
																+  margin-top: 3%;
															
 
																+  margin-left: 3%;
															
 
																+  font-size: 10px;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+#kj-backgrounds1{
															
 
																+    margin-top: 9%;
															
 
																+}
															
 
																+.kj-background1 {
															
 
																+  width: 95%;
															
 
																+  height: 95px;
															
 
																+  background: url("../../../assets/images/ningdongyunying/puzzle/黄框.png");
															
 
																+  background-size: cover;
															
 
																+  margin: 5% auto ;
															
 
																+  border: 1px solid transparent;
															
 
																+}
															
 
																+.kj-background1>.kj-background-header{
															
 
																+  width: 54%;
															
 
																+  height: 19px;
															
 
																+  background: url("../../../assets/images/ningdongyunying/puzzle/限时蓝.png");
															
 
																+  background-size: cover;
															
 
																+  margin-top: 3%;
															
 
																+  margin-left: 3%;
															
 
																+  font-size: 10px;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kj-background1>.kj-content > p{
															
 
																+  color: black;
															
 
																+}
															
 
																+</style>
															
--- a/src/views/xixuanzhongxin/leader-mailbox/leader-home.vue
+++ b/src/views/xixuanzhongxin/leader-mailbox/leader-home.vue
@@ -74,6 +74,7 @@ export default {
 
																           }
															
 
																         });
															
 
																     },
															
 
																+    
															
 
																     //我的提交
															
 
																     leader_home_list3() {
															
 
																       this.$router.push(
															
@@ -90,7 +91,7 @@ export default {
 
																     this.gettoken =getAllUrlParams(window.location.href).token;
															
 
																     this.token = `Bearer ${this.gettoken}`; //获取token值
															
 
																     sessionStorage.setItem("mytoken", this.token); //存入token值
															
 
																-    this.show = Boolean(getAllUrlParams(window.location.href).tabber); //获取tabber
															
 
																+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
															
 
																   },
															
 
																 };
															
 
																 </script>
															
--- a/src/views/zaoquan/kuangjingshui/kuangjingshui.vue
+++ b/src/views/zaoquan/kuangjingshui/kuangjingshui.vue
@@ -0,0 +1,326 @@
 
																+<template>
															
 
																+  <div>
															
 
																+    <div v-if="show">
															
 
																+      <van-nav-bar title="矿井水处理" left-arrow @click-left="onClickLeft" />
															
 
																+    </div>
															
 
																+    <div class="kjs">
															
 
																+      <div class="kjs-header">
															
 
																+        <img
															
 
																+          src="../../../assets/images/zaoquan/kuangjingshui/头部.png"
															
 
																+          alt=""
															
 
																+        />
															
 
																+      </div>
															
 
																+      <div class="kjs-header-item">
															
 
																+        <h2>矿井水处理系统</h2>
															
 
																+      </div>
															
 
																+      <div class="kjs-header-item1">
															
 
																+        <p>{{ time | parsetime }}</p>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+    <div class="content">
															
 
																+      <div class="kjs-content1">
															
 
																+        <div class="kjs-content1-header">
															
 
																+          <img
															
 
																+            src="../../../assets/images/zaoquan/kuangjingshui/高密沉淀.png"
															
 
																+          />
															
 
																+          <p>高密沉淀</p>
															
 
																+        </div>
															
 
																+        <div>
															
 
																+          <div>
															
 
																+            <div class="kjs-content1-content">
															
 
																+              <div class="kjs-content1-color"></div>
															
 
																+              <p>矸石山调节池液位</p>
															
 
																+            </div>
															
 
																+            <div class="kjs-content1-content1">
															
 
																+              <p>矸石山调节池A</p>
															
 
																+              <p class="kjs-content1-content1-p">{{ gaoA }}</p>
															
 
																+              <span>m</span>
															
 
																+            </div>
															
 
																+            <div class="kjs-content1-content1">
															
 
																+              <p>矸石山调节池B</p>
															
 
																+              <p class="kjs-content1-content1-p">{{ gaoB }}</p>
															
 
																+              <span>m</span>
															
 
																+            </div>
															
 
																+          </div>
															
 
																+          <div>
															
 
																+            <div class="kjs-content1-content">
															
 
																+              <div class="kjs-content1-color"></div>
															
 
																+              <p>外排水池液位</p>
															
 
																+            </div>
															
 
																+            <div class="kjs-content1-content1">
															
 
																+              <p>外排水池A液位</p>
															
 
																+              <p class="kjs-content1-content1-p">{{ waiA }}</p>
															
 
																+              <span>m</span>
															
 
																+            </div>
															
 
																+            <div class="kjs-content1-content1">
															
 
																+              <p>外排水池B液位</p>
															
 
																+              <p class="kjs-content1-content1-p">{{ waiB }}</p>
															
 
																+              <span>m</span>
															
 
																+            </div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="kjs-footer"></div>
															
 
																+      </div>
															
 
																+      <div class="kjs-content1">
															
 
																+        <div class="kjs-content1-header">
															
 
																+          <img src="../../../assets/images/zaoquan/kuangjingshui/快滤池.png" />
															
 
																+          <p>快滤池</p>
															
 
																+        </div>
															
 
																+        <div>
															
 
																+          <div class="kjs-content1-content2">
															
 
																+            <p>滤池出水流量</p>
															
 
																+            <div>
															
 
																+              <p class="kjs-content1-content1-p">{{ lvA }}</p>
															
 
																+            </div>
															
 
																+            <span>m3/h</span>
															
 
																+          </div>
															
 
																+          <div class="kjs-content1-content2">
															
 
																+            <p>滤池出水流量累积</p>
															
 
																+            <div>
															
 
																+              <p class="kjs-content1-content1-p">{{ lvB }}</p>
															
 
																+            </div>
															
 
																+            <span>m3</span>
															
 
																+          </div>
															
 
																+          <div class="kjs-content1-content2">
															
 
																+            <p>矿井水进水瞬时流量</p>
															
 
																+            <div>
															
 
																+              <p class="kjs-content1-content1-p">{{ kuangA }}</p>
															
 
																+            </div>
															
 
																+            <span>m3/h</span>
															
 
																+          </div>
															
 
																+          <div class="kjs-content1-content2">
															
 
																+            <p>矿井水进水流量累积</p>
															
 
																+            <div>
															
 
																+              <p class="kjs-content1-content1-p">{{ kuangB }}</p>
															
 
																+            </div>
															
 
																+            <span>m3</span>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+//时间戳
															
 
																+var getTime = function () {
															
 
																+  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 hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
															
 
																+  var minutes =
															
 
																+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
															
 
																+  var seconds =
															
 
																+    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
															
 
																+  var week = date.getDay();
															
 
																+  var weeks = ["日", "一", "二", "三", "四", "五", "六"];
															
 
																+  var getWeek = "星期" + weeks[week];
															
 
																+  return (
															
 
																+    year +
															
 
																+    "年" +
															
 
																+    month +
															
 
																+    "月" +
															
 
																+    day +
															
 
																+    "日" +
															
 
																+    hour +
															
 
																+    ":" +
															
 
																+    minutes +
															
 
																+    ":" +
															
 
																+    seconds +
															
 
																+    getWeek
															
 
																+  );
															
 
																+};
															
 
																+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
															
 
																+export default {
															
 
																+  data() {
															
 
																+    return {
															
 
																+      time: "", //时间戳时间
															
 
																+      token: sessionStorage.getItem("mytoken")
															
 
																+        ? sessionStorage.getItem("mytoken")
															
 
																+        : "", //token值保存在本地，有的话取值，没有为空
															
 
																+      show: false, //tabber是否显示
															
 
																+      info: "zaoquan",
															
 
																+      gaoA: [],
															
 
																+      gaoB: [],
															
 
																+      waiA: [],
															
 
																+      waiB: [],
															
 
																+      lvA: [],
															
 
																+      lvB: [],
															
 
																+      kuangA: [],
															
 
																+      kuangB: [],
															
 
																+    };
															
 
																+  },
															
 
																+  filters: {
															
 
																+    parsetime: getTime, //过滤动态显示时间
															
 
																+  },
															
 
																+  methods: {
															
 
																+    refreshTime() {
															
 
																+      var newtime = getTime();
															
 
																+      this.time = newtime;
															
 
																+    },
															
 
																+    //tabber返回按钮
															
 
																+    onClickLeft() {
															
 
																+      window.history.back();
															
 
																+    },
															
 
																+    getkjsitem() {
															
 
																+      this.$http
															
 
																+        .post(
															
 
																+          "http://nmjt.nxjiewei.com:8011/api/automate/mine_water/get_list",
															
 
																+          {
															
 
																+            mine_id: this.info,
															
 
																+          }
															
 
																+        )
															
 
																+        .then((res) => {
															
 
																+          this.waiA = res.data.content.data[0].point_value.toFixed(2);
															
 
																+          this.waiB = res.data.content.data[1].point_value.toFixed(2);
															
 
																+          this.lvA = res.data.content.data[2].point_value.toFixed(2);
															
 
																+          this.lvB = res.data.content.data[3].point_value;
															
 
																+          this.kuangA = res.data.content.data[4].point_value.toFixed(2);
															
 
																+          this.kuangB = res.data.content.data[5].point_value;
															
 
																+          this.gaoA = res.data.content.data[6].point_value
															
 
																+            ? res.data.content.data[6].point_value
															
 
																+            : "暂无数据";
															
 
																+          this.gaoB = res.data.content.data[7].point_value
															
 
																+            ? res.data.content.data[7].point_value
															
 
																+            : "暂无数据";
															
 
																+        });
															
 
																+    },
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    document.body.style.backgroundColor = "#39f"; //背景色
															
 
																+    this.timer = setInterval(this.refreshTime, 1000); //每隔一秒更新时间
															
 
																+    this.infos = setInterval(this.getkjsitem, 3000); //每隔3秒更新数据
															
 
																+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
															
 
																+    this.token = `Bearer ${this.gettoken}`; //获取token值
															
 
																+    sessionStorage.setItem("mytoken", this.token); //存入token值
															
 
																+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
															
 
																+    this.getkjsitem();
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    clearInterval(this.timer); //销毁阶段清除定时器
															
 
																+    clearInterval(this.infos); //销毁阶段清除定时器
															
 
																+  },
															
 
																+};
															
 
																+</script>
															
 
																+
															
 
																+<style scoped>
															
 
																+.van-nav-bar {
															
 
																+  background: #39f;
															
 
																+}
															
 
																+>>> .van-nav-bar__title {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+>>> .van-nav-bar .van-icon {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+[class*="van-hairline"]:after {
															
 
																+  border: none;
															
 
																+}
															
 
																+.kjs {
															
 
																+  width: 100%;
															
 
																+  height: 180px;
															
 
																+}
															
 
																+.kjs-header {
															
 
																+  width: 100%;
															
 
																+  height: 80px;
															
 
																+  z-index: -1;
															
 
																+}
															
 
																+.kjs-header > img {
															
 
																+  width: 100%;
															
 
																+  height: 180px;
															
 
																+}
															
 
																+.kjs-header-item {
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kjs-header-item > h2 {
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.kjs-header-item1 > p {
															
 
																+  padding-left: 35%;
															
 
																+  padding-top: 8%;
															
 
																+  color: #fff;
															
 
																+}
															
 
																+.kjs-content1 {
															
 
																+  width: 95%;
															
 
																+  margin: 3% auto;
															
 
																+  background: #fff;
															
 
																+  border-radius: 10px;
															
 
																+}
															
 
																+.kjs-content1-header {
															
 
																+  text-align: center;
															
 
																+  border-bottom: 1px solid #f0f0f0;
															
 
																+  width: 95%;
															
 
																+  padding-bottom: 5px;
															
 
																+  margin: 0 auto;
															
 
																+  position: relative;
															
 
																+}
															
 
																+.kjs-content1-header > img {
															
 
																+  width: 40px;
															
 
																+  height: 40px;
															
 
																+  position: absolute;
															
 
																+  top: 9%;
															
 
																+  left: 27%;
															
 
																+}
															
 
																+.kjs-content1-header > p {
															
 
																+  line-height: 48px;
															
 
																+  margin-left: 5%;
															
 
																+}
															
 
																+.kjs-content1-content {
															
 
																+  display: flex;
															
 
																+  justify-content: left;
															
 
																+  margin-top: 4%;
															
 
																+}
															
 
																+.kjs-content1-color {
															
 
																+  width: 4px;
															
 
																+  height: 30px;
															
 
																+  background: #39f;
															
 
																+  margin-left: 2%;
															
 
																+}
															
 
																+.kjs-content1-content > p {
															
 
																+  line-height: 30px;
															
 
																+  margin-left: 2%;
															
 
																+}
															
 
																+.kjs-content1-content1 {
															
 
																+  display: flex;
															
 
																+  justify-content: space-around;
															
 
																+  border-bottom: 1px solid #f0f0f0;
															
 
																+  width: 95%;
															
 
																+  padding-bottom: 4%;
															
 
																+  margin: 5% auto 0;
															
 
																+}
															
 
																+.kjs-content1-content1-p {
															
 
																+  width: 90px;
															
 
																+  background: #8adaff;
															
 
																+  text-align: center;
															
 
																+  line-height: 21px;
															
 
																+}
															
 
																+.kjs-content1-content2 {
															
 
																+  display: flex;
															
 
																+  justify-content: space-around;
															
 
																+  border-bottom: 1px solid #f0f0f0;
															
 
																+  width: 95%;
															
 
																+  padding-bottom: 4%;
															
 
																+  margin: 5% auto 0;
															
 
																+}
															
 
																+.kjs-content1-content2 > p {
															
 
																+  width: 48%;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kjs-content1-content2 > div {
															
 
																+  width: 32%;
															
 
																+}
															
 
																+.kjs-content1-content2 > div > p {
															
 
																+  margin: 0 auto;
															
 
																+}
															
 
																+.kjs-content1-content2 > span {
															
 
																+  width: 20%;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+.kjs-footer {
															
 
																+  height: 20px;
															
 
																+}
															
 
																+</style>
															
--- a/src/views/zaoquan/tongfen/tongfen.vue
+++ b/src/views/zaoquan/tongfen/tongfen.vue
@@ -0,0 +1,19 @@
 
																+<template>
															
 
																+    <div>
															
 
																+        <Header></Header>
															
 
																+        <h1>通风</h1>
															
 
																+    </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+    import Header from "../../../components/Header/Header.vue"
															
 
																+    export default {
															
 
																+        components:{
															
 
																+            Header
															
 
																+        }
															
 
																+    }
															
 
																+</script>
															
 
																+
															
 
																+<style scoped>
															
 
																+
															
 
																+</style>
															
--- a/yarn.lock
+++ b/yarn.lock
@@ -2910,6 +2910,11 @@ dashdash@^1.12.0:
 
																   dependencies:
															
 
																     assert-plus "^1.0.0"
															
 
																+dayjs@^1.10.6:
															
 
																+  version "1.10.6"
															
 
																+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
															
 
																+  integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==
															
 
																+
															
 
																 de-indent@^1.0.2:
															
 
																   version "1.0.2"
															
 
																   resolved "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
															
@@ -3199,6 +3204,19 @@ ecc-jsbn@~0.1.1:
 
																     jsbn "~0.1.0"
															
 
																     safer-buffer "^2.1.0"
															
 
																+echarts-liquidfill@^3.0.0:
															
 
																+  version "3.0.0"
															
 
																+  resolved "https://registry.yarnpkg.com/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz#1d41e6cd4016281b525f2f7b5be7879deffa821d"
															
 
																+  integrity sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA==
															
 
																+
															
 
																+echarts@^5.1.2:
															
 
																+  version "5.1.2"
															
 
																+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
															
 
																+  integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
															
 
																+  dependencies:
															
 
																+    tslib "2.0.3"
															
 
																+    zrender "5.1.1"
															
 
																+
															
 
																 ee-first@1.1.1:
															
 
																   version "1.1.1"
															
 
																   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
															
@@ -7315,6 +7333,11 @@ ts-pnp@^1.1.6:
 
																   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
															
 
																   integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
															
 
																+tslib@2.0.3:
															
 
																+  version "2.0.3"
															
 
																+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
															
 
																+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
															
 
																+
															
 
																 tty-browserify@0.0.0:
															
 
																   version "0.0.0"
															
 
																   resolved "https://registry.nlark.com/tty-browserify/download/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
															
@@ -7661,6 +7684,11 @@ vuex@^3.4.0:
 
																   resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
															
 
																   integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
															
 
																+vusui-layer@^1.0.0:
															
 
																+  version "1.0.0"
															
 
																+  resolved "https://registry.yarnpkg.com/vusui-layer/-/vusui-layer-1.0.0.tgz#62b7d71bbcd6bdf30c94d16922b44d753dd96940"
															
 
																+  integrity sha512-+qFJoF9Ug5bjeWXthtpZi7Z0zJDq/qyxWIIioOGyLun6TVxqJyzSSV1ghyiK5wfZep75sC+yXsvNr8rFpwR4xA==
															
 
																+
															
 
																 watchpack-chokidar2@^2.0.1:
															
 
																   version "2.0.1"
															
 
																   resolved "https://registry.nlark.com/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
															
@@ -7983,3 +8011,10 @@ yargs@^16.0.0:
 
																     string-width "^4.2.0"
															
 
																     y18n "^5.0.5"
															
 
																     yargs-parser "^20.2.2"
															
 
																+
															
 
																+zrender@5.1.1:
															
 
																+  version "5.1.1"
															
 
																+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
															
 
																+  integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
															
 
																+  dependencies:
															
 
																+    tslib "2.0.3"