数据联调

package.json

@@ -21,6 +21,7 @@
     "js-md5": "^0.7.3",
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
+    "mqtt": "4.0.1",
     "protobufjs": "^7.2.4",
     "protobufjs-cli": "^1.1.2",
     "pushstate-server": "^3.1.0",

src/App.vue

@@ -17,12 +17,13 @@
 </template>
 
 <script>
-import { onUnmounted, reactive } from 'vue'
+import { onUnmounted, reactive, onMounted } from 'vue'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Sidebar from '@/components/Sidebar.vue'
 import { useRouter } from 'vue-router'
 import { pathMap, localGet } from '@/utils';
+import mqtt from 'mqtt/dist/mqtt.min';
 export default {
   name: 'App',
   components: {
@@ -36,7 +37,8 @@ export default {
     const state = reactive({
       defaultOpen: ['1', '2', '3', '4'],
       showMenu: true,
-      currentPath: '/dashboard'
+      currentPath: '/dashboard',
+      client: null
     })
     // 监听浏览器原生回退事件
     if (window.history && window.history.pushState) {
@@ -66,6 +68,49 @@ export default {
       document.title = pathMap[to.name]
     })
 
+    onMounted(() => {
+      if (localGet('token')) {
+        state.client = mqtt.connect('ws://www.shikicc.com', {
+          port: 52194,
+          clientId: new Date(),
+          username: 'hsgy',
+          password: "hsgy123",
+          clean: true,
+          keepalive: 1800
+        });
+        mqttMsg();
+      }
+    })
+
+    const mqttMsg = () => {
+      state.client.on("connect", e => {
+        // qos 是通道 一般有 0，1， 2
+        const url = `iot/push/plc_01`;
+        this.client.subscribe([url], { qos: 2 }, error => {
+          if (!error) {
+            console.log("消息订阅成功！");
+            this.mqttAll();
+          } else {
+            console.log("消息订阅失败！");
+          }
+        });
+      });
+
+    }
+
+    // 接收消息
+    const mqttAll = () => {
+      this.client.on("message", (topic, message) => {
+        // var data = JSON.parse(message);
+        console.log(message);
+        // if (data) {
+        //   if (data.topic === `iot/push/plc_01`) {
+        //     var res = data.data;
+        //     return;
+        //   }
+        // }
+      });
+    }
     onUnmounted(() => {
       unwatch();
     })
@@ -78,55 +123,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .layout {
+.layout {
   min-height: 100vh;
   background-color: #ffffff;
-  }
+}
-  .container {
+
+.container {
   height: 100vh;
-  }
+}
-  .content {
+
+.content {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  }
+}
-  .main {
+
+.main {
   height: 100vh;
   overflow: auto;
-  }
+}
-   ::v-deep .el-card__body {
+
+::v-deep .el-card__body {
   height: 100%;
-  }
+}
 </style>
 <style>
-  body {
+body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  }
+}
-  .el-menu {
+
-    border-right: none!important;
+.el-menu {
-  }
+  border-right: none !important;
-  .el-submenu {
+}
+
+.el-submenu {
   border-top: 1px solid hsla(0, 0%, 100%, .05);
   border-bottom: 1px solid rgba(0, 0, 0, .2);
-  }
+}
-  .el-submenu:first-child {
+
+.el-submenu:first-child {
   border-top: none;
-  }
+}
-  .el-submenu [class^="el-icon-"] {
+
-    vertical-align: -1px!important;
+.el-submenu [class^="el-icon-"] {
-  }
+  vertical-align: -1px !important;
-  a {
+}
+
+a {
   color: #409eff;
   text-decoration: none;
-  }
+}
-  .el-pagination {
+
+.el-pagination {
   text-align: center;
   margin-top: 20px;
-  }
+}
-  .el-popper__arrow {
+
+.el-popper__arrow {
   display: none;
-  }
+}
 </style>

src/api/infoApi.js

@@ -1,134 +0,0 @@
-import {
-  getRequest,
-  postJsonRequest,
-  deleteRequest,
-  putRequest,
-} from "@/utils/axios";
-const infoApi = {
-  // 获取设备信息
-  getSys(params) {
-    return getRequest("/info", params);
-  },
-  // 获取网络信息
-  getNet(params) {
-    return getRequest("/net", params);
-  },
-  saveNet(params) {
-    return putRequest("/net", params);
-  },
-  reboot() {
-    return postJsonRequest("/reboot",);
-  },
-  // 透传列表
-  getTc(params) {
-    return getRequest('/tc', params)
-  },
-  // 获取透传类型
-  getSupport(params) {
-    return getRequest('/tc/support', params)
-  },
-  // 获取可用串口列表
-  getFree(params) {
-    return getRequest('/com/free', params)
-  },
-  // 获取支持的通讯驱动
-  getTxSupport(params) {
-    return getRequest('/tx/support', params)
-  },
-
-  // 获取所有串口列表api/com
-  getCom(params) {
-    return getRequest('/com', params)
-  },
-  
-  saveTx(params) {
-    return postJsonRequest("/tx", params);
-  },
-  editTx(params) {
-    return putRequest("/tx", params);
-  },
-  // 透传服务启停
-  stopTc(params) {
-    return putRequest("/tc", params);
-  },
-  // 透传服务删除
-  delTc(params) {
-    return deleteRequest("/tc", params);
-  },
-  // 模板列表
-  getMb(params) {
-    return getRequest('/tx/mb/list', params)
-  },
-  // 新增模板
-  addMb(params) {
-    return postJsonRequest('/tx/mb', params)
-  },
-  // 编辑模板
-  editMb(params) {
-    return putRequest('/tx/mb', params)
-  },
-  // 删除模板
-  delMb(params) {
-    return deleteRequest('/tx/mb', params)
-  },
-  // 新增点位
-  addP(params) {
-    return putRequest('/tx/mb', params)
-  },
- 
-  // 获取点位
-  getP(params) {
-    return postJsonRequest('/tx/mb/info', params)
-  },
-  // 获取设备列表
-  getSet(params) {
-    return postJsonRequest('/tx/info', params)
-  },
-   // 新增设备
-   addSet(params) {
-    return putRequest('/tx/device', params)
-  },
-  // 通讯列表
-  getTx(params) {
-    return getRequest('/tx/list', params)
-  },
-  // 新增通讯列表
-  saveTx(params) {
-    return postJsonRequest("/tx", params);
-  },
-  
-  // 通讯服务启用,停用
-  changeStatus(params) {
-    return postJsonRequest(`/tx/${params.url}/${params.name}`, params);
-  },
-
-  // 删除通讯
-  delTx(params) {
-    return deleteRequest(`/tx`, params);
-  },
-  // 获取上报列表
-  getSc(params) {
-    return getRequest('/sb/list', params)
-  },
-  // 获取上报驱动
-  getQuDong(params) {
-    return getRequest('/sb/support', params)
-  },
-  // 新增上报
-  saveTx(params) {
-    return postJsonRequest("/sb", params);
-  },
-  // 编辑通讯
-  updateTx(params) {
-    return putRequest('/sb', params);
-  },
-  // 上报启停
-  stopSc(params) {
-    return putRequest("/sc", params);
-  },
-  // 删除上报
-  delSc(params) {
-    return deleteRequest("/sb", params);
-  },
-};
-export default infoApi;

src/api/myApi.js

@@ -7,7 +7,7 @@ import {
   const myApi = {
     // 登录
     login(params = {}) {
-      return postJsonRequest('/login', params);
+      return postJsonRequest('/user/v1/login', params);
     },
     // 修改密码
     editPass(params) {
@@ -16,7 +16,26 @@ import {
     // 退出
     logOut() {
       return postJsonRequest('/logout');
+    },
+    // 获取图表数据
+    getCommonHistogram(params) {
+      return getRequest('/plc/v1/commonHistogram', params)
+    },
+
+    // // 获取当前设备信息
+    getBaseInfo(params) {
+      return getRequest('/plc/v1/info', params)
+    },
+
+    // 上传
+    upload(params) {
+      return postJsonRequest('/common/v1/upload', params)
+    },
+    // 查询
+    getInfo() {
+      return getRequest('/common/v1/info')
     }
+
   }
   export default myApi;
   

src/components/BarEchart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="echart-div">
     <div class="top-title">
-      <div class="title">{{echartData.title}}</div>
+      <div class="title">{{ echartData.title }}</div>
     </div>
     <div class="echart" :id="echartData.id">
     </div>
@@ -13,6 +13,7 @@ import moment from "moment";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
 import bus from '../utils/bus.js'
+import myApi from "@/api/myApi.js";
 
 export default {
   name: "LineEchart",
@@ -27,114 +28,32 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
+        console.log(12)
         getEchart();
       })
-      getEchart();
+    })
-    });
+
-    const getEchart = () => {
+    
-      if (store.state.selectDate === 1) {
+    const getEchart = async () => {
-        data = {
+      var xData = [];
-          legend: props.echartData.legend,
+      var Values = [];
-          color: props.echartData.color,
+      const param = {
-          xData: [
+        filed: props.echartData.filed,
-            "1",
+        dataType: store.state.selectDate
-            "2",
-            "3",
-            "4",
-            "5",
-            "6",
-            "7",
-            "8",
-            "9",
-            "10",
-            "11",
-            "12",
-            "13",
-            "14",
-            "15",
-            "16",
-            "17",
-            "18",
-            "19",
-            "20",
-            "21",
-            "22",
-            "23",
-            "24",
-            "25",
-            "26",
-            "27",
-            "28",
-            "29",
-            "30",
-          ],
-          Values: [
-            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
-            2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
-          ],
-          type: ["bar"],
-        };
-      } else if (store.state.selectDate === 2) {
-        data = {
-          legend: props.echartData.legend,
-          color: props.echartData.color,
-          xData: [
-            "1",
-            "2",
-            "3",
-            "4",
-            "5",
-            "6",
-            "7",
-            "8",
-            "9",
-            "10",
-            "11",
-            "12",
-          ],
-          Values: [
-            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7
-          ],
-          type: ["bar"],
-        };
-      } else if (store.state.selectDate === 0) {
-        var data = {
-          legend: props.echartData.legend,
-          color: props.echartData.color,
-          xData: [
-            "00",
-            "01",
-            "02",
-            "03",
-            "04",
-            "05",
-            "06",
-            "07",
-            "08",
-            "09",
-            "10",
-            "11",
-            "12",
-            "13",
-            "14",
-            "15",
-            "16",
-            "17",
-            "18",
-            "19",
-            "20",
-            "21",
-            "22",
-            "23",
-          ],
-          Values: [
-            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
-            2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
-          ],
-          type: ["bar"],
-        };
       }
+      const res = await myApi.getCommonHistogram(param);
+      res.data.forEach(ele => {
+        xData.push(ele.dateTime);
+        Values.push(ele.dataValue)
+      });
+
+      data = {
+        legend: props.echartData.legend,
+        color: props.echartData.color,
+        xData: xData,
+        Values: Values,
+        type: ["bar"],
+      };
       let dom = document.getElementById(props.echartData.id);
       if (dom) {
         myChart = echarts.init(dom);

src/components/Date.vue

@@ -5,7 +5,7 @@
   </template>
   
   <script>
-  import { onMounted, reactive, toRefs } from "vue";
+  import { nextTick, onMounted, reactive, toRefs } from "vue";
   import {useStore} from 'vuex'
   import { useRouter } from "vue-router";
   import bus from '../utils/bus.js'
@@ -34,13 +34,19 @@
       });
       onMounted(() => {
         if (props.pactiveI) {
-          state.activeI = props.pactiveI;
+          go(props.pactiveI);
+        } else {
+          go(0);
         }
       });
       
       const go = (val) => {
+        state.activeI = val;
         store.commit("changeSelectDate", val);
+        nextTick(() => {
           bus.emit('foo', val);
+        })
+       
       };
       return {
         ...toRefs(state),

src/components/Flow.vue

@@ -49,26 +49,54 @@ export default {
           title: "UF产水流量-柱状图",
           legend: ["UF产水流量-柱状图"],
           color: ["#6fdbce", "#eafbf7"],
+          filed: 'VD2716'
         },
         {
           id: "echart1",
           title: "自来水前端流量-柱状图",
           legend: ["自来水前端流量-柱状图"],
           color: ["#308286", "#eafbf7"],
+          filed: 'VD2816'
         },
         {
           id: "echart2",
           title: "供水流量-柱状图",
           legend: ["供水流量-柱状图"],
           color: ["#308286", "#eafbf7"],
+          filed: 'VD2866'
         },
         {
           id: "echart3",
           title: "自来水后端流量-柱状图",
           legend: ["自来水后端流量-柱状图"],
           color: ["#62d3ff", "#eafbf7"],
+          filed: 'VD2766'
         },
       ],
+      baseData: {
+        vd500: 2,
+        vd500Max: 12,
+        vd500Min: 0.8,
+        vd504: 3,
+        vd504Max: 11,
+        vd504Min: 0.4,
+        vd2700: 13.4,
+        vd2716: 12.99,
+        vd2800: 12.3,
+        vd2816: 4.56,
+        vd2850: 12.3,
+        vd2866: 34.5,
+        vd2750: 15.4,
+        vd2766: 7.89,
+        vd2600: 12,
+        vd2610: 3.23,
+        vd2620: 23.4,
+        vd2630: 12.3,
+        vd2500: 12,
+        vd2510: 3.23,
+        vd2520: 23.4,
+        vd2530: 12.3
+      },
       dataList: [
         {
           title: "UF产水瞬时流量:m3/H:",
@@ -78,6 +106,7 @@ export default {
               color: "#6fdbce",
               label: "Q1",
               value: "20",
+              key: 'vd2700'
             },
           ],
         },
@@ -89,6 +118,7 @@ export default {
               color: "#00baff",
               label: "Q2",
               value: "80",
+              key: 'vd2716'
             },
           ],
         },
