控制轮询

ZZJ

2022-07-15 a3f357e8a60443b74b64c7479113c68eb35ce1f5

控制轮询

 dist.rar

Binary files differ

 src/api/login.ts

@@ -48,4 +48,12 @@
    url: "/data/api-v/info/getServerName",
    method: "get"
  });
};

//获取设备信息
export const getDevInfo = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getDevInfo",
    method: "get"
  });
};

 src/components/subComponents/SystemInfo.vue

@@ -1,22 +1,22 @@
<template>
  <div :class="showClass">
    <div class="card-box" :style="`width:${borderWidth};min-width:456px`" >
    <div class="card-box" :style="`width:${borderWidth};min-width:456px`">
      <ul>
        <li style="max-width:30px;" v-if="ShowLocalVedio">
        <li style="max-width: 30px" v-if="ShowLocalVedio">
          <div class="total-box">
            <div style="width:100%;margin-top:28px;">
            <div style="width: 100%; margin-top: 28px">
              <div class="top-text">
                <em>{{"总算力"}}</em>
                <em>{{ "总算力" }}</em>
              </div>
              <div class="mid-text">
                <em>{{` ${PollData.channelTotal}`}}</em>
                <em>{{ ` ${PollData.channelTotal}` }}</em>
              </div>
            </div>
          </div>
        </li>
        <li style="max-width:120px" v-if="showRealPoll">
        <li style="max-width: 120px" v-if="showRealPoll">
          <DataStackCard
            style="width:95%"
            style="width: 95%"
            title="实时算力"
            fourTip="故障导致未处理"
            fourIcon="iconicon-test21"
@@ -27,12 +27,15 @@
            :NoDeal="`${PollData.RealTimeNoDeal}路`"
          />
        </li>
        <li style="max-width:120px" v-if="showRealPoll">
        <li
          style="max-width: 120px"
          v-if="showRealPoll && isShowPolling === 'show'"
        >
          <DataStackCard
            title="轮询算力"
            fourTip="等待轮询处理"
            fourIcon="iconicon-test2"
            style="width:95%"
            style="width: 95%"
            :total="`${PollData.PollValidCount}路`"
            :ValidCount="`${PollData.PollSum}路`"
            :InValidCount="`${PollData.PollInvalid}路`"
@@ -40,7 +43,7 @@
            :NoDeal="`${PollData.PollNoDeal}路`"
          />
        </li>
        <li style="max-width:120px" v-if="ShowLocalVedio">
        <li style="max-width: 120px" v-if="ShowLocalVedio">
          <!-- <local-vedio-card
            title="本地算力"
            style="width:95%"
@@ -49,8 +52,9 @@
            :warning="`${PollData.PollInvalid}路`"
          />-->
          <DataStackCard
            v-if="isShowPolling === 'show'"
            title="数据栈算力"
            style="width:95%"
            style="width: 95%"
            fourTip="未知原因导致未处理"
            fourIcon="iconicon-test5"
            :total="`${PollData.stackChannelCount}路`"
@@ -75,15 +79,18 @@
        </li> 
      </ul>
    </div>-->
    <div class="eCharts-box" v-if="PollData.barCharts.length>0">
      <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
    <div class="eCharts-box" v-if="PollData.barCharts.length > 0">
      <eChartsBar
        ref="cpuMeneryCharts"
        :xAxisData="PollData.barCharts"
      ></eChartsBar>
    </div>
  </div>
</template>

<script>
import DataStackCard from "@/components/subComponents/DataStackCard"
import eChartsBar from '@/components/subComponents/eChartsBar'
import DataStackCard from "@/components/subComponents/DataStackCard";
import eChartsBar from "@/components/subComponents/eChartsBar";

