系统设置自适应

ZZJ

2022-06-28 2cb264ec2b7c7dd9798d1821927104fad35bd063

 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="摄像机IP"
            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">