From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/analysisPower/index/App.vue | 476 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 309 insertions(+), 167 deletions(-) diff --git a/src/pages/analysisPower/index/App.vue b/src/pages/analysisPower/index/App.vue index 3318358..bbaf21f 100644 --- a/src/pages/analysisPower/index/App.vue +++ b/src/pages/analysisPower/index/App.vue @@ -16,13 +16,18 @@ </div> </div> - <div class="bottom" :style="{'height':strethTable?'calc(100% - 30px)':'calc(100% - 220px)'}"> - <div style="width: 100%;height: 10px;background-color: #E9EBF2;"></div> + <div + class="bottom" + :style="{ + height: strethTable ? 'calc(100% - 30px)' : 'calc(100% - 220px)', + }" + > + <div style="width: 100%; height: 10px; background-color: #e9ebf2"></div> <div class="content"> <div class="toolBar"> <el-input size="small" - style="width: 180px;" + style="width: 180px" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" prefix-icon="el-icon-search" clearable @@ -31,78 +36,140 @@ <el-button size="small" type="primary" - style="margin-left: 20px; margin-right: 50px;" + style="margin-left: 20px; margin-right: 50px" @click="pollSeach" - >鎼滅储</el-button> - <div class="tip"> + >鎼滅储</el-button + > + <div class="tip" v-if="isShowPolling === 'show'"> <span> 杞鏃堕棿 : - <b>{{PollData.Config.poll_period}}</b>鍒嗛挓 + <b>{{ PollData.Config.poll_period }}</b + >鍒嗛挓 </span> <span> 杞鍛ㄦ湡 : - <b>{{pollCycle}}</b>鍒嗛挓 + <b>{{ pollCycle }}</b + >鍒嗛挓 </span> <span> 杞寮�鍏� : - <b>{{PollData.Enabled | switchText}}</b> + <b>{{ PollData.Enabled | switchText }}</b> </span> </div> - <span :class="stretchStyle" @click="strethTable = !strethTable"></span> + <span + :class="stretchStyle" + @click="strethTable = !strethTable" + ></span> - <el-button size="small" type="primary" style="float:right" @click="openDrawer">璁剧疆</el-button> + <el-button + size="small" + type="primary" + style="float: right" + @click="openDrawer" + v-if="showSetting && isShowPolling === 'show'" + >璁剧疆</el-button + > </div> <el-table - :header-cell-style="{background:'#F8F8F8', color: '#222222'}" + :header-cell-style="{ background: '#F8F8F8', color: '#222222' }" height="93%" :data="PollData.CameraList" border + :cell-style="cellStyle" > - <el-table-column label="搴忓彿" type="index" align="center" width="100px"></el-table-column> - <el-table-column label="鎽勫儚鏈哄悕绉�" align="center" show-overflow-tooltip sortable> + <el-table-column + label="搴忓彿" + type="index" + align="center" + width="60px" + ></el-table-column> + <el-table-column + label="鎽勫儚鏈哄悕绉�" + align="center" + show-overflow-tooltip + > <template slot-scope="scope"> - <span - :style="scope.row.is_running ? `color:#3d68e1` : '' " - >{{scope.row.alias !== '' ? scope.row.alias: scope.row.name}}</span> + <span :style="scope.row.is_running ? `color:#3d68e1` : ''">{{ + scope.row.alias !== "" ? scope.row.alias : scope.row.name + }}</span> </template> </el-table-column> - <el-table-column label="鎽勫儚鏈哄湴鍧�" prop="addr" align="center" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="鎽勫儚鏈篒P" prop="ip" align="center" width="130px" sortable></el-table-column> - <el-table-column label="鎽勫儚鏈虹被鍨�" align="center" width="110px" sortable> + <el-table-column + label="鎽勫儚鏈哄湴鍧�" + prop="addr" + align="center" + show-overflow-tooltip + sortable + ></el-table-column> + <el-table-column + label="鎽勫儚鏈篒P" + prop="ip" + align="center" + width="130px" + sortable + :sort-method="ipSortMethod" + ></el-table-column> + <el-table-column label="鎽勫儚鏈虹被鍨�" align="center" width="120px"> <template slot-scope="scope"> - <span>{{scope.row.run_type | cameraType}}</span> + <span>{{ scope.row.run_type | cameraType }}</span> </template> </el-table-column> - <el-table-column label="鎵ц绠楁硶" align="center" show-overflow-tooltip sortable> + <el-table-column + label="鎵ц绠楁硶" + align="center" + show-overflow-tooltip + > <template slot-scope="scope"> - <span v-if="scope.row.run_type === -1 ">-</span> - <span v-else>{{scope.row.tasks | taskList}}</span> + <span v-if="scope.row.run_type === -1">-</span> + <span v-else-if="scope.row.tasks != null">{{ + scope.row.tasks | taskList + }}</span> + <span v-else>-</span> </template> </el-table-column> - <el-table-column label="杩愯璁惧" align="center" width="160px"> + <el-table-column + label="杩愯璁惧" + align="center" + width="160px" + sortable + > <template slot-scope="scope"> - <span v-if="scope.row.run_type === -1 ">-</span> - <span v-else>{{scope.row.runServerName}}</span> + <span v-if="scope.row.run_type === -1">-</span> + <span v-else>{{ scope.row.runServerName }}</span> </template> </el-table-column> - <el-table-column label="鐘舵��" align="center" show-overflow-tooltip sortable width="100px"> + <el-table-column + label="鐘舵��" + align="center" + show-overflow-tooltip + width="100px" + > <template slot-scope="scope"> - <span v-if="scope.row.status === -1 ">-</span> - <span v-else-if="scope.row.status === 2">{{"澶勭悊涓�"}}</span> - <span v-else-if="scope.row.status === 1">{{"绛夊緟澶勭悊"}}</span> - <span v-else-if="scope.row.status === 0">{{"瑙勫垯涓嶅叏"}}</span> + <span v-if="scope.row.status === -1">-</span> + <span v-else-if="scope.row.status === 2">{{ "澶勭悊涓�" }}</span> + <span v-else-if="scope.row.status === 1">{{ "绛夊緟澶勭悊" }}</span> + <span v-else-if="scope.row.status === 0">{{ "瑙勫垯涓嶅叏" }}</span> </template> </el-table-column> - <el-table-column label="瀹炴椂/杞" align="center" width="100px"> + <el-table-column + label="瀹炴椂/杞" + align="center" + width="100px" + v-if="isShowPolling === 'show'" + > <template slot-scope="scope"> - <span v-if="scope.row.run_type === -1 ">-</span> + <span v-if="scope.row.run_type === -1">-</span> <toggle-button v-else :value="scope.row.run_type === 1" :width="60" - :labels="{checked: '瀹炴椂', unchecked: '杞'}" - :color="{checked: '#4D88FF', unchecked: '#FF7733', disabled: '#CCCCCC'}" + :labels="{ checked: '瀹炴椂', unchecked: '杞' }" + :color="{ + checked: '#4D88FF', + unchecked: '#FF7733', + disabled: '#CCCCCC', + }" :sync="true" @change="pollSwitch(scope.row)" /> @@ -117,34 +184,39 @@ title="绠楀姏璁剧疆" :visible.sync="drawer" direction="rtl" - size="350px" + size="450px" custom-class="e-drawer" :before-close="closeDrawer" > <div class="dawer_details"> - <span>鎬荤畻鍔� {{formData.totalChanle}} 閫氶亾</span> - <span style="margin-left:20px">瀹炴椂绠楀姏 {{formData.realTime}} 閫氶亾</span> + <span>鎬荤畻鍔� {{ formData.totalChanle }} 閫氶亾</span> + <span style="margin-left: 20px" + >瀹炴椂绠楀姏 {{ formData.realTime }} 閫氶亾</span + > </div> <div class="e-drawer_rate"> <div class="rate"> <label>杞鏃堕棿</label> <el-input-number size="small" - style="width: 60px;margin-left:25px" + style="width: 60px; margin-left: 25px" v-model.number="formData.pollPeriod" :controls="false" - :min="0" + :min="1" :max="60 * 24 * 1" ></el-input-number> <span>鍒嗛挓</span> <label>杞寮�鍏�</label> - <el-switch style="margin-left: 10px;" v-model="formData.pollEnable"></el-switch> + <el-switch + style="margin-left: 10px" + v-model="formData.pollEnable" + ></el-switch> </div> <div class="rate"> <label>杞绠楀姏</label> <el-input-number - style="margin-left:25px;width:90px" + style="margin-left: 25px; width: 90px" size="small" v-model="formData.polling" @change="changePoll" @@ -156,7 +228,7 @@ <div class="rate"> <label>鏁版嵁鏍堢畻鍔�</label> <el-input-number - style="margin-left:11px;width:90px" + style="margin-left: 11px; width: 90px" size="small" v-model="formData.dataStack" @change="changeStack" @@ -169,10 +241,17 @@ <el-button size="small" type="primary" - style="margin:10px 10px 0px 200px" + style="margin: 10px 10px 0px 200px" @click="saveSetting" - >淇濆瓨</el-button> - <el-button size="small" type="info" style="color:black" @click="closeDrawer">鍙栨秷</el-button> + >淇濆瓨</el-button + > + <el-button + size="small" + type="info" + style="color: black" + @click="closeDrawer" + >鍙栨秷</el-button + > </div> </el-drawer> </div> @@ -180,32 +259,36 @@ <script> import echarts from "echarts"; -import { changeRunType, updatePollEnable, updatePollPeriod, updateChannelCount } from "@/api/pollConfig"; +import { + changeRunType, + updatePollEnable, + updatePollPeriod, + updateChannelCount, +} from "@/api/pollConfig"; -import Sysinfo from "@/components/subComponents/SystemInfo" -// import SliderVedio from '@/components/camera/slider-vedio' -// import eChartsBar from '@/components/subComponents/eChartsBar' +import Sysinfo from "@/components/subComponents/SystemInfo"; export default { name: "PollSeting", components: { Sysinfo, - // SliderVedio, - // eChartsBar }, filters: { cameraType(type) { return type === -1 ? "鐩戞帶鎽勫儚鏈�" : "AI鎽勫儚鏈�"; }, taskList(tasks) { - return tasks.filter(task => { - return task.hasRule; - }).map(task => { - return task.taskname - }).join(',') + return tasks + .filter((task) => { + return task.hasRule; + }) + .map((task) => { + return task.taskname; + }) + .join(","); }, switchText(type) { return type ? "宸插紑鍚�" : "鏈紑鍚�"; - } + }, }, computed: { maxPoll() { @@ -216,33 +299,60 @@ }, stretchStyle() { let arry = ["iconfont", "stretch-btn"]; - arry.push(this.strethTable ? "iconzhankai" : "iconshouqi") + arry.push(this.strethTable ? "iconzhankai" : "iconshouqi"); return arry; }, pollCycle() { + if (this.PollData.PollValidCount === 0 || !this.PollData.PollValidCount) { + return 0; + } let sumPollingCamera = 0; - this.PollData.CameraList.forEach(cam => { + this.PollData.CameraList.forEach((cam) => { if (cam.run_type === 0) { - sumPollingCamera++ + sumPollingCamera++; } - }) + }); + // 鎵�鏈夎疆璇㈢殑鎽勫儚鏈烘�绘暟 * 杞鏃堕棿 / 杞绠楀姏 - 1 + let ret = + (sumPollingCamera * this.PollData.Config.poll_period) / + this.PollData.PollValidCount - + 1; + if (String(ret).indexOf(".") > 0) { + ret = ret.toFixed(1); + } - return sumPollingCamera * this.PollData.Config.poll_period - } + return ret < 0 ? 0 : ret; + }, + isAdmin() { + if ( + sessionStorage.getItem("userInfo") && + sessionStorage.getItem("userInfo") !== "" + ) { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; + return loginName === "superadmin" || loginName === "basic"; + } + + return false; + }, + showSetting() { + return ( + this.isAdmin || this.buttonAuthority.indexOf("analysisPower:set") > -1 + ); + }, }, data() { return { - switchValue: true, search: "", timeout: null, taskName: [], dataList: [], barChart: {}, - localDataChannel: 2, showSysInfo: false, drawer: false, formData: {}, - strethTable: false + strethTable: false, + buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], + isShowPolling: sessionStorage.getItem("isShowPolling"), }; }, mounted() { @@ -255,6 +365,21 @@ clearTimeout(this.timeout); }, methods: { + ipSortMethod(a, b) { + if ( + Number(a.ip.substr(a.ip.lastIndexOf(".") + 1)) < + Number(b.ip.substr(b.ip.lastIndexOf(".") + 1)) + ) { + return -1; + } + if ( + Number(a.ip.substr(a.ip.lastIndexOf(".") + 1)) > + Number(b.ip.substr(b.ip.lastIndexOf(".") + 1)) + ) { + return 1; + } + return 0; + }, openDrawer() { this.initFormData(); this.drawer = true; @@ -266,39 +391,42 @@ initFormData() { this.formData = { totalChanle: this.PollData.channelTotal, - realTime: this.PollData.RealTimeSum, + //realTime: this.PollData.RealTimeSum, + realTime: this.PollData.RealTimeValidCount, pollEnable: this.PollData.Enabled, pollPeriod: this.PollData.Config.poll_period, polling: this.PollData.PollChannelTotal, dataStack: this.PollData.localVideo, - } + }; }, pollSeach() { this.PollData.fetchPollList(); }, pollEnable() { - updatePollEnable({ enable: this.PollData.Enabled }).then(rsp => { + updatePollEnable({ enable: this.PollData.Enabled }).then((rsp) => { this.$notify({ type: "success", - message: "淇敼鎴愬姛" + message: "淇敼鎴愬姛", }); // this.PollData.fetchPollConfig() - }) + }); }, updateDelayTime() { - updatePollPeriod({ period: this.PollData.Config.poll_period }).then(rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: 'success', - message: '杞鏃堕棿淇敼鎴愬姛锛�' - }) - } else { - this.$notify({ - type: 'error', - message: '杞鏃堕棿淇敼澶辫触锛�' - }) + updatePollPeriod({ period: this.PollData.Config.poll_period }).then( + (rsp) => { + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "杞鏃堕棿淇敼鎴愬姛锛�", + }); + } else { + this.$notify({ + type: "error", + message: "杞鏃堕棿淇敼澶辫触锛�", + }); + } } - }) + ); }, statistic() { this.PollData.statistics(); @@ -309,19 +437,18 @@ }, pollSwitch(row) { changeRunType({ camera_ids: [row.id], run_type: row.run_type ^ 1 }).then( - rsp => { + (rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", - message: "閰嶇疆鎴愬姛" + message: "閰嶇疆鎴愬姛", }); - row.run_type = row.run_type ^ 1 - + row.run_type = row.run_type ^ 1; } else { this.$notify({ type: "error", - message: "閰嶇疆澶辫触" + message: "閰嶇疆澶辫触", }); } @@ -338,14 +465,14 @@ trigger: "axis", axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 - type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' - } + type: "shadow", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' + }, }, grid: { top: 40, // bottom: '45%', left: 0, - containLabel: true + containLabel: true, }, xAxis: [ @@ -356,171 +483,175 @@ // alignWithLabel: true }, axisLine: { - show: false + show: false, }, - nameLocation: 'start', + nameLocation: "start", axisTick: { - show: false + show: false, }, axisLabel: { rotate: 45, formatter: function (value, index) { - let name = "" + let name = ""; if (value.length > 2) { - name = value.substring(0, 2) + '...' + name = value.substring(0, 2) + "..."; } else { - name = value + name = value; } - let text = [`{a|${name}}`] - return text + let text = [`{a|${name}}`]; + return text; }, rich: { a: { fontSize: 10, - with: 30 - } - } - } - } + with: 30, + }, + }, + }, + }, ], yAxis: [ { type: "value", show: true, axisLine: { - show: false + show: false, }, splitLine: { lineStyle: { type: "dotted", - color: ['#f1f1f1'] - } + color: ["#f1f1f1"], + }, }, axisTick: { - show: false - } - } + show: false, + }, + }, ], series: [ { name: "鏁伴噺", type: "bar", barWidth: "30%", - data: this.dataList - } - ] + data: this.dataList, + }, + ], }; - this.showSysInfo = true + this.showSysInfo = true; this.barChart.setOption(optionBar); - this.barChart.resize() + this.barChart.resize(); this.$nextTick(() => { - this.barChart.resize() - }) + this.barChart.resize(); + }); }, //婊戝潡鏁版嵁鏇存柊鍥炶皟 changeSlider(val) { // console.log(val, '婊戝潡鍊煎彉鍔�') - let fileChannelCount = val[val.length - 1] - val[val.length - 2] - let pollChannelCount = val[val.length - 2] - val[val.length - 3] - this.PollData.updateChannelCount(fileChannelCount, pollChannelCount) + let fileChannelCount = val[val.length - 1] - val[val.length - 2]; + let pollChannelCount = val[val.length - 2] - val[val.length - 3]; + this.PollData.updateChannelCount(fileChannelCount, pollChannelCount); }, async saveSetting() { - let rsp = await updatePollEnable({ enable: this.formData.pollEnable }) + let rsp = await updatePollEnable({ enable: this.formData.pollEnable }); if (!rsp || !rsp.success) { - this.formData.pollEnable = !this.formData.pollEnable + this.formData.pollEnable = !this.formData.pollEnable; this.$notify({ type: "error", - message: "杞寮�鍏冲垏鎹㈠け璐ワ紒" + message: "杞寮�鍏冲垏鎹㈠け璐ワ紒", }); - return + return; } - rsp = await updatePollPeriod({ period: this.formData.pollPeriod }) + rsp = await updatePollPeriod({ period: this.formData.pollPeriod }); if (!rsp || !rsp.success) { this.$notify({ type: "error", - message: "杞鏃堕棿淇敼澶辫触锛�" + message: "杞鏃堕棿淇敼澶辫触锛�", }); - return + return; } - rsp = await updateChannelCount({ videoChannelCount: this.formData.dataStack, pollChannelCount: this.formData.polling }) + rsp = await updateChannelCount({ + videoChannelCount: this.formData.dataStack, + pollChannelCount: this.formData.polling, + }); if (!rsp || !rsp.success) { this.$notify({ type: "error", - message: "绠楀姏閰嶇疆澶辫触锛�" + message: "绠楀姏閰嶇疆澶辫触锛�", }); - return + return; } else { this.$notify({ type: "success", - message: "閰嶇疆淇濆瓨鎴愬姛" + message: "閰嶇疆淇濆瓨鎴愬姛", }); } - this.PollData.statisticTaskInfo() - this.PollData.fetchPollConfig() + this.PollData.statisticTaskInfo(); + this.PollData.fetchPollConfig(); }, //鐩戝惉杞绠楀姏 changePoll(newVal, oldVal) { if (newVal > oldVal) { - this.formData.dataStack-- + this.formData.dataStack--; } if (newVal < oldVal) { - this.formData.dataStack++ + this.formData.dataStack++; } // console.log("this.formData.dataStack:"+this.formData.dataStack) }, //鐩戝惉鏁版嵁鏍堢畻鍔� changeStack(newVal, oldVal) { if (newVal > oldVal) { - this.formData.polling-- + this.formData.polling--; } if (newVal < oldVal) { - this.formData.polling++ + this.formData.polling++; } // console.log("this.formData.polling:"+this.formData.polling) - } - } + }, + cellStyle(obj) { + if ( + obj.column.label == "鎽勫儚鏈哄悕绉�" || + obj.column.label == "鎽勫儚鏈哄湴鍧�" + ) { + return "text-align:left;padding-left:8px;"; + } + }, + }, }; </script> <style lang="scss"> .s-poll-setting { width: 100%; height: 100%; + min-width: 1609px; font-size: 14px; position: relative; .top { width: 100%; height: 190px; - // border-bottom: 1px solid #ccc; + min-width: 1609px; + display: flex; + .sysinfo-box .eCharts-box { + width: 36%; + } .progressBar { width: 26%; } .percentBall { - width: 80%; + width: 84%; height: 82%; - float: left; - padding-left: 38px; + //float: left; + padding-left: 30px; box-sizing: border-box; - // @media screen and (min-width: 1280px) and (max-width: 1440px) { - // width: 75%; - // } - // @media screen and (max-width: 1280px) { - // width: 80%; - // } } .barGraph { - width: 20%; + width: 16%; height: 100%; - float: right; - // @media screen and (min-width: 1280px) and (max-width: 1440px) { - // width: 25%; - // } - // @media screen and (max-width: 1280px) { - // width: 20%; - // } + //float: right; #barSimple { width: 100%; height: 250px; @@ -540,12 +671,6 @@ } } .bottom { - //width: calc(100% + 76px); - //height: 100%; - //height: calc(100% - 220px); - //position: absolute; - // top: 220px; - //left: -38px; .tip { display: inline-block; font-family: PingFangSC-Medium; @@ -555,7 +680,7 @@ } } .content { - padding: 20px 38px 38px 38px; + padding: 20px 30px 30px; box-sizing: border-box; width: 100%; height: 100%; @@ -581,9 +706,16 @@ .e-drawer { // margin-top: 150px; - font-family: PingFangSC-Medium; font-size: 14px; + &:focus { + outline: none; + } + .el-dialog__close { + &:focus { + outline: none !important; + } + } .dawer_details { text-align: left; margin-left: 70px; @@ -604,7 +736,17 @@ } .el-drawer__header { + border-bottom: 2px solid #eee; + padding-bottom: 10px; + font-size: 16px; margin-bottom: 0px; + span { + border: none !important; + border-image-width: 0 !important; + &:focus { + outline: none; + } + } } } </style> -- Gitblit v1.8.0