@@ -100,6 +130,7 @@ export default {
               color: "#308286",
               label: "Q3",
               value: "80",
+              key: 'vd2800'
             },
           ],
         },
@@ -111,6 +142,7 @@ export default {
               color: "#00baff",
               label: "Q4",
               value: "80",
+              key: 'vd2816'
             },
           ],
         },
@@ -122,6 +154,7 @@ export default {
               color: "#00baff",
               label: "Q5",
               value: "80",
+              key: 'vd2850'
             },
           ],
         },
@@ -133,6 +166,7 @@ export default {
               color: "#00baff",
               label: "Q6",
               value: "80",
+              key: 'vd2866'
             },
           ],
         },
@@ -144,23 +178,30 @@ export default {
               color: "#00baff",
               label: "Q7",
               value: "10",
+              key: 'vd2750'
             },
           ],
         },
         {
-          title: "自来水后端累计弃流量:m3",
+          title: "自来水后端累计流量:m3",
           data: [
             {
               id: "8",
               color: "#00baff",
               label: "Q8",
               value: "40",
+              key: 'vd2766'
             },
           ],
         }
       ],
     });
-    onMounted(async () => {});
+    onMounted(async () => {
+      state.dataList.forEach(ele => {
+        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+        console.log(ele.data[0].value);
+      })
+    });
 
     return {
       ...toRefs(state),

src/components/Header.vue

@@ -51,6 +51,7 @@ export default {
     });
     const getUserInfo = async () => {};
     const logout = async () => {
+      localRemove("token");
       router.push("/login");
     };
     const back = () => {

src/components/ImagePreview.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-image
+      :src="`${realSrc}`"
+      fit="cover"
+      :style="`width:${realWidth};height:${realHeight};`"
+      :preview-src-list="realSrcList"
+      :preview-teleported="true"
+    >
+      <template #error>
+        <div class="image-slot">
+          <el-icon><picture-filled /></el-icon>
+        </div>
+      </template>
+    </el-image>
+  </template>
+  
+  <script setup>
+  import { isExternal } from "@/utils/validate";
+  import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+  
+  const props = defineProps({
+    src: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [Number, String],
+      default: ""
+    },
+    height: {
+      type: [Number, String],
+      default: ""
+    }
+  });
+  
+  const realSrc = computed(() => {
+    if (!props.src) {
+      return;
+    }
+    let real_src = props.src.split(",")[0];
+    if (isExternal(real_src)) {
+      return real_src;
+    }
+    return import.meta.env.VITE_APP_BASE_API + real_src;
+  });
+  
+  const realSrcList = computed(() => {
+    if (!props.src) {
+      return;
+    }
+    let real_src_list = props.src.split(",");
+    let srcList = [];
+    real_src_list.forEach(item => {
+      if (isExternal(item)) {
+        return srcList.push(item);
+      }
+      return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
+    });
+    return srcList;
+  });
+  
+  const realWidth = computed(() =>
+    typeof props.width == "string" ? props.width : `${props.width}px`
+  );
+  
+  const realHeight = computed(() =>
+    typeof props.height == "string" ? props.height : `${props.height}px`
+  );
+  </script>
+  
+  <style lang="scss" scoped>
+  .el-image {
+    border-radius: 5px;
+    background-color: #ebeef5;
+    box-shadow: 0 0 5px 1px #ccc;
+    :deep(.el-image__inner) {
+      transition: all 0.3s;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+    :deep(.image-slot) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: #909399;
+      font-size: 30px;
+    }
+  }
+  </style>
+  

