实时数据查询

whyczyk

2021-09-30 a6cf5353e907767fd16d7fd37e033794321eebaf

 src/pages/real-monitoring.vue

@@ -99,6 +99,40 @@
            </div>
         </div>

         <div class="card">
            <div class="commonTitle cardTitle">均衡供电</div>
            <div class="listCon">
               <div class="item">
                  {{otherTable[0].value}}
                  <div class="title">
                     版本号
                  </div>
               </div>
               <div class="item">
                  {{otherTable[1].value}}℃
                  <div class="title">
                     温度(℃)
                  </div>
               </div>
               <div class="item">
                  {{eleTable[0].value}}A
                  <div class="title">
                     总电流(A)
                  </div>
               </div>
               <div class="item">
                  {{totolTable[0].value}}V
                  <div class="title">
                     总电压(V)
                  </div>
               </div>
            </div>
            <div class="chartWarp">
               <progress-block-vertical-bar ref="outputVolList"></progress-block-vertical-bar>
            </div>

         </div>

      </div>
      <van-popup v-model="showPopup" round position="bottom">
         <van-cascader v-model="cascaderValue" title="请选择站点电池组" :options="options" active-color="#4b88f9" @change="onChange" @close="showPopup = false" @finish="onFinish" />
@@ -114,8 +148,10 @@
   realTimeAlarm,
   realTimeSearch,
   realTimeGroup,
   JhStateActionSerchByCondition,
} from "@/assets/js/api"
import BarChart from "@/components/chart/BarChart";
import progressBlockVerticalBar from "@/components/chart/progress-block-vertical-bar";
import getMarkLineData from "@/components/chart/js/getMarkLineData";
let vol, resChart, temp, conduct, currChart, leakVol;
let tblData = [];
@@ -140,10 +176,99 @@
         },
         batt: {},
         timer: new this.$units.Timeout('movingRingSystemRealTime'),
         totolTable: [
            {
               key: "input_vol_total",
               name: "总输入电压",
               value: 0,
            },
            {
               key: "output_vol_total",
               name: "总输出电压",
               value: 0,
            },
         ],
         volTable: [
            {
               key: "output_vol_one",
               name: "输出电压1",
               value: 0,
            },
            {
               key: "output_vol_two",
               name: "输出电压2",
               value: 0,
            },
            {
               key: "output_vol_three",
               name: "输出电压3",
               value: 0,
            },
            {
               key: "output_vol_four",
               name: "输出电压4",
               value: 0,
            },
            {
               key: "output_vol_five",
               name: "输出电压5",
               value: 0,
            },
            {
               key: "output_vol_six",
               name: "输出电压6",
               value: 0,
            },
            {
               key: "output_vol_seven",
               name: "输出电压7",
               value: 0,
            },
            {
               key: "output_vol_eight",
               name: "输出电压8",
               value: 0,
            },
            {
               key: "output_vol_nine",
               name: "输出电压9",
               value: 0,
            },
            {
               key: "output_vol_ten",
               name: "输出电压10",
               value: 0,
            },
         ],
         eleTable: [
            {
               key: "input_curr_total",
               name: "总输入电流",
               value: 0,
            },
            {
               key: "output_curr_total",
               name: "总输出电流",
               value: 0,
            },
         ],
         otherTable: [
            {
               key: "dev_version",
               name: "版本号",
               value: "???",
            },
            {
               key: "dev_temp",
               name: "温度",
               value: "???",
            },
         ],
      }
   },
   components: {
      BarChart,
      progressBlockVerticalBar,
   },
   computed: {
      backInputs() {
@@ -191,6 +316,73 @@
      },
   },
   methods: {
      //定时器
      startTimer() {
         this.timer.start(() => {
            this.$axios
               .all([
                  this.realTimeSearch(),
                  this.realTimeGroupss(),
                  this.search(),
               ])
               .then(() => {
                  this.timer.open();
               })
               .catch(() => {
                  this.timer.open();
               });
         }, 3000);
      },
      search() {
         JhStateActionSerchByCondition({
            dev_id: this.batt.FBSDeviceId,
         })
            .then((res) => {
               let resData = JSON.parse(res.data.result);
               if (resData.code == 1) {
                  let dataObj = resData.data[0];
                  for (let key in dataObj) {
                     this.totolTable.map((item) => {
                        if (item.key == key) {
                           item.value = dataObj[key];
                        }
                     });
                     this.volTable.map((item) => {
                        if (item.key == key) {
                           item.value = dataObj[key];
                        }
                     });
                     this.eleTable.map((item) => {
                        if (item.key == key) {
                           item.value = dataObj[key];
                        }
                     });
                     this.otherTable.map((item) => {
                        if (item.key == key) {
                           item.value = dataObj[key];
                        }
                     });
                  }
               }
               // 设置输出电压柱状图
               this.$refs.outputVolList.setData({
                  title: {
                     show: true,
                     text: "输出电压",
                     x: "center",
                     textStyle: {
                        fontSize: "14",
                        color: '#323233'
                     }
                  },
                  name: "输出电压",
                  list: this.volTable,
               });
            })
            .catch((err) => {
               console.log(err);
            });
      },
      //查询电池组信息
      getBattGroupInfo(BattGroupId) {
         getBattGroupInfo(BattGroupId).then(res => {
@@ -269,21 +461,6 @@
               break;
            }
         }
      },
      startTimer() {
         this.timer.start(() => {
            this.$axios
               .all([
                  this.realTimeSearch(),
                  this.realTimeGroupss(),
               ])
               .then(() => {
                  this.timer.open();
               })
               .catch(() => {
                  this.timer.open();
               });
         }, 3000);
      },
      /* echars图表 */
      realTimeSearch() {
@@ -699,4 +876,33 @@
   width: 100%;
   height: 500px;
}

.listCon {
   width: 100%;
   height: 178px;
   border-bottom: 2px solid #eeeeee;
   display: flex;
   align-items: center;
   justify-content: space-around;
   position: relative;
   margin-bottom: 22px;
}

.listCon .item {
   font-size: 36px;
   font-family: DINAlternate-Bold, DINAlternate;
   font-weight: bold;
   color: #4b88f9;
   line-height: 56px;
   text-align: center;
}

.listCon .item .title {
   font-size: 28px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
   line-height: 40px;
   margin-top: 8px;
}
</style>