add device interfacc

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/api/data/history.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function allData(data) {
   return request({
-    url: '/Month/allData',
+    url: '/data/getAll',
     method: 'get',
     params: data || {}
   })

src/api/terminal/add.js

@@ -3,16 +3,16 @@ import request from '@/utils/request'
 export function remove(data) {
   return request({
     url: '/device/delete',
-    method: 'get',
+    method: 'post',
-    params: data || {}
+    data
   })
 }
 
 export function getList(data) {
   return request({
     url: '/device/select',
-    method: 'post',
+    method: 'get',
-    data
+    params: data || {}
   })
 }
 
@@ -23,3 +23,11 @@ export function add(data) {
     data
   })
 }
+
+export function active(data) {
+  return request({
+    url: '/device/active',
+    method: 'post',
+    data
+  })
+}

src/api/terminal/center.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/device/select',
+    method: 'get',
+    params: data || {}
+  })
+}

src/api/user/index.js

@@ -3,10 +3,8 @@ import request from '@/utils/request'
 export function login(data) {
   return request({
     url: '/login',
+    headers: { 'content-type': 'application/json' },
     method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
     data
   })
 }
@@ -53,7 +51,7 @@ export function update(data) {
 }
 export function logout() {
   return request({
-    url: '/vue-admin-template/user/logout',
+    url: '/loginOut',
     method: 'post'
   })
 }

src/store/modules/user.js

@@ -2,7 +2,7 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-07-19 14:53:19
+ * @LastEditTime: 2022-08-31 20:21:28
  * @FilePath: \dashengda\src\store\modules\user.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -39,16 +39,18 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password, verifycode } = userInfo