src/components/ImageUpload.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="component-upload-image">
+        <el-upload :auto-upload="false" list-type="picture-card" :limit="limit" ref="imageUpload"
+            :before-remove="handleDelete" :show-file-list="true" :file-list="fileList"
+            :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }" :on-change="getFile">
+            <el-icon class="avatar-uploader-icon">
+                <plus />
+            </el-icon>
+        </el-upload>
+
+        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
+            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, watch } from "vue";
+export default {
+    name: "home",
+    props: {
+        modelValue: [String, Object, Array],
+        // 图片数量限制
+        limit: {
+            type: Number,
+            default: 5,
+        },
+        // 大小限制(MB)
+        fileSize: {
+            type: Number,
+            default: 5,
+        },
+        // 文件类型, 例如['png', 'jpg', 'jpeg']
+        fileType: {
+            type: Array,
+            default: () => ["png", "jpg", "jpeg"],
+        },
+    },
+
+    setup(props, ctx) {
+        const number = ref(0);
+        const uploadList = ref([]);
+        const fileList = ref([]);
+        const state = reactive({
+            dialogVisible: false,
+            dialogImageUrl: ''
+        });
+        watch(() => props.modelValue, val => {
+            if (val) {
+                // 首先将值转为数组
+                const list = [val];
+                // 然后将数组转为对象数组
+                fileList.value = list.map(item => {
+                    if (typeof item === "string") {
+                        item = { name: item, url: item };
+                    }
+                    return item;
+                });
+            } else {
+                fileList.value = [];
+            }
+        }, { deep: true, immediate: true });
+
+
+        // 删除图片
+        function handleDelete(file) {
+            ctx.emit("changeImage", '');
+        }
+
+        // 预览
+        function handlePictureCardPreview(file) {
+            state.dialogImageUrl = file.url;
+            state.dialogVisible = true;
+        }
+        const getFile = (file, fileList) => {
+            getBase64(file.raw).then(res => {
+                ctx.emit("changeImage", res);
+            });
+        }
+
+        const getBase64 = (file) => {
+            return new Promise(function (resolve, reject) {
+                let reader = new FileReader();
+                let imgResult = "";
+                reader.readAsDataURL(file);
+                reader.onload = function () {
+                    imgResult = reader.result;
+                };
+                reader.onerror = function (error) {
+                    reject(error);
+                };
+                reader.onloadend = function () {
+                    resolve(imgResult);
+                };
+            });
+        }
+        return {
+            ...toRefs(state),
+            handlePictureCardPreview,
+            handleDelete,
+            fileList,
+            getFile
+        };
+    },
+};
+
+</script>
+  
+  
+<style scoped lang="scss">
+.el-upload--picture-card {
+    width: 148px !important;
+    height: 148px !important;
+    line-height: 55px !important;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 148px !important;
+    height: 148px !important;
+}
+
+:deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+</style>

