wangqiujuan0808
/
dataControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

main
瓶中沙 2024-06-26 15:51:33 +08:00
parent 60261c9aac
commit 1540e95092
8 changed files with 334 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AddData.vue
View File

@ -15,8 +15,9 @@
<el-form-item label="通讯名称:" prop="name">
<el-input
v-model="addForm.name"
placeholder="请输入驱动名称"
placeholder="请输入（不超过10）"
clearable
maxlength="10"
:disabled="type == '1'"
/>
</el-form-item>
@ -35,8 +36,9 @@
<el-form-item label="驱动描述:" prop="description">
<el-input
v-model="addForm.description"
placeholder="请输入描述"
placeholder="请输入描述（不超过50）"
clearable
maxlength="50"
></el-input>
</el-form-item>
<!-- 驱动1 -->

79
src/components/Details.vue
View File

@ -1,39 +1,50 @@
<template>
<el-drawer v-model="visible" title= "详情" direction="rtl" :before-close="closeDialog">
<el-form label-width="130px">
<el-form-item label="驱动名称:">
{{ name }}
</el-form-item>
<el-form-item label="健康状态">
<el-input disabled v-model="health[healthObj.status]"></el-input>
</el-form-item>
<el-form-item label="最后一次成功时间">
<el-input disabled v-model="healthObj.last_success_time"></el-input>
</el-form-item>
<el-form-item label="最后一次失败时间">
<el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
</el-form-item>
<el-form-item label="最后一次失败原因">
<el-input disabled v-model="healthObj.last_failure_cause"></el-input>
</el-form-item>
</el-form>
<el-form label-width="130px">
<el-form-item label="总计数">
<el-input disabled v-model="countObj.total_count"></el-input>
</el-form-item>
<el-form-item label="失败计数">
<el-input disabled v-model="countObj.failure_count"></el-input>
</el-form-item>
<el-form-item label="成功计数">
<el-input disabled v-model="countObj.success_count"></el-input>
</el-form-item>
</el-form>
<div class="btns">
<el-button type="primary" @click="resetCount">重置计数</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
<el-drawer v-model="visible" title= "驱动详情" direction="rtl" :before-close="closeDialog">
<fieldset class="box2">
<legend class="box-ht">驱动名称</legend>
<el-form label-width="130px">
<el-form-item>
{{ name }}
</el-form-item>
</el-form>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">通讯状态</legend>
<el-form label-width="130px">
<el-form-item label="健康状态">
<el-input disabled v-model="health[healthObj.status]"></el-input>
</el-form-item>
<el-form-item label="最后一次成功时间">
<el-input disabled v-model="healthObj.last_success_time"></el-input>
</el-form-item>
<el-form-item label="最后一次失败时间">
<el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
</el-form-item>
<el-form-item label="最后一次失败原因">
<el-input disabled v-model="healthObj.last_failure_cause"></el-input>
</el-form-item>
</el-form>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">通讯计数</legend>
<el-form label-width="130px">
<el-form-item label="总计数">
<el-input disabled v-model="countObj.total_count"></el-input>
</el-form-item>
<el-form-item label="失败计数">
<el-input disabled v-model="countObj.failure_count"></el-input>
</el-form-item>
<el-form-item label="成功计数">
<el-input disabled v-model="countObj.success_count"></el-input>
</el-form-item>
</el-form>
<div class="btns">
<el-button type="primary" @click="resetCount">重置计数</el-button>
<!-- <el-button @click="closeDialog">取消</el-button> -->
</div>
</fieldset>
</el-drawer>
</template>
<script>

2
src/components/Header.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="background: rgb(2, 87, 2);color:#fff;">
<div class="header">
<div class="left">
<i v-if="hasBack" class="el-icon-back" @click="back"></i>

337
src/components/PzSet.vue
View File

