From fa7044f3ccc9a91bc2bc117d1a06f650d86554f2 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期二, 15 六月 2021 16:07:16 +0800 Subject: [PATCH] 优化联动规则加载场景列表的操作 --- src/pages/settings/components/BasicSetting.vue | 368 +++++++++++++++++++++++---------------------------- 1 files changed, 166 insertions(+), 202 deletions(-) diff --git a/src/pages/settings/components/BasicSetting.vue b/src/pages/settings/components/BasicSetting.vue index 255e35d..604374d 100644 --- a/src/pages/settings/components/BasicSetting.vue +++ b/src/pages/settings/components/BasicSetting.vue @@ -5,10 +5,10 @@ v-model="activeName" v-loading="loading" :element-loading-text="loadingText" - type="card" + type="border-card" > <!-- 鏈満淇℃伅 --> - <el-tab-pane label="鏈満淇℃伅" name="first"> + <el-tab-pane label="鏈満淇℃伅" name="sysInfo" v-if="isShow('settings:sysInfo')"> <el-menu :default-openeds="openeds" background-color="#fff" @@ -76,23 +76,27 @@ <template slot="title"> <b class="tree-font">璇︾粏淇℃伅</b> </template> - <el-menu-item-group class="item-group"> + <el-menu-item-group class="item-group desc-info"> <el-row :gutter="gutter"> <el-col :span="12" class="flex-box"> - <div class="xiangqin-label">ID</div> + <div class="xiangqin-label">璁惧ID</div> <div class="xiangqing-info">{{sysinfo.server_id}}</div> </el-col> - <el-col :span="12" class="flex-box"> + <!-- <el-col :span="12" class="flex-box"> <div class="xiangqin-label">璁惧缂栧彿</div> <div class="xiangqing-info">{{sysinfo.deviceNum}}</div> - </el-col> + </el-col>--> <el-col :span="12" class="flex-box"> <div class="xiangqin-label">璁惧鍨嬪彿</div> - <div class="xiangqing-info">{{sysinfo.deviceType}}</div> + <div class="xiangqing-info">{{sysinfo.deviceModel}}</div> </el-col> <el-col :span="12" class="flex-box"> - <div class="xiangqin-label">璁惧搴忓垪鍙�</div> - <div class="xiangqing-info">{{sysinfo.deviceSerialNum}}</div> + <div class="xiangqin-label">璁惧绫诲瀷</div> + <div class="xiangqing-info">{{sysinfo.deviceDesc}}</div> + </el-col> + <el-col :span="12" class="flex-box"> + <div class="xiangqin-label">閫氶亾涓暟</div> + <div class="xiangqing-info">{{sysinfo.channelCount}}</div> </el-col> <el-col :span="12" class="flex-box"> <div class="xiangqin-label">涓绘帶鐗堟湰</div> @@ -103,12 +107,20 @@ <div class="xiangqing-info">{{sysinfo.webVersion}}</div> </el-col> <el-col :span="12" class="flex-box"> - <div class="xiangqin-label">閫氶亾涓暟</div> - <div class="xiangqing-info">{{sysinfo.channelCount}}</div> + <div class="xiangqin-label">纭洏淇℃伅</div> + <div class="xiangqing-info">{{sysinfo.disks}}</div> </el-col> <el-col :span="12" class="flex-box"> - <div class="xiangqin-label">纭洏涓暟</div> - <div class="xiangqing-info">{{sysinfo.diskCount}}</div> + <div class="xiangqin-label">CPU</div> + <div class="xiangqing-info">{{sysinfo.cpuInfo}}</div> + </el-col> + <el-col :span="12" class="flex-box"> + <div class="xiangqin-label">鍐呭瓨</div> + <div class="xiangqing-info">{{sysinfo.mem}}</div> + </el-col> + <el-col :span="12" class="flex-box"> + <div class="xiangqin-label">杩愯鏃堕棿</div> + <div class="xiangqing-info">{{sysinfo.uptime}}</div> </el-col> </el-row> </el-menu-item-group> @@ -159,127 +171,14 @@ </el-menu-item-group> </el-submenu> <!-- 瀵瑰鏈嶅姟IP 鏀瑰悕涓哄閮ㄧ綉缁�(鏂皌ab)--> - - <!-- 鏂囦欢闊宠棰� --> - <!-- <el-submenu index="4"> - <template slot="title"> - <b class="tree-font">鏂囦欢闊宠棰�</b> - </template> - <el-menu-item-group class="item-group"> - <el-row :gutter="20"> - <el-col :span="8"> - <div class="p5"> - <span class="iconfont iconpicture" style="margin-right: 5px;"></span> - <span class="mr10">鍥剧墖绔彛</span> - <el-input v-model="localFile.picPort" style="width:300px;" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </div> - <div class="p5"> - <span class="iconfont iconshipin" style="margin-right: 5px;"></span> - <span class="mr10">瑙嗛绔彛</span> - <el-input v-model="localFile.videoPort" style="width:300px;" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </div> - <div class="p5"> - <span class="iconfont iconyinpinx" style="margin-right: 5px;"></span> - <span class="mr10">闊抽绔彛</span> - <el-input v-model="localFile.audioPort" style="width:300px;" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </div> - </el-col> - <el-col :span="16"> - <el-table - :data="localFile.fileTable" - border - style="width: 100%"> - <el-table-column - type="index" - label="搴忓彿" - align="center" - width="50"> - </el-table-column> - <el-table-column - prop="date" - label="鍚嶇О" - align="center" - width="180"> - </el-table-column> - <el-table-column - prop="name" - label="ID" - align="center" - width="180"> - </el-table-column> - <el-table-column - prop="name" - label="IP" - align="center" - width="180"> - </el-table-column> - <el-table-column - prop="name" - label="鍦ㄧ嚎鐘舵��" - align="center" - width="80"> - </el-table-column> - <el-table-column - label="绫诲埆" - align="center" - width="100"> - <template> - <span class="iconfont iconpicture" style="margin-right: 5px;"></span> - <span class="iconfont iconshipin" style="margin-right: 5px;"></span> - <span class="iconfont iconyinpinx" style="margin-right: 5px;"></span> - </template> - </el-table-column> - <el-table-column - prop="address" - align="center" - label="澶囨敞"> - <template slot-scope="{row}"> - <div v-if="row.edit"> - <el-input :autofocus="row.edit" v-focus v-model="row.address" size="small" /> - <el-button size="mini" type="info" @click="handleCancel(row)">鍙栨秷</el-button> - <el-button size="mini" type="primary" @click="handleSave(row)">淇濆瓨</el-button> - </div> - <div v-else> - <span>{{ row.address }}</span> - <el-button - type="text" - style="color: black;font-size:16px" - @click="handleEdit(row)" - icon="iconfont iconbianji" - ></el-button> - </div> - </template> - </el-table-column> - </el-table> - </el-col> - </el-row> - </el-menu-item-group> - </el-submenu>--> </el-menu> </el-tab-pane> <!-- 鏃堕棿閰嶇疆 --> - <el-tab-pane label="鏃堕棿閰嶇疆" name="second"> + <el-tab-pane label="鏃堕棿閰嶇疆" name="timeSet" v-if="isShow('settings:timeSet')"> <el-form label-width="100px"> <el-form-item label="璁惧鏃堕棿"> - <!-- <el-input v-model="equipmentTime" placeholder="璇疯緭鍏�" size="small"></el-input> --> {{ equipmentTime }} - </el-form-item> - - <el-form-item label="鏃跺尯" prop="timezone"> - <el-select - v-model="timezone" - placeholder="璇烽�夋嫨" - style="width: 360px; height: 32px" - size="small" - > - <el-option - v-for="item in timeZoneOption" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> - </el-select> </el-form-item> <div style="text-align: left;padding: 10px 0px"> <div class="time-type">NTP鏍℃椂</div> @@ -311,6 +210,7 @@ style="position: absolute; left: 330px;" :disabled="syncType === '2'" @click="testNTP" + :loading="ntpTestLoading" >娴嬭瘯</el-button> </el-form-item> @@ -328,7 +228,6 @@ placeholder="閫夋嫨鏃ユ湡鏃堕棿" size="small" value-format="yyyy-MM-dd HH:mm:ss" - :readonly="settimeRadio" :disabled="syncType === '1'" ></el-date-picker> <el-checkbox @@ -348,43 +247,54 @@ </el-tab-pane> <!-- 闆嗙兢绠$悊 --> - <el-tab-pane label="闆嗙兢绠$悊" name="third"> + <el-tab-pane label="闆嗙兢绠$悊" name="cluster" v-if="isShow('settings:cluster')"> <cluster-management></cluster-management> </el-tab-pane> - <el-tab-pane label="澶栭儴缃戠粶" name="fourth"> - <div class="flex-box"> - <label>璁剧疆澶栭儴IP</label> - <div style="width:300px;"> - <ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input> - </div> - <el-checkbox label="閫夌敤鏈満IP" size="small" style="margin-left: 20px"></el-checkbox> - </div> - <div class="flex-box"> - <label>鍩熷悕</label> - <el-input size="small" v-model="ipServer.localhost"></el-input> - </div> - <div class="flex-box"> - <label>鏈湴鏂囦欢绔彛</label> - <el-input size="small" v-model="ipServer.localFilePort"></el-input> - </div> - <div class="mt15 save-btn" style="width:460px; margin-bottom:20px; float:left;"> - <el-button type="primary" @click="submitResource" size="small">淇濆瓨</el-button> - </div> - <div> - <el-table :data="ipServer.fileTable" border fit style="width: 100%"> - <el-table-column type="index" label="搴忓彿" align="center" width="50"></el-table-column> - <el-table-column prop="date" label="鍚嶇О" align="center"></el-table-column> - <el-table-column prop="name" label="ID" align="center"></el-table-column> - <el-table-column prop="name" label="IP" align="center"></el-table-column> - <el-table-column prop="name" label="鍦ㄧ嚎鐘舵��" align="center"></el-table-column> - </el-table> - </div> + <!-- <el-tab-pane label="澶栭儴璁块棶" name="fourth"> + <el-menu + :default-openeds="openeds" + background-color="#fff" + text-color="#303133" + active-text-color="#409EFF" + style="height: 100%;" + class="menu-css" + @open="menuOpen" + @close="menuClose" + > + <el-submenu index="0"> + <template slot="title"> + <b class="tree-font">澶栭儴璁块棶璁剧疆</b> + </template> + <el-menu-item-group class="item-group"> + <el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px"> + <div class="flex-box"> + <label>璁剧疆澶栭儴IP</label> + <div style="width:300px;"> + <ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input> + </div> + <el-checkbox label="閫夌敤鏈満IP" size="small" style="margin-left: 20px"></el-checkbox> + </div> + <div class="flex-box"> + <label>鍩熷悕</label> + <el-input size="small" v-model="ipServer.localhost"></el-input> + </div> + <div class="flex-box"> + <label>鏈湴鏂囦欢绔彛</label> + <el-input size="small" v-model="ipServer.localFilePort"></el-input> + </div> + <div class="mt15 mb10 save-btn"> + <el-button type="primary" @click="submitSysinfo" size="small">淇濆瓨</el-button> + </div> + </el-form> + </el-menu-item-group> + </el-submenu> + </el-menu> + </el-tab-pane>--> + <el-tab-pane label="鏉冮檺绠$悊" name="permission" v-if="isShow('settings:permission')"> + <authority-management v-if="activeName === 'permission'"></authority-management> </el-tab-pane> - <el-tab-pane label="鏉冮檺绠$悊" name="user"> - <authority-management v-if="activeName === 'user'"></authority-management> - </el-tab-pane> - <el-tab-pane label="骞挎挱璁剧疆" name="radio"> - <radio-set v-if="activeName === 'radio'"></radio-set> + <el-tab-pane label="骞挎挱璁剧疆" name="broadcast" v-if="isShow('settings:broadcast')"> + <radio-set v-if="activeName === 'broadcast'"></radio-set> </el-tab-pane> </el-tabs> </div> @@ -410,6 +320,7 @@ import ClusterManagement from "./ClusterManagement"; import AuthorityManagement from "./AuthorityManagement"; import RadioSet from "./RadioSet"; +import config from '../../../../package.json' export default { name: "BasicSettings", @@ -420,15 +331,26 @@ RadioSet }, computed: { - timeZoneOption() { - let options = [] - TimeZones.forEach(zone => { - options = options.concat(zone.utc.map(v => { - return { value: v, label: v } - })) - }) - return options - } + // timeZoneOption() { + // let options = [] + // TimeZones.forEach(zone => { + // options = options.concat(zone.utc.map(v => { + // return { value: v, label: v } + // })) + // }) + // return options + // }, + isAdmin() { + if ( + sessionStorage.getItem("userInfo") && + sessionStorage.getItem("userInfo") !== "" + ) { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; + return loginName === "superadmin" || loginName === "basic"; + } + + return false; + }, }, directives: { focus: { @@ -442,7 +364,7 @@ loading: true, loadingText: "", gutter: 10, - activeName: "first", + activeName: "sysInfo", timezone: "", syncType: "1", ntpServer: "", @@ -529,29 +451,6 @@ ip: "", localhost: "", localFilePort: "", - fileTable: [ - { - date: '2016-05-02', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�', - edit: false - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�', - edit: false - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�', - edit: false - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�', - edit: false - } - ] }, locationCity: { province: '', @@ -561,8 +460,23 @@ cityOptions: [], countyOptions: [] }, + webPort: 0, + ntpTestLoading: false, + buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], }; - webPort: 0; + }, + created() { + if (this.isShow("settings:sysInfo")) { + this.activeName = "sysInfo"; + } else if (this.isShow("settings:timeSet")) { + this.activeName = "timeSet"; + } else if (this.isShow("settings:cluster")) { + this.activeName = "cluster"; + } else if (this.isShow("settings:permission")) { + this.activeName = "permission"; + } else if (this.isShow("settings:broadcast")) { + this.activeName = "broadcast"; + } }, mounted() { this.$nextTick(() => { @@ -570,6 +484,7 @@ // this.initAlarmConf(); this.initResourceConfig(); this.initClockConf(); + //this.markStartTime(); }); }, beforeDestroy() { @@ -577,6 +492,9 @@ clearInterval(this.browserTimer); }, methods: { + isShow(authority) { + return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + }, initSysinfo() { this.loadingText = "姝e湪鑾峰彇璁惧淇℃伅..."; getDevInfo().then(rsp => { @@ -590,11 +508,23 @@ this.alarmConf.min_video_len = rsp.data.min_video_len; this.alarmConf.max_video_len = rsp.data.max_video_len; + if (this.sysinfo.deviceInfo) { + let devInfo = this.sysinfo.deviceInfo; + + this.sysinfo.cpuInfo = devInfo.cpu[0].modelName; + this.sysinfo.disks = "( " + devInfo.disk + ") "; + this.sysinfo.mem = (devInfo.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB"; + // this.sysinfo.arch = devInfo.host.kernelArch; + this.sysinfo.uptime = this.secondsFormat(devInfo.host.uptime); + } + if (!this.sysinfo.server_port) { this.sysinfo.server_port = 7003; } this.webPort = this.sysinfo.server_port; + + this.sysinfo.webVersion = 'V' + config.version; } this.loading = false; @@ -602,11 +532,20 @@ this.loading = false; }); }, - initClockConf() { + secondsFormat(s) { + var day = Math.floor(s / (24 * 3600)); // Math.floor()鍚戜笅鍙栨暣 + var hour = Math.floor((s - day * 24 * 3600) / 3600); + var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60); + var second = s - day * 24 * 3600 - hour * 3600 - minute * 60; + return day + "澶�" + hour + "鏃�" + minute + "鍒�" + second + "绉�"; + }, + initClockConf(ntpTest = false) { getClockInfo().then(rsp => { if (rsp && rsp.success) { this.timezone = rsp.data.time_zone; - this.syncType = rsp.data.ntp ? "1" : "2"; + if (!ntpTest) { + this.syncType = rsp.data.ntp ? "1" : "2"; + } if (rsp.data.ntp) { this.ntpServer = rsp.data.ntp_server; this.timeInterval = rsp.data.interval; @@ -620,7 +559,6 @@ }, runClock() { this.equipmentTime = this.formatTime(++this.timestamp, 'Y-M-D h:m:s'); - // console.log(this.equipmentTime) this.clockTimer = setTimeout(() => { this.runClock(); }, 1000) @@ -652,6 +590,10 @@ }, 1000) } }, + markStartTime() { + let timestamp = new Date().getTime() / 1000; + this.settime = this.formatTime(timestamp, 'Y-M-D h:m:s') + }, submitSysinfo() { this.$refs["sysinfo"].validate(valid => { if (valid) { @@ -663,7 +605,7 @@ if (this.sysinfo.ip !== this.originNetConfig.ip) { let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port; var changeIPTimer = setTimeout(() => { - this.$alert('<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '鎻愮ず', { + this.$alert('<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' + newUri + '"> ' + newUri + '<a/>', '鎻愮ず', { dangerouslyUseHTMLString: true }); }, 10000) @@ -709,7 +651,7 @@ if (this.sysinfo.server_port !== this.webPort) { let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port; var changeIPTimer = setTimeout(() => { - this.$alert('<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒绔彛, 璇烽噸鏂扮櫥褰�</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '鎻愮ず', { + this.$alert('<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒绔彛, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' + newUri + '"> ' + newUri + '<a/>', '鎻愮ず', { dangerouslyUseHTMLString: true }); }, 5000) @@ -720,6 +662,9 @@ return false; } }); + }, + checkTimeZone(val) { + }, submitClock() { if (this.syncType === '1') { @@ -755,9 +700,11 @@ message: "璁剧疆鎴愬姛" }); } + this.initClockConf(); }) }, testNTP() { + this.ntpTestLoading = true; testNTPserver({ server: this.ntpServer }).then(rsp => { if (rsp && rsp.success) { this.$notify({ @@ -770,11 +717,15 @@ message: "鏃堕棿鍚屾澶辫触" }); } + this.ntpTestLoading = false; + this.initClockConf(true); + }).catch(err => { this.$notify({ type: "error", message: "鏃堕棿鍚屾澶辫触,璇锋鏌ユ湇鍔″櫒ip" }); + this.ntpTestLoading = false; }) }, submitAlarm() { @@ -889,6 +840,9 @@ // margin-left: -80px; .el-form-item { text-align: left; + &.is-required:not(.is-no-asterisk) > .el-form-item__label:before { + margin-left: -8px; + } .el-button { float: right; } @@ -973,7 +927,7 @@ list-style: none; position: relative; margin: 0; - padding-left: 0; + padding-left: 10px; background-color: #ffffff; .el-submenu__title { height: 35px; @@ -1036,6 +990,16 @@ width: 300px; } } +.desc-info { + margin-bottom: 14px; + .flex-box { + height: 40px; + line-height: 40px; + .xiangqin-label { + width: 80px; + } + } +} .menu-css, .el-menu { border-right: none; -- Gitblit v1.8.0