add ota page & plc export file function
This commit is contained in:
龚祖望
parent
cc406f18f8
commit
c015452ae3
|
|
@ -10,9 +10,10 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"axios": "0.18.1",
|
||||
"core-js": "^3.6.5",
|
||||
"core-js": "^3.23.4",
|
||||
"echarts": "^5.3.3",
|
||||
"element-ui": "^2.15.8",
|
||||
"element-ui": "2.15.13",
|
||||
"file-saver": "^2.0.5",
|
||||
"html-loader": "^4.2.0",
|
||||
"js-cookie": "2.2.0",
|
||||
"markdown-loader": "^8.0.0",
|
||||
|
|
@ -6028,10 +6029,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.6.5",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.6.5.tgz",
|
||||
"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==",
|
||||
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
|
||||
"version": "3.23.4",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.23.4.tgz",
|
||||
"integrity": "sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ==",
|
||||
"hasInstallScript": true
|
||||
},
|
||||
"node_modules/core-js-compat": {
|
||||
|
|
@ -7198,9 +7198,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/element-ui": {
|
||||
"version": "2.15.10",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.10.tgz",
|
||||
"integrity": "sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==",
|
||||
"version": "2.15.13",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.13.tgz",
|
||||
"integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
|
|
@ -8482,6 +8482,11 @@
|
|||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
|
||||
},
|
||||
"node_modules/file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
|
|
@ -25192,9 +25197,9 @@
|
|||
}
|
||||
},
|
||||
"core-js": {
|
||||
"version": "3.6.5",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.6.5.tgz",
|
||||
"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
|
||||
"version": "3.23.4",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.23.4.tgz",
|
||||
"integrity": "sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ=="
|
||||
},
|
||||
"core-js-compat": {
|
||||
"version": "3.25.1",
|
||||
|
|
@ -26188,9 +26193,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.15.10",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.10.tgz",
|
||||
"integrity": "sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==",
|
||||
"version": "2.15.13",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.13.tgz",
|
||||
"integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
|
|
@ -27229,6 +27234,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -15,9 +15,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.1",
|
||||
"core-js": "^3.6.5",
|
||||
"core-js": "^3.23.4",
|
||||
"echarts": "^5.3.3",
|
||||
"element-ui": "2.15.13",
|
||||
"file-saver": "^2.0.5",
|
||||
"html-loader": "^4.2.0",
|
||||
"js-cookie": "2.2.0",
|
||||
"markdown-loader": "^8.0.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function remove(data) {
|
||||
return request({
|
||||
url: '/firmware/delete',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function upload(data) {
|
||||
return request({
|
||||
url: '/firmware/upload',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: '/firmware/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function verify(data) {
|
||||
return request({
|
||||
url: '/firmware/verify',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function download(data) {
|
||||
return request({
|
||||
url: '/firmware/download',
|
||||
method: 'get',
|
||||
params: data || {},
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/firmware/getAll',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
export function getByVerify(data) {
|
||||
return request({
|
||||
url: '/firmware/getVerify',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
export function getByName(data) {
|
||||
return request({
|
||||
url: '/firmware/getByName',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
export function addTask(data) {
|
||||
return request({
|
||||
url: '/ota/addJob',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskList(data) {
|
||||
return request({
|
||||
url: '/ota/getAll',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 306 B |
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
Binary file not shown.
|
After Width: | Height: | Size: 823 B |
Binary file not shown.
|
After Width: | Height: | Size: 621 B |
Binary file not shown.
|
After Width: | Height: | Size: 201 B |
Binary file not shown.
|
After Width: | Height: | Size: 780 B |
Binary file not shown.
|
After Width: | Height: | Size: 201 B |
Binary file not shown.
|
After Width: | Height: | Size: 921 B |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
Binary file not shown.
|
After Width: | Height: | Size: 268 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692843395905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4793" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M554.666667 268.8v601.6h-85.333334V268.8L337.066667 401.066667 277.333333 341.333333 512 106.666667 746.666667 341.333333l-59.733334 59.733334L554.666667 268.8z" fill="#20BE0B" p-id="4794"></path></svg>
|
||||
|
After Width: | Height: | Size: 533 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692842080408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3732" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 451.669333l211.2-211.2 60.330667 60.330667-211.2 211.2 211.2 211.2-60.330667 60.330667-211.2-211.2-211.2 211.2-60.330667-60.330667 211.2-211.2-211.2-211.2L300.8 240.469333z" p-id="3733" fill="#20BE0B"></path></svg>
|
||||
|
After Width: | Height: | Size: 550 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692863669530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5867" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="5868" fill="#20BE0B"></path></svg>
|
||||
|
After Width: | Height: | Size: 741 B |
|
|
@ -48,7 +48,7 @@ export default {
|
|||
}
|
||||
},
|
||||
showBreadcrumb() {
|
||||
const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'terminal/stock', 'data/value', 'configuration/development', 'dashboard', 'log/accessLog', 'log/systemLog', 'rule/manage', 'rule/dataTransfer']
|
||||
const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'terminal/stock', 'terminal/ota', 'data/value', 'configuration/development', 'dashboard', 'log/accessLog', 'log/systemLog', 'rule/manage', 'rule/dataTransfer']
|
||||
return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ export const asyncRouter = [
|
|||
path: 'ota',
|
||||
name: 'OTA',
|
||||
component: () => import('@/views/terminal/OTA/index'),
|
||||
meta: { title: 'OTA升级', disabled: true, permission: ['dashengda', 'hangxiao', 'qianjiangdianqi'] }
|
||||
meta: { title: 'OTA升级', permission: ['dashengda', 'hangxiao', 'qianjiangdianqi'] }
|
||||
},
|
||||
{
|
||||
path: 'stock',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: 龚祖望 573413756@qq.com
|
||||
* @Date: 2022-05-16 09:16:41
|
||||
* @LastEditors: 龚祖望 573413756@qq.com
|
||||
* @LastEditTime: 2022-11-10 15:09:14
|
||||
* @LastEditTime: 2023-08-23 15:32:34
|
||||
* @FilePath: \dashengda\src\utils\request.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
|
@ -56,8 +56,9 @@ service.interceptors.response.use(
|
|||
*/
|
||||
response => {
|
||||
const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res instanceof Blob) {
|
||||
return response
|
||||
} else {
|
||||
if (res.code !== '200000') {
|
||||
Message({
|
||||
message: res.message || 'Error',
|
||||
|
|
@ -65,9 +66,7 @@ service.interceptors.response.use(
|
|||
duration: 5 * 1000
|
||||
})
|
||||
}
|
||||
if (res.code === '200300') {
|
||||
|
||||
}
|
||||
if (res.code === '200300') {}
|
||||
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||
// // to re-login
|
||||
|
|
@ -85,6 +84,7 @@ service.interceptors.response.use(
|
|||
// } else {
|
||||
return res
|
||||
// }
|
||||
}
|
||||
},
|
||||
error => {
|
||||
Message({
|
||||
|
|
|
|||
|
|
@ -1,3 +1,836 @@
|
|||
<template>
|
||||
<div class="app-container" />
|
||||
<div class="app-container">
|
||||
<el-row
|
||||
type="flex"
|
||||
justify="space-between"
|
||||
style="align-items: baseline; margin-bottom: 30px"
|
||||
>
|
||||
<div class="header">
|
||||
<h1 class="title">固件升级</h1>
|
||||
<div class="content">
|
||||
<div class="content_left">
|
||||
<span class="date">{{ date }}</span>
|
||||
<span class="sum">{{ "共" + sum + "个固件" }}</span>
|
||||
</div>
|
||||
<div class="content_right">
|
||||
<div class="type_btn">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
:class="{ active: buttonActive === 1 }"
|
||||
:autofocus="true"
|
||||
@click="handleClick(1)"
|
||||
>全部</el-button>
|
||||
<el-button
|
||||
:class="{ active: buttonActive === 2 }"
|
||||
@click="handleClick(2)"
|
||||
>未验证</el-button>
|
||||
<el-button
|
||||
:class="{ active: buttonActive === 3 }"
|
||||
@click="handleClick(3)"
|
||||
>验证成功</el-button>
|
||||
<el-button
|
||||
:class="{ active: buttonActive === 4 }"
|
||||
@click="handleClick(4)"
|
||||
>验证失败</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
placeholder="请输入固件名称"
|
||||
suffix-icon="el-icon-search"
|
||||
@change="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button
|
||||
class="add_btn"
|
||||
icon="el-icon-plus"
|
||||
@click="addFileVisible = true"
|
||||
>新增固件</el-button>
|
||||
</el-row>
|
||||
<div class="table_container">
|
||||
<div
|
||||
v-for="(item, index) in fileList"
|
||||
:key="index"
|
||||
class="item"
|
||||
:style="{
|
||||
backgroundColor: item.bgColor,
|
||||
borderColor: item.primaryColor,
|
||||
}"
|
||||
>
|
||||
<div class="item_left">
|
||||
<div class="line1">
|
||||
<img :src="item.statusSrc_big">
|
||||
<span class="name">{{ item.fileName }}</span>
|
||||
<span class="desc">{{ item.fileDesc }}</span>
|
||||
</div>
|
||||
<div class="line2">
|
||||
<div>
|
||||
<img :src="item.statusSrc_small">
|
||||
<span :style="{ color: item.primaryColor }">{{
|
||||
item.verify
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<img src="@/assets/images/ota_version.png">
|
||||
<span style="color: #fbc511">{{ item.fileVersion }}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<img src="@/assets/images/ota_file.png">
|
||||
<span style="color: #00ccf2">{{ item.fileName }}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<img src="@/assets/images/ota_md5.png">
|
||||
<span style="color: #724fe8">{{ item.fileMd5 }}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<img src="@/assets/images/ota_time.png">
|
||||
<span style="color: #20be0b">{{ item.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider" :style="{ backgroundColor: item.primaryColor }" />
|
||||
<div class="item_right">
|
||||
<el-button
|
||||
:style="{ borderColor: item.primaryColor }"
|
||||
@click="download(item.fileName)"
|
||||
>下载</el-button>
|
||||
<el-button
|
||||
:style="{ borderColor: item.primaryColor }"
|
||||
@click="(event) => remove(item.fileName, event)"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
:style="{ borderColor: item.primaryColor }"
|
||||
@click="verify(item.fileName, index)"
|
||||
>验证</el-button>
|
||||
<el-button
|
||||
:style="{
|
||||
borderColor: item.primaryColor,
|
||||
backgroundColor: item.primaryColor,
|
||||
color: 'white',
|
||||
}"
|
||||
@click="showTask(item.fileName)"
|
||||
>升级</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增固件弹窗 -->
|
||||
<el-dialog
|
||||
title="新增设备"
|
||||
:visible="addFileVisible"
|
||||
width="500px"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<el-steps :active="active" finish-status="success" align-center>
|
||||
<el-step title="固件上传" icon="el-icon-upload" />
|
||||
<el-step title="信息填写" icon="el-icon-edit" />
|
||||
</el-steps>
|
||||
<div v-show="active === 1" style="padding: 50px">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/dashengda/firmware/upload"
|
||||
:multiple="false"
|
||||
:limit="1"
|
||||
:file-list="firmwareList"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<i class="el-icon-upload" />
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div slot="tip" class="el-upload__tip">文件大小不能超过1Mb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div v-show="active === 2" style="padding: 30px 0">
|
||||
<el-form ref="form" label-width="100px" :model="newFile" size="medium">
|
||||
<el-row>
|
||||
<el-col :span="18" :offset="3">
|
||||
<el-form-item label="固件名称：" prop="fileName">
|
||||
<el-input v-model="newFile.fileName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="固件版本：" prop="fileVersion">
|
||||
<el-input v-model="newFile.fileVersion" />
|
||||
</el-form-item>
|
||||
<el-form-item label="MD5码：" prop="fileMd5">
|
||||
<el-input v-model="newFile.fileMd5" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="固件描述：" prop="fileDesc">
|
||||
<el-input v-model="newFile.fileDesc" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button
|
||||
:disabled="nextDisabled"
|
||||
style="display: block; margin: auto"
|
||||
type="primary"
|
||||
@click="nextStep"
|
||||
>{{ active === 2 ? "提 交" : "下一步" }}</el-button>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 升级任务弹窗 -->
|
||||
<div v-show="taskListVisible" class="dialog_wrapper">
|
||||
<div class="dialog-container">
|
||||
<div class="dot">
|
||||
<svg-icon icon-class="ota_arrow_up" class="dialog_icon" />
|
||||
</div>
|
||||
<div class="remove_icon" @click="closeTaskDialog">
|
||||
<svg-icon icon-class="ota_close" class="close_icon" />
|
||||
</div>
|
||||
<h2>固件升级记录</h2>
|
||||
<div class="content-container">
|
||||
<div class="middle">
|
||||
<div class="refresh" @click="refresh">
|
||||
<svg-icon icon-class="ota_refresh" class="refresh_icon" />
|
||||
</div>
|
||||
<div v-for="(item, index) in taskList" :key="index" class="item">
|
||||
<div class="head">{{ item.deviceId }}</div>
|
||||
<p>{{ item.fileName }}</p>
|
||||
<p>{{ item.file_version }}</p>
|
||||
<p>2023-08-24</p>
|
||||
<p>15:00:00</p>
|
||||
<p style="margin-top: 10px">
|
||||
<el-tag
|
||||
style="padding: 0 30px"
|
||||
:type="getTagType(item.status)"
|
||||
>{{ item.statusDesc }}</el-tag>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button class="button_add_task" @click="addTaskVisible = true">新增升级任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增升级任务弹窗 -->
|
||||
<el-dialog
|
||||
title="新增升级任务"
|
||||
:visible="addTaskVisible"
|
||||
width="500px"
|
||||
@close="closeAddTaskDialog"
|
||||
>
|
||||
<el-form ref="form" label-width="100px" :model="newTask" size="medium">
|
||||
<el-row>
|
||||
<el-col :span="18" :offset="3">
|
||||
<el-form-item label="升级版本号：" prop="file_version">
|
||||
<el-input v-model="newTask.file_version" />
|
||||
</el-form-item>
|
||||
<el-form-item label="升级设备id：" prop="deviceId">
|
||||
<el-input v-model="newTask.deviceId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="升级时间：" prop="updateType">
|
||||
<el-select v-model="newTask.updateType">
|
||||
<el-option
|
||||
v-for="(item, index) in updateTypeOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.val"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeAddTaskDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">提 交</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
remove,
|
||||
add,
|
||||
verify,
|
||||
download,
|
||||
getList,
|
||||
getByVerify,
|
||||
getByName,
|
||||
getTaskList,
|
||||
addTask
|
||||
} from '@/api/terminal/ota.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
sum: 0,
|
||||
searchName: '',
|
||||
verifyStatus: 1,
|
||||
active: 1,
|
||||
buttonActive: 1,
|
||||
addFileVisible: false,
|
||||
taskListVisible: false,
|
||||
addTaskVisible: false,
|
||||
nextDisabled: true,
|
||||
firmwareList: [],
|
||||
currentFileName: '',
|
||||
fileList: [],
|
||||
newFile: {
|
||||
fileName: '',
|
||||
fileVersion: '',
|
||||
verify: '未验证',
|
||||
statusSrc_big: require('@/assets/images/ota_verify_not_big.png'),
|
||||
statusSrc_small: require('@/assets/images/ota_verify_not_small.png'),
|
||||
bgColor: '#E6F4F6',
|
||||
primaryColor: '#00CCF2',
|
||||
fileDesc: '',
|
||||
fileMd5: '',
|
||||
totalSize: 0,
|
||||
createTime: ''
|
||||
},
|
||||
taskList: [],
|
||||
newTask: {
|
||||
file_version: '',
|
||||
deviceId: '',
|
||||
updateType: ''
|
||||
},
|
||||
updateTypeOptions: [
|
||||
{
|
||||
val: 0,
|
||||
label: '立刻升级'
|
||||
},
|
||||
{
|
||||
val: 1,
|
||||
label: '凌晨12点升级'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.allFile.$el.focus()
|
||||
this.date = new Date().toLocaleDateString()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
let tempList = []
|
||||
let res
|
||||
if (this.searchName) {
|
||||
res = await getByName({ fileName: this.searchName })
|
||||
if (res.data) {
|
||||
tempList = [res.data]
|
||||
}
|
||||
} else {
|
||||
switch (this.verifyStatus) {
|
||||
case 1:
|
||||
res = await getList()
|
||||
tempList = res.data
|
||||
break
|
||||
case 2:
|
||||
res = await getByVerify({ verify: '未验证' })
|
||||
tempList = res.data
|
||||
break
|
||||
case 3:
|
||||
res = await getByVerify({ verify: '验证成功' })
|
||||
tempList = res.data
|
||||
break
|
||||
case 4:
|
||||
res = await getByVerify({ verify: '验证失败' })
|
||||
tempList = res.data
|
||||
break
|
||||
}
|
||||
}
|
||||
if (tempList.length) {
|
||||
this.fileList = tempList.map((file) => {
|
||||
return this.addCss(file)
|
||||
})
|
||||
} else {
|
||||
this.fileList = []
|
||||
}
|
||||
},
|
||||
addCss(file) {
|
||||
switch (file.verify) {
|
||||
case '验证成功':
|
||||
file.statusSrc_big = require('@/assets/images/ota_verify_failed_big.png')
|
||||
file.statusSrc_small = require('@/assets/images/ota_verify_failed_small.png')
|
||||
file.bgColor = '#F9F2F1'
|
||||
file.primaryColor = '#FF4E00'
|
||||
break
|
||||
case '验证失败':
|
||||
file.statusSrc_big = require('@/assets/images/ota_verify_success_big.png')
|
||||
file.statusSrc_small = require('@/assets/images/ota_verify_success_small.png')
|
||||
file.bgColor = '#E5F7E1'
|
||||
file.primaryColor = '#20BE0B'
|
||||
break
|
||||
case '未验证':
|
||||
file.statusSrc_big = require('@/assets/images/ota_verify_not_big.png')
|
||||
file.statusSrc_small = require('@/assets/images/ota_verify_not_small.png')
|
||||
file.bgColor = '#E6F4F6'
|
||||
file.primaryColor = '#00CCF2'
|
||||
break
|
||||
}
|
||||
return file
|
||||
},
|
||||
download(fileName) {
|
||||
download({ fileName })
|
||||
.then((res) => {
|
||||
const name = res.headers['content-disposition']
|
||||
.split(';')[1]
|
||||
.split('filename=')[1]
|
||||
const data = res.data
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
const url = window.URL.createObjectURL(new Blob([data]))
|
||||
const a = document.createElement('a')
|
||||
a.style.display = 'none'
|
||||
a.href = url
|
||||
a.download = name
|
||||
document.body.appendChild(a)
|
||||
a.click() // 执行下载
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
document.body.removeChild(a)
|
||||
})
|
||||
.catch((err) => {})
|
||||
},
|
||||
remove(fileName, event) {
|
||||
this.$confirm(`确定删除固件${fileName}？`, '提示').then(() => {
|
||||
remove({ fileName }).then((res) => {
|
||||
this.$message.success('删除成功')
|
||||
event.target.blur()
|
||||
this.getList()
|
||||
})
|
||||
})
|
||||
},
|
||||
verify(fileName, index) {
|
||||
verify({ fileName }).then((res) => {
|
||||
if (res.message === '验证成功') {
|
||||
this.fileList[index].verify = '验证成功'
|
||||
this.$message.success('验证成功')
|
||||
} else {
|
||||
this.fileList[index].verify = '验证失败'
|
||||
this.$message.error('验证失败')
|
||||
}
|
||||
this.fileList[index] = this.addCss(this.fileList[index])
|
||||
})
|
||||
},
|
||||
handleClick(num) {
|
||||
this.buttonActive = num
|
||||
this.verifyStatus = num
|
||||
this.getList()
|
||||
},
|
||||
add() {},
|
||||
closeDialog() {
|
||||
this.active = 1
|
||||
this.newFile = this.$options.data().newFile
|
||||
this.$refs.upload.clearFiles()
|
||||
this.addFileVisible = false
|
||||
},
|
||||
closeTaskDialog() {
|
||||
this.taskListVisible = false
|
||||
},
|
||||
closeAddTaskDialog() {
|
||||
this.newTask = this.$options.data().newTask
|
||||
this.addTaskVisible = false
|
||||
},
|
||||
handleSuccess(res) {
|
||||
const { fileName, fileMd5, totalSize } = res.data
|
||||
this.newFile.fileName = fileName
|
||||
this.newFile.fileMd5 = fileMd5
|
||||
this.newFile.totalSize = totalSize
|
||||
this.nextDisabled = false
|
||||
this.$message.success('上传成功')
|
||||
},
|
||||
handleError() {
|
||||
this.$message.error('上传失败')
|
||||
},
|
||||
nextStep() {
|
||||
if (this.active === 1) {
|
||||
this.active++
|
||||
} else {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const time = date.toLocaleTimeString('it-IT')
|
||||
if (month < 10) {
|
||||
month = `0${month}`
|
||||
}
|
||||
if (day < 10) {
|
||||
day = `0${day}`
|
||||
}
|
||||
this.newFile.createTime = year + '-' + month + '-' + day + ' ' + time
|
||||
add(this.newFile).then((res) => {
|
||||
if (res.code === '200000') {
|
||||
this.$message.success('新增成功')
|
||||
this.getList()
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
this.addFileVisible = false
|
||||
})
|
||||
}
|
||||
},
|
||||
showTask(fileName) {
|
||||
this.currentFileName = fileName
|
||||
getTaskList({ fileName }).then((res) => {
|
||||
this.$message.success('升级任务查询成功')
|
||||
this.taskList = res.data.map(task => {
|
||||
const statusList = ['失败', '成功', '进行中', '未开始']
|
||||
task.statusDesc = statusList[task.status]
|
||||
task.date = task.createTime.split(' ')[0]
|
||||
task.time = task.createTime.split(' ')[1]
|
||||
return task
|
||||
})
|
||||
})
|
||||
this.taskListVisible = true
|
||||
},
|
||||
refresh(needMsg = true) {
|
||||
getTaskList({ fileName: this.currentFileName }).then((res) => {
|
||||
if (needMsg) {
|
||||
this.$message.success('刷新成功')
|
||||
}
|
||||
this.taskList = res.data.map(task => {
|
||||
const statusList = ['失败', '成功', '进行中', '未开始']
|
||||
task.statusDesc = statusList[task.status]
|
||||
task.date = task.createTime.split(' ')[0]
|
||||
task.time = task.createTime.split(' ')[1]
|
||||
return task
|
||||
})
|
||||
})
|
||||
},
|
||||
getTagType(status) {
|
||||
let res = ''
|
||||
switch (status) {
|
||||
case 0:
|
||||
res = 'danger'
|
||||
break
|
||||
case 1:
|
||||
res = 'success'
|
||||
break
|
||||
case 2:
|
||||
res = 'warning'
|
||||
break
|
||||
case 3:
|
||||
res = 'info'
|
||||
break
|
||||
}
|
||||
return res
|
||||
},
|
||||
submit() {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const time = date.toLocaleTimeString('it-IT')
|
||||
if (month < 10) {
|
||||
month = `0${month}`
|
||||
}
|
||||
if (day < 10) {
|
||||
day = `0${day}`
|
||||
}
|
||||
this.newTask.createTime = year + '-' + month + '-' + day + ' ' + time
|
||||
addTask({ fileName: this.currentFileName, ...this.newTask }).then(res => {
|
||||
this.$message.success('提交成功')
|
||||
this.closeAddTaskDialog()
|
||||
this.refresh(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-height: 850px) {
|
||||
.dialog-container {
|
||||
margin-top: 5vh !important;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
font-family: Lato;
|
||||
width: 100%;
|
||||
.title {
|
||||
color: #174a84;
|
||||
margin-top: 0;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.date {
|
||||
color: #a5c9ff;
|
||||
}
|
||||
.sum {
|
||||
margin-left: 80px;
|
||||
color: #a5c9ff;
|
||||
}
|
||||
.content_left {
|
||||
flex: 1;
|
||||
}
|
||||
.content_right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
.el-input {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
display: inline-block;
|
||||
}
|
||||
.type_btn {
|
||||
.el-button-group {
|
||||
display: block;
|
||||
.el-button {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background-color: #789af3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.add_btn {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
border: 2px solid transparent;
|
||||
background: linear-gradient(#789af3, #789af3) padding-box,
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
#789af3 0,
|
||||
#789af3 12px,
|
||||
#fff 12px,
|
||||
#fff 24px
|
||||
);
|
||||
}
|
||||
.table_container {
|
||||
margin-top: 30px;
|
||||
.item {
|
||||
border-radius: 27px;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin-bottom: 9px;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
.item_left {
|
||||
flex-grow: 1;
|
||||
.line1 {
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei;
|
||||
line-height: 37px;
|
||||
color: #2e4765;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.name {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.desc {
|
||||
margin-left: 65px;
|
||||
}
|
||||
}
|
||||
.line2 {
|
||||
margin-top: 25px;
|
||||
// margin-left: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
div {
|
||||
font-size: 18px;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 27px;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
width: 2px;
|
||||
height: 41px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.item_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 23px;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 31px;
|
||||
color: #000000;
|
||||
button {
|
||||
// width: 117px;
|
||||
// height: 52px;
|
||||
border-radius: 10px;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 30px 50px;
|
||||
}
|
||||
.dialog_wrapper {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 230px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -230px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
.dialog-container {
|
||||
z-index: 10;
|
||||
width: 1100px;
|
||||
transform: none;
|
||||
margin-top: 10vh;
|
||||
padding: 10px 70px;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
background-color: #def5da;
|
||||
.content-container {
|
||||
background-color: #fff;
|
||||
height: 540px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.middle {
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-template-rows:repeat(auto-fill, 260px);
|
||||
grid-gap: 0 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px 40px 10px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
.refresh_icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
margin-top: 40px;
|
||||
padding: 40px 20px 10px;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
#20be0b 0,
|
||||
#20be0b 5px,
|
||||
#fff 5px,
|
||||
#fff 10px
|
||||
);
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60%;
|
||||
height: 45px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
background-color: #20be0b;
|
||||
font-size: 20px;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 45px;
|
||||
color: #ffffff;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-family: Microsoft YaHei;
|
||||
line-height: 30px;
|
||||
color: #2e4765;
|
||||
}
|
||||
&:last-child {
|
||||
// margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0 0;
|
||||
.button_add_task {
|
||||
background-color: #20be0b;
|
||||
color: #f5fbff;
|
||||
font-size: 21px;
|
||||
font-family: Montserrat;
|
||||
font-weight: 600;
|
||||
padding: 12px 30px;
|
||||
border-radius: 15px;
|
||||
&:hover {
|
||||
background-color: #20be0b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 50px 50px 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
text-align: center;
|
||||
background-color: #def5da;
|
||||
.dialog_icon {
|
||||
// color: #;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.remove_icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
top: 20px;
|
||||
// font-size: 20px;
|
||||
.close_icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #20be0b;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.el-select{
|
||||
width:100% !important
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
style="align-items: baseline; margin-bottom: 30px"
|
||||
>
|
||||
<div class="header">
|
||||
<h1 class="title">{{ abbrCorpName+'PLC管理' }}</h1>
|
||||
<h1 class="title">{{ abbrCorpName + "PLC管理" }}</h1>
|
||||
<span class="date">{{ date }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
|
|
@ -26,15 +26,32 @@
|
|||
<div class="dot">
|
||||
<img :src="formula.url">
|
||||
</div>
|
||||
<div class="remove_icon" @click="remove(index,formula.productName)">x</div>
|
||||
<div
|
||||
class="remove_icon"
|
||||
@click="remove(index, formula.productName)"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<p class="formula_name">{{ formula.productName }}</p>
|
||||
<p class="brand">{{ formula.brandName }}</p>
|
||||
<p class="protocol_name">{{ formula.protocolType }}</p>
|
||||
<el-collapse-transition>
|
||||
<div v-show="formula.active" class="addition">
|
||||
<p>{{ '工业设备ID：' + formula.deviceId }}</p>
|
||||
<p>{{ '工业设备名称：' + formula.deviceName }}</p>
|
||||
<p>{{ '扫描间隔：' + formula.readPeriod + 'ms' }}</p>
|
||||
<p>{{ "工业设备ID：" + formula.deviceId }}</p>
|
||||
<p>{{ "工业设备名称：" + formula.deviceName }}</p>
|
||||
<p>{{ "扫描间隔：" + formula.readPeriod + "ms" }}</p>
|
||||
<p style="margin-left: 0; text-align: center">
|
||||
<el-button
|
||||
class="func_button"
|
||||
@click="exportFile(formula)"
|
||||
>文件导出</el-button>
|
||||
</p>
|
||||
<p style="margin-left: 0; text-align: center">
|
||||
<el-button
|
||||
class="func_button"
|
||||
@click="loadOnline(formula.deviceId)"
|
||||
>在线烧录</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<div class="button-container">
|
||||
|
|
@ -153,7 +170,7 @@
|
|||
<el-input v-if="add" v-model="form.readPeriod">
|
||||
<template slot="suffix">ms</template>
|
||||
</el-input>
|
||||
<span v-else>{{ form.readPeriod + 'ms' }}</span>
|
||||
<span v-else>{{ form.readPeriod + "ms" }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
|
@ -228,50 +245,82 @@
|
|||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="active === 1" class="content" style="width:100%">
|
||||
<div v-show="active === 1" class="content" style="width: 100%">
|
||||
<div class="step2_tab">
|
||||
<img src="@/assets/images/pie-chart.png" width="80px">
|
||||
<p class="active">读取数据设置</p>
|
||||
</div>
|
||||
<div v-if="add" class="step2_params">
|
||||
<div class="line" />
|
||||
<el-form :model="paramForm" label-position="left" label-width="80px">
|
||||
<el-form
|
||||
:model="paramForm"
|
||||
label-position="left"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="变量名">
|
||||
<el-input v-model="paramForm.value_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型">
|
||||
<el-select v-model="paramForm.value_type" placeholder="">
|
||||
<el-option v-for="(item,index) in valueTypeList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in valueTypeList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'omron'" label="访问形式">
|
||||
<el-select v-model="paramForm.data_type" placeholder="">
|
||||
<el-option v-for="(item,index) in finsDataTypeList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in finsDataTypeList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'siemens'" label="访问形式">
|
||||
<el-select v-model="paramForm.data_type" placeholder="">
|
||||
<el-option v-for="(item,index) in s7DataTypeList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in s7DataTypeList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'general'" label="命令码">
|
||||
<el-select v-model="paramForm.function_code" placeholder="">
|
||||
<el-option v-for="(item,index) in functionCodeList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in functionCodeList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'omron'" label="存储区域">
|
||||
<el-select v-model="paramForm.area_char" placeholder="">
|
||||
<el-option v-for="(item,index) in finsAreaCharList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in finsAreaCharList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'siemens'" label="存储区域">
|
||||
<el-select v-model="paramForm.area_char" placeholder="">
|
||||
<el-option v-for="(item,index) in s7AreaCharList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in s7AreaCharList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'mufg'" label="存储区域">
|
||||
<el-select v-model="paramForm.area_char" placeholder="">
|
||||
<el-option v-for="(item,index) in mcAreaCharList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in mcAreaCharList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始地址">
|
||||
|
|
@ -288,7 +337,11 @@
|
|||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'mufg'" label="命令类型">
|
||||
<el-select v-model="paramForm.command_type" placeholder="">
|
||||
<el-option v-for="(item,index) in commandTypeList" :key="index" :value="item" />
|
||||
<el-option
|
||||
v-for="(item, index) in commandTypeList"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.brand === 'mufg'" label="监控时间">
|
||||
|
|
@ -297,30 +350,105 @@
|
|||
</el-form>
|
||||
</div>
|
||||
<div class="step2_table">
|
||||
<el-table :data="form.readItemList" height="330px" highlight-current-row fit :header-row-style="{'color':'#FF4E00'}" @row-click="handleSelect">
|
||||
<el-table-column align="center" label="变量名" prop="value_name" />
|
||||
<el-table-column align="center" label="数据类型" prop="value_type" />
|
||||
<el-table-column v-if="form.brand === 'omron' || form.brand === 'siemens'" align="center" label="访问形式" prop="data_type" />
|
||||
<el-table-column v-if="form.brand === 'general'" align="center" label="命令码" prop="function_code" />
|
||||
<el-table-column v-if="form.brand !== 'general'" align="center" label="存储区域" prop="area_char" />
|
||||
<el-table-column align="center" label="起始地址" prop="start_address" />
|
||||
<el-table-column v-if="form.brand === 'omron'" align="center" label="位地址" prop="bit_address" />
|
||||
<el-table-column v-if="form.brand === 'siemens'" align="center" label="DB号" prop="db_number" />
|
||||
<el-table-column align="center" label="数据长度" prop="data_length" />
|
||||
<el-table-column v-if="form.brand === 'mufg'" align="center" label="命令类型" prop="command_type" />
|
||||
<el-table-column v-if="form.brand === 'mufg'" align="center" label="监控时间" prop="monitoring_timer" />
|
||||
<el-table
|
||||
:data="form.readItemList"
|
||||
height="330px"
|
||||
highlight-current-row
|
||||
fit
|
||||
:header-row-style="{ color: '#FF4E00' }"
|
||||
@row-click="handleSelect"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="变量名"
|
||||
prop="value_name"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="数据类型"
|
||||
prop="value_type"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'omron' || form.brand === 'siemens'"
|
||||
align="center"
|
||||
label="访问形式"
|
||||
prop="data_type"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'general'"
|
||||
align="center"
|
||||
label="命令码"
|
||||
prop="function_code"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand !== 'general'"
|
||||
align="center"
|
||||
label="存储区域"
|
||||
prop="area_char"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="起始地址"
|
||||
prop="start_address"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'omron'"
|
||||
align="center"
|
||||
label="位地址"
|
||||
prop="bit_address"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'siemens'"
|
||||
align="center"
|
||||
label="DB号"
|
||||
prop="db_number"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="数据长度"
|
||||
prop="data_length"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'mufg'"
|
||||
align="center"
|
||||
label="命令类型"
|
||||
prop="command_type"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="form.brand === 'mufg'"
|
||||
align="center"
|
||||
label="监控时间"
|
||||
prop="monitoring_timer"
|
||||
/>
|
||||
</el-table>
|
||||
<el-row v-if="add" type="flex" justify="space-between" style="width:60%;margin: 20px auto 0;">
|
||||
<el-row
|
||||
v-if="add"
|
||||
type="flex"
|
||||
justify="space-between"
|
||||
style="width: 60%; margin: 20px auto 0"
|
||||
>
|
||||
<div class="table_btn">
|
||||
<img src="@/assets/images/plus_orange.png" width="35px" @click="addParam">
|
||||
<img
|
||||
src="@/assets/images/plus_orange.png"
|
||||
width="35px"
|
||||
@click="addParam"
|
||||
>
|
||||
<p>添加</p>
|
||||
</div>
|
||||
<div class="table_btn">
|
||||
<img src="@/assets/images/minus_orange.png" width="35px" @click="removeParam">
|
||||
<img
|
||||
src="@/assets/images/minus_orange.png"
|
||||
width="35px"
|
||||
@click="removeParam"
|
||||
>
|
||||
<p>删除</p>
|
||||
</div>
|
||||
<div class="table_btn">
|
||||
<img src="@/assets/images/remove_orange.png" width="35px" @click="removeAllParam">
|
||||
<img
|
||||
src="@/assets/images/remove_orange.png"
|
||||
width="35px"
|
||||
@click="removeAllParam"
|
||||
>
|
||||
<p>清空</p>
|
||||
</div>
|
||||
<!-- <div>
|
||||
|
|
@ -362,9 +490,11 @@
|
|||
class="dialog_btn"
|
||||
@click="lastStep"
|
||||
>上一步</el-button>
|
||||
<el-button v-if="!(active ===2 && !add)" class="dialog_btn primary" @click="nextStep">{{
|
||||
active === 2 ? '保存' : '下一步'
|
||||
}}</el-button>
|
||||
<el-button
|
||||
v-if="!(active === 2 && !add)"
|
||||
class="dialog_btn primary"
|
||||
@click="nextStep"
|
||||
>{{ active === 2 ? "保存" : "下一步" }}</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -435,7 +565,17 @@ export default {
|
|||
checkModeList: ['NONE', 'ODD', 'EVEN'],
|
||||
stopBitsList: [1, 2, 3, 4],
|
||||
dataBitsList: [5, 6, 7, 8, 9],
|
||||
valueTypeList: ['BOOL', 'INT8', 'INT16', 'INT32', 'UINT8', 'UINT16', 'UINT32', 'DOUBLE', 'FLOAT'],
|
||||
valueTypeList: [
|
||||
'BOOL',
|
||||
'INT8',
|
||||
'INT16',
|
||||
'INT32',
|
||||
'UINT8',
|
||||
'UINT16',
|
||||
'UINT32',
|
||||
'DOUBLE',
|
||||
'FLOAT'
|
||||
],
|
||||
finsDataTypeList: ['位', '字'],
|
||||
finsAreaCharList: ['W', 'H', 'D'],
|
||||
s7DataTypeList: ['Bit', 'Byte', 'Word', 'DWord', 'Real'],
|
||||
|
|
@ -499,9 +639,10 @@ export default {
|
|||
})
|
||||
},
|
||||
remove(index, productName) {
|
||||
remove({ productName }).then(res => {
|
||||
remove({ productName }).then((res) => {
|
||||
if (res.code === '200000') {
|
||||
const dom = document.getElementsByClassName('formula-container')[index]
|
||||
const dom =
|
||||
document.getElementsByClassName('formula-container')[index]
|
||||
dom.classList.add('fadeOut')
|
||||
setTimeout(() => {
|
||||
this.formulaList.splice(index, 1)
|
||||
|
|
@ -529,7 +670,7 @@ export default {
|
|||
nextStep() {
|
||||
if (this.active === 2) {
|
||||
this.form.productName = this.productPreName + this.form.productName
|
||||
add(this.form).then(res => {
|
||||
add(this.form).then((res) => {
|
||||
if (res.code === '200000') {
|
||||
this.getList()
|
||||
this.$message.success('配方设置成功')
|
||||
|
|
@ -550,7 +691,9 @@ export default {
|
|||
this.step1_active = 1
|
||||
},
|
||||
handleSelect(row, col, event) {
|
||||
this.currentIndex = this.form.readItemList.findIndex(item => item.value_name === row.value_name)
|
||||
this.currentIndex = this.form.readItemList.findIndex(
|
||||
(item) => item.value_name === row.value_name
|
||||
)
|
||||
},
|
||||
addParam() {
|
||||
this.form.readItemList.push(this.paramForm)
|
||||
|
|
@ -561,6 +704,24 @@ export default {
|
|||
},
|
||||
removeAllParam() {
|
||||
this.form.readItemList = []
|
||||
},
|
||||
exportFile(formula) {
|
||||
const data = JSON.stringify(formula)
|
||||
const name = formula.productName + '.json'
|
||||
const url = window.URL.createObjectURL(
|
||||
new Blob([data], { type: 'application/json' })
|
||||
)
|
||||
const a = document.createElement('a')
|
||||
a.style.display = 'none'
|
||||
a.href = url
|
||||
a.download = name
|
||||
document.body.appendChild(a)
|
||||
a.click() // 执行下载
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
document.body.removeChild(a)
|
||||
},
|
||||
loadOnline(deviceId) {
|
||||
console.log('在线烧录')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -595,20 +756,21 @@ export default {
|
|||
font-family: PingFangSC-Regular;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.step2_params{
|
||||
.el-form-item__label{
|
||||
.step2_params {
|
||||
.el-form-item__label {
|
||||
color: #ff4e00;
|
||||
}
|
||||
.el-input__inner{
|
||||
.el-input__inner {
|
||||
border-color: #ff4e00;
|
||||
}
|
||||
.el-select .el-input .el-select__caret{
|
||||
.el-select .el-input .el-select__caret {
|
||||
color: #ff4e00;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-button:hover,.el-button:focus {
|
||||
.el-button:hover,
|
||||
.el-button:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
.header {
|
||||
|
|
@ -652,11 +814,18 @@ export default {
|
|||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.func_button {
|
||||
width: 70%;
|
||||
border-radius: 39px;
|
||||
width: 70%;
|
||||
transform: scaleY(0.9);
|
||||
}
|
||||
.button-container {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
.button {
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
border-radius: 39px;
|
||||
border: none;
|
||||
width: 70%;
|
||||
|
|
@ -692,11 +861,16 @@ export default {
|
|||
.button {
|
||||
background-color: #00ccf2;
|
||||
}
|
||||
.func_button {
|
||||
background-color: #fff;
|
||||
border: 2px solid #00ccf2;
|
||||
color: #00ccf2;
|
||||
}
|
||||
}
|
||||
.active .omron {
|
||||
border: 1px solid #00ccf2;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
|
|
@ -720,11 +894,16 @@ export default {
|
|||
.button {
|
||||
background-color: #724fe8;
|
||||
}
|
||||
.func_button {
|
||||
background-color: #fff;
|
||||
border: 2px solid #724fe8;
|
||||
color: #724fe8;
|
||||
}
|
||||
}
|
||||
.active .siemens {
|
||||
border: 1px solid #724fe8;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
|
|
@ -748,11 +927,16 @@ export default {
|
|||
.button {
|
||||
background-color: #ff4e00;
|
||||
}
|
||||
.func_button {
|
||||
background-color: #fff;
|
||||
border: 2px solid #ff4e00;
|
||||
color: #ff4e00;
|
||||
}
|
||||
}
|
||||
.active .mufg {
|
||||
border: 1px solid #ff4e00;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
|
|
@ -776,11 +960,16 @@ export default {
|
|||
.button {
|
||||
background-color: #20be0b;
|
||||
}
|
||||
.func_button {
|
||||
background-color: #fff;
|
||||
border: 2px solid #20be0b;
|
||||
color: #20be0b;
|
||||
}
|
||||
}
|
||||
.active .general {
|
||||
border: 1px solid #20be0b;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
|
|
@ -879,15 +1068,15 @@ export default {
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
&::before{
|
||||
content: '';
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -230px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
z-index:2
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
.dialog-container {
|
||||
z-index: 10;
|
||||
|
|
@ -971,27 +1160,27 @@ export default {
|
|||
.step1_form {
|
||||
flex: 1;
|
||||
}
|
||||
.step2_tab{
|
||||
.step2_tab {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.step2_params{
|
||||
.step2_params {
|
||||
width: 250px;
|
||||
position: relative;
|
||||
.line{
|
||||
.line {
|
||||
right: 10px;
|
||||
height: 62%;
|
||||
}
|
||||
}
|
||||
.step2_table{
|
||||
.step2_table {
|
||||
flex: 3;
|
||||
p{
|
||||
color:#FF4E00;
|
||||
p {
|
||||
color: #ff4e00;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
margin: 0;
|
||||
}
|
||||
.table_btn{
|
||||
.table_btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ module.exports = {
|
|||
proxy: {
|
||||
'/dashengda': {
|
||||
// target: 'http://115.238.53.60:33333/', // 大胜达
|
||||
target: 'http://192.168.23.100:8080/', // wty
|
||||
target: 'http://192.168.140.64:8080/', // wty
|
||||
// target: 'http://10.0.30.23:8080',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue