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

21
src/components/Details.vue
View File

@ -1,9 +1,18 @@
<template> <template>
<el-drawer v-model="visible" title= "详情" 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 label-width="130px">
<el-form-item label="驱动名称:"> <el-form-item>
{{ name }} {{ name }}
</el-form-item> </el-form-item>
</el-form>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">通讯状态</legend>
<el-form label-width="130px">
<el-form-item label="健康状态"> <el-form-item label="健康状态">
<el-input disabled v-model="health[healthObj.status]"></el-input> <el-input disabled v-model="health[healthObj.status]"></el-input>
</el-form-item> </el-form-item>
@ -17,7 +26,9 @@
<el-input disabled v-model="healthObj.last_failure_cause"></el-input> <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">通讯计数</legend>
<el-form label-width="130px"> <el-form label-width="130px">
<el-form-item label="总计数"> <el-form-item label="总计数">
<el-input disabled v-model="countObj.total_count"></el-input> <el-input disabled v-model="countObj.total_count"></el-input>
@ -31,9 +42,9 @@
</el-form> </el-form>
<div class="btns"> <div class="btns">
<el-button type="primary" @click="resetCount">重置计数</el-button> <el-button type="primary" @click="resetCount">重置计数</el-button>
<el-button @click="closeDialog">取消</el-button> <!-- <el-button @click="closeDialog">取消</el-button> -->
</div> </div>
</fieldset>
</el-drawer> </el-drawer>
</template> </template>
<script> <script>

2
src/components/Header.vue
View File

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

161
src/components/PzSet.vue
View File

