录像计划页面

src/api/iot/videoChannelPlan.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+
+// 查询iot服务列表
+export function list(query) {
+  return request({
+    url: '/iot/video/channelPlan/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function channelPlanTimeList(query) {
+  return request({
+    url: '/iot/video/channelPlanTime/detail',
+    method: 'get',
+    params: query
+  })
+}

src/views/iot/videoChannelPlan/channelPlanTimeDialog.vue

@@ -0,0 +1,137 @@
+
+<template>
+  <div class="edu-training-edit">
+    <DialogCom title="通道前端录像配置详情" :visible.sync="isShow" width="1200px" >
+      <div class="page-body">
+        <div class="extend_mod" style="max-height: 500px;">
+          <el-table :data="formData" border style="width: 100%;max-height: 700px;overflow-y: auto;">
+            <el-table-column
+              type="week"
+              label="星期"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ getWeekDesc(scope.row.week)}}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="type"
+              label="计划类型"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ getTypeDesc(scope.row.type)}}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="startTime"
+              label="起始时间"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="endTime"
+              label="结束时间"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="onHide">关闭</el-button>
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import {
+  channelPlanTimeList
+} from "@/api/iot/videoChannelPlan";
+
+export default {
+  name: "IotVideoChannelPlanTime",
+  components: {},
+  dicts: [],
+  data() {
+    return {
+      isShow: false,
+      formData: this.reset(),
+    };
+  },
+  props: {},
+  watch: {},
+  computed: {
+  },
+  methods: {
+    reset() {
+      return {
+        week: null,
+        type: null,
+        startTime: null,
+        endTime: null,
+      };
+    },
+    getWeekDesc(val){
+      switch (val){
+        case 1:
+          return "星期一";
+        case 2:
+          return "星期二";
+        case 3:
+          return "星期三";
+        case 4:
+          return "星期四";
+        case 5:
+          return "星期五";
+        case 6:
+          return "星期六";
+        case 7:
+          return "星期日";
+      }
+    },
+    getTypeDesc(val){
+      //0-定时录像，1-移动侦测录像，2-报警录像，3-移动侦测或报警录像，4-移动侦测和报警录像）
+      switch (val){
+        case 0:
+          return "定时录像";
+        case 1:
+          return "移动侦测录像";
+        case 2:
+          return "报警录像";
+        case 3:
+          return "移动侦测或报警录像";
+        case 4:
+          return "移动侦测和报警录像";
+      }
+    },
+    async refresh(deviceId) {
+      let query = {
+        deviceId: deviceId,
+        week: -1
+      };
+      console.log("11111")
+      console.log("11111:"+query)
+      channelPlanTimeList(query).then(response => {
+        this.formData = response.data;
+        this.loading = false;
+      })
+    },
+    async show(deviceId) {
+      await this.refresh(deviceId);
+      this.isShow = true;
+    },
+    // 事件
+    onHide() {
+      this.isShow = false;
+      this.formData = this.reset();
+    },
+  },
+  mounted() {
+  },
+};
+</script>
+<style lang="scss">
+</style>

src/views/iot/videoChannelPlan/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <div class="main-right-box">
+      <div class="main-search-box">
+        <el-form :model="queryParams" ref="queryForm" 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 label="设备名称" prop="dvsName">
+            <el-input clearable v-model="queryParams.dvsName" placeholder="请输入关键字" maxlength="50"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+
+          <el-form-item label="通道名称" prop="channelName">
+            <el-input clearable v-model="queryParams.channelName" placeholder="请输入关键字" maxlength="50"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+
+<!--          <el-form-item label="设备类型" prop="deviceType" label-width="80">-->
+<!--            <el-select style="width: 100%;" v-model="queryParams.deviceType" placeholder="设备类型"-->
+<!--                       @change="searchChangeSelectDeviceType" clearable>-->
+<!--              <el-option v-for="dict in deviceTypeSelectList" :key="dict.value" :label="dict.label"-->
+<!--                         :value="`${dict.value}`"></el-option>-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+
+<!--          <el-form-item label="网络状态" prop="netStatus" label-width="80" v-if="activeName!='fsu' ">-->
+<!--            <el-select style="width: 100%;" v-model="queryParams.netStatus" placeholder="网络状态"-->
+<!--                       @change="searchChangeSelectNetStatus" clearable>-->
+<!--              <el-option v-for="dict in netStatusList" :key="dict.value" :label="dict.label"-->
+<!--                         :value="`${dict.value}`"></el-option>-->
+<!--            </el-select>-->
+<!--          </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="handleQuery"
+            >搜索</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              icon="el-icon-refresh"
+              size="mini"
+              @click="resetQuery">重置
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch"  @queryTable="getList"></right-toolbar>
+        </el-row>
+      </div>
+      <el-table
+        border
+        height="646"
+        size="small"
+        v-loading="loading"
+        :data="dataList"
+      >
+        <el-table-column label="序号" align="center" min-width="30">
+          <template v-slot:default="scope">
+            <span v-text="getPageIndex(scope.$index)"> </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="设备名称" align="center" prop="dvsName"/>
+        <el-table-column label="通道名称" align="center" prop="channelName" show-overflow-tooltip/>
+        <el-table-column label="设备IP地址" align="center" prop="netAddress"/>
+        <el-table-column label="所属机构" align="center" prop="orgName"/>
+        <el-table-column
+          label="前端录像类型"
+          align="center"
+          prop="planType"
+        >
+          <template slot-scope="scope">
+            {{ getPlanTypeDesc(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="录像检测模板" align="center" prop="templateName" show-overflow-tooltip/>
+        <el-table-column label="前端设备起始时间" align="center" prop="minTime" min-width="100"/>
+        <el-table-column label="前端设备结束时间" align="center" prop="maxTime" min-width="100"/>
+        <el-table-column label="更新时间" align="center" prop="planUpdateTime" show-overflow-tooltip/>
+        <el-table-column label="异常原因" align="center" prop="failRemark">
+          <template slot-scope="scope">
+            {{ scope.row.failRemark || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-detail"
+              @click="showPlanTimeDetail(scope.row)"
+            >查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <channel-plan-time-dialog ref="channelPlanTime"></channel-plan-time-dialog>
+  </div>
+</template>
+
+<script>
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import channelPlanTimeDialog from "./channelPlanTimeDialog.vue"
+import {deptTreeSelect} from "@/api/system/public";
+import {list,} from "@/api/iot/videoChannelPlan";
+
+export default {
+  name: "IotVideoChannelPlanPage",
+  components: {OrgTree, channelPlanTimeDialog },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个停用
+      single: true,
+      //搜索tree
+      deptName: null,
+      // 非多个停用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      inparm: 0,
+      // 【请填写功能名称】表格数据
+      dataList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      dept: {
+        id: null,
+      },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orgId: null,
+        orgName: null,
+        dvsName: null,
+        channelName: null,
+        planType: null,
+        templateName: null,
+        checkSub: true,
+      },
+      //修改新增中的机构树
+      deptOptions: [],
+      selectOrgId: null,
+      defaultKeys: [],
+    };
+  },
+  created() {
+    this.getDeptTree();
+  },
+
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+
+  methods: {
+    getPlanTypeDesc(row) {
+      //'录像计划类型（0：全天定时录像；1：分时段定时录像；2：全天移动侦测；3：混合录像计划）',
+      let val = row.planType;
+      if (val === 0) {
+        return "全天定时录像";
+      } else if (val === 1) {
+        return "分时段定时录像";
+      } else if (val === 2) {
+        return "全天移动侦测";
+      } else if (val === 3) {
+        return "混合录像计划";
+      }
+    },
+    onOrgSelect(node) {
+      this.form.orgPath = node.path;
+      this.form.orgName = node.name;
+    },
+    //切换tab栏刷新数据
+    handleClick() {
+      this.getList();
+    },
+
+    getDefaultOrg(node) {
+      this.queryParams.orgId = node.id;
+      this.getList();
+    },
+    //单选框状态改变
+    checkChange(state) {
+      this.queryParams.checkSub = state;
+      this.getList();
+    },
+    // 节点单击事件
+    clickTreeNode(data) {
+      if (data == null) {
+        return;
+      }
+      this.queryParams.orgId = data.id;
+      this.getList();
+    },
+
+    getPageIndex($index) {
+      //表格序号
+      return (
+        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+      );
+    },
+    /** 查询【请填写功能名称】列表 */
+    getList() {
+      this.loading = true;
+      list(this.queryParams).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+        this.defaultKeys.push(response.data[0].id);
+        this.queryParams.orgId = response.data[0].id;
+        this.selectOrgId = response.data[0].id;
+
+        this.handleQuery();
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.deviceType = null;
+      this.resetForm("queryForm");
+      this.handleClick();
+      this.handleQuery();
+    },
+    showPlanTimeDetail(row) {
+      console.log("id:"+row.deviceId)
+      this.$refs.channelPlanTime.show(row.deviceId);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-checkbox {
+  display: -webkit-box !important;
+}
+</style>