add device interfacc
This commit is contained in:
龚祖望
parent
9c656dbde7
commit
fd44740af6
|
|
@ -1,6 +1,5 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
|
|||
|
|
@ -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 || {}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ import request from '@/utils/request'
|
|||
export function remove(data) {
|
||||
return request({
|
||||
url: '/device/delete',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/device/select',
|
||||
method: 'post',
|
||||
data
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -23,3 +23,11 @@ export function add(data) {
|
|||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function active(data) {
|
||||
return request({
|
||||
url: '/device/active',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/device/select',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 data = new FormData()
|
||||
data.append('loginName', username.trim())
|
||||
data.append('password', password)
|
||||
data.append('security_code', verifycode)
|
||||
const { username, password } = userInfo
|
||||
const data = { username, password }
|
||||
return new Promise((resolve, reject) => {
|
||||
login(data).then(response => {
|
||||
commit('SET_TOKEN', 'success')
|
||||
// console.log('res', res)
|
||||
login(data).then(res => {
|
||||
if (res.code === '200000') {
|
||||
setToken('success')
|
||||
commit('SET_TOKEN', 'success')
|
||||
resolve()
|
||||
} else {
|
||||
reject(res.message)
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
// Message({
|
||||
// message: res.message || 'Error',
|
||||
// type: 'error',
|
||||
// duration: 5 * 1000
|
||||
// })
|
||||
if (res.code !== '200000') {
|
||||
Message({
|
||||
message: res.message || 'Error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
}
|
||||
|
||||
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||
|
|
|
|||
|
|
@ -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 PmArray2 = this.getMaxMinValue('PM2.5')
|
||||
var PmArray3 = this.getMaxMinValue('PM10')
|
||||
var PmArray1 = [0, 80]
|
||||
var PmArray2 = [0, 80]
|
||||
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 TArray = this.getMaxMinValue('TVOC')
|
||||
var YArray = this.getMaxMinValue('乙醇')
|
||||
var JArray = this.getMaxMinValue('甲醛')
|
||||
var CArray = [0, 800]
|
||||
var TArray = [0, 100]
|
||||
var YArray = [0, 20]
|
||||
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 MixArray2 = this.getMaxMinValue('AQS')
|
||||
var MixArray3 = this.getMaxMinValue('甲烷')
|
||||
var MixArray1 = [0, 100]
|
||||
var MixArray2 = [0, 10]
|
||||
var MixArray3 = [0, 10]
|
||||
var dateOfPM = new Array()
|
||||
// get Mix min data
|
||||
var Mix1 = MixArray1[0]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -64,13 +64,9 @@
|
|||
tabindex="3"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<img
|
||||
ref="verifyGif"
|
||||
:src="gifUrl"
|
||||
width="40%"
|
||||
style="float: right; cursor: pointer"
|
||||
@click="getVerifycode"
|
||||
>
|
||||
<div class="coderight" @click="refreshCode">
|
||||
<SIdentify :identify-code="identifyCode" />
|
||||
</div>
|
||||
</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() {
|
||||
getGifCode()
|
||||
.then((res) => {
|
||||
this.gifUrl = window.URL.createObjectURL(res)
|
||||
})
|
||||
.catch()
|
||||
randomNum(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
},
|
||||
refreshCode() {
|
||||
this.identifyCode = ''
|
||||
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) {
|
||||
if (this.loginForm.verifycode === this.identifyCode) {
|
||||
this.loading = true
|
||||
this.$store
|
||||
.dispatch('user/login', this.loginForm)
|
||||
// .finally(() => {
|
||||
// this.$router.push({ path: this.redirect || '/overview' })
|
||||
// this.loading = false
|
||||
// })
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/overview' })
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
activeList: [],
|
||||
disactiveList: [],
|
||||
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) {
|
||||
remove({ no: device.no }).then(res => {
|
||||
if (res.code === '200000') {
|
||||
this.$refs.activatedDevice[index].classList.add('fadeOut')
|
||||
setTimeout(() => {
|
||||
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)
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
deviceList: [],
|
||||
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
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ module.exports = {
|
|||
port: port,
|
||||
proxy: {
|
||||
'/dashengda': {
|
||||
target: 'http://115.238.53.60:33333/', // 大胜达
|
||||
// target: 'http://192.168.23.102:8888/',
|
||||
// target: 'http://115.238.53.60:33333/', // 大胜达
|
||||
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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue