fuliqi
2024-03-26 f4cf3f1acf2582b87bb7e7ca87ebc29341c9ea8b
src/views/system/video/index.vue
@@ -24,8 +24,16 @@
              <p>异常数</p >
            </div>
            <div class="dashboard-item">
              <h3 style="color: #7868d9">{{ totalViews }}</h3>
              <h3>{{ totalViews }}</h3>
              <p>生成异常工单数</p >
            </div>
            <div class="dashboard-item">
              <h3>{{ noStore }}</h3>
              <p>无存储</p >
            </div>
            <div class="dashboard-item">
              <h3>{{ partStore }}</h3>
              <p>部分存储</p >
            </div>
            <div class="dashboard-item">
              <h3>{{ viewsPercentage }}%</h3>
@@ -37,13 +45,29 @@
    </el-card>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备名称" prop="name">
      <el-form-item label="关键字" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入设备名称"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="区域" prop="onState">
        <el-select
          v-model="queryParams.address"
          placeholder="请选择区域"
          clearable
        >
          <el-option label="自贡市" value="自贡市"/>
          <el-option label="沿滩区" value="沿滩区"/>
          <el-option label="大安区" value="大安区"/>
          <el-option label="贡井区" value="贡井区"/>
          <el-option label="自流井区" value="自流井区"/>
          <el-option label="高新区" value="高新区"/>
          <el-option label="荣县" value="荣县"/>
          <el-option label="富顺县" value="富顺县"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="onState">
        <el-select
@@ -75,6 +99,7 @@
         />
         </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -91,29 +116,31 @@
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备编码" align="center" prop="serialNumber" />
      <el-table-column label="设备名称" align="center" prop="name" />
      <el-table-column label="上报部门" align="center" prop="deptName" />
      <el-table-column label="设备状态" align="center" prop="onState">
      <el-table-column type="selection" align="center" />
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="标签" align="center" prop="tag" width="180" v-if="columns[0].visible"/>
      <el-table-column label="区域" align="center" prop="region" width="180" v-if="columns[1].visible"/>
      <el-table-column label="设备状态" align="center" prop="onState" v-if="columns[2].visible">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/>
      </template>
      </el-table-column>
      <el-table-column label="地址" align="center" prop="address" />
      <el-table-column label="是否生成异常工单" align="center" prop="defaultOrder">
      <el-table-column label="是否生成异常工单" align="center" prop="defaultOrder" width="180" v-if="columns[3].visible">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.platform_yes_no" :value="scope.row.defaultOrder"/>
      </template>
      </el-table-column>
      <el-table-column label="异常原因" align="center" prop="reason" />
      <el-table-column label="安装时间" align="center" prop="installedTime" width="180"/>
      <el-table-column label="管理单位" align="center" prop="managementUnit" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <el-table-column label="数据时间" align="center" prop="installedTime" width="180" v-if="columns[4].visible"/>
      <el-table-column label="管理单位" align="center" prop="managementUnit" width="180" v-if="columns[5].visible"/>
      <el-table-column label="信令时延(ms)" align="center" prop="sipDelay" width="180" v-if="columns[6].visible"/>
      <el-table-column label="视频时延(ms)" align="center" prop="videoDelay" width="180" v-if="columns[7].visible"/>
      <el-table-column label="关键帧时延(ms)" align="center" prop="iframeDelay" width="180" v-if="columns[8].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
@@ -140,14 +167,14 @@
          <el-col :span="12">
            <el-form-item label="设备编码:">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="设备名称:">{{ form.name }} </el-form-item>
            <el-form-item label="上报部门:">{{ form.deptName }} </el-form-item>
            <el-form-item label="标签:">{{ form.tag }} </el-form-item>
            <el-form-item label="区域:">{{ form.region }} </el-form-item>
            <el-form-item label="设备状态:">
              <div v-if="form.onState === 1">可用</div>
              <div v-else-if="form.onState === 2">不可用</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址:">{{ form.address }}</el-form-item>
            <el-form-item label="是否生成异常工单:">
              <div v-if="form.defaultOrder === 1">是</div>
              <div v-else-if="form.defaultOrder === 2">否</div>
@@ -162,6 +189,15 @@
          <el-col :span="24">
            <el-form-item label="管理单位:">{{ form.managementUnit }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="信令时延(ms):">{{ form.sipDelay }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="视频时延(ms):">{{ form.videoDelay }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键帧时延(ms):">{{ form.iframeDelay }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -172,18 +208,32 @@
</template>
<script>
import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor";
import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/video-monitor";
import {getCountyList} from "@/api/platform/region";
export default {
  name: "Monitor",
  dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'],
  data() {
    return {
      totalPosts: 1156,
      totalMembers: 1000,
      postsPercentage: 156,
      totalViews: 75,
      viewsPercentage: 91.36,
      // 列信息
      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 },
        { key: 6, label: `信令时延`, visible: true },
        { key: 7, label: `视频时延`, visible: true },
        { key: 8, label: `关键帧时延`, visible: true }
      ],
      totalPosts: 6250,
      totalMembers: 6008,
      postsPercentage: 51,
      totalViews: 17,
      noStore: 47,
      partStore: 56,
      viewsPercentage: 96.12,
      totalErrors: 0,
      // 遮罩层
      loading: true,
@@ -214,7 +264,6 @@
        installedTime: null,
        managementUnit: null,
        defaultOrder: null,
        cameraFunType: 1,
      },
      // 表单参数
      form: {},
@@ -237,6 +286,8 @@
  },
  created() {
    this.getList();
    this.getCountyList();
  },
  methods: {
    /** 查询设备资产列表 */
@@ -263,7 +314,7 @@
        address: null,
        installedTime: null,
        managementUnit: null,
        defaultOrder: "1",
        defaultOrder: null,
      };
      this.resetForm("form");
    },