Vent-App/pages/history/Historymodel.vue

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-navbar
      title="历史数据"
      @leftClick="devicemenuShow"
      :safeAreaInsetTop="true"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="list" size="20"> </u-icon>
      </view>
    </u-navbar>
    <!-- 侧边栏 -->
    <view v-show="menushow" class="menupage">
      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
    </view>

    <!-- 历史数据列表页 -->
    <view v-show="!menushow" class="main">
      <view class="u-page">
        <div class="flcard">
          <div class="btns">
            <u-button
              type="primary"
              shape="circle"
              :text="StartTime ? StartTime : '起始时间'"
              @click="dataShow = true"
            ></u-button>
            <u-button
              type="primary"
              shape="circle"
              :text="EndTime ? EndTime : '结束时间'"
              @click="dataShow1 = true"
            ></u-button>
          </div>
          <div class="btns" style="margin-top: 10px">
            <u-button
              type="primary"
              shape="circle"
              :text="deviceName ? deviceName : '选择设备'"
              @click="deviceShow = true"
            ></u-button>
            <u-button
              type="primary"
              shape="circle"
              :text="lable ? lable : '间隔时间'"
              @click="show = true"
            ></u-button>
            <u-button
              type="primary"
              shape="circle"
              text="查询"
              @click="checkHistory"
            ></u-button>
          </div>
          <u-picker
            :show="deviceShow"
            :columns="[devices]"
            @cancel="deviceShow = false"
            @confirm="selectDevice"
            keyName="strinstallpos"
          >
          </u-picker>
          <u-picker
            :show="show"
            :columns="timeColumns"
            @cancel="show = false"
            keyName="label"
            @confirm="selectSkipTime"
          ></u-picker>
          <u-datetime-picker
            :show="dataShow"
            mode="datetime"
            @cancel="dataShow = false"
            @confirm="selectStartTime"
            v-model="dataTime"
          ></u-datetime-picker>
          <u-datetime-picker
            :show="dataShow1"
            mode="datetime"
            @cancel="dataShow1 = false"
            @confirm="selectEndTime"
            v-model="dataTime"
          ></u-datetime-picker>
        </div>
        <u-list>
          <u-list-item
            class="itemback"
            v-for="(item, index) in historyData"
            :key="index"
          >
            <u-row gutter="5" customStyle="margin-bottom: 10px">
              <u-col span="24">
                <u--text :text="item.ginstallpos"></u--text>
              </u-col>
            </u-row>
            <u-row gutter="5" customStyle="margin-bottom: 10px">
              <u-col span="2" style="margin-right: 15rpx">
                <div v-if="item.netStatus == 0" class="error-tag1">
                  <image
                    src="/static/model/connectFalse.svg"
                    alt=""
                    class="icon-style"
                  />
                  <span style="float: right">断开</span>
                </div>
                <div v-else class="success-tag">
                  <image
                    src="/static/model/connectTrue.svg"
                    alt=""
                    class="icon-style"
                  />
                  <span style="float: right">连接</span>
                </div>
              </u-col>
              <u-col span="2">
                <div v-if="item.readData[warnFlag] == 0" class="success-tag">
                  <image
                    src="/static/model/alarmTrue.svg"
                    alt=""
                    class="icon-style"
                  />
                  <span style="float: right">{{ item.readData[warndes] }}</span>
                </div>
                <div v-else class="error-tag">
                  <image
                    src="/static/model/alarmFalse.svg"
                    alt=""
                    class="icon-style"
                  />
                  <span style="float: right">{{ item.readData[warndes] }}</span>
                </div>
              </u-col>
              <u-col span="3"> </u-col>
              <u-col span="5">
                <u--text class="timetext" :text="item.ttime"></u--text>
              </u-col>
            </u-row>
            <view v-if="colums[TabCur + '_monitor'] != null">
              <view
                class="datacard"
                v-for="(showitem, index) in colums[TabCur + '_monitor']"
                :key="index"
                v-show="showitem.appShow == 1"
              >
                <view class="content">
                  <view>
                    <view
                      v-if="
                        showitem.datatype == 1 &&
                        item.readData[showitem.monitorcode] !== null &&
                        item.readData[showitem.monitorcode] !== undefined
                      "
                      class="demo-layout bg-purple-light"
                      style="margin-top: 10rpx; color: #3787fe"
                      >{{ item[showitem.monitorcode] }}</view
                    >
                    <view
                      v-else-if="
                        showitem.datatype == 2 &&
                        item.readData[showitem.monitorcode] !== null &&
                        item.readData[showitem.monitorcode] !== undefined
                      "
                      class="demo-layout bg-purple-light"
                      style="color: #3787fe"
                      >{{ item.readData[showitem.monitorcode] }}</view
                    >
                    <view
                      v-else
                      class="demo-layout bg-purple-light"
                      style="color: #3787fe"
                      >--</view
                    >
                    <view
                      class="demo-layout bg-purple-light"
                      style="margin-top: 10px; color: #677799"
                      >{{ showitem.des }}</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
