From 2cb264ec2b7c7dd9798d1821927104fad35bd063 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期二, 28 六月 2022 14:47:43 +0800
Subject: [PATCH] 系统设置自适应
---
src/pages/analysisPower/index/App.vue | 361 +++++++++++++++++++++++++++++++-------------------
1 files changed, 223 insertions(+), 138 deletions(-)
diff --git a/src/pages/analysisPower/index/App.vue b/src/pages/analysisPower/index/App.vue
index e5b7ce9..18819bb 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,50 +36,72 @@
<el-button
size="small"
type="primary"
- style="margin-left: 20px; margin-right: 50px;"
+ style="margin-left: 20px; margin-right: 50px"
@click="pollSeach"
- >鎼滅储</el-button>
+ >鎼滅储</el-button
+ >
<div class="tip">
<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"
+ style="float: right"
@click="openDrawer"
v-if="showSetting"
- >璁剧疆</el-button>
+ >璁剧疆</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="60px"></el-table-column>
- <el-table-column label="鎽勫儚鏈哄悕绉�" align="center" show-overflow-tooltip>
+ <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="鎽勫儚鏈哄湴鍧�"
+ prop="addr"
+ align="center"
+ show-overflow-tooltip
+ sortable
+ ></el-table-column>
<el-table-column
label="鎽勫儚鏈篒P"
prop="ip"
@@ -85,39 +112,59 @@
></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>
+ <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-if="scope.row.tasks != null ">{{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" sortable>
+ <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 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">
<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)"
/>
@@ -137,29 +184,34 @@
: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"
@@ -171,7 +223,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"
@@ -184,10 +236,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>
@@ -195,9 +254,14 @@
<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 Sysinfo from "@/components/subComponents/SystemInfo";
export default {
name: "PollSeting",
components: {
@@ -208,15 +272,18 @@
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() {
@@ -227,26 +294,29 @@
},
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
+ 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
+ let ret =
+ (sumPollingCamera * this.PollData.Config.poll_period) /
+ this.PollData.PollValidCount -
+ 1;
if (String(ret).indexOf(".") > 0) {
- ret = ret.toFixed(1)
+ ret = ret.toFixed(1);
}
- return ret < 0 ? 0 : ret
+ return ret < 0 ? 0 : ret;
},
isAdmin() {
if (
@@ -260,8 +330,10 @@
return false;
},
showSetting() {
- return this.isAdmin || this.buttonAuthority.indexOf("analysisPower:set") > -1
- }
+ return (
+ this.isAdmin || this.buttonAuthority.indexOf("analysisPower:set") > -1
+ );
+ },
},
data() {
return {
@@ -288,10 +360,16 @@
},
methods: {
ipSortMethod(a, b) {
- if (Number(a.ip.substr(a.ip.lastIndexOf('.') + 1)) < Number(b.ip.substr(b.ip.lastIndexOf('.') + 1))) {
+ 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))) {
+ if (
+ Number(a.ip.substr(a.ip.lastIndexOf(".") + 1)) >
+ Number(b.ip.substr(b.ip.lastIndexOf(".") + 1))
+ ) {
return 1;
}
return 0;
@@ -313,34 +391,36 @@
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();
@@ -351,19 +431,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: "閰嶇疆澶辫触",
});
}
@@ -380,14 +459,14 @@
trigger: "axis",
axisPointer: {
// 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
+ type: "shadow", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
},
grid: {
top: 40,
// bottom: '45%',
left: 0,
- containLabel: true
+ containLabel: true,
},
xAxis: [
@@ -398,138 +477,144 @@
// 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;'
+ if (
+ obj.column.label == "鎽勫儚鏈哄悕绉�" ||
+ obj.column.label == "鎽勫儚鏈哄湴鍧�"
+ ) {
+ return "text-align:left;padding-left:8px;";
}
- }
- }
+ },
+ },
};
</script>
<style lang="scss">
--
Gitblit v1.8.0