export default {
  name: "SystemInfo",
@@ -91,46 +98,51 @@
    DataStackCard,
    eChartsBar,
  },
  data() {
    return {
      isShowPolling: sessionStorage.getItem("isShowPolling"),
    };
  },
  props: {
    showTask: {
      type: Boolean,
      default: false
      default: false,
    },
    showClass: {
      type: String,
      default: 'sysinfo-box flex-box'
      default: "sysinfo-box flex-box",
    },
    ShowLocalVedio: {
      type: Boolean,
      default: false
      default: false,
    },
    showRealPoll: {
      type: Boolean,
      default: true
      default: true,
    },
    marginTop: {
      type: String,
      default: 'ma'
      default: "ma",
    },
    borderWidth: {
      type: String,
      default: '64%'
      default: "64%",
    },
    liquidWidth: {
      type: String,
      default: '30%'
    }
      default: "30%",
    },
  },
  methods: {
    initCpuCharts() {
      this.$forceUpdate();
    }
    },
  },
  mounted(){
  mounted() {
    console.log(this.PollData);
    // console.log('PollData.RealTimeValidCount',this.PollData.RealTimeValidCount)
  }
}
  },
};
</script>
<style lang="scss">
.sysinfo-box {
@@ -177,7 +189,7 @@
        font-weight: 700;
      }
    }
    ul{
    ul {
      padding-left: 0;
    }
  }

 src/pages/analysisPower/index/App.vue

@@ -40,7 +40,7 @@
            @click="pollSeach"
            >搜索</el-button
          >
          <div class="tip">
          <div class="tip" v-if="isShowPolling === 'show'">
            <span>
              轮询时间 :
              <b>{{ PollData.Config.poll_period }}</b
@@ -66,7 +66,7 @@
            type="primary"
            style="float: right"
            @click="openDrawer"
            v-if="showSetting"
            v-if="showSetting && isShowPolling === 'show'"
            >设置</el-button
          >
        </div>
@@ -152,7 +152,12 @@
              <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>
              <toggle-button
