wucl 2 سال پیش
والد
کامیت
2905a3d01e
3فایلهای تغییر یافته به همراه176 افزوده شده و 16 حذف شده
  1. 13 0
      src/api/modules/configuration.js
  2. 49 13
      src/pages/Cycle.vue
  3. 114 3
      src/pages/DashBoard.vue

+ 13 - 0
src/api/modules/configuration.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+  update(params) {
+    return request.put(`configuration`, params)
+  },
+
+  key(params){
+    return request.get(`configuration/${params}`)
+  }
+  
+}

+ 49 - 13
src/pages/Cycle.vue

@@ -6,22 +6,27 @@
 
     <y-page-list-layout :page-list="pageData" :page-para="listQuery" :getList="getList">
       <template slot="left">
-        <el-input v-model="listQuery.itemName" placeholder="请输项目名称" clearable
-          style="width: 320px;float: left;">
+        <el-input v-model="listQuery.itemName" placeholder="请输项目名称" clearable style="width: 320px;float: left;">
         </el-input>
         <el-select v-model="listQuery.typeId" placeholder="请选择问卷类型" clearable
           style="margin-left: 20px;width: 320px; float: left;">
-            <el-option v-for="(o, index) in options" :label="o.label" :value="o.id" />
-          </el-select>
-          <el-select v-model="listQuery.cycleName" placeholder="请选择轮数" clearable
+          <el-option v-for="(o, index) in options" :label="o.label" :value="o.id" />
+        </el-select>
+        <el-select v-model="listQuery.cycleName" placeholder="请选择轮数" clearable
           style="margin-left: 20px;width: 320px;float: left;">
           <el-option v-for="(c, index) in cycleNames" :label="c" :value="c" />
         </el-select>
         <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="searchList" round>搜索
         </el-button>
-        <el-button class="filter-item"  round type="warning" @click="resetSearch()">重置
+        <el-button class="filter-item" round type="warning" @click="resetSearch()">重置
         </el-button>
       </template>
+      <template slot="right">
+        <el-switch style="margin-right: 150px;" v-model="mini.value"  @change="updateMiniStatus" 
+        active-value="true" inactive-value="false"	
+        active-text="开启小程序端" inactive-text="关闭小程序端">
+        </el-switch>
+      </template>
       <parentTable v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;"
         :showSummary="false">
         <el-table-column label="项目名称" align="center">
