完善录像诊断详情

src/api/iot/videoDiagnosis.js

@@ -16,3 +16,11 @@ export function detail(hostCode, channelCode) {
     method: "get",
   });
 }
+
+// 查询详情
+export function integrity(hostCode, channelCode,date) {
+  return request({
+    url: `/iot/VideoDiagnosis/web/integrity/${hostCode}/${channelCode}/${date}`,
+    method: "get",
+  });
+}

src/views/iot/subSystem/dialog.edit.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="rule-type">
+    <DialogCom
+      :title="id ? '编辑报警控制器' : '新增报警控制器'"
+      :visible.sync="isShow"
+      @close="onHide"
+      width="500px"
+    >
+      <div class="page-body">
+        <el-form
+          :model="formData"
+          :rules="formDataRules"
+          size="small"
+          ref="form"
+          label-position="right"
+          label-width="150px"
+          label-prefix=":"
+        >
+          <el-form-item label="所属机构" prop="orgId">
+            <orgDropDown
+              v-model="formData.orgId"
+              placeholder="选择所属机构"
+              @select="onOrgSelect"
+            />
+          </el-form-item>
+          <el-form-item label="报警主机" prop="alarmHostId">
+            <el-select
+              label="报警主机"
+              v-model="formData.alarmHostId"
+              placeholder="请选择报警主机"
+              clearable
+              style="width: 310px"
+            >
+              <el-option
+                v-for="host in alarmHostOptions"
+                :key="host.id"
+                :label="host.name"
+                :value="host.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="name" label="报警控制器名称:">
+            <el-input
+              v-model="formData.name"
+              :maxlength="50"
+              name="name"
+              placeholder="请输入报警控制器名称"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item prop="type" label="24小时报警控制器:">
+            <el-switch
+              v-model="formData.allHour"
+              :active-value="1"
+              :inactive-value="0"
+            >
+            </el-switch>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="isShow = false">取消</el-button>
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapGetters } from "vuex";
+import * as api from "@/api/resumption/protection";
+import { listIdName } from "@/api/system/device";
+import orgDropDown from "../../../components/orgTree/orgDropDown.vue";
+export default {
+  data() {
+    return {
+      id: null,
+      isShow: false,
+      formData: this.reset(),
+      alarmHostOptions: [],
+      // 机构树选项
+      formDataRules: {
+        orgId: [{ required: true, message: "请选择所属机构" }],
+        name: [{ required: true, message: "请输入报警控制器名称" }],
+        alarmHostId: [{ required: true, message: "请选择报警主机" }],
+      },
+    };
+  },
+  props: {},
+  watch: {
+    // "formData.orgId":{
+    //   handler(v){
+    //     console.info("formData.orgId",v)
+    //   }
+    // }
+  },
+  computed: {
+    ...mapGetters(["orgId"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    reset() {
+      return {
+        id: null,
+        orgId: null,
+        orgPath: null,
+        orgName: null,
+        name: null,
+        allHour: 0,
+        alarmHostId: null,
+      };
+    },
+    async refresh(id, other) {
+      this.formData = id ? (await api.get(id)).data : this.reset(other);
+    },
+    async show(id, other = {}) {
+      this.id = id;
+      await this.refresh(id, other);
+      this.isShow = true;
+    },
+
+    // 事件
+    onHide() {
+      this.$refs.form.resetFields();
+      this.formData = this.reset();
+    },
+    onSubmit() {
+      this.$refs.form.validate(async (isValidate) => {
+        if (!isValidate) return;
+        await api.update(this.formData);
+        this.$emit("success");
+        this.isShow = false;
+      });
+    },
+    onOrgSelect(node) {
+      // console.info(node)
+      this.formData.orgPath = node.path;
+      this.formData.orgName = node.shortName;
+      listIdName({ orgId: node.id, deviceType: 1, assetType: 2 }).then((d) => {
+        this.alarmHostOptions = d.data;
+        if (!d.data.find((i) => i.id == this.formData.alarmHostId)) {
+          this.formData.alarmHostId = null;
+        }
+      });
+    },
+  },
+  created() {},
+  mounted() {},
+  components: { orgDropDown },
+};
+</script>
+
+<style lang="scss" scoped>
+.brand_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
+  }
+}
+</style>