src/components/Index.vue

@@ -13,48 +13,48 @@
               <font><span class="font26">0.67</span>kg</font>
             </div>
              <div>
-              <p>原水箱液位：<span class="font26">0.39</span>m</p>
+              <p>原水箱液位：<span class="font26">{{ baseData.vd500.toFixed(2) }}</span>m</p>
-              <p>历史最高：<span class="font26">0.50</span>m</p>
+              <p>历史最高：<span class="font26">{{ baseData.vd500Max.toFixed(2) }}</span>m</p>
-              <p>历史最低：<span class="font26">0.24</span>m</p>
+              <p>历史最低：<span class="font26">{{ baseData.vd500Min.toFixed(2) }}</span>m</p>
             </div>
             <div>
-              <p>净水箱液位：<span class="font26">0.81</span>m</p>
+              <p>净水箱液位：<span class="font26">{{ baseData.vd504.toFixed(2) }}</span>m</p>
-              <p>历史最高：<span class="font26">1.63</span>m</p>
+              <p>历史最高：<span class="font26">{{ baseData.vd504Max.toFixed(2) }}</span>m</p>
-              <p>历史最低：<span class="font26">0.48</span>m</p>
+              <p>历史最低：<span class="font26">{{ baseData.vd504Min.toFixed(2) }}</span>m</p>
             </div>
              <div>
               <p>UF产水</p>
