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

Compare commits

base: wangqiujuan0808:e2100394db7e95247427d3d07ccb79b00425d4ff
Branches Tags
wangqiujuan0808:main
..
compare: wangqiujuan0808:c2b89ef2ad3107b0259ac56a6d9808a609a414c9
Branches Tags
wangqiujuan0808:main

No commits in common. "e2100394db7e95247427d3d07ccb79b00425d4ff" and "c2b89ef2ad3107b0259ac56a6d9808a609a414c9" have entirely different histories.
e2100394db ... c2b89ef2ad

8 changed files with 248 additions and 335 deletions
Show Stats Expand all files Collapse all files

6
src/components/AddData.vue
View File

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

79
src/components/Details.vue
View File

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

2
src/components/Header.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="background: rgb(2, 87, 2);color:#fff;"> <div>
<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>

339
src/components/PzSet.vue
View File

@ -1,105 +1,114 @@
<template> <template>
<el-drawer v-model="visible" title="驱动配置" direction="rtl" :before-close="closeDialog"> <el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" 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"> <el-form-item label="轮询时间" prop="polling_time">
<legend class="box-ht">通用配置</legend> <el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="轮询时间" prop="polling_time"> </el-form-item>
<el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span> <el-form-item label="失败重试时间" prop="faile_retry_time">
</el-form-item> <el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="失败重试时间" prop="faile_retry_time"> </el-form-item>
<el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span> <el-form-item label="主机地址" prop="host">
</el-form-item> <el-input v-model="form.host" clearable/>
</fieldset> </el-form-item>
<fieldset class="box2"> <el-form-item label="端口号" prop="port">
<legend class="box-ht">专属配置</legend> <el-input-number v-model="form.port" :min="1" clearable />
<el-form-item label="主机地址" prop="host"> </el-form-item>
<el-input v-model="form.host" clearable /> <el-form-item>
</el-form-item> <el-button type="primary" @click="onSubmit">保存</el-button>
<el-form-item label="端口号" prop="port"> <el-button @click="closeDialog">取消</el-button>
<el-input-number v-model="form.port" :min="1" clearable /> </el-form-item>
</el-form-item>
</fieldset>
</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"> <el-form-item label="轮询时间" prop="polling_time">
<legend class="box-ht">通用配置</legend> <el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="轮询时间" prop="polling_time"> </el-form-item>
<el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span> <el-form-item label="失败重试时间" prop="faile_retry_time">
</el-form-item> <el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="失败重试时间" prop="faile_retry_time"> </el-form-item>
<el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span> <el-form-item label="COM" prop="com_name">
</el-form-item> <el-select v-model="form2.com_name" clearable>
</fieldset> <el-option
<fieldset class="box2"> v-for="item in comArr"
<legend class="box-ht">专属配置</legend> :label="item.name"
<el-form-item label="COM" prop="com_name"> :value="item.name"
<el-select v-model="form2.com_name" clearable> :key="item.name"
<el-option v-for="item in comArr" :label="item.name" :value="item.name" :key="item.name"></el-option> ></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 v-for="item in dataBitsArr" :label="item.name" :value="item.value" :key="item.value" <el-option
clearable></el-option> v-for="item in dataBitsArr"
</el-select> :label="item.name"
</el-form-item> :value="item.value"
<el-form-item label="波特率" prop="baudRate" clearable> :key="item.value"
<el-select v-model="form2.baudRate"> clearable
<el-option v-for="item in baudRateArr" :label="item.name" :value="item.value" :key="item.value" ></el-option>
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="stopBits" clearable> <el-select v-model="form2.baudRate">
<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 baudRateArr"
clearable></el-option> :label="item.name"
</el-select> :value="item.value"
</el-form-item> :key="item.value"
<el-form-item label="校验类型" prop="parity" clearable> clearable
<el-select v-model="form2.parity"> ></el-option>
<el-option v-for="item in parityArr" :label="item.name" :value="item.value" :key="item.value" </el-select>
clearable></el-option> </el-form-item>
</el-select> <el-form-item label="停止位" prop="stopBits" clearable>
</el-form-item> <el-select v-model="form2.stopBits">
</fieldset> <el-option
</el-form> 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>
<!-- 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"> <el-form-item label="轮询时间" prop="polling_time">
<legend class="box-ht">通用配置</legend> <el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="轮询时间" prop="polling_time"> </el-form-item>
<el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-form-item label="失败重试时间" prop="faile_retry_time">
</el-form-item> <el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
<el-form-item label="失败重试时间" prop="faile_retry_time"> </el-form-item>
<el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span> <el-form-item label="主机地址" prop="host">
</el-form-item> <el-input v-model="form3.host" clearable/>
</fieldset> </el-form-item>
<fieldset class="box2"> <el-form-item label="机架号" prop="rack">
<legend class="box-ht">专属配置</legend> <el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
<el-form-item label="主机地址" prop="host"> </el-form-item>
<el-input v-model="form3.host" clearable/> <el-form-item label="插槽号" prop="slot">
</el-form-item> <el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
<el-form-item label="机架号" prop="rack"> </el-form-item>
<el-input-number v-model="form3.rack" :min="1" :max="20" clearable /> <el-form-item>
</el-form-item> <el-button type="primary" @click="onSubmit">保存</el-button>
<el-form-item label="插槽号" prop="slot"> <el-button @click="closeDialog">取消</el-button>
<el-input-number v-model="form3.slot" :min="1" :max="20" clearable /> </el-form-item>
</el-form-item>
</fieldset>
</el-form> --> </el-form> -->
<div class="btns">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-drawer> </el-drawer>
</template> </template>
@ -112,7 +121,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: {
@ -123,7 +132,7 @@ export default {
id: 1, id: 1,
}, },
form2: { form2: {
polling_time: "", polling_time: "",
faile_retry_time: "", faile_retry_time: "",
com_name: '', com_name: '',
dataBits: 5, dataBits: 5,
@ -144,59 +153,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",
}], }],
@ -204,17 +213,14 @@ 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: [{ host: [{ required: true, validator: (rule, value, callback) => {
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: {
@ -229,45 +235,43 @@ 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: [{ host: [{ required: true, validator: (rule, value, callback) => {
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'
}],
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
} }
if (props.pztypecode === 1) { if (props.pztypecode === 1) {
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),
id: Number(state.form.id) 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 {
} }
}); const res = await infoApi.addPz(param, header);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
} else {
ElMessage.error(res.message);
}
} else {
}
});
} else if (props.pztypecode === 2) { } else if (props.pztypecode === 2) {
await ruleFormRef2.value.validate(async (valid) => { await ruleFormRef2.value.validate(async (valid) => {
if (valid) { if (valid) {
@ -281,18 +285,18 @@ export default {
// parity: state.form2.parity, // parity: state.form2.parity,
// id: Number(state.form2.id) // id: Number(state.form2.id)
// } // }
var param = { var param = {
name: props.formData.name, name: props.formData.name,
polling_time: Number(state.form2.polling_time), polling_time: Number(state.form2.polling_time),
faile_retry_time: Number(state.form2.faile_retry_time), faile_retry_time: Number(state.form2.faile_retry_time),
com: { com: {
name: state.form2.com_name, name: state.form2.com_name,
dataBits: Number(state.form2.dataBits), dataBits: Number(state.form2.dataBits),
baudRate: Number(state.form2.baudRate), baudRate: Number(state.form2.baudRate),
stopBits: Number(state.form2.stopBits), stopBits: Number(state.form2.stopBits),
parity: state.form2.parity parity: state.form2.parity
} }
} }
const res = await infoApi.addPz(param, header); const res = await infoApi.addPz(param, header);
if (res.code == 0) { if (res.code == 0) {
ElMessage.success(res.message || "请求成功"); ElMessage.success(res.message || "请求成功");
@ -307,7 +311,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),
@ -325,7 +329,7 @@ export default {
} }
}); });
} }
} }
const visible = computed(() => { const visible = computed(() => {
return props.dialogVisible; return props.dialogVisible;
@ -336,11 +340,11 @@ export default {
}); });
const getCom = async () => { const getCom = async () => {
const parm = { const parm = {
name: props.formData.name name: props.formData.name
} }
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;
@ -358,7 +362,7 @@ export default {
visible, visible,
closeDialog, closeDialog,
importData, importData,
exportData, exportData,
onSubmit, onSubmit,
ruleFormRef, ruleFormRef,
ruleFormRef2, ruleFormRef2,
@ -372,7 +376,6 @@ 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,7 +44,6 @@ s {
} }
.el-button--primary { .el-button--primary {
border: 0 !important; border: 0 !important;
background: #00AAA3 !important;
} }
.mb { .mb {
margin-bottom: 10px; margin-bottom: 10px;
@ -140,7 +139,7 @@ s {
} }
.turn { .turn {
background: rgba(15, 179, 251, 0.2); background: rgba(15, 179, 251, 0.2);
color: rgb(2, 87, 2) !important; color: #00ffff !important;
animation: turn 1s linear infinite; animation: turn 1s linear infinite;
} }
@keyframes turn { @keyframes turn {
@ -219,12 +218,12 @@ s {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ /*滚动条里面小方块*/
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px #2B5451; -webkit-box-shadow: inset 0 0 5px #00ffff;
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 20px #2B5451; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
@ -240,58 +239,4 @@ s {
.btns { .btns {
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">
<fieldset class="left-div box2"> <div class="left-div">
<legend class="box-ht">设备信息</legend> <h3>设备信息</h3>
<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,24 +26,23 @@
<span class="name">运行时长</span> <span class="name">运行时长</span>
<span class="value">{{ deviceData.hostinfo.uptime }}</span> <span class="value">{{ deviceData.hostinfo.uptime }}</span>
</div> </div>
</fieldset> </div>
<fieldset class="right-div box2"> <div class="right-div">
<legend class="box-ht">内存信息</legend> <h3>内存信息</h3>
<div id="echartDiv" class="echartDiv"></div> <div id="echartDiv" class="echartDiv"></div>
</fieldset> </div>
</div> </div>
<div class="bottom-div"> <div class="bottom-div">
<fieldset class="left-div box2"> <div class="left-div">
<legend class="box-ht">磁盘信息</legend> <h3>磁盘信息</h3>
<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>
</fieldset> </div>
<div class="right-div">
<fieldset class="right-div box2"> <h3>网卡信息</h3>
<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">
@ -63,7 +62,7 @@
</span> </span>
</div> </div>
</div> </div>
</fieldset> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -192,8 +191,8 @@ export default {
.time-div { .time-div {
height: 8%; height: 8%;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 20px;
border: 1px solid #006b3b; border: 1px solid #c3c3c3;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -217,15 +216,15 @@ export default {
.left-div { .left-div {
height: 100%; height: 100%;
width: 65%; width: 65%;
border: 1px solid #006b3b; border: 1px solid #c3c3c3;
border-radius: 10px; border-radius: 20px;
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: 40px; height: 50px;
line-height: 40px; line-height: 50px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
@ -256,10 +255,10 @@ export default {
.right-div { .right-div {
height: 100%; height: 100%;
width: 34%; width: 34%;
border: 1px solid #006b3b; border: 1px solid #c3c3c3;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
border-radius: 10px; border-radius: 20px;
display: flex; display: flex;
padding: 25px; padding: 25px;
> div { > div {
@ -310,5 +309,4 @@ 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" size="large" type="primary">保存</el-button> <el-button @click="saveData" type="primary">保存</el-button>
</div> </div>
</el-card> </el-card>
</template> </template>
@ -221,25 +221,23 @@ 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 #006b3b; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
width: 48%; width: 50%;
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: 98%; width: 80%;
height: 70%; height: 90%;
overflow: auto;
margin: 0 auto; margin: 0 auto;
> div { > div {
line-height: 50px; line-height: 60px;
height: 50px; height: 60px;
} }
} }
} }
@ -247,12 +245,10 @@ export default {
height: 60%; height: 60%;
} }
.moreipDiv { .moreipDiv {
height: 48%; height: 35%;
overflow: auto;
} }
.dnsDiv { .dnsDiv {
height: 45%; height: 25%;
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 :row-class-name="tableRowClassName" <el-table :data="tableData" height="760" border stripe
: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,15 +14,14 @@
<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>
@ -279,19 +278,6 @@ 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,
@ -310,8 +296,7 @@ export default {
openPz, openPz,
openDetails, openDetails,
viewData, viewData,
getTextColor, getTextColor
tableRowClassName
}; };
}, },
}; };
@ -324,7 +309,7 @@ export default {
.top-div { .top-div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-end;
} }
.txStatusDiv { .txStatusDiv {
@ -338,5 +323,4 @@ export default {
.start { .start {
color: #009fa4; color: #009fa4;
} }
</style> </style>