+    const { username, password } = userInfo
-    const data = new FormData()
+    const data = { username, password }
-    data.append('loginName', username.trim())
-    data.append('password', password)
-    data.append('security_code', verifycode)
     return new Promise((resolve, reject) => {
-      login(data).then(response => {
+      // console.log('res', res)
-        commit('SET_TOKEN', 'success')
+      login(data).then(res => {
-        setToken('success')
+        if (res.code === '200000') {
-        resolve()
+          setToken('success')
+          commit('SET_TOKEN', 'success')
+          resolve()
+        } else {
+          reject(res.message)
+        }
       }).catch(error => {
         reject(error)
       })

src/utils/request.js

@@ -2,7 +2,7 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-05-30 15:43:18
+ * @LastEditTime: 2022-09-01 09:34:55
  * @FilePath: \dashengda\src\utils\request.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,19 +10,25 @@ import axios from 'axios'
 import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+import { method } from 'lodash'
 
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 5000, // request timeout,
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
 })
 
 // request interceptor
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
+    config.data = JSON.stringify(config.data)
+    console.log('data', config.data)
+    console.log('config', config)
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
@@ -54,12 +60,13 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    // if (res.code !== 20000) {
+    if (res.code !== '200000') {
-    //   Message({
+      Message({
-    //     message: res.message || 'Error',
+        message: res.message || 'Error',
-    //     type: 'error',
+        type: 'error',
-    //     duration: 5 * 1000
+        duration: 5 * 1000
-    //   })
+      })
+    }
 
     //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
     //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

src/views/data/history/index.vue

@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import { allData, page } from '@/api/data/history.js'
+import { allData } from '@/api/data/history.js'
 
 export default {
   data() {
@@ -518,23 +518,11 @@ export default {
     })
   },
   methods: {
-    getMaxMinValue(params) {
-      var result = new Array()
-      page({ name: params })
-        .then((data) => {
-          var minValue = data.data.list[0].minValue
-          var maxValue = data.data.list[0].maxValue
-          result.push(minValue)
-          result.push(maxValue)
-        })
-        .catch()
-      return result
-    },
     getData() {
       // get all params data of 24 hours
       allData()
         .then((data) => {
-          this.dealData(data.data)
+          this.dealData(data.data.data)
         })
         .catch()
     },
@@ -561,7 +549,6 @@ export default {
           this.parseNoiseData(tempArray)
           tempArray.splice(0, tempArray.length) // clear array
         }
-        // var pressure=getMaxMinValue("气压");
         if (i < data.length && data[i].name == '温度') {
           while (data[i].name == '温度') {
             if (
@@ -933,7 +920,7 @@ export default {
     parseWindSpeedData(data) {
       this.windSpeedLine = this.$echarts.init(document.getElementById('风速'))
       // get min and max data
-      var windMaxMin = this.getMaxMinValue('风速')
+      var windMaxMin = [0, 12]
       // data clean
       data = this.dataClean(data)
       // get x and y axis data, x represent date,y represent wind speed
@@ -962,7 +949,7 @@ export default {
     parseWindDireData(data) {
       this.WindDireLine = this.$echarts.init(document.getElementById('风向'))
       // get min and max data
-      var windMaxMin = this.getMaxMinValue('风向')
+      var windMaxMin = [0, 360]
       // data clean
       data = this.dataClean(data)
       // get x and y axis data, x represent date,y represent wind speed
@@ -993,9 +980,9 @@ export default {
       // data clean
       data = this.dataClean(data)
       // get max and min value array of each param
-      var PmArray1 = this.getMaxMinValue('PM1.0')
+      var PmArray1 = [0, 80]
-      var PmArray2 = this.getMaxMinValue('PM2.5')
+      var PmArray2 = [0, 80]
-      var PmArray3 = this.getMaxMinValue('PM10')
+      var PmArray3 = [0, 200]
       var dateOfPM = new Array()
       // get PM min data
       var PM1 = PmArray1[0]
@@ -1032,10 +1019,10 @@ export default {
     parseMixData(data) {
       this.MixLine = this.$echarts.init(document.getElementById('Mix'))
       //
-      var CArray = this.getMaxMinValue('CO2')
+      var CArray = [0, 800]
-      var TArray = this.getMaxMinValue('TVOC')
+      var TArray = [0, 100]
-      var YArray = this.getMaxMinValue('乙醇')
+      var YArray = [0, 20]
-      var JArray = this.getMaxMinValue('甲醛')
+      var JArray = [0, 100]
       // data clean
       data = this.dataClean(data)
       // get x and y axis data, x represent date,y represent wind speed
@@ -1095,9 +1082,9 @@ export default {
       // data clean
       data = this.dataClean(data)
       // get min and max value array
-      var MixArray1 = this.getMaxMinValue('SO2')
+      var MixArray1 = [0, 100]
-      var MixArray2 = this.getMaxMinValue('AQS')
+      var MixArray2 = [0, 10]
-      var MixArray3 = this.getMaxMinValue('甲烷')
+      var MixArray3 = [0, 10]
       var dateOfPM = new Array()
       // get Mix min data
       var Mix1 = MixArray1[0]

src/views/login/components/identify/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="s-canvas">
+    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'SIdentify',
+  props: {
+    identifyCode: {
+      type: String,
+      default: '1234'
+    },
+    fontSizeMin: {
+      type: Number,
+      default: 20
+    },
+    fontSizeMax: {
+      type: Number,
+      default: 35
+    },
+    backgroundColorMin: {
+      type: Number,
+      default: 180
+    },
+    backgroundColorMax: {
+      type: Number,
+      default: 240
+    },
+    colorMin: {
+      type: Number,
+      default: 50
+    },
+    colorMax: {
+      type: Number,
+      default: 160
+    },
+    lineColorMin: {
+      type: Number,
+      default: 40
+    },
+    lineColorMax: {
+      type: Number,
+      default: 180
+    },
+    dotColorMin: {
+      type: Number,
+      default: 0
+    },
+    dotColorMax: {
+      type: Number,
+      default: 255
+    },
+    contentWidth: {
+      type: Number,
+      default: 112
+    },
+    contentHeight: {
+      type: Number,
+      default: 47
+    }
+  },
+  watch: {
+    identifyCode() {
+      this.drawPic()
+    }
+  },
+  mounted() {
+    this.drawPic()
+  },
+  methods: {
+    // 生成一个随机数
+    randomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min)
+    },
+    // 生成一个随机的颜色
+    randomColor(min, max) {
+      const r = this.randomNum(min, max)
+      const g = this.randomNum(min, max)
+      const b = this.randomNum(min, max)
+      return 'rgb(' + r + ',' + g + ',' + b + ')'
+    },
+    drawPic() {
+      const canvas = document.getElementById('s-canvas')
+      const ctx = canvas.getContext('2d')
+      ctx.textBaseline = 'bottom'
+      // 绘制背景
+      ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
+      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
+      // 绘制文字
+      for (let i = 0; i < this.identifyCode.length; i++) {
+        this.drawText(ctx, this.identifyCode[i], i)
+      }
+      this.drawLine(ctx)
+      this.drawDot(ctx)
+    },
+    drawText(ctx, txt, i) {
+      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
+      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
+      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
+      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
+      var deg = this.randomNum(-45, 45)
+      // 修改坐标原点和旋转角度
+      ctx.translate(x, y)
+      ctx.rotate(deg * Math.PI / 180)
+      ctx.fillText(txt, 0, 0)
+      // 恢复坐标原点和旋转角度
+      ctx.rotate(-deg * Math.PI / 180)
+      ctx.translate(-x, -y)
+    },
+    drawLine(ctx) {
+      // 绘制干扰线
+      for (let i = 0; i < 3; i++) {
+        ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
+        ctx.beginPath()
+        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+        ctx.stroke()
+      }
+    },
+    drawDot(ctx) {
+      // 绘制干扰点
+      for (let i = 0; i < 30; i++) {
+        ctx.fillStyle = this.randomColor(0, 255)
+        ctx.beginPath()
+        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
+        ctx.fill()
+      }
+    }
+  }
+}
+</script>

src/views/login/index.vue

@@ -64,13 +64,9 @@
             tabindex="3"
             @keyup.enter.native="handleLogin"
           />
-          <img
+          <div class="coderight" @click="refreshCode">
-            ref="verifyGif"
+            <SIdentify :identify-code="identifyCode" />
-            :src="gifUrl"
+          </div>
-            width="40%"
-            style="float: right; cursor: pointer"
-            @click="getVerifycode"
-          >
         </el-form-item>
         <!-- <el-form-item
           prop="autoLogin"
@@ -96,9 +92,11 @@
 
 <script>
 import { getGifCode } from '@/api/user'
+import SIdentify from './components/identify'
 
 export default {
   name: 'Login',
+  components: { SIdentify },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!value) {
@@ -128,6 +126,8 @@ export default {
           { required: true, trigger: 'blur', validator: validatePassword }
         ]
       },
+      identifyCodes: '1234567890',
+      identifyCode: '',
       loading: false,
       passwordType: 'password',
       redirect: undefined,
@@ -149,30 +149,48 @@ export default {
     }
   },
   mounted() {
-    this.getVerifycode()
+    this.identifyCode = ''
+    this.makeCode(this.identifyCodes, 4)
     this.init()
   },
   methods: {
-    getVerifycode() {
+    randomNum(min, max) {
-      getGifCode()
+      return Math.floor(Math.random() * (max - min) + min)
-        .then((res) => {
+    },
-          this.gifUrl = window.URL.createObjectURL(res)
+    refreshCode() {
-        })
+      this.identifyCode = ''
-        .catch()
+      this.makeCode(this.identifyCodes, 4)
+    },
+    makeCode(o, l) {
+      for (let i = 0; i < l; i++) {
+        this.identifyCode += this.identifyCodes[
+          this.randomNum(0, this.identifyCodes.length)
+        ]
+      }
     },
     handleLogin() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          if (this.loginForm.verifycode === this.identifyCode) {
-          this.$store
+            this.loading = true
-            .dispatch('user/login', this.loginForm)
+            this.$store
-            .then(() => {
+              .dispatch('user/login', this.loginForm)
-              this.$router.push({ path: this.redirect || '/overview' })
+              // .finally(() => {
-              this.loading = false
+              //   this.$router.push({ path: this.redirect || '/overview' })
-            })
+              //   this.loading = false
-            .catch(() => {
+              // })
-              this.loading = false
+              .then(() => {
-            })
+                this.$router.push({ path: this.redirect || '/overview' })
+                this.loading = false
+              })
+              .catch(err => {
+                this.$message.error(err)
+                this.loading = false
+              })
+          } else {
+            this.$message.error('验证码输入有误')
+            this.loginForm.verifycode = ''
+          }
         } else {
           return false
         }
@@ -356,5 +374,10 @@ $cursor: #fff;
     background: #fff;
     color: #454545;
   }
+
+  .coderight{
+    float: right;
+    cursor: pointer;
+  }
 }
 </style>

src/views/terminal/add/index.vue

@@ -101,80 +101,14 @@
 </template>
 
 <script>
-import { remove, getList, add } from '@/api/terminal/add'
+import { remove, getList, add, active } from '@/api/terminal/add'
 
 export default {
   data() {
     return {
       date: '',
-      activeList: [
+      activeList: [],
-        {
+      disactiveList: [],
-          src: require('@/assets/images/device.png'),
-          productname: '彩印车间',
-          type: 'M-168-Lora-FM100',
-          no: 'A000001',
-          devicedesc: '电表监测',
-          color: '#00CCF2'
-        },
-        {
-          src: require('@/assets/images/device2.png'),
-          productname: '生产车间',
-          type: 'M528-A800-5G-HM100',
-          no: 'A000002',
-          devicedesc: '电表监测',
-          color: '#FAB05A'
-        },
-        {
-          src: require('@/assets/images/device3.png'),
-          productname: '成型车间',
-          type: 'RV400-NPU4T-5G-SR100',
-          no: 'A000003',
-          devicedesc: '电表监测',
-          color: '#46D5A0'
-        },
-        {
-          src: require('@/assets/images/device4.png'),
-          productname: '打包车间',
-          type: 'RV400-NPU16T-5G-AR100',
-          no: 'A000004',
-          devicedesc: '电表监测',
-          color: '#9090F2'
-        },
-        {
-          src: require('@/assets/images/device4.png'),
-          productname: '打包车间',
-          type: 'RV400-NPU16T-5G-AR100',
-          no: 'A000005',
-          devicedesc: '电表监测',
-          color: '#9090F2'
-        }
-      ],
-      disactiveList: [
-        {
-          src: require('@/assets/images/device2.png'),
-          productname: '生产车间',
-          type: 'RV400-NPU4T-5G-SR100',
-          no: 'A000006',
-          devicedesc: '电表监测',
-          color: '#FAB05A'
-        },
-        {
-          src: require('@/assets/images/device.png'),
-          productname: '彩印车间',
-          type: 'M-168-Lora-FM100',
-          no: 'A000007',
-          devicedesc: '电表监测',
-          color: '#00CCF2'
-        },
-        {
-          src: require('@/assets/images/device3.png'),
-          productname: '成型车间',
-          type: 'M528-A800-5G-HM100',
-          no: 'A000008',
-          devicedesc: '电表监测',
-          color: '#46D5A0'
-        }
-      ],
       visible: false,
       form: {
         product: {},
@@ -240,17 +174,42 @@ export default {
   },
   mounted() {
     this.date = new Date().toLocaleDateString()
+    this.getList(0)
+    this.getList(1)
+    console.log('区域', 3.3 % 2)
   },
   methods: {
     selectCompany() {
       this.$message.warning('暂无权限')
     },
+    getList(activestatus) {
+      getList({ activestatus }).then(res => {
+        if (activestatus === 0) {
+          this.disactiveList = res.data
+          this.chooseCard(this.disactiveList)
+        } else {
+          this.activeList = res.data
+          this.chooseCard(this.activeList)
+        }
+      })
+    },
+    chooseCard(list) {
+      list.forEach(item => {
+        const temp = this.productList.filter(product => product.name === item.productname)
+        item.color = temp[0].color
+        item.src = temp[0].src
+      })
+    },
     remove(device, index) {
-      this.$refs.activatedDevice[index].classList.add('fadeOut')
+      remove({ no: device.no }).then(res => {
-      setTimeout(() => {
+        if (res.code === '200000') {
-        this.activeList.splice(index, 1)
+          this.$refs.activatedDevice[index].classList.add('fadeOut')
-        this.$refs.activatedDevice[index].classList.remove('fadeOut')
+          setTimeout(() => {
-      }, 400)
+            this.activeList.splice(index, 1)
+            this.$refs.activatedDevice[index].classList.remove('fadeOut')
+          }, 400)
+        }
+      }).catch()
     },
     activate(device, index) {
       this.$refs.disactivatedDevice[index].classList.add('fadeOut')
@@ -258,7 +217,11 @@ export default {
         this.disactiveList.splice(index, 1)
         this.$refs.disactivatedDevice[index].classList.remove('fadeOut')
       }, 400)
-      this.activeList.push(device)
+      active({ no: device.no }).then(res => {
+        if (res.code === '200000') {
+          this.activeList.push(device)
+        }
+      }).catch()
     },
     add() {
       this.visible = true
@@ -275,12 +238,31 @@ export default {
           const temp = {
             src, productname, type, no, devicedesc, color
           }
+          const runstatus = Math.round(Math.random() * 10) % 3
+          const statusdesc = runstatus === 0 ? '待机' : runstatus === 1 ? '运行' : '警告'
+          const dataTemplate = {
+            runstatus,
+            statusdesc,
+            kernel: 'rt-thread kenel',
+            webversion: '1.0',
+            ipaddr: '192.168.131.29',
+            netmask: '255.255.254.0',
+            gateway: '192.168.130.1',
+            dnsserver0: '10.0.110.21',
+            dnsserver1: '10.0.110.20',
+            topic: '/broadcast/hf6mzwdVnJg/989898',
+            serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
+            serverport: '1883',
+            username: 'test1&hf6mzwdVnJg',
+            clientid: '123|securemode=3,signmethod=hmacsha1|',
+            privateserveraddr: '192.168.131.30',
+            privateserverport: '9898',
+            privateserverusername: 'admin'
+          }
           add({
-            productname, type, no, devicedesc, activestatus: this.form.activestatus
+            productname, type, no, devicedesc, activestatus: this.form.activestatus, ...dataTemplate
           }).then(res => {
-            console.log('res', res)
           }).catch(err => {
-            console.log('err', err)
           })
           if (this.form.activestatus === 0) {
             this.disactiveList.push(temp)

src/views/terminal/center/index.vue

@@ -6,10 +6,10 @@
           <div class="icon-box" :style="icon_box_bg_color(item.status)">
             <svg-icon icon-class="cpu" class="device_icon" />
           </div>
-          <span class="device_name">{{ '产品分类：' + item.productName }}</span>
+          <span class="device_name">{{ '产品分类：' + item.productname }}</span>
           <div class="status">
             <svg-icon :icon-class="item.status === 0 ? 'clock' : item.status === 1 ? 'activity' : 'alert-circle'" />
-            <span class="desc">{{ item.statusDesc }}</span>
+            <span class="desc">{{ item.statusdesc }}</span>
           </div>
         </div>
         <div class="card_body">
@@ -27,7 +27,7 @@
           <br>
           <span class="device_info" :style="device_info_bg_color(item.status)">
             <svg-icon icon-class="globe" />
-            <span class="text">{{ 'web版本：' + item.webVersion }}</span>
+            <span class="text">{{ 'web版本：' + item.webversion }}</span>
           </span>
         </div>
         <div class="card_footer" :style="footer_color(item.status)">
@@ -45,13 +45,13 @@
             <svg-icon icon-class="cpu" class="device_icon" />
           </div>
           <div>
-            <p class="device_name" style="font-weight:bold">{{ '产品分类：' + current.productName }}</p>
+            <p class="device_name" style="font-weight:bold">{{ '产品分类：' + current.productname }}</p>
             <p class="device_name">{{ '设备类型：' + current.type }}</p>
             <p class="device_name">{{ '设备序列号：' + current.no }}</p>
           </div>
           <div class="status" :style="status_bg_color(current.status)">
             <svg-icon :icon-class="current.status === 0 ? 'clock' : current.status === 1 ? 'activity' : 'alert-circle'" />
-            <span class="desc">{{ current.statusDesc }}</span>
+            <span class="desc">{{ current.statusdesc }}</span>
           </div>
         </div>
       </div>
@@ -77,12 +77,12 @@
         <li>
           <svg-icon icon-class="database" class="icon" />
           <span class="label">首选DNS服务器</span>
-          <span class="val">{{ current.dnsServer0 }}</span>
+          <span class="val">{{ current.dnsserver0 }}</span>
         </li>
         <li>
           <svg-icon icon-class="database" class="icon" />
           <span class="label">备用DNS服务器</span>
-          <span class="val">{{ current.dnsServer1 }}</span>
+          <span class="val">{{ current.dnsserver1 }}</span>
         </li>
       </ul>
       <ul v-else-if="protocol=== 'mqtt'">
@@ -94,12 +94,12 @@
         <li>
           <svg-icon icon-class="git-pull-request" class="icon" />
           <span class="label">服务器地址</span>
-          <span class="val">{{ current.serverAddr }}</span>
+          <span class="val">{{ current.serveraddr }}</span>
         </li>
         <li>
           <svg-icon icon-class="crosshair" class="icon" />
           <span class="label">端口号</span>
-          <span class="val">{{ current.serverPort }}</span>
+          <span class="val">{{ current.serverport }}</span>
         </li>
         <li>
           <svg-icon icon-class="user2" class="icon" />
@@ -109,24 +109,24 @@
         <li>
           <svg-icon icon-class="monitor" class="icon" />
           <span class="label">客户端ID</span>
-          <span class="val">{{ current.clientID }}</span>
+          <span class="val">{{ current.clientid }}</span>
         </li>
       </ul>
       <ul v-else>
         <li>
           <svg-icon icon-class="git-pull-request" class="icon" />
           <span class="label">服务器地址</span>
-          <span class="val">{{ current.privateServerAddr }}</span>
+          <span class="val">{{ current.privateserveraddr }}</span>
         </li>
         <li>
           <svg-icon icon-class="crosshair" class="icon" />
           <span class="label">端口号</span>
-          <span class="val">{{ current.privateServerPort }}</span>
+          <span class="val">{{ current.privateserverport }}</span>
         </li>
         <li>
           <svg-icon icon-class="user2" class="icon" />
           <span class="label">用户名</span>
-          <span class="val">{{ current.privateUsername }}</span>
+          <span class="val">{{ current.privateserverusername }}</span>
         </li>
       </ul>
     </el-dialog>
@@ -134,121 +134,12 @@
 </template>
 
 <script>
+import { getList } from '@/api/terminal/center'
+
 export default {
   data() {
     return {
-      deviceList: [
+      deviceList: [],
-        {
-          productName: '彩印车间',
-          status: 1,
-          statusDesc: '运行',
-          type: 'M-168-Lora-FM100',
-          kernel: 'rt-thread kenel',
-          webVersion: '1.0',
-          no: 'A000001',
-          ipaddr: '192.168.131.29',
-          netmask: '255.255.254.0',
-          gateway: '192.168.130.1',
-          dnsServer0: '10.0.110.21',
-          dnsServer1: '10.0.110.20',
-          topic: '/broadcast/hf6mzwdVnJg/989898',
-          serverAddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
-          serverPort: '1883',
-          username: 'test1&hf6mzwdVnJg',
-          clientID: '123|securemode=3,signmethod=hmacsha1|',
-          privateServerAddr: '192.168.131.30',
-          privateServerPort: '9898',
-          privateUsername: 'admin'
-        },
-        {
-          productName: '生产车间',
-          status: 0,
-          statusDesc: '待机',
-          type: 'M528-A800-5G-HM100',
-          kernel: 'rt-thread kenel',
-          webVersion: '1.0',
-          no: 'A000002',
-          ipaddr: '192.168.131.29',
-          netmask: '255.255.254.0',
-          gateway: '192.168.130.1',
-          dnsServer0: '10.0.110.21',
-          dnsServer1: '10.0.110.20',
-          topic: '/broadcast/hf6mzwdVnJg/989898',
-          serverAddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
-          serverPort: '1883',
-          username: 'test1&hf6mzwdVnJg',
-          clientID: '123|securemode=3,signmethod=hmacsha1|',
-          privateServerAddr: '192.168.131.30',
-          privateServerPort: '9898',
-          privateUsername: 'admin'
-        },
-        {
-          productName: '成型车间',
-          status: 1,
-          statusDesc: '运行',
-          type: 'RV400-NPU4T-5G-SR100',
-          kernel: 'rt-thread kenel',
-          webVersion: '1.0',
-          no: 'A000003',
-          ipaddr: '192.168.131.29',
-          netmask: '255.255.254.0',
-          gateway: '192.168.130.1',
-          dnsServer0: '10.0.110.21',
-          dnsServer1: '10.0.110.20',
-          topic: '/broadcast/hf6mzwdVnJg/989898',
-          serverAddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
-          serverPort: '1883',
-          username: 'test1&hf6mzwdVnJg',
-          clientID: '123|securemode=3,signmethod=hmacsha1|',
-          privateServerAddr: '192.168.131.30',
-          privateServerPort: '9898',
-          privateUsername: 'admin'
-        },
-        {
-          productName: '打包车间',
-          status: 2,
-          statusDesc: '警告',
-          type: 'RV400-NPU16T-5G-AR100',
-          kernel: 'rt-thread kenel',
-          webVersion: '1.0',
-          no: 'A000004',
-          ipaddr: '192.168.131.29',
-          netmask: '255.255.254.0',
-          gateway: '192.168.130.1',
-          dnsServer0: '10.0.110.21',
-          dnsServer1: '10.0.110.20',
-          topic: '/broadcast/hf6mzwdVnJg/989898',
-          serverAddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
-          serverPort: '1883',
-          username: 'test1&hf6mzwdVnJg',
-          clientID: '123|securemode=3,signmethod=hmacsha1|',
-          privateServerAddr: '192.168.131.30',
-          privateServerPort: '9898',
-          privateUsername: 'admin'
-        },
-        {
-          productName: '打包车间',
-          status: 1,
-          statusDesc: '运行',
-          type: 'RV400-NPU16T-5G-AR100',
-          kernel: 'rt-thread kenel',
-          webVersion: '1.0',
-          no: 'A000005',
-          ipaddr: '192.168.131.29',
-          netmask: '255.255.254.0',
-          gateway: '192.168.130.1',
-          dnsServer0: '10.0.110.21',
-          dnsServer1: '10.0.110.20',
-          topic: '/broadcast/hf6mzwdVnJg/989898',
-          serverAddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
-          serverPort: '1883',
-          username: 'test1&hf6mzwdVnJg',
-          clientID: '123|securemode=3,signmethod=hmacsha1|',
-          privateServerAddr: '192.168.131.30',
-          privateServerPort: '9898',
-          privateUsername: 'admin'
-        }
-      ],
       visible: false,
       current: {},
       protocol: 'TCP/IP'
@@ -335,8 +226,18 @@ export default {
   },
   mounted() {
     this.current = this.deviceList[0]
+    this.getList()
   },
   methods: {
+    getList() {
+      getList({ activestatus: 1 }).then(res => {
+        if (res.code === '200000') {
+          res.data.forEach(item => {
+            this.deviceList.push({ ...item, status: item.runstatus })
+          })
+        }
+      })
+    },
     showDetail(info) {
       this.current = info
       this.visible = true

vue.config.js

@@ -30,8 +30,8 @@ module.exports = {
     port: port,
     proxy: {
       '/dashengda': {
-        target: 'http://115.238.53.60:33333/', // 大胜达
+        // target: 'http://115.238.53.60:33333/', // 大胜达
-        // target: 'http://192.168.23.102:8888/',
+        target: 'http://192.168.23.100:8080/', // wty
         // target: 'http://10.0.30.23:8080',
         changeOrigin: true,
         pathRewrite: {
@@ -43,8 +43,8 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
-    },
+    }
-    before: require('./mock/mock-server.js')
+    // before: require('./mock/mock-server.js')
   },
   configureWebpack: {
     devtool: 'source-map'