@ -1,99 +1,91 @@
<template> <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 --> <!-- 1 modbus_tcp -->
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1"> <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1">
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time"> <el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item> </el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time"> <el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item> </el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="主机地址" prop="host"> <el-form-item label="主机地址" prop="host">
<el-input v-model="form.host" clearable/> <el-input v-model="form.host" clearable />
</el-form-item> </el-form-item>
<el-form-item label="端口号" prop="port"> <el-form-item label="端口号" prop="port">
<el-input-number v-model="form.port" :min="1" clearable /> <el-input-number v-model="form.port" :min="1" clearable />
</el-form-item> </el-form-item>
<el-form-item> </fieldset>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
</el-form> </el-form>
<!-- 2: 'modbus_rtu' --> <!-- 2: 'modbus_rtu' -->
<el-form :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 2"> <el-form :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 2">
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time"> <el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item> </el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time"> <el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
</el-form-item> </el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="COM" prop="com_name"> <el-form-item label="COM" prop="com_name">
<el-select v-model="form2.com_name" clearable> <el-select v-model="form2.com_name" clearable>
<el-option <el-option v-for="item in comArr" :label="item.name" :value="item.name" :key="item.name"></el-option>
v-for="item in comArr"
:label="item.name"
:value="item.name"
:key="item.name"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="数据位" prop="dataBits" clearable> <el-form-item label="数据位" prop="dataBits" clearable>
<el-select v-model="form2.dataBits"> <el-select v-model="form2.dataBits">
<el-option <el-option v-for="item in dataBitsArr" :label="item.name" :value="item.value" :key="item.value"
v-for="item in dataBitsArr" clearable></el-option>
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="波特率" prop="baudRate" clearable> <el-form-item label="波特率" prop="baudRate" clearable>
<el-select v-model="form2.baudRate"> <el-select v-model="form2.baudRate">
<el-option <el-option v-for="item in baudRateArr" :label="item.name" :value="item.value" :key="item.value"
v-for="item in baudRateArr" clearable></el-option>
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="停止位" prop="stopBits" clearable> <el-form-item label="停止位" prop="stopBits" clearable>
<el-select v-model="form2.stopBits"> <el-select v-model="form2.stopBits">
<el-option <el-option v-for="item in stopBitsArr" :label="item.name" :value="item.value" :key="item.value"
v-for="item in stopBitsArr" clearable></el-option>
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="校验类型" prop="parity" clearable> <el-form-item label="校验类型" prop="parity" clearable>
<el-select v-model="form2.parity"> <el-select v-model="form2.parity">
<el-option <el-option v-for="item in parityArr" :label="item.name" :value="item.value" :key="item.value"
v-for="item in parityArr" clearable></el-option>
:label="item.name"
:value="item.value"
:key="item.value"
clearable
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> </fieldset>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
</el-form> </el-form>
<!-- 3: 'plc_s7' --> <!-- 3: 'plc_s7' -->
<!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3"> <!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
<fieldset class="box2">
<legend class="box-ht">通用配置</legend>
<el-form-item label="轮询时间" prop="polling_time"> <el-form-item label="轮询时间" prop="polling_time">
<el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item> </el-form-item>
<el-form-item label="失败重试时间" prop="faile_retry_time"> <el-form-item label="失败重试时间" prop="faile_retry_time">
<el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
</el-form-item> </el-form-item>
</fieldset>
<fieldset class="box2">
<legend class="box-ht">专属配置</legend>
<el-form-item label="主机地址" prop="host"> <el-form-item label="主机地址" prop="host">
<el-input v-model="form3.host" clearable/> <el-input v-model="form3.host" clearable/>
</el-form-item> </el-form-item>
@ -103,12 +95,11 @@
<el-form-item label="插槽号" prop="slot"> <el-form-item label="插槽号" prop="slot">
<el-input-number v-model="form3.slot" :min="1" :max="20" clearable /> <el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
</el-form-item> </el-form-item>
<el-form-item> </fieldset>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item>
</el-form> --> </el-form> -->
<div class="btns">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-drawer> </el-drawer>
</template> </template>
@ -121,7 +112,7 @@ export default {
emits: ["dialogClose", "dialogSuccess"], emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) { setup(props, ctx) {
const ruleFormRef = ref(null); const ruleFormRef = ref(null);
const ruleFormRef2= ref(null); const ruleFormRef2 = ref(null);
const ruleFormRef3 = ref(null); const ruleFormRef3 = ref(null);
const state = reactive({ const state = reactive({
form: { form: {
@ -153,59 +144,59 @@ export default {
baudRateArr: [{ baudRateArr: [{
name: 2400, name: 2400,
value: 2400 value: 2400
},{ }, {
name: 4800, name: 4800,
value: 4800 value: 4800
}, },
{ {
name:9600, name: 9600,
value: 9600 value: 9600
}, },
{ {
name:19200, name: 19200,
value: 19200 value: 19200
}, },
{ {
name:38400, name: 38400,
value: 38400 value: 38400
}, },
{ {
name:76800, name: 76800,
value: 76800 value: 76800
}, },
{ {
name:115200, name: 115200,
value: 115200 value: 115200
}], }],
dataBitsArr:[{ dataBitsArr: [{
name: 5, name: 5,
value: 5 value: 5
},{ }, {
name: 6, name: 6,
value: 6 value: 6
}, },
{ {
name:7, name: 7,
value: 7 value: 7
}, },
{ {
name:8, name: 8,
value: 8 value: 8
}], }],
stopBitsArr: [{ stopBitsArr: [{
name: 1, name: 1,
value: 1 value: 1
},{ }, {
name: 2, name: 2,
value: 2 value: 2
}], }],
parityArr: [{ parityArr: [{
name: "N", name: "N",
value: "N" value: "N"
},{ }, {
name: "E", name: "E",
value: "E", value: "E",
},{ }, {
name: "O", name: "O",
value: "O", value: "O",
}], }],
@ -213,14 +204,17 @@ export default {
rules: { rules: {
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }], polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }], faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
host: [{ required: true, validator: (rule, value, callback) => { 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])$/; 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) ) { if (value && reg.test(value)) {
callback(); callback();
} else { } else {
callback(new Error("请输入正确的ip地址")); callback(new Error("请输入正确的ip地址"));
}}, trigger: 'blur' }], }
}, trigger: 'blur'
}],
port: [{ required: true, message: "请输入端口号", trigger: "blur" }] port: [{ required: true, message: "请输入端口号", trigger: "blur" }]
}, },
rules2: { rules2: {
@ -235,20 +229,22 @@ export default {
rules3: { rules3: {
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }], polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }], faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
host: [{ required: true, validator: (rule, value, callback) => { 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) ) { 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])$/;
        callback(); if (value && reg.test(value)) {
      } else { callback();
        callback(new Error("请输入正确的ip地址")); } else {
      }}, trigger: 'blur' }], callback(new Error("请输入正确的ip地址"));
}
}, trigger: 'blur'
}],
rack: [{ required: true, message: "请输入机架号", trigger: "blur" }], rack: [{ required: true, message: "请输入机架号", trigger: "blur" }],
slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }] slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }]
}, },
}); });
const onSubmit = async () => { const onSubmit = async () => {
(555, props.formData.name);
var header = { var header = {
driver_name: props.formData.name driver_name: props.formData.name
} }
@ -256,7 +252,7 @@ export default {
await ruleFormRef.value.validate(async (valid) => { await ruleFormRef.value.validate(async (valid) => {
if (valid) { if (valid) {
var param = { var param = {
polling_time:Number(state.form.polling_time), polling_time: Number(state.form.polling_time),
faile_retry_time: Number(state.form.faile_retry_time), faile_retry_time: Number(state.form.faile_retry_time),
host: state.form.host, host: state.form.host,
port: Number(state.form.port), port: Number(state.form.port),
@ -311,7 +307,7 @@ export default {
await ruleFormRef3.value.validate(async (valid) => { await ruleFormRef3.value.validate(async (valid) => {
if (valid) { if (valid) {
var param = { 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), faile_retry_time: Number(state.form3.faile_retry_time),
host: state.form3.host, host: state.form3.host,
rack: Number(state.form3.rack), rack: Number(state.form3.rack),
@ -344,7 +340,7 @@ export default {
} }
const res = await infoApi.getCom(parm); const res = await infoApi.getCom(parm);
if (res.code == 0) { 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) return (a.name > b.name ? 1 : -1)
}); });
state.form2.com_name = state.comArr[0].name; state.form2.com_name = state.comArr[0].name;
@ -376,6 +372,7 @@ export default {
::v-deep .el-form-item__content { ::v-deep .el-form-item__content {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
>span { >span {
margin-left: 10px; margin-left: 10px;
} }

61
src/css/index.scss
View File

@ -44,6 +44,7 @@ s {
} }
.el-button--primary { .el-button--primary {
border: 0 !important; border: 0 !important;
background: #00AAA3 !important;
} }
.mb { .mb {
margin-bottom: 10px; margin-bottom: 10px;
@ -139,7 +140,7 @@ s {
} }
.turn { .turn {
background: rgba(15, 179, 251, 0.2); background: rgba(15, 179, 251, 0.2);
color: #00ffff !important; color: rgb(2, 87, 2) !important;
animation: turn 1s linear infinite; animation: turn 1s linear infinite;
} }
@keyframes turn { @keyframes turn {
@ -218,12 +219,12 @@ s {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ /*滚动条里面小方块*/
border-radius: 5px; 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); background: rgba(0, 0, 0, 0.2);
} }
::-webkit-scrollbar-track { ::-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; border-radius: 0;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
@ -240,3 +241,57 @@ s {
width: 100%; width: 100%;
text-align: center; 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>
<div class="top-div"> <div class="top-div">
<div class="left-div"> <fieldset class="left-div box2">
<h3>设备信息</h3> <legend class="box-ht">设备信息</legend>
<div> <div>
<span class="name">型号</span> <span class="name">型号</span>
<span class="value">{{ deviceData.basicinfo.model }}</span> <span class="value">{{ deviceData.basicinfo.model }}</span>
@ -26,23 +26,24 @@
<span class="name">运行时长</span> <span class="name">运行时长</span>
<span class="value">{{ deviceData.hostinfo.uptime }}</span> <span class="value">{{ deviceData.hostinfo.uptime }}</span>
</div> </div>
</div> </fieldset>
<div class="right-div"> <fieldset class="right-div box2">
<h3>内存信息</h3> <legend class="box-ht">内存信息</legend>
<div id="echartDiv" class="echartDiv"></div> <div id="echartDiv" class="echartDiv"></div>
</div> </fieldset>
</div> </div>
<div class="bottom-div"> <div class="bottom-div">
<div class="left-div"> <fieldset class="left-div box2">
<h3>磁盘信息</h3> <legend class="box-ht">磁盘信息</legend>
<div class="process-div"> <div class="process-div">
<div v-for="(item, index) in deviceData.diskinfo" :key="index"> <div v-for="(item, index) in deviceData.diskinfo" :key="index">
<div :id="'echartDiv' + index" class="echartDiv"></div> <div :id="'echartDiv' + index" class="echartDiv"></div>
</div> </div>
</div> </div>
</div> </fieldset>
<div class="right-div">
<h3>网卡信息</h3> <fieldset class="right-div box2">
<legend class="box-ht">网卡信息</legend>
<div v-for="(item, index) of deviceData.netinfo" :key="index"> <div v-for="(item, index) of deviceData.netinfo" :key="index">
<p>网卡{{ item.name }}的使用情况</p> <p>网卡{{ item.name }}的使用情况</p>
<div class="data"> <div class="data">
@ -62,7 +63,7 @@
</span> </span>
</div> </div>
</div> </div>
</div> </fieldset>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -191,8 +192,8 @@ export default {
.time-div { .time-div {
height: 8%; height: 8%;
width: 100%; width: 100%;
border-radius: 20px; border-radius: 10px;
border: 1px solid #c3c3c3; border: 1px solid #006b3b;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -216,15 +217,15 @@ export default {
.left-div { .left-div {
height: 100%; height: 100%;
width: 65%; width: 65%;
border: 1px solid #c3c3c3; border: 1px solid #006b3b;
border-radius: 20px; border-radius: 10px;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
display: flex; display: flex;
padding: 20px; padding: 20px;
> div { > div {
height: 50px; height: 40px;
line-height: 50px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
@ -255,10 +256,10 @@ export default {
.right-div { .right-div {
height: 100%; height: 100%;
width: 34%; width: 34%;
border: 1px solid #c3c3c3; border: 1px solid #006b3b;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
border-radius: 20px; border-radius: 10px;
display: flex; display: flex;
padding: 25px; padding: 25px;
> div { > div {
@ -309,4 +310,5 @@ export default {
height: 100% !important; height: 100% !important;
margin: 0 auto; margin: 0 auto;
} }
</style> </style>

24
src/views/Level.vue
View File

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

30
src/views/Page.vue
View File

@ -4,7 +4,7 @@
<div class="top-div"> <div class="top-div">
<el-button type="primary" @click="addData">新增</el-button> <el-button type="primary" @click="addData">新增</el-button>
</div> </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' }"> :header-cell-style="{ background: '#F6F7FC' }">
<el-table-column type="index" label="序号" width="80" align="center" /> <el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip /> <el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip />
@ -14,14 +14,15 @@
<span>{{ qudongOptions[scope.row.type] }}</span> <span>{{ qudongOptions[scope.row.type] }}</span>
</template> </template>
</el-table-column> </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"> <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> </template>
</el-table-column> </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"> <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 type="primary" size="mini" @click="changeStatus(scope.row)" v-if="!scope.row.enable">
启用 启用
</el-button> </el-button>
@ -278,6 +279,19 @@ export default {
return 'red' 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 { return {
...toRefs(state), ...toRefs(state),
addData, addData,
@ -296,7 +310,8 @@ export default {
openPz, openPz,
openDetails, openDetails,
viewData, viewData,
getTextColor getTextColor,
tableRowClassName
}; };
}, },
}; };
@ -309,7 +324,7 @@ export default {
.top-div { .top-div {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
} }
.txStatusDiv { .txStatusDiv {
@ -323,4 +338,5 @@ export default {
.start { .start {
color: #009fa4; color: #009fa4;
} }
</style> </style>