import DeviceMenu from "./devicemenu/devicemenu.vue";
import api from "@/api/api";
import dayjs from "dayjs";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      colums: {},
      deviceList: {},
      startDate: null,
      endDate: null,
      show: false,
      deviceShow: false,
      dataShow: false,
      dataShow1: false,
      StartTime: "", //起始时间
      EndTime: "", //结束时间
      devices: [], //设备类型数组
      deviceName: "", //设备名称
      timeS: "", //间隔时间
      lable: "", //间隔时间
      timeColumns: [
        [
          {
            label: "1秒",
            value: "1",
          },
          {
            label: "5秒",
            value: "2",
          },
          {
            label: "10秒",
            value: "3",
          },
          {
            label: "30秒",
            value: "4",
          },
          {
            label: "1分钟",
            value: "5",
          },
          {
            label: "10分钟",
            value: "6",
          },
          {
            label: "30分钟",
            value: "7",
          },
          {
            label: "1小时",
            value: "8",
          },
        ],
      ],
      deviceID: "", //设备ID
      deviceType: "", //设备类型
      skip: 8, //时间间隔
      dataTime: dayjs().toDate().format("YYYY-MM-DD HH:mm:ss"),
      historyData: [], //历史数据
    };
  },
  components: {
    DeviceMenu,
  },
  props: ["showColum"],
  watch: {
    showColum(data) {
      this.colums = data;
    },
	menushow(newValue,oldValue){
		console.log('menushow 变化了：', newValue);
	}
  },
  created() {
    this.colums = this.showColum;
    const startTime = new Date(
      new Date(
        new Date().getTime() - 3600 * 1000 * 24 * 30
      ).toLocaleDateString()
    );
    const endTime = new Date();
    this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
    this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
  },
  mounted() {},
  methods: {
    loadData(type) {
      new Promise((resolve, reject) => {
        api
          .getDeviceMonitor({
            devicetype: type,
            pagetype: "normal",
            filterParams: {},
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
              this.curlist = this.deviceList[type];
              this.setData(this.curlist);
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //选择设备选择器  保存对应的id
    setData(data) {
      this.devices = [];
      data.forEach((element) => {
        const deviceObj = {
          id: element.deviceID,
          strinstallpos: element.strinstallpos,
          type: element.deviceType,
        };
        this.devices.push(deviceObj);
      });
    },
    //选择设备  点击确定按钮  保存id
    selectDevice(e) {
      this.deviceID = e.value[0].id;
      this.deviceType = e.value[0].type;
      this.deviceName = e.value[0].strinstallpos;
      this.deviceShow = false;
    },
    //选择起始时间
    selectStartTime(e) {
      const startTime = e.value;
      const formattedTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
      this.StartTime = formattedTime;
      this.dataShow = false;
    },
    //选择起始时间
    selectEndTime(e) {
      const endTime = e.value;
      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
      this.EndTime = formattedTime;
      this.dataShow1 = false;
    },
    //选择间隔时间
    selectSkipTime(e) {
      this.skip = e.value[0].value;
      this.lable = e.value[0].label;
      this.show = false;
    },
    //查询历史数据 getDeviceHistory
    checkHistory() {
      const params = {
        ttime_begin: this.StartTime,
        ttime_end: this.EndTime,
        gdeviceid: this.deviceID,
        skip: this.skip,
        pageNo: 1,
        pageSize: 10000,
        strtype: this.deviceType,
      };
      new Promise((resolve, reject) => {
        api
          .getDeviceHistory(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.historyData = response.data.result.datalist.records;
              this.historyData.forEach((item) => {
                if (item.readData.frontGateOpen == 1) {
                  item.readData.frontGateOpen = "打开";
                } else {
                  item.readData.frontGateOpen = "关闭";
                }
                if (item.readData.rearGateOpen == 1) {
                  item.readData.rearGateOpen = "打开";
                } else {
                  item.readData.rearGateOpen = "关闭";
                }
                if (item.readData.midGateOpen == 1) {
                  item.readData.midGateOpen = "打开";
                } else {
                  item.readData.midGateOpen = "关闭";
                }
              });
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    devicemenuShow(e) {
		this.menushow = !this.menushow;
		console.log( this.menushow,'dainjichengg成都多大事');
    },
    menuClick(id) {
      this.TabCur = id;
      // 显示该分类的数据
      this.curlist = this.deviceList[this.TabCur];
      if (this.curlist == null) {
        this.curlist = [];
      }
      // 选择设备分类，重新获取数据
      this.loadData(this.TabCur);
      this.menushow = false;
    },
  },
  destroyed() {
    // 停止定时器
  },
};
</script>

<style>
.main {
  /* margin-top: 100rpx; */
  display: flex;
  flex-direction: column;
}
.menupage {
  position: absolute;
  z-index: 2;
  top: 40rpx;
  height: calc(100% - 40rpx);
  width: 100%;
}
.btns {
  display: flex;
}
.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.datacard {
  width: 30%;
  margin: 1%;
  float: left;
  height: 100rpx;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.error-tag {
  border-radius: 10%;
  display: inline-block;
  color: #e90000;
  line-height: 50rpx;
  font-size: 14px;
  text-align: center;
  width: 120rpx;
  height: 50rpx;
  background-color: rgba(233, 0, 0, 0.2);
}
.error-tag1 {
  border-radius: 10%;
  display: inline-block;
  color: #696969;
  line-height: 50rpx;
  font-size: 14px;
  text-align: center;
  width: 120rpx;
  height: 50rpx;
  background-color: rgba(105, 105, 105, 0.2);
}
.success-tag {
  border-radius: 10%;
  color: #42c000;
  line-height: 50rpx;
  font-size: 14px;
  width: 120rpx;
  height: 50rpx;
  display: inline-block;
  background-color: rgba(226, 250, 214);
}
.icon-style {
  margin: 15rpx;
  width: 14px;
  height: 14px;
}
</style>