@@ -109,20 +114,51 @@ export default {
       cycleNames: ['第一轮', '第二轮', '第三轮', '第四轮', '第五轮', '第六轮', '第七轮', '第八轮', '第九轮', '第十轮'],
       originData: [],
       dialogVisibleX: false,
-      analysisData: []
+      analysisData: [],
+      openMiniProgram:null,
+      mini:{
+        id:null,
+        name:null,
+        value:null
+      }
     }
   },
   created() {
     this.getList();
     this.getQuestionType();
+    this.getMiniStatus();
   },
   methods: {
-    getQuestionType(){
-        this.$api.question.simpleAll().then(res=>{
-          if (res.code === 200){
-              this.options = res.data;
-          }
-        })
+    updateMiniStatus(){
+      let mn = this.mini;
+      this.$api.configuration.update(mn).then(res => {
+        if (res.code === 200) {
+          this.$notify({
+                title: '成功',
+                message: '修改成功',
+                type: 'success'
+          });
+        }else{
+          this.$notify.error({
+                title: '错误',
+                message: '修改失败'
+              });
+        }
+      })
+    },
+    getMiniStatus(){
+      this.$api.configuration.key("mini").then(res => {
+        if (res.code === 200) {
+          this.mini = res.data;
+        }
+      })
+    },
+    getQuestionType() {
+      this.$api.question.simpleAll().then(res => {
+        if (res.code === 200) {
+          this.options = res.data;
+        }
+      })
     },
     remove(row) {
       if (row.id) {

+ 114 - 3
src/pages/DashBoard.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="board-container">
-        <div class="header">
+        <div :style="listLoading?mask:''">
+            <div class="header">
             <img src="../assets/logo.png" style="margin-left: 10px; margin-top: 10px;">
         </div>
         <div class="title_info">
@@ -82,6 +83,16 @@
                 <i class="el-icon-s-custom" style="color: green; font-size: xx-large;"></i>
             </span>
         </div>
+        </div>
+        <div id="page" v-if="listLoading">
+        <div id="container">
+            <div id="ring"></div>
+            <div id="ring"></div>
+            <div id="ring"></div>
+            <div id="ring"></div>
+            <div id="h3">LOADING</div>
+        </div>
+</div>
     </div>
 </template>
 
@@ -120,6 +131,7 @@ export default {
                 { prop: 'element1', label: '一级因子' },
                 { prop: 'element2', label: '二级因子' },
             ],
+            mask:'opacity: 0.3;'
         }
     },
     computed: {
@@ -138,7 +150,7 @@ export default {
                 if (data != undefined) {
                     if (data.data != null) {
                         this.getAnalysisList();
-                        this.getOriginList();
+                       //this.getOriginList();
                     }
                     if (data.userSize != undefined) {
                         this.userSize = (data.userSize) - 1;
@@ -165,18 +177,25 @@ export default {
                 console.log("您的浏览器不支持socket")
             } else {
                 // 创建 WebSocketClient 实例并连接到服务端 API 接口
-                this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
+                 this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
+                //this.client = new WebSocketClient('ws://127.0.0.1:8090/apo/ws')
                 this.client.connect()
             }
         },
         getAnalysisList() {
+
             const that = this
+            that.listLoading = true;
             this.$api.dashboard.getMergeData()
                 .then((res) => {
                     that.analysisData = res.data.analysisData;
                     that.itemName = res.data.itemName;
                     that.cycleName = res.data.cycleName;
                     that.type = res.data.typeName;
+                    setTimeout(()=>{
+                        that.listLoading = false
+                    },2000)
+                    
                 })
                 .catch(() => {
                     that.listLoading = false
@@ -222,6 +241,9 @@ export default {
     position: relative;
     width: 100%;
 }
+.mask{
+    opacity: 0.3;
+}
 .left {
     margin: 0;
     padding-left: 10px;
@@ -288,4 +310,93 @@ export default {
     top: 1%;
     height: 40px;
 }
+
+#page {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+#h3 {
+  color: black;
+  font-weight: bold;
+}
+
+#ring {
+  width: 190px;
+  height: 190px;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  position: absolute;
+}
+
+#ring:nth-child(1) {
+  border-bottom: 8px solid rgb(255, 141, 249);
+  animation: rotate1 2s linear infinite;
+}
+
+@keyframes rotate1 {
+  from {
+    transform: rotateX(50deg) rotateZ(110deg);
+  }
+
+  to {
+    transform: rotateX(50deg) rotateZ(470deg);
+  }
+}
+
+#ring:nth-child(2) {
+  border-bottom: 8px solid rgb(255,65,106);
+  animation: rotate2 2s linear infinite;
+}
+
+@keyframes rotate2 {
+  from {
+    transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
+  }
+
+  to {
+    transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
+  }
+}
+
+#ring:nth-child(3) {
+  border-bottom: 8px solid rgb(0,255,255);
+  animation: rotate3 2s linear infinite;
+}
+
+@keyframes rotate3 {
+  from {
+    transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
+  }
+
+  to {
+    transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
+  }
+}
+
+#ring:nth-child(4) {
+  border-bottom: 8px solid rgb(252, 183, 55);
+  animation: rotate4 2s linear infinite;
+}
+
+@keyframes rotate4 {
+  from {
+    transform: rotateX(70deg) rotateZ(270deg);
+  }
+
+  to {
+    transform: rotateX(70deg) rotateZ(630deg);
+  }
+}
 </style>