@ -1,114 +1,105 @@
<template>
<el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" direction="rtl" :before-close="closeDialog">
<el-drawer v-model="visible" title="驱动配置" direction="rtl" :before-close="closeDialog">
<fieldset class="box2">
<legend class="box-ht">驱动名称</legend>
<el-form label-width="130px">
<el-form-item>
{{ props.formData.name }}
</el-form-item>
</el-form>
</fieldset>
<!-- 1 modbus_tcp -->
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1">
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="主机地址" prop="host">
<el-input v-model="form.host" clearable/>
</el-form-item>
<el-form-item label="端口号" prop="port">
<el-input-number v-model="form.port" :min="1" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="主机地址" prop="host">
<el-input v-model="form.host" clearable />
</el-form-item>
<el-form-item label="端口号" prop="port">
<el-input-number v-model="form.port" :min="1" clearable />
</el-form-item>
</fieldset>
</el-form>
<!-- 2: 'modbus_rtu' -->
<el-form :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 2">
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="COM" prop="com_name">
<el-select v-model="form2.com_name" clearable>
<el-option
v-for="item in comArr"
:label="item.name"
:value="item.name"
:key="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据位" prop="dataBits" clearable>
<el-select v-model="form2.dataBits">
<el-option
v-for="item in dataBitsArr"
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select>
</el-form-item>
<el-form-item label="波特率" prop="baudRate" clearable>
<el-select v-model="form2.baudRate">
<el-option
v-for="item in baudRateArr"
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select>
</el-form-item>
<el-form-item label="停止位" prop="stopBits" clearable>
<el-select v-model="form2.stopBits">
<el-option
v-for="item in stopBitsArr"
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select>
</el-form-item>
<el-form-item label="校验类型" prop="parity" clearable>
<el-select v-model="form2.parity">
<el-option
v-for="item in parityArr"
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
</el-form>
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="COM" prop="com_name">
<el-select v-model="form2.com_name" clearable>
<el-option v-for="item in comArr" :label="item.name" :value="item.name" :key="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据位" prop="dataBits" clearable>
<el-select v-model="form2.dataBits">
<el-option v-for="item in dataBitsArr" :label="item.name" :value="item.value" :key="item.value"
clearable></el-option>
</el-select>
</el-form-item>
<el-form-item label="波特率" prop="baudRate" clearable>
<el-select v-model="form2.baudRate">
<el-option v-for="item in baudRateArr" :label="item.name" :value="item.value" :key="item.value"
clearable></el-option>
</el-select>
</el-form-item>
<el-form-item label="停止位" prop="stopBits" clearable>
<el-select v-model="form2.stopBits">
<el-option v-for="item in stopBitsArr" :label="item.name" :value="item.value" :key="item.value"
clearable></el-option>
</el-select>
</el-form-item>
<el-form-item label="校验类型" prop="parity" clearable>
<el-select v-model="form2.parity">
<el-option v-for="item in parityArr" :label="item.name" :value="item.value" :key="item.value"
clearable></el-option>
</el-select>
</el-form-item>
</fieldset>
</el-form>
<!-- 3: 'plc_s7' -->
<!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="主机地址" prop="host">
<el-input v-model="form3.host" clearable/>
</el-form-item>
<el-form-item label="机架号" prop="rack">
<el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
</el-form-item>
<el-form-item label="插槽号" prop="slot">
<el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="主机地址" prop="host">
<el-input v-model="form3.host" clearable/>
</el-form-item>
<el-form-item label="机架号" prop="rack">
<el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
</el-form-item>
<el-form-item label="插槽号" prop="slot">
<el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
</el-form-item>
</fieldset>
</el-form> -->
<div class="btns">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-drawer>
</template>
@ -121,7 +112,7 @@ export default {
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const ruleFormRef = ref(null);
const ruleFormRef2= ref(null);
const ruleFormRef2 = ref(null);
const ruleFormRef3 = ref(null);
const state = reactive({
form: {
@ -132,7 +123,7 @@ export default {
id: 1,
},
form2: {
polling_time: "",
polling_time: "",
faile_retry_time: "",
com_name: '',
dataBits: 5,
@ -153,59 +144,59 @@ export default {
baudRateArr: [{
name: 2400,
value: 2400
},{
}, {
name: 4800,
value: 4800
value: 4800
},
{
name:9600,
name: 9600,
value: 9600
},
{
name:19200,
name: 19200,
value: 19200
},
{
name:38400,
name: 38400,
value: 38400
},
{
name:76800,
name: 76800,
value: 76800
},
{
name:115200,
name: 115200,
value: 115200
}],
dataBitsArr:[{
dataBitsArr: [{
name: 5,
value: 5
},{
}, {
name: 6,
value: 6
value: 6
},
{
name:7,
name: 7,
value: 7
},
{
name:8,
name: 8,
value: 8
}],
stopBitsArr: [{
name: 1,
value: 1
},{
}, {
name: 2,
value: 2
value: 2
}],
parityArr: [{
name: "N",
value: "N"
},{
}, {
name: "E",
value: "E",
},{
}, {
name: "O",
value: "O",
}],
@ -213,14 +204,17 @@ export default {
rules: {
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
host: [{ required: true, validator: (rule, value, callback) => {
// 只能输入英文字母
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (value && reg.test(value) ) {
callback();
} else {
callback(new Error("请输入正确的ip地址"));
}}, trigger: 'blur' }],
host: [{
required: true, validator: (rule, value, callback) => {
// 只能输入英文字母
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (value && reg.test(value)) {
callback();
} else {
callback(new Error("请输入正确的ip地址"));
}
}, trigger: 'blur'
}],
port: [{ required: true, message: "请输入端口号", trigger: "blur" }]
},
rules2: {
@ -235,43 +229,45 @@ export default {
rules3: {
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
host: [{ required: true, validator: (rule, value, callback) => {
  // 只能输入英文字母
      var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if (value && reg.test(value) ) {
        callback();
      } else {
        callback(new Error("请输入正确的ip地址"));
      }}, trigger: 'blur' }],
host: [{
required: true, validator: (rule, value, callback) => {
// 只能输入英文字母
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (value && reg.test(value)) {
callback();
} else {
callback(new Error("请输入正确的ip地址"));
}
}, trigger: 'blur'
}],
rack: [{ required: true, message: "请输入机架号", trigger: "blur" }],
slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }]
},
});
const onSubmit = async () => {
(555, props.formData.name);
var header = {
driver_name: props.formData.name
}
if (props.pztypecode === 1) {
await ruleFormRef.value.validate(async (valid) => {
if (valid) {
var param = {
polling_time:Number(state.form.polling_time),
faile_retry_time: Number(state.form.faile_retry_time),
host: state.form.host,
port: Number(state.form.port),
id: Number(state.form.id)
}
const res = await infoApi.addPz(param, header);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
if (valid) {
var param = {
polling_time: Number(state.form.polling_time),
faile_retry_time: Number(state.form.faile_retry_time),
host: state.form.host,
port: Number(state.form.port),
id: Number(state.form.id)
}
const res = await infoApi.addPz(param, header);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
} else {
ElMessage.error(res.message);
}
} else {
ElMessage.error(res.message);
}
} else {
}
});
});
} else if (props.pztypecode === 2) {
await ruleFormRef2.value.validate(async (valid) => {
if (valid) {
@ -285,18 +281,18 @@ export default {
// parity: state.form2.parity,
// id: Number(state.form2.id)
// }
var param = {
name: props.formData.name,
polling_time: Number(state.form2.polling_time),
faile_retry_time: Number(state.form2.faile_retry_time),
com: {
name: state.form2.com_name,
dataBits: Number(state.form2.dataBits),
baudRate: Number(state.form2.baudRate),
stopBits: Number(state.form2.stopBits),
parity: state.form2.parity
}
}
var param = {
name: props.formData.name,
polling_time: Number(state.form2.polling_time),
faile_retry_time: Number(state.form2.faile_retry_time),
com: {
name: state.form2.com_name,
dataBits: Number(state.form2.dataBits),
baudRate: Number(state.form2.baudRate),
stopBits: Number(state.form2.stopBits),
parity: state.form2.parity
}
}
const res = await infoApi.addPz(param, header);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
@ -311,7 +307,7 @@ export default {
await ruleFormRef3.value.validate(async (valid) => {
if (valid) {
var param = {
polling_time:Number(state.form3.polling_time),
polling_time: Number(state.form3.polling_time),
faile_retry_time: Number(state.form3.faile_retry_time),
host: state.form3.host,
rack: Number(state.form3.rack),
@ -329,7 +325,7 @@ export default {
}
});
}
}
const visible = computed(() => {
return props.dialogVisible;
@ -340,11 +336,11 @@ export default {
});
const getCom = async () => {
const parm = {
name: props.formData.name
name: props.formData.name
}
const res = await infoApi.getCom(parm);
if (res.code == 0) {
state.comArr = res.data.sort((a,b) => {
state.comArr = res.data.sort((a, b) => {
return (a.name > b.name ? 1 : -1)
});
state.form2.com_name = state.comArr[0].name;
@ -362,7 +358,7 @@ export default {
visible,
closeDialog,
importData,
exportData,
exportData,
onSubmit,
ruleFormRef,
ruleFormRef2,
@ -376,6 +372,7 @@ export default {
::v-deep .el-form-item__content {
display: flex;
flex-wrap: nowrap;
>span {
margin-left: 10px;
}

61
src/css/index.scss
View File

@ -44,6 +44,7 @@ s {
}
.el-button--primary {
border: 0 !important;
background: #00AAA3 !important;
}
.mb {
margin-bottom: 10px;
@ -139,7 +140,7 @@ s {
}
.turn {
background: rgba(15, 179, 251, 0.2);
color: #00ffff !important;
color: rgb(2, 87, 2) !important;
animation: turn 1s linear infinite;
}
@keyframes turn {
@ -218,12 +219,12 @@ s {
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px #00ffff;
-webkit-box-shadow: inset 0 0 5px #2B5451;
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 20px #2B5451;
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
@ -239,4 +240,58 @@ s {
.btns {
width: 100%;
text-align: center;
}
.green {
background: #2b545158 !important;
color: #000000;
}
.red {
background: rgba(243, 94, 94, 0.774) !important;
color: #000000;
}
.el-table tr {
&:hover > td {
// 悬停颜色 上面的不用管
background-color: #2b54515b !important;
color: #000000;
}
}
.el-table th, .aside {
background: #2B5451 !important;
color: #fff;
}
.el-menu-item:hover {
background: #2B5451 !important;
color: #fff;
}
.el-sub-menu.is-active, .el-menu-item.is-active {
background: #2B5451 !important;
}
.el-sub-menu__title, .el-menu {
background: transparent !important;
}
.el-menu-item.is-active {
color: #07d6c4;
}
.el-form-item--large {
margin-bottom: 0px !important;
}
.el-form-item {
margin-top: 20px !important;
}
.box2 {
border: 1px solid #2B5451;
}
.box2 .box-ht {
margin: 0 24px;
padding: 0 16px;
font-size: 18px;
font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, from(#a7fcff), to(#08ced0));
background: linear-gradient(180deg, #a7fcff, #08ced0);
-webkit-background-clip: text;
color: transparent;
}

42
src/views/Home.vue
View File

@ -8,8 +8,8 @@
</div>
<div class="top-div">
<div class="left-div">
<h3>设备信息</h3>
<fieldset class="left-div box2">
<legend class="box-ht">设备信息</legend>
<div>
<span class="name">型号</span>
<span class="value">{{ deviceData.basicinfo.model }}</span>
@ -26,23 +26,24 @@
<span class="name">运行时长</span>
<span class="value">{{ deviceData.hostinfo.uptime }}</span>
</div>
</div>
<div class="right-div">
<h3>内存信息</h3>
</fieldset>
<fieldset class="right-div box2">
<legend class="box-ht">内存信息</legend>
<div id="echartDiv" class="echartDiv"></div>
</div>
</fieldset>
</div>
<div class="bottom-div">
<div class="left-div">
<h3>磁盘信息</h3>
<fieldset class="left-div box2">
<legend class="box-ht">磁盘信息</legend>
<div class="process-div">
<div v-for="(item, index) in deviceData.diskinfo" :key="index">
<div :id="'echartDiv' + index" class="echartDiv"></div>
</div>
</div>
</div>
<div class="right-div">
<h3>网卡信息</h3>
</fieldset>
<fieldset class="right-div box2">
<legend class="box-ht">网卡信息</legend>
<div v-for="(item, index) of deviceData.netinfo" :key="index">
<p>网卡{{ item.name }}的使用情况</p>
<div class="data">
@ -62,7 +63,7 @@
</span>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</el-card>
@ -191,8 +192,8 @@ export default {
.time-div {
height: 8%;
width: 100%;
border-radius: 20px;
border: 1px solid #c3c3c3;
border-radius: 10px;
border: 1px solid #006b3b;
display: flex;
align-items: center;
justify-content: flex-end;
@ -216,15 +217,15 @@ export default {
.left-div {
height: 100%;
width: 65%;
border: 1px solid #c3c3c3;
border-radius: 20px;
border: 1px solid #006b3b;
border-radius: 10px;
flex-direction: column;
justify-content: space-around;
display: flex;
padding: 20px;
> div {
height: 50px;
line-height: 50px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
text-align: center;
@ -255,10 +256,10 @@ export default {
.right-div {
height: 100%;
width: 34%;
border: 1px solid #c3c3c3;
border: 1px solid #006b3b;
flex-direction: column;
justify-content: space-around;
border-radius: 20px;
border-radius: 10px;
display: flex;
padding: 25px;
> div {
@ -309,4 +310,5 @@ export default {
height: 100% !important;
margin: 0 auto;
}
</style>

24
src/views/Level.vue
View File

@ -93,7 +93,7 @@
</div>
</div>
</el-form>
<el-button @click="saveData" type="primary">保存</el-button>
<el-button @click="saveData" size="large" type="primary">保存</el-button>
</div>
</el-card>
</template>
@ -221,23 +221,25 @@ export default {
justify-content: flex-start;
align-items: center;
overflow: auto;
display: flex;
flex-wrap: wrap;
align-items: start;
> div {
border: 1px solid #ddd;
border: 1px solid #006b3b;
border-radius: 8px;
width: 50%;
width: 48%;
margin-bottom: 10px;
p {
text-align: center;
margin: 10px 0;
}
.info-div {
width: 80%;
height: 90%;
overflow: auto;
width: 98%;
height: 70%;
margin: 0 auto;
> div {
line-height: 60px;
height: 60px;
line-height: 50px;
height: 50px;
}
}
}
@ -245,10 +247,12 @@ export default {
height: 60%;
}
.moreipDiv {
height: 35%;
height: 48%;
overflow: auto;
}
.dnsDiv {
height: 25%;
height: 45%;
overflow: auto;
}
}
.el-button {

30
src/views/Page.vue
View File

@ -4,7 +4,7 @@
<div class="top-div">
<el-button type="primary" @click="addData">新增</el-button>
</div>
<el-table :data="tableData" height="760" border stripe
<el-table :data="tableData" height="760" border :row-class-name="tableRowClassName"
:header-cell-style="{ background: '#F6F7FC' }">
<el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip />
@ -14,14 +14,15 @@
<span>{{ qudongOptions[scope.row.type] }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="通讯状态" width="200" align="center">
<el-table-column prop="status" label="驱动状态" width="200" align="center">
<template #default="scope">
<span :style="{'color': getTextColor(scope.row.status)}"> {{ txStatus[scope.row.status] }} </span>
<!-- <span :style="{'color': getTextColor(scope.row.status)}"> {{ txStatus[scope.row.status] }} </span> -->
<span> {{ txStatus[scope.row.status] }} </span>
</template>
</el-table-column>
<el-table-column prop="enable" label="启用状态" width="350" align="center">
<el-table-column prop="enable" label="启停控制" width="350" align="center">
<template #default="scope">
现在是 <el-tag :class="!scope.row.enable? 'stop':'start'">{{!scope.row.enable? '停用状态' : '启用状态'}} </el-tag> 您可以点击
<!-- 现在是 <el-tag :class="!scope.row.enable? 'stop':'start'">{{!scope.row.enable? '停用状态' : '启用状态'}} </el-tag> 您可以点击 -->
<el-button type="primary" size="mini" @click="changeStatus(scope.row)" v-if="!scope.row.enable">
启用
</el-button>
@ -278,6 +279,19 @@ export default {
return 'red'
}
}
const tableRowClassName = ({ row, rowIndex }) => {
if(row.status == 1) {
return 'green'
}
if(row.status == 2) {
return 'green'
}
if(row.status == 3) {
return 'red'
}
}
return {
...toRefs(state),
addData,
@ -296,7 +310,8 @@ export default {
openPz,
openDetails,
viewData,
getTextColor
getTextColor,
tableRowClassName
};
},
};
@ -309,7 +324,7 @@ export default {
.top-div {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
}
.txStatusDiv {
@ -323,4 +338,5 @@ export default {
.start {
color: #009fa4;
}
</style>