|  | @@ -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>
 |