-              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>瞬时流量：<span class="font26">{{ baseData.vd2700.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">4</span>m³</p>
+              <p>累计流量：<span class="font26">{{ baseData.vd2716.toFixed(2) }}</span>m³</p>
             </div>
             <div>
               <p>自来水前端</p>
-              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>瞬时流量：<span class="font26">{{ baseData.vd2800.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">4</span>m³</p>
+              <p>累计流量：<span class="font26">{{ baseData.vd2816.toFixed(2) }}</span>m³</p>
             </div>
             <div >
               <p>供水</p>
-              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>瞬时流量：<span class="font26">{{ baseData.vd2850.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">4</span>m³</p>
+              <p>累计流量：<span class="font26">{{ baseData.vd2866.toFixed(2) }}</span>m³</p>
             </div>
             <div >
               <p>自来水后端</p>
-              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>瞬时流量：<span class="font26">{{ baseData.vd2750.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">4</span>m³</p>
+              <p>累计流量：<span class="font26">{{ baseData.vd2766.toFixed(2) }}</span>m³</p>
             </div>
             <div>
               <p>原水水质</p>
-              <p>余氯：<span class="font26">0.00</span> mg/L</p>
+              <p>余氯：<span class="font26">{{ baseData.vd2600.toFixed(2) }}</span> mg/L</p>
-              <p>浊度：<span class="font26">1.63</span> mg/L</p>
+              <p>浊度：<span class="font26">{{ baseData.vd2610.toFixed(2) }}</span> mg/L</p>
-              <p>氨氮：<span class="font26">1.41</span> mg/L</p>
+              <p>氨氮：<span class="font26">{{ baseData.vd2620.toFixed(2) }}</span> mg/L</p>
-              <p>COD：<span class="font26">4.80</span> mg/L</p>
+              <p>COD：<span class="font26">{{ baseData.vd2630.toFixed(2) }}</span> mg/L</p>
             </div>
             <div>
               <p>净水水质</p>
-              <p>余氯：<span class="font26">-0.73</span> mg/L</p>
+              <p>余氯：<span class="font26">{{ baseData.vd2500.toFixed(2) }}</span> mg/L</p>
-              <p>浊度：<span class="font26">3.56</span> mg/L</p>
+              <p>浊度：<span class="font26">{{ baseData.vd2510.toFixed(2) }}</span> mg/L</p>
-              <p>氨氮：<span class="font26">41.89</span> mg/L</p>
+              <p>氨氮：<span class="font26">{{ baseData.vd2520.toFixed(2) }}</span> mg/L</p>
-              <p>COD：<span class="font26">3.53</span> mg/L</p>
+              <p>COD：<span class="font26">{{ baseData.vd2530.toFixed(2) }}</span> mg/L</p>
             </div>
           </div>
         
@@ -66,13 +66,49 @@
   <script>
 import Menus from "@/components/Menus.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+import myApi from "@/api/myApi.js";
 export default {
   name: "index",
   components: {
     Menus,
   },
   setup() {
-    const state = reactive({});
+    const state = reactive({
+      baseData: {
+        vd500: 2,
+        vd500Max: 12,
+        vd500Min: 0.8,
+        vd504: 3,
+        vd504Max: 11,
+        vd504Min: 0.4,
+        vd2700: 13.4,
+        vd2716: 12.99,
+        vd2800: 12.3,
+        vd2816: 4.56,
+        vd2850: 12.3,
+        vd2866: 34.5,
+        vd2750: 15.4,
+        vd2766: 7.89,
+        vd2600: 12,
+        vd2610: 3.23,
+        vd2620: 23.4,
+        vd2630: 12.3,
+        vd2500: 12,
+        vd2510: 3.23,
+        vd2520: 23.4,
+        vd2530: 12.3
+      }
+    });
+    onMounted(() => {
+      getBaseInfo();
+    })
+    const getBaseInfo = async () => {
+      const res = await myApi.getBaseInfo();
+      state.baseData = res.data;
+    }
+    return {
+      ...toRefs(state)
+    };
   },
 };
 </script>

src/components/LineEchart.vue

@@ -11,7 +11,8 @@ import { onMounted, reactive, toRefs, watch,defineExpose } from "vue";
 import moment from "moment";
 import { useStore } from "vuex";
 import * as echarts from "echarts";
-import bus from '../utils/bus.js'
+import bus from '../utils/bus.js';
+import myApi from "@/api/myApi.js";
 export default {
   name: "LineEchart",
   props: {
@@ -29,214 +30,27 @@ export default {
       bus.on('foo', e => {
         getEchart();
       })
-      getEchart();
     });
-    const getEchart = () => {
+    const getEchart = async () => {
-      if (store.state.selectTab === 'pure') {
+      var xData = [];
-        if (store.state.selectDate === 1) {
+      var Values = [];
-          data = {
+      const param = {
-            legend: {},
+        filed: props.echartData.filed,
-            color: props.echartData.color,
+        dataType: store.state.selectDate
-            xData: [
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-              "24",
-              "25",
-              "26",
-              "27",
-              "28",
-              "29",
-              "30",
-            ],
-            Values: [
-              2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
-              2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
-            ],
-            type: ["line"],
-          };
-        } else if (store.state.selectDate === 2) {
-          data = {
-            legend: {},
-            color: props.echartData.color,
-            xData: [
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-            ],
-            Values: [
-              4.3, 1.3, 5.3, 3, 1.3, 2.3, 3.3, 4, 4, 5, 3, 1
-            ],
-            type: ["line"],
-          };
-        } else if (store.state.selectDate === 0) {
-          var data = {
-            legend: {},
-            color: props.echartData.color,
-            xData: [
-              "00",
-              "01",
-              "02",
-              "03",
-              "04",
-              "05",
-              "06",
-              "07",
-              "08",
-              "09",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-            ],
-            Values: [
-              2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
-              2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
-            ],
-            type: ["line"],
-          };
       }
-      } else {
+      const res = await myApi.getCommonHistogram(param);
-        if (store.state.selectDate === 1) {
+      res.data.forEach(ele => {
+        xData.push(ele.dateTime);
+        Values.push(ele.dataValue)
+      });
       data = {
         legend: {},
         color: props.echartData.color,
-            xData: [
+        xData: xData,
-              "1",
+        Values: Values,
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-              "24",
-              "25",
-              "26",
-              "27",
-              "28",
-              "29",
-              "30",
-            ],
-            Values: [
-              8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 5, 4, 5, 6, 7,6, 7, 8.3,2.3, 5.3, 8.3, 5, 2.3, 5.3,
-            ],
         type: ["line"],
       };
-        } else if (store.state.selectDate === 2) {
+
-          data = {
-            legend: {},
-            color: props.echartData.color,
-            xData: [
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-            ],
-            Values: [
-              5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4,
-            ],
-            type: ["line"],
-          };
-        } else if (store.state.selectDate === 0) {
-          var data = {
-            legend:  {},
-            color: props.echartData.color,
-            xData: [
-              "00",
-              "01",
-              "02",
-              "03",
-              "04",
-              "05",
-              "06",
-              "07",
-              "08",
-              "09",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-            ],
-            Values: [
-              2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3
-            ],
-            type: ["line"],
-          };
-        }
-      }
       let dom = document.getElementById(props.echartData.id);
       if (dom) {
         myChart = echarts.init(dom);
@@ -329,24 +143,24 @@ export default {
                 },
               },
             },
-            markLine: {
+            // markLine: {
-              symbol: ["none", "none"], // 标线两端的样式
+            //   symbol: ["none", "none"], // 标线两端的样式
-              data: [
+            //   data: [
-                {
+            //     {
-                  yAxis: 20,
+            //       yAxis: 20,
-                },
+            //     },
-                // { yAxis: 10 },
+            //     // { yAxis: 10 },
-              ],
+            //   ],
-              lineStyle: {
+            //   lineStyle: {
-                color: "red",
+            //     color: "red",
-                width: 2,
+            //     width: 2,
-              },
+            //   },
-              label: {
+            //   label: {
-                position: "end", // 表现内容展示的位置
+            //     position: "end", // 表现内容展示的位置
-                formatter: props.echartData.title + "限定值", // 标线展示的内容
+            //     formatter: props.echartData.title + "限定值", // 标线展示的内容
-                color: "#8C8C8C", // 展示内容颜色
+            //     color: "#8C8C8C", // 展示内容颜色
-              },
+            //   },
-            },
+            // },
           }
         ],
       };

src/components/Liquid.vue

@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { nextTick, onMounted, reactive, ref, toRefs } from "vue";
 import { ElMessage } from "element-plus";
-import myApi from "@/api/myApi.js";
 import BarEchart from "./BarEchart.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
+import { useStore } from "vuex";
 export default {
   name: "Flow",
   components: {
@@ -44,19 +44,46 @@ export default {
     Date
   },
   setup() {
+    const store = useStore();
     const state = reactive({
+      baseData: {
+        vd500: 2,
+        vd500Max: 12,
+        vd500Min: 0.8,
+        vd504: 3,
+        vd504Max: 11,
+        vd504Min: 0.4,
+        vd2700: 13.4,
+        vd2716: 12.99,
+        vd2800: 12.3,
+        vd2816: 4.56,
+        vd2850: 12.3,
+        vd2866: 34.5,
+        vd2750: 15.4,
+        vd2766: 7.89,
+        vd2600: 12,
+        vd2610: 3.23,
+        vd2620: 23.4,
+        vd2630: 12.3,
+        vd2500: 12,
+        vd2510: 3.23,
+        vd2520: 23.4,
+        vd2530: 12.3
+      },
       listData: [
         {
           id: "echart0",
           title: "原水箱液位-柱状图",
           legend: ['原水箱柱状图'],
           color: ["#6fdbce", "#eafbf7"],
+          filed: 'VD500'
         },
         {
           id: "echart1",
           title: "净水箱液位-柱状图",
           legend: ['净水箱柱状图'],
           color: ["#308286", "#eafbf7"],
+          filed: 'VD504'
         }
       ],
       olddataList: [
@@ -68,6 +95,7 @@ export default {
               color: "#6fdbce",
               label: "Q1",
               value: "20",
+              key: 'vd500'
             },
           ],
         },
@@ -79,6 +107,7 @@ export default {
               color: "#00baff",
               label: "Max",
               value: "80",
+              key: 'vd500Max'
             },
           ],
         },
@@ -90,6 +119,7 @@ export default {
               color: "#308286",
               label: "Min",
               value: "80",
+              key: 'vd500Min'
             },
           ],
         }
@@ -103,6 +133,7 @@ export default {
               color: "#6fdbce",
               label: "Q2",
               value: "20",
+              key: 'vd504'
             },
           ],
         },
@@ -114,6 +145,7 @@ export default {
               color: "#00baff",
               label: "Max",
               value: "80",
+              key: 'vd504Max'
             },
           ],
         },
@@ -124,14 +156,21 @@ export default {
               id: "3",
               color: "#308286",
               label: "Min",
-              value: "80",
+              value: "9",
+              key: 'vd504Min'
             },
           ]
         }
       ],
     });
-    onMounted(async () => { });
+    onMounted(() => {
-
+      state.olddataList.forEach(ele => {
+        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+      })
+      state.puredataList.forEach(ele => {
+        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+      })
+    })
     return {
       ...toRefs(state),
     };
@@ -164,6 +203,7 @@ export default {
   .right-div {
     width: 22%;
     height: 100%;
+
     .height46 {
       height: 46%;
       display: flex;

src/components/Process.vue

@@ -3,17 +3,12 @@
     <span>{{ itemData.label }}</span>
     <!-- <div :id="'process' + itemData.id" class="process-echart"></div> -->
     <div class="process-echart">
-      <el-progress
+      <el-progress :text-inside="true" :stroke-width="20" :percentage="itemData.value" :color="itemData.color" />
-        :text-inside="true"
-        :stroke-width="20"
-        :percentage="itemData.value"
-        :color="itemData.color"
-      />
     </div>
   </div>
 </template>
 <script>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { nextTick, onMounted, reactive, ref, toRefs,watch } from "vue";
 import * as echarts from "echarts";
 export default {
   name: "Process",
@@ -28,6 +23,15 @@ export default {
     onMounted(() => {
       getEchart();
     });
+    // watch(() => props.itemData, val => {
+    //   if (val) {
+    //     console.log(123 ,val);
+    //     nextTick(() => {
+    //       getEchart();
+    //     })
+    //   }
+    // }, { deep: true, immediate: true });
+
     const getEchart = () => {
       data = {};
       let dom = document.getElementById("process" + props.itemData.id);
@@ -167,6 +171,7 @@ export default {
   height: 50px;
   align-items: center;
   margin: 10px 0;
+
   .process-echart {
     width: 83%;
   }

src/components/Quality.vue

@@ -1,27 +1,17 @@
 <template>
-  <el-tabs
+  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-    v-model="activeName"
-    type="card"
-    class="demo-tabs"
-    @tab-click="handleClick"
-  >
     <el-tab-pane label="原水水质" name="old" key="old">
     </el-tab-pane>
     <el-tab-pane label="净水水质" name="pure" key="pure">
     </el-tab-pane>
-</el-tabs>
+  </el-tabs>
-<div class="content-water">
+  <div class="content-water">
     <div class="date">
       <Date />
     </div>
     <div class="flow-container">
       <div class="left-div">
-        <div
+        <div v-for="(item, index) of dataList" :key="index" :class="'div' + index" class="process-content">
-          v-for="(item, index) of dataList"
-          :key="index"
-          :class="'div' + index"
-          class="process-content"
-        >
           <!-- <div>{{ item.title }}</div> -->
           <div v-for="(it, i) of item.data" :key="i">
             <Process :itemData="it"></Process>
@@ -29,12 +19,8 @@
         </div>
       </div>
       <div class="right-div">
-        <div
+        <div v-for="(item, index) of listData" :key="index" class="echart-content">
-          v-for="(item, index) of listData"
+          <LineEchart :echartData="item" :activeName="activeName" ref="refSon" />
-          :key="index"
-          class="echart-content"
-        >
-          <LineEchart :echartData="item" :activeName="activeName" ref="refSon"/>
         </div>
       </div>
     </div>
@@ -46,7 +32,7 @@ import { onMounted, reactive, toRefs, ref, nextTick  } from "vue";
 import LineEchart from "@/components/LineEchart.vue";
 import Process from "@/components/Process.vue";
 import Date from "@/components/Date.vue";
-import {useStore} from 'vuex';
+import { useStore } from 'vuex';
 import bus from '../utils/bus.js'
 export default {
   name: "Flow",
@@ -59,26 +45,54 @@ export default {
     const refSon = ref(null);
     const store = useStore();
     const state = reactive({
+      baseData: {
+        vd500: 2,
+        vd500Max: 12,
+        vd500Min: 0.8,
+        vd504: 3,
+        vd504Max: 11,
+        vd504Min: 0.4,
+        vd2700: 13.4,
+        vd2716: 12.99,
+        vd2800: 12.3,
+        vd2816: 4.56,
+        vd2850: 12.3,
+        vd2866: 34.5,
+        vd2750: 15.4,
+        vd2766: 7.89,
+        vd2600: 15,
+        vd2610: 13.23,
+        vd2620: 43.4,
+        vd2630: 62.3,
+        vd2500: 12,
+        vd2510: 3.23,
+        vd2520: 23.4,
+        vd2530: 12.3
+      },
       listData: [
         {
           id: "echart0",
           title: "余氯查询",
-          color: ['#6fdbce']
+          color: ['#6fdbce'],
+          filed: 'VD2600'
         },
         {
           id: "echart1",
           title: "浊度查询",
-          color: ['#b7e707']
+          color: ['#b7e707'],
+          filed: 'VD2610'
         },
         {
           id: "echart2",
           title: "氨氮查询",
-          color: ['#f58383']
+          color: ['#f58383'],
+          filed: 'VD2620'
         },
         {
           id: "echart3",
           title: "COD查询",
-          color: ['#00ffff']
+          color: ['#00ffff'],
+          filed: 'VD2630'
         },
       ],
       dataList: [
@@ -90,6 +104,8 @@ export default {
               color: "#6fdbce",
               label: "余氯: ",
               value: "20",
+              key: 'vd2600',
+              key1: 'vd2500'
             },
           ],
         },
@@ -101,6 +117,8 @@ export default {
               color: "#b7e707",
               label: "浊度:",
               value: "80",
+              key: 'vd2610',
+              key1: 'vd2510'
             }
           ],
         },
@@ -112,6 +130,8 @@ export default {
               color: "#f58383",
               label: "氨氮: ",
               value: "80",
+              key: 'vd2620',
+              key1: 'vd2520'
             },
           ],
         },
@@ -123,6 +143,8 @@ export default {
               color: "#00ffff",
               label: "COD: ",
               value: "80",
+              key: 'vd2630',
+              key1: 'vd2530'
             }
           ],
         }
@@ -131,8 +153,30 @@ export default {
     });
     onMounted(() => {
       store.commit("changeSelectTab", "old");
+      state.dataList.forEach(ele => {
+          ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+        })
     });
     const handleClick = (tab) => {
+      if (tab.props.name == 'old') {
+        state.listData[0].filed = 'VD2600';
+        state.listData[1].filed = 'VD2610';
+        state.listData[2].filed = 'VD2620';
+        state.listData[3].filed = 'VD2630';
+
+        state.dataList.forEach(ele => {
+          ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+        })
+      } else {
+        state.listData[0].filed = 'VD2500';
+        state.listData[1].filed = 'VD2510';
+        state.listData[2].filed = 'VD2520';
+        state.listData[3].filed = 'VD2530';
+
+        state.dataList.forEach(ele => {
+          ele.data[0].value = Number(state.baseData[ele.data[0].key1]).toFixed(2);
+        })
+      }
       console.log(tab.props.name);
       store.commit("changeSelectTab", tab.props.name);
       bus.emit('foo');
@@ -152,14 +196,17 @@ export default {
   width: 100% !important;
   height: 95% !important;
 }
+
 /* .el-tabs__content{
   width: 100% !important;
   height: 95% !important;
 } */
-.el-tab-pane, .el-tabs {
+.el-tab-pane,
+.el-tabs {
   width: 100% !important;
   /* height: 100% !important; */
 }
+
 .el-tabs__item {
   font-weight: 800;
   font-size: 20px;
@@ -172,12 +219,14 @@ export default {
   justify-content: end;
   height: 3%;
 }
+
 .flow-container {
   width: 100%;
   height: 87%;
   display: flex;
   justify-content: space-between;
   padding: 10px;
+
   .right-div {
     width: 75%;
     height: 100%;
@@ -186,11 +235,13 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
+
     .echart-content {
       width: 100%;
       height: 24%;
     }
   }
+
   .left-div {
     width: 22%;
     height: 100%;

src/css/index.scss

@@ -99,15 +99,15 @@ s {
     line-height: 30px;
   }
 }
-.el-upload--picture-card {
+// .el-upload--picture-card {
-  width: 48px !important;
+//   width: 48px !important;
-  height: 48px !important;
+//   height: 48px !important;
-  line-height: 55px !important;
+//   line-height: 55px !important;
-}
+// }
-.el-upload-list--picture-card .el-upload-list__item {
+// .el-upload-list--picture-card .el-upload-list__item {
-  width: 48px !important;
+//   width: 48px !important;
-  height: 48px !important;
+//   height: 48px !important;
-}
+// }
 .el-container {
   height: 100%;
   overflow: hidden;

src/utils/axios.js

@@ -36,7 +36,7 @@ axios.interceptors.response.use(
   (error) => {
     ElMessage.closeAll();
     ElMessage.error(error || "401 Unauthorized");
-    router.push({ path: "/login" });
+    // router.push({ path: "/login" });
     return Promise.reject(error);
   }
 );

src/views/Config.vue

@@ -1,46 +1,14 @@
 <template>
   <div class="home">
-    <el-form
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="180px" class="demo-ruleForm">
-      ref="ruleFormRef"
+      <el-form-item label="项目名称配置：" prop="title">
-      :model="ruleForm"
+        <el-input v-model="ruleForm.title" />
-      :rules="rules"
-      label-width="180px"
-      class="demo-ruleForm"
-    >
-      <el-form-item label="项目名称配置：" prop="name">
-        <el-input v-model="ruleForm.name" />
       </el-form-item>
-      <el-form-item label="登陆背景配置：" prop="loginImage">
+      <el-form-item label="登陆背景配置：" prop="loginImg">
-        <el-upload
+        <ImageUpload :limit="1" :modelValue="ruleForm.loginImg" :fileType='["png", "jpg", "jpeg"]' @changeImage="changeImage1"></ImageUpload>
-          class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img
-            v-if="ruleForm.loginImage"
-            :src="ruleForm.loginImage"
-            class="avatar"
-          />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-        </el-upload>
       </el-form-item>
-      <el-form-item label="主页背景配置：" prop="bgImage">
+      <el-form-item label="Logo配置：" prop="logoImg">
-        <el-upload
+        <ImageUpload :limit="1" :modelValue="ruleForm.logoImg" :fileType='["png", "jpg", "jpeg"]' @changeImage="changeImage"></ImageUpload>
-          class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img
-            v-if="ruleForm.bgImage"
-            :src="ruleForm.bgImage"
-            class="avatar"
-          />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-        </el-upload>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm()"> 提交 </el-button>
@@ -53,21 +21,27 @@
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { localSet,localGet } from '@/utils'
+import { localSet, localGet } from '@/utils';
+import ImageUpload from '@/components/ImageUpload.vue';
+import myApi from "@/api/myApi.js";
+import { ElMessage } from "element-plus";
 export default {
   name: "home",
+  components: {
+    ImageUpload
+  },
   setup() {
     const ruleFormRef = ref(null);
     const router = useRouter();
     const store = useStore();
     const state = reactive({
       ruleForm: {
-        name: '',
+        title: '',
-        loginImage: "",
+        loginImg: "",
-        bgImage: "",
+        logoImg: "",
       },
       rules: {
-        name: [
+        title: [
           {
             required: true,
             message: "请输入项目名称",
@@ -75,15 +49,30 @@ export default {
           },
         ],
       },
+      fileList: []
     });
-    onMounted(() => {
+    onMounted(async () => {
-      state.ruleForm.name = localGet('projectName') || '世博浦西区活水公园';
+      const res = await myApi.getInfo();
+      state.ruleForm.title = res.data.title || '世博浦西区活水公园';
+      state.ruleForm.loginImg = res.data.loginImg;
+      state.ruleForm.logoImg = res.data.logoImg;
     })
+
+    const changeImage= (val) => {
+      state.ruleForm.logoImg = val;
+    }
+    const changeImage1= (val) => {
+      state.ruleForm.loginImg = val;
+    }
     const submitForm = async () => {
       ruleFormRef.value.validate(async (valid) => {
         if (valid) {
-          localSet('projectName', state.ruleForm.name);
+          const res = await myApi.upload(state.ruleForm);
+          if(res.success) {
+            ElMessage.success('请求成功');
+            localSet('projectName', state.ruleForm.title);
             router.go(0);
+          }
         } else {
           console.log("error submit!!");
           return false;
@@ -94,6 +83,8 @@ export default {
       ...toRefs(state),
       submitForm,
       ruleFormRef,
+      changeImage,
+      changeImage1
     };
   },
 };
@@ -107,6 +98,7 @@ export default {
   // border: 1px solid rgb(180, 20, 180);
   display: flex;
   justify-content: space-between;
+
   .avatar-uploader {
     ::v-deep .el-upload {
       border: 1px dashed #99acb0;
@@ -115,6 +107,7 @@ export default {
       position: relative;
       overflow: hidden;
     }
+
     ::v-deep .el-upload:hover {
       border-color: #99acb0;
     }

src/views/Login.vue

@@ -1,41 +1,26 @@
 <template>
-  <div class="login-body">
+  <div class="login-body" :style="{
+    backgroundImage: `url(${loginImg})`,
+  }">
     <div class="login-container">
       <div class="head">
         <!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
         <div class="name">
-          <div class="title">{{projectName}}</div>
+          <div class="title">{{ projectName }}</div>
           <!-- <div class="tips">Vue3.0 后台管理系统</div> -->
         </div>
       </div>
-      <el-form
+      <el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
-        label-position="top"
-        :rules="rules"
-        :model="ruleForm"
-        ref="loginForm"
-        class="login-form"
-      >
         <el-form-item label="账号" prop="username">
-          <el-input
+          <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
-            type="text"
-            v-model.trim="ruleForm.username"
-            autocomplete="off"
-            @keyup.enter="submitForm"
-          ></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input
+          <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off"
-            type="password"
+            @keyup.enter="submitForm"></el-input>
-            v-model.trim="ruleForm.password"
-            autocomplete="off"
-            @keyup.enter="submitForm"
-          ></el-input>
         </el-form-item>
         <el-form-item>
           <!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
-          <el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm"
+          <el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm">立即登录</el-button>
-            >立即登录</el-button
-          >
           <!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
         </el-form-item>
       </el-form>
@@ -54,6 +39,7 @@ export default {
     const loginForm = ref(null);
     const state = reactive({
       projectName: "",
+      loginImg: "",
       ruleForm: {
         username: "",
         password: "",
@@ -69,18 +55,21 @@ export default {
       },
     });
 
-    onMounted(() => {
+    onMounted(async () => {
-      state.projectName = localGet("projectName") || "世博浦西区活水公园";
+      const res = await myApi.getInfo();
+      state.projectName = res.data.title || '世博浦西区活水公园';
+      state.loginImg = res.data.loginImg;
+
     });
     const submitForm = async () => {
       loginForm.value.validate(async (valid) => {
         if (valid) {
           const param = {
-            userName: state.ruleForm.username || "",
+            account: state.ruleForm.username || "",
-            passwordMd5: md5(state.ruleForm.password),
+            pwd: state.ruleForm.password,
           };
-          // const res = await myApi.login(param);
+          const res = await myApi.login(param);
-          localSet("token", "81527a9e9e2594b58babdd7f623f112f");
+          localSet("token", "token");
           window.location.href = "/";
         } else {
           console.log("error submit!!");
@@ -109,9 +98,10 @@ export default {
   width: 100%;
   /* background-color: #fff; */
   /* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
-  background: url("../assets/bg1.png") no-repeat;
+  background: url("../assets/bg2.png") no-repeat;
   background-size: 100% 100%;
 }
+
 .login-container {
   width: 420px;
   height: 400px;
@@ -119,26 +109,31 @@ export default {
   border-radius: 4px;
   box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
 }
+
 .head {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 40px 0 20px 0;
 }
+
 .head img {
   width: 100px;
   height: 100px;
   margin-right: 20px;
 }
+
 .head .title {
   font-size: 28px;
   color: #1baeae;
   font-weight: bold;
 }
+
 .head .tips {
   font-size: 12px;
   color: #999;
 }
+
 .login-form {
   width: 70%;
   margin: 0 auto;
@@ -148,6 +143,7 @@ export default {
 .el-form--label-top .el-form-item__label {
   padding: 0;
 }
+
 .login-form .el-form-item {
   margin-bottom: 20px;
 }

src/views/page.vue

@@ -19,6 +19,7 @@ import Liquid from "@/components/Liquid.vue";
 import Quality from "@/components/Quality.vue";
 import Flow from "@/components/Flow.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+import bus from '../utils/bus.js'
 export default {
   name: 'cl-hy',
   components: {
@@ -48,6 +49,7 @@ export default {
     })
     const changeIndex = (index) => {
       state.index = index;
+      bus.off("foo")// 清除监听
     }
     return {
       ...toRefs(state),

vite.config.js

@@ -24,11 +24,9 @@ export default ({ mode }) =>  defineConfig({
   server: {
     proxy: {
       '/api': {
-        // target: 'http://192.168.1.123:8866',
+        target: 'http://whh.shikicc.com:52189',
-        // target: 'http://10.10.14.123',
-        target: 'https://cdcmapi.shikicc.com',
         changeOrigin: true,
-        rewrite: path => path.replace(/^\/api/, '/api')
+        rewrite: path => path.replace(/^\/api/, '')
       }
     }
   }