src/views/iot/subSystem/dialog.history.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="device-info">
+    <DialogCom
+      title="布撤防历史"
+      :visible.sync="isShow"
+      width="1200px"
+      @close="close"
+    >
+      <div class="page-body">
+        <el-descriptions
+          class="margin-top"
+          :column="2"
+          size="medium"
+          border
+          :contentStyle="content_style"
+          :label-style="labelStyle"
+        >
+          <el-descriptions-item labelClassName="gx_info_label" label="所属机构：">
+            {{ protection.orgName }}
+          </el-descriptions-item>
+          <el-descriptions-item labelClassName="gx_info_label" label="报警控制器名称：">
+            {{ protection.name }}
+          </el-descriptions-item>
+          <!-- <el-descriptions-item labelClassName="gx_info_label" label="24小时报警控制器：">
+            {{ protection.allHour ? "是" : "否" }}
+          </el-descriptions-item> -->
+         
+        </el-descriptions>
+         <div>
+          <!-- <div style="margin-bottom: 20px">
+            <span> 所属机构：</span>
+            <span>{{ protection.orgName }}</span>
+          </div>
+          <div style="margin-bottom: 20px">
+            <span>报警控制器名称：</span>
+            <span>{{ protection.name }}</span>
+          </div>
+          <div style="margin-bottom: 20px">
+            <span> 24小时报警控制器：</span>
+            <span>{{ protection.allHour ? "是" : "否" }}</span>
+          </div> -->
+          <div style="margin-bottom: 20px">
+            <span>上报时间范围：</span>
+            <DataRangePicker
+              v-model="queryParams.updateTime"
+              key="daterange"
+              type="daterange"
+              clearable
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </DataRangePicker>
+          </div>
+          <div class="extend_mod">
+            <el-table :data="tableData" border style="width: 100%">
+            <el-table-column
+              type="index"
+              label="序号"
+              width="60"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="statusText"
+              label="报警控制器状态"
+              align="center"
+              ><template slot-scope="r">
+                {{ getLabel(statusDict, r.row.status,"未知") }}
+              </template></el-table-column
+            >
+            <el-table-column
+              prop="updateTime"
+              label="布撤防登记时间"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="statusUpdatorName"
+              label="登记人"
+            ></el-table-column>
+          </el-table>
+          </div>
+        
+          <div style="margin-top: 20px; text-align: right">
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div> 
+      </div>
+
+      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
+        <el-button @click="onHide">关闭</el-button>
+        <!--<el-button type="primary" @click="onSubmit">确定</el-button> -->
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/resumption/protection";
+import { getLabel } from "./../../commonOption";
+import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
+export default {
+  data() {
+    const params = this.$route.params;
+    return {
+      id: params ? params.id : null,
+      isShow: false,
+      protection: {},
+      tableData: [],
+      queryParams: this.resetSearch(),
+      total: 1,
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
+      },
+      content_style: {
+        "text-align": "left",
+        "min-width": "300px",
+        "word-break": "break-all",
+      },
+    };
+  },
+  props: {
+    statusDict: {
+      type: Array,
+    },
+  },
+  watch: {
+    "queryParams.updateTime": {
+      deep: true,
+      handler(v) {
+        this.refresh();
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    getLabel,
+    async refresh() {
+      this.pageNum = 1;
+      this.getList();
+    },
+    async getList() {
+      await api.history(this.queryParams).then((v) => {
+        this.tableData = v.rows;
+        this.total = v.total;
+      });
+    },
+    onHide() {
+      this.isShow = false;
+    },
+    close() {
+      this.queryParams = this.resetSearch();
+      this.tableData = [];
+      this.total = 0;
+    },
+    async show(protection) {
+      this.protection = protection;
+      this.queryParams = this.resetSearch();
+      this.queryParams.protectionId = protection.id;
+      await this.refresh();
+      this.isShow = true;
+    },
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val;
+      this.getList();
+    },
+    resetSearch() {
+      return {
+        pageNum: 1,
+        pageSize: 10,
+        protectionId: null,
+        updateTime: [new Date(new Date() - 3600 * 1000 * 24 * 90), new Date()],
+      };
+    },
+    // 事件
+    //apimark//
+  },
+  created() {},
+  mounted() {},
+  components: {
+    DataRangePicker,
+    // EditAttribute,
+  },
+};
+</script>
+
+<style lang="scss" >
+
+.device_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
+  }
+}
+</style>