@@ -347,6 +352,7 @@
      formData: {},
      strethTable: false,
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      isShowPolling: sessionStorage.getItem("isShowPolling"),
    };
  },
  mounted() {

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -16,7 +16,7 @@
          </div>

          <div
            v-if="Camera.analytics"
            v-if="Camera.analytics && isShowPolling === 'show'"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
@@ -300,6 +300,7 @@
  },
  data() {
    return {
      isShowPolling: sessionStorage.getItem("isShowPolling"),
      mockSceneData: [],
      loading: false,
      Camera: new VideoRuleData(),

 src/pages/cameraAccess/components/SystemInfo.vue

@@ -2,21 +2,21 @@
  <div :class="showClass">
    <div class="card-box">
      <ul>
        <li style="max-width:30px;" v-if="ShowLocalVedio">
        <li style="max-width: 30px" v-if="ShowLocalVedio">
          <div class="total-box">
            <div style="width:100%;margin-top:28px;">
            <div style="width: 100%; margin-top: 28px">
              <div class="top-text">
                <em>{{"总算力"}}</em>
                <em>{{ "总算力" }}</em>
              </div>
              <div class="mid-text">
                <em>{{` ${PollData.channelTotal}`}}</em>
                <em>{{ ` ${PollData.channelTotal}` }}</em>
              </div>
            </div>
          </div>
        </li>
        <li style="max-width:120px" v-if="showRealPoll">
        <li style="max-width: 120px" v-if="showRealPoll">
          <DataStackCard
            style="width:95%"
            style="width: 95%"
            title="实时算力"
            fourTip="故障导致未处理"
            fourIcon="iconicon-test21"
@@ -27,12 +27,15 @@
            :NoDeal="`${PollData.RealTimeNoDeal}路`"
          />
        </li>
        <li style="max-width:120px" v-if="showRealPoll">
        <li
          style="max-width: 120px"
          v-if="showRealPoll && isShowPolling === 'show'"
        >
          <DataStackCard
            title="轮询算力"
            fourTip="等待轮询处理"
            fourIcon="iconicon-test2"
            style="width:95%"
            style="width: 95%"
            :total="`${PollData.PollValidCount}路`"
            :ValidCount="`${PollData.PollSum}路`"
            :InValidCount="`${PollData.PollInvalid}路`"
@@ -40,7 +43,10 @@
            :NoDeal="`${PollData.PollNoDeal}路`"
          />
        </li>
        <li style="max-width:120px" v-if="ShowLocalVedio">
        <li
          style="max-width: 120px"
          v-if="ShowLocalVedio && isShowPolling === 'show'"
        >
          <!-- <local-vedio-card
            title="本地算力"
            style="width:95%"
@@ -50,7 +56,7 @@
          />-->
          <DataStackCard
            title="数据栈算力"
            style="width:95%"
            style="width: 95%"
            fourTip="未知原因导致未处理"
            fourIcon="iconicon-test5"
            :total="`${PollData.stackChannelCount}路`"
@@ -75,18 +81,25 @@
        </li> 
      </ul>
    </div>-->
    <div class="eCharts-box" :style="`width:${liquidWidth}`" v-if="PollData.barCharts.length>0">
      <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
    <div
      class="eCharts-box"
      :style="`width:${liquidWidth}`"
      v-if="PollData.barCharts.length > 0"
    >
      <eChartsBar
        ref="cpuMeneryCharts"
        :xAxisData="PollData.barCharts"
      ></eChartsBar>
    </div>
  </div>
</template>

<script>
import DataStackCard from "@/components/subComponents/DataStackCard"
import BoardCard from "@/components/subComponents/BoardCard"
import LocalVedioCard from "@/components/subComponents/LocalVedioCard"
import LiquidFillChart from "@/components/subComponents/chartLiquid"
import eChartsBar from '@/components/subComponents/eChartsBar'
import DataStackCard from "@/components/subComponents/DataStackCard";
import BoardCard from "@/components/subComponents/BoardCard";
import LocalVedioCard from "@/components/subComponents/LocalVedioCard";
import LiquidFillChart from "@/components/subComponents/chartLiquid";
import eChartsBar from "@/components/subComponents/eChartsBar";

export default {
  name: "SystemInfo",
@@ -97,42 +110,50 @@
  props: {
    showTask: {
      type: Boolean,
      default: false
      default: false,
    },
    showClass: {
      type: String,
      default: 'sysinfo-box flex-box'
      default: "sysinfo-box flex-box",
    },
    ShowLocalVedio: {
      type: Boolean,
      default: false
      default: false,
    },
    showRealPoll: {
      type: Boolean,
      default: true
      default: true,
    },
    marginTop: {
      type: String,
      default: 'ma'
      default: "ma",
    },
    borderWidth: {
      type: String,
      default: '70%'
      default: "70%",
    },
    liquidWidth: {
      type: String,
      default: '30%'
    }
      default: "30%",
    },
  },
  data() {
    return {
      isShowPolling: sessionStorage.getItem("isShowPolling"),
    };
  },
  methods: {
    initCpuCharts() {
      this.$forceUpdate();
    }
    },
  },
  mounted() {
    console.log('PollData.RealTimeValidCount', this.PollData.RealTimeValidCount)
  }
}
    console.log(
      "PollData.RealTimeValidCount",
      this.PollData.RealTimeValidCount
    );
  },
};
</script>
<style lang="scss">
.sysinfo-box {

 src/pages/cameraAccess/components/infoCard.vue

@@ -1,75 +1,117 @@
<template>
    <el-row class="infoCard">
        <el-col :span="8">
            <p>
                <i class="iconfont iconshishichuli"></i><span class="fontClass">实时算力</span>
            </p>
            <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{realtime}}</span></p>
        </el-col>
        <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
        </el-col>
        <el-col :span="8">
            <p>
                <i class="iconfont iconrolling"></i><span class="fontClass">轮询算力</span>
            </p>
            <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{polling}}</span></p>
        </el-col>
        <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
        </el-col>
        <el-col :span="7">
            <p>
                <i class="iconfont iconshuju"></i><span class="fontClass">数据栈算力</span>
            </p>
            <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{dataStack}}</span></p>
        </el-col>
    </el-row>      
  <el-row class="infoCard">
    <el-col :span="8">
      <p>
        <i class="iconfont iconshishichuli"></i
        ><span class="fontClass">实时算力</span>
      </p>
      <p>
        <span
          style="
            color: #f49d37;
            font-family: 'PingFangSC-Regular';
            font-size: 28px;
            font-weight: 600;
          "
          >{{ realtime }}</span
        >
      </p>
    </el-col>
    <el-col
      style="width: 1px; height: 80%; margin-top: 10px; background: #dcdfe6"
    >
    </el-col>
    <el-col :span="8" v-if="isShowPolling === 'show'">
      <p>
        <i class="iconfont iconrolling"></i
        ><span class="fontClass">轮询算力</span>
      </p>
      <p>
        <span
          style="
            color: #f49d37;
            font-family: 'PingFangSC-Regular';
            font-size: 28px;
            font-weight: 600;
          "
          >{{ polling }}</span
        >
      </p>
    </el-col>
    <el-col
      style="width: 1px; height: 80%; margin-top: 10px; background: #dcdfe6"
    >
    </el-col>
    <el-col :span="7">
      <p>
        <i class="iconfont iconshuju"></i
        ><span class="fontClass">数据栈算力</span>
      </p>
      <p>
        <span
          style="
            color: #f49d37;
            font-family: 'PingFangSC-Regular';
            font-size: 28px;
            font-weight: 600;
          "
          >{{ dataStack }}</span
        >
      </p>
    </el-col>
  </el-row>