src/views/iot/subSystem/index.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <!--机构数据-->
+      <!-- <el-col :span="4" :xs="24">
+        <org-tree
+          v-model="queryParams.orgId"
+          @defaultOrg="getDefaultOrg"
+          @checkChange="checkChange"
+          @click="clickTreeNode"
+        ></org-tree>
+      </el-col> -->
+
+      <el-col :span="24" :xs="24">
+        <div class="main-right-box">
+          <!--    搜索条件    -->
+          <div class="main-search-box">
+            <el-form
+              :model="queryParams"
+              ref="search"
+              size="small"
+              :inline="true"
+              v-show="showSearch"
+            >
+              <el-form-item label="所属机构">
+                <org-tree
+                  v-model="queryParams.orgId"
+                  @defaultOrg="getDefaultOrg"
+                  @checkChange="checkChange"
+                  @click="clickTreeNode"
+                  ref="orgTree"
+                ></org-tree>
+              </el-form-item>
+              <el-form-item prop="key" label="报警控制器名称">
+                <el-input
+                  v-model="queryParams.key"
+                  :maxlength="50"
+                  placeholder="请输入报警控制器名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item prop="status" label="报警控制器状态">
+                <el-select
+                  label="报警控制器状态"
+                  v-model="queryParams.status"
+                  placeholder="请选择报警控制器状态"
+                  clearable
+                >
+                  <el-option
+                    v-for="dict in dict.type.protection_status"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item prop="dateRange" label="布撤防登记时间">
+                <DataRangePicker
+                  v-model="queryParams.dateRange"
+                  key="daterange"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </DataRangePicker>
+              </el-form-item>
+            </el-form>
+
+            <!--    按纽    -->
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  size="mini"
+                  @click="getList"
+                  v-hasPermi="['device:protection']"
+                  >搜索</el-button
+                >
+                <el-button
+                  type="primary"
+                  icon="el-icon-refresh"
+                  size="mini"
+                  @click="resetQuery"
+                  >重置</el-button
+                >
+                <!-- <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  size="mini"
+                  @click="handleAdd()"
+                  v-hasPermi="['device:protection:add']"
+                  >新增</el-button
+                > -->
+                <el-button
+                  type="primary"
+                  icon="el-icon-download"
+                  size="mini"
+                  @click="handleExport()"
+                  v-hasPermi="['device:protection']"
+                  >导出数据</el-button
+                >
+              </el-col>
+              <right-toolbar
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+              ></right-toolbar>
+            </el-row>
+          </div>
+          <el-table
+            size="small"
+            border
+            v-loading="loading"
+            :data="pageData"
+            @selection-change="handleSelectionChange"
+            height="594"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="60"
+              v-if="columns[0].visible"
+            >
+              <template slot-scope="scope">
+                {{
+                  (queryParams.pageNum - 1) * queryParams.pageSize +
+                  scope.$index +
+                  1
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="orgName"
+              label="所属机构"
+              v-if="columns[1].visible"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="name"
+              label="报警控制器名称"
+              show-overflow-tooltip
+              v-if="columns[2].visible"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="status"
+              label="报警控制器状态"
+              width="150"
+              v-if="columns[3].visible"
+            >
+              <template slot-scope="r"
+                >{{
+                  getLabel(dict.type.protection_status, r.row.status, "未知")
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="statusUpdatorName"
+              label="登记人"
+              show-overflow-tooltip
+              width="150"
+              v-if="columns[4].visible"
+            >
+              <template slot-scope="r">
+                <span v-if="r.row.statusUpdateTime != null">
+                  {{
+                    r.row.statusUpdatorName
+                      ? r.row.statusUpdatorName
+                      : "自动获取"
+                  }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="statusUpdateTime"
+              label="最近登记时间"
+              width="150"
+              v-if="columns[5].visible"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="statusChangeTime"
+              label="布撤防时间"
+              width="150"
+              v-if="columns[5].visible"
+            >
+            </el-table-column>
+            <el-table-column align="center" label="操作">
+              <template slot-scope="r">
+                <!-- <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit-outline"
+                @click="updateStatus(r.row.id, 1)"
+                v-hasPermi="['device:protectionstatus:maintain']"
+                >布防</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit-outline"
+                @click="updateStatus(r.row.id, 0)"
+                v-hasPermi="['device:protectionstatus:maintain']"
+                >撤防</el-button
+              > -->
+                <!-- <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit-outline"
+                  @click="onEdit(r.row.id)"
+                  v-hasPermi="['device:protection:edit']"
+                  >编辑</el-button
+                > -->
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-document-copy"
+                  @click="onHistory(r.row)"
+                  v-hasPermi="['device:protection']"
+                  >布撤防历史</el-button
+                >
+                <!-- <el-popconfirm
+                  @confirm="onDel(r.row.id)"
+                  title="点击确定删除报警控制器"
+                >
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    v-hasPermi="['device:protection:remove']"
+                    slot="reference"
+                    >删除</el-button
+                  >
+                </el-popconfirm> -->
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <dialog-edit
+      ref="editDialog"
+      @success="getList()"
+      :orgTypeOptions="dict.type.sys_org_type"
+      :ruleTypeOptions="dict.type.rule_type"
+    ></dialog-edit>
+    <dialog-history
+      ref="historyDialog"
+      :statusDict="dict.type.protection_status"
+    ></dialog-history>
+  </div>
+</template>
+
+<script>
+// import OrgTree from "@/components/orgTree";
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import DialogEdit from "./dialog.edit";
+import DialogHistory from "./dialog.history";
+import * as api from "@/api/resumption/protection";
+import { getLabel } from "./../../commonOption";
+import { mapGetters } from "vuex";
+import dayjs from "dayjs";
+import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
+export default {
+  name: "protection",
+  dicts: ["protection_status"],
+  components: {
+    DialogEdit,
+    OrgTree,
+    DialogHistory,
+    DataRangePicker,
+  },
+  data() {
+    const { params, query } = this.$route;
+    return {
+      isShow: false,
+      loading: false,
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      total: 0,
+      selectedOrgName: null,
+      queryParams: {
+        orgId: null,
+        checkSub: true,
+        key: null,
+        status: null,
+        dateRange: null,
+        pageNum: 1,
+        pageSize: 10,
+        ...query,
+      },
+      pageData: [],
+      // 列信息
+      columns: [
+        { key: 0, label: `序号`, visible: true },
+        { key: 1, label: `所属机构`, visible: true },
+        { key: 2, label: `报警控制器名称`, visible: true },
+        { key: 3, label: `报警控制器状态`, visible: true },
+        { key: 4, label: `登记人`, visible: true },
+        { key: 5, label: `最近登记时间`, visible: true },
+      ],
+    };
+  },
+  props: {},
+  watch: {},
+  computed: {
+    ...mapGetters(["orgId", "orgName"]),
+  },
+  methods: {
+    getLabel,
+    getList() {
+      this.loading = true;
+      this.pageData = [];
+      api
+        .list(this.queryParams)
+        .then((response) => {
+          this.pageData = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    handleAdd(id, other = {}) {
+      this.$refs.editDialog.show(id, other);
+    },
+    handleExport() {
+      if (this.total == 0) {
+        this.$message.error({
+          message: `无可用数据导出！`,
+          type: "error",
+          duration: 2000,
+        });
+        return;
+      }
+
+      this.download(
+        "/core/resumption/protection/export",
+        {
+          ...this.queryParams,
+        },
+        `${this.selectedOrgName}-布撤防情况跟踪-${dayjs(new Date()).format(
+          "YYYYMMDD"
+        )}.xlsx`
+      );
+    },
+    onEdit(id, other = {}) {
+      this.$refs.editDialog.show(id, other);
+    },
+    onHistory(row) {
+      this.$refs.historyDialog.show(row);
+    },
+    async onDel(id) {
+      let b = (await api.del(id)).data;
+      if (b) {
+        this.$message.info("删除成功");
+      }
+
+      this.getList();
+    },
+    updateStatus(id, status) {
+      api.updateStatus(id, status).then((r) => {
+        this.$message.info("更新状态成功");
+        this.getList();
+      });
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.userId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("search");
+      this.queryParams.dateRange = null;
+      this.queryParams.orgId = this.orgId;
+      this.selectedOrgName = this.orgName;
+      this.queryParams.checkSub = true;
+      this.$refs["orgTree"].setCheckSub(this.queryParams.checkSub);
+      // this.queryParams.orgId = undefined;
+      // this.$refs.tree.setCurrentKey(null);
+      this.getList();
+    },
+    //单选框状态改变
+    checkChange(state) {
+      this.queryParams.checkSub = state;
+      this.getList();
+    },
+    getDefaultOrg(node) {
+      this.queryParams.orgId = node.id;
+      this.selectedOrgName = node.shortName;
+      this.getList();
+    },
+    // 节点单击事件
+    clickTreeNode(data) {
+      this.queryParams.orgId = data.id;
+      this.selectedOrgName = data.shortName;
+      this.getList();
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+/* .search_key{
+  ::v-deep .el-form-item__label{
+    width:60px !important;
+  }
+} */
+</style>

src/views/iot/videoDiagnosis/Calendar.vue

@@ -7,7 +7,10 @@
       :is-expanded="layout.isExpanded"
       :attributes="attrs"
       :min-date="startDate ? new Date(startDate) : new Date()"
-      :max-date="new Date()"
+      :max-date="new Date()"    
+      v-model="selectedDate"
+      @dayclick="onSelect"
+
     />
   </div>
 </template>
@@ -18,6 +21,7 @@ export default {
   name: "Calendar",
   data() {
     return {
+      selectedDate:this.defaultSelectedDate,
       layout: {
         columns: 3,
         rows: 2,
@@ -100,6 +104,9 @@ export default {
       isRequired: true,
       type: Array,
     },
+    defaultSelectedDate:{
+      type:Object
+    }
   },
   computed: {
     calendarWidth() {
@@ -120,7 +127,7 @@ export default {
       handler: function (v) {
         this.setLayout(v);
       },
-    },
+    },    
   },
   mounted() {
     this.init();
@@ -149,6 +156,9 @@ export default {
         this.layout.rows = Math.ceil(diff / 3);
       }
     },
+    onSelect(data){
+      this.$emit("select",data.date)
+    }
   },
 };
 </script>

src/views/iot/videoDiagnosis/ProgressBar.vue

@@ -105,8 +105,10 @@ export default {
             prevEnd = endStamp;
           }
 
-          this.clearCanvas();
-          this.initCanvas();
+          if (this.ctx) {
+            this.clearCanvas();
+            this.initCanvas();
+          }
         }
       },
     },
@@ -142,7 +144,7 @@ export default {
           }
         }
 
-        this.lostVideo=lostVideo;
+        this.lostVideo = lostVideo;
       },
     },
     // startTime(){ //不用
@@ -308,7 +310,7 @@ export default {
     },
     // 清除画布
     clearCanvas: function () {
-      this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
+      this.ctx && this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
     },
     // 获取鼠标x位置
     get_cursor_x_position: function (e) {

src/views/iot/videoDiagnosis/detail.vue

@@ -146,7 +146,7 @@
         border
         :label-style="labelStyle"
         :contentStyle="content_style"
-        v-if="data.integrity == null || data.integrity.state == null"
+        v-if="integrity == null || integrity.state == null"
       >
         <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
       </el-descriptions>
@@ -159,18 +159,18 @@
           :contentStyle="content_style"
         >
           <el-descriptions-item label="检测结果">{{
-            getLabel(videoIntegrityState, data.integrity.state)
+            getLabel(videoIntegrityState, integrity.state)
           }}</el-descriptions-item>
           <el-descriptions-item label="录像日期">{{
-            dayjs(data.integrity.recordDate).format("YYYY年M月D日")
+            dayjs(integrity.recordDate).format("YYYY年M月D日")
           }}</el-descriptions-item>
           <el-descriptions-item label="丢失时长">{{
-            data.integrity.loseDuration == 0
+            integrity.loseDuration == 0
               ? "未丢失"
-              : data.integrity.loseDuration + "分钟"
+              : integrity.loseDuration + "分钟"
           }}</el-descriptions-item>
           <el-descriptions-item label="更新时间">{{
-            dayjs(data.integrity.updateTime).format("YYYY年M月D日H时m分")
+            dayjs(integrity.updateTime).format("YYYY年M月D日H时m分")
           }}</el-descriptions-item>
         </el-descriptions>
         <el-descriptions :column="1">
@@ -193,7 +193,6 @@
                 <i class="legend" style="background-color: red"></i>
                 <span>无录像</span>
               </li>
-              
             </ul>
           </el-descriptions-item>
         </el-descriptions>
@@ -294,6 +293,7 @@
             :full="data.storage.fullDates"
             :paritialLoss="data.storage.partialLossDates"
             :allLoss="data.storage.allLostDates"
+            @select="onSelectDate"
           ></Calendar>
         </div>
       </div>
@@ -310,6 +310,7 @@ import Calendar from "./Calendar.vue";
 import dayjs from "dayjs";
 import { detail } from "@/api/iot/videoDiagnosis.js";
 import { getLabel } from "@/views/commonOption.js";
+import { integrity } from "@/api/iot/videoDiagnosis";
 
 export default {
   components: { TimeLine, ProgressBar, Calendar },
@@ -318,10 +319,11 @@ export default {
       src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
       isShow: false,
       data: {},
+      integrity: {},
       id: null,
       // playVideoObj: {}, //选中的正在播放的录像
       timeCells: [], //录像时间块
-      lostData:[], //不存在视频的时间块
+      lostData: [], //不存在视频的时间块
       // start_timestamp: new Date().getTime() - 5 * 60 * 60 * 1000, //刻度轴开始时间
       labelStyle: {
         color: "#000",
@@ -344,34 +346,52 @@ export default {
     async show(hostCode, channelCode) {
       detail(hostCode, channelCode).then((r) => {
         let data = r.data;
-
+        data.hostCode=hostCode;
+        data.channelCode=channelCode;
         // this.data.storage.fullDates=["2024-02-15","2024-02-16","2024-02-17","2024-02-18","2024-02-19"]
         // this.data.storage.partialLossDates=["2024-02-5","2024-02-6","2024-02-7","2024-02-8","2024-02-9"]
         // this.data.storage.allLostDates=["2024-02-10","2024-02-11","2024-02-12","2024-02-13","2024-02-14"]
-        if (data.integrity && data.integrity.recordDate) {
-          let recordDateStr = dayjs(data.integrity.recordDate).format(
-            "YYYY-MM-DD"
-          );
-          if (data.integrity.checks) {
-            this.timeCells = data.integrity.checks.map(
-              (d) =>({beginTime: `${recordDateStr} ${d.st}`,endTime: `${recordDateStr} ${d.et}`})
-            );
-          }
-
-          if (data.integrity.losts) {
-            this.lostData = data.integrity.losts.map(
-              (d) =>({beginTime: `${recordDateStr} ${d.st}`,endTime: `${recordDateStr} ${d.et}`})
-            );
-          }
-        }
-
+        this.handleInterity(data.integrity);
         this.data = data;
         this.isShow = true;
       });
     },
+    getIntegrity(hostCode, channelCode, date) {
+      integrity(hostCode, channelCode, dayjs(date).format("YYYY-MM-DD")).then((r) => {
+        
+        this.handleInterity(r.data);
+      });
+    },
+    handleInterity(integrity) {
+      this.integrity = integrity;
+      let timeCells = [];
+      let lostData = [];
+      if (integrity && integrity.recordDate) {
+        let recordDateStr = dayjs(integrity.recordDate).format("YYYY-MM-DD");
+        if (integrity.checks) {
+          timeCells = integrity.checks.map((d) => ({
+            beginTime: `${recordDateStr} ${d.st}`,
+            endTime: `${recordDateStr} ${d.et}`,
+          }));
+        }
+
+        if (integrity.losts) {
+          lostData = integrity.losts.map((d) => ({
+            beginTime: `${recordDateStr} ${d.st}`,
+            endTime: `${recordDateStr} ${d.et}`,
+          }));
+        }
+      }
+
+      this.timeCells = timeCells;
+      this.lostData = lostData;
+    },
     onHide() {
       this.isShow = false;
     },
+    onSelectDate(date) {
+      this.getIntegrity(this.data.hostCode,this. data.channelCode, date);
+    },
   },
 };
 </script>