</template>

<script>
export default {
    props: {
        realtime: {
            type: Number,
            default: 10
        },
        polling: {
            type: Number,
            default: 0
        },
        dataStack: {
            type: Number,
            default: 0
        },
    }
}
  props: {
    realtime: {
      type: Number,
      default: 10,
    },
    polling: {
      type: Number,
      default: 0,
    },
    dataStack: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isShowPolling: sessionStorage.getItem("isShowPolling"),
    };
  },
};
</script>
<style lang="scss">
    .infoCard {
        width: 100%;
        height: 100px;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
        border-radius: 3px;
        i {
            float: left;
            margin-left:10px;
            font-size: 28px;
            font-weight: 600;
            color: #3d68e1;
        }
        p {
            height: 45px;
            line-height: 45px;
            vertical-align: middle
        }
        .fontClass {
            float: left;
            margin-left: 10px;
            font-family: "PingFangSC-Regular";
            text-align: left;
            font-size: 14px;
            color: #222222;
            font-weight: 600;
        }
    }
.infoCard {
  width: 100%;
  height: 100px;
  border: 1px solid #e2e2e2;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  i {
    float: left;
    margin-left: 10px;
    font-size: 28px;
    font-weight: 600;
    color: #3d68e1;
  }
  p {
    height: 45px;
    line-height: 45px;
    vertical-align: middle;
  }
  .fontClass {
    float: left;
    margin-left: 10px;
    font-family: "PingFangSC-Regular";
    text-align: left;
    font-size: 14px;
    color: #222222;
    font-weight: 600;
  }
}
</style>

 src/pages/desktop/index/App.vue

@@ -18,6 +18,7 @@
import { getServerName } from "./api.ts";

import { getApps } from "@/api/app";
import { getDevInfo } from "@/api/login";

import config from "../../../../package.json";

@@ -51,11 +52,12 @@
      if (JSON.parse(sessionStorage.getItem("userInfo"))) {
        return JSON.parse(sessionStorage.getItem("userInfo")).backgroundpic;
      }
      return ""
      return "";
    },
  },
  created() {
    this.getServerName();
    this.getDevInfo();
  },
  mounted() {
    document.getElementById("app").style.backgroundImage = `url(${
@@ -217,6 +219,12 @@
        sessionStorage.setItem("title", res.data.serverName);
      }
    },
    async getDevInfo() {
      const res = await getDevInfo();
      if (res && res.success && res.data.deviceType.substr(0, 2) === "DS") {
        sessionStorage.setItem("isShowPolling", "show");
      }
    },
  },
};
</script>

 vue.config.js

@@ -67,8 +67,8 @@
  // }

});



//const serverUrl = "http://192.168.20.189:7009";

const serverUrl = "http://192.168.20.116:7009";

const serverUrl = "http://192.168.20.189:7009";

//const serverUrl = "http://192.168.20.116:7009";

const iotdataServerUrl = "http://192.168.8.10:9000";



// const cir = require("circular-dependency-plugin");