feat:宁录多光谱相机录像回放问题处理

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
     JSEncrypt: 'writable',
     EZUIKit: 'writable',
     AMap: 'writable',
+    flvjs:'writable',
     Amap: false,
     AmapUI: false
   }

index.html

@@ -161,6 +161,7 @@
   <script src="https://webapi.amap.com/maps?v=2.0&key=b96a1c32b0bb828f1d153b219fa59ecc&plugin=AMap.ElasticMarker"></script>
   <script type="text/javascript" src="https://webapi.amap.com/loca?v=2.0.0&key=b96a1c32b0bb828f1d153b219fa59ecc"></script>
   <script src="./static/ezuikit/ezuikit.js"></script>
+  <script src="./static/js/js/flv.min.js"></script>
 
   <!-- <script src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/js/amap.js"></script> -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->

src/components/Index.vue

@@ -2,10 +2,10 @@
   <div style="height: 100%">
     <el-container style="height: 100%">
       <!-- 公告栏 -->
-      <div class="notice" v-if="noticeShow">
+      <!-- <div class="notice" v-if="noticeShow">
         <i class="yficonfont icon-tongzhi" style="font-size: 12px"></i>
         <text-scroll :dataList="noticeList"></text-scroll>
-      </div>
+      </div> -->
 
       <el-header class="sys-header">
         <!-- <div
@@ -764,7 +764,7 @@ export default {
     noticeShow(val) {
       if (val == true) {
         // this.topStyle.top = "90px";
-        this.$set(this.topStyle, 'top', '70px')
+        this.$set(this.topStyle, 'top', '60px')
       }
     }
   },

src/pages/forecasting/xycb/xycb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="cursor: default">
+  <div style="cursor: default; height: 100%">
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item>测报系统</el-breadcrumb-item>
       <el-breadcrumb-item>性诱测报</el-breadcrumb-item>
@@ -12,6 +12,7 @@
       @fun4="getSaleUser"
       ref="screenData"
     >
+      <template slot="type-check"><span></span> </template>
       <template slot="search-box">
         <!-- <template v-if="role == 'admin'">
           <el-select
@@ -29,75 +30,76 @@
         </template> -->
       </template>
     </SearchBar>
-    <template v-if="displayType == 1">
-      <el-row :gutter="10" v-loading="loading">
-        <el-col
-          :xs="24"
-          :sm="24"
-          :md="12"
-          :lg="8"
-          :xl="6"
-          v-for="item in equipList"
-          :key="item.imei"
-        >
-          <el-card class="box-card">
-            <equip-item :is_online="item.device_status">
-              <span
-                slot="set"
-                v-show="userType == 1"
-                class="superOperate el-icon-setting"
-                @click="equipOperation(item.device_model, item.d_id, item.imei, item.device_name)"
-              ></span>
-              <span slot="title">{{ (item.device_name || '无') | ellipsis }}</span>
-              <div slot="content" class="content">
-                <!-- <p :title="item.device_name">
+    <div class="content">
+      <template v-if="displayType == 1">
+        <el-row :gutter="10" v-loading="loading">
+          <el-col
+            :xs="24"
+            :sm="24"
+            :md="12"
+            :lg="8"
+            :xl="6"
+            v-for="item in equipList"
+            :key="item.imei"
+          >
+            <el-card class="box-card">
+              <equip-item :is_online="item.device_status">
+                <span
+                  slot="set"
+                  v-show="userType == 1"
+                  class="superOperate el-icon-setting"
+                  @click="equipOperation(item.device_model, item.d_id, item.imei, item.device_name)"
+                ></span>
+                <span slot="title">{{ (item.device_name || '无') | ellipsis }}</span>
+                <div slot="content" class="content">
+                  <!-- <p :title="item.device_name">
                   <i class="yficonfont icon-biaoqian"></i>
                   设备名称：{{ (item.device_name || '无') | ellipsis }}
                 </p> -->
-                <p>
-                  <i class="yficonfont icon-yonghu"></i>
-                  设备ID：{{ item.imei }}
-                </p>
-                <p class="onlineState">
-                  <i class="yficonfont icon-diannao"></i>在线状态：
-                  <span
-                    :class="{
-                      red: item.is_online == 0,
-                      green: item.is_online == 1,
-                    }"
-                    >{{ item.is_online == 0 ? '离线' : '在线' }}</span
-                  >
-                </p>
-                <!-- <p>
+                  <p>
+                    <i class="yficonfont icon-yonghu"></i>
+                    设备ID：{{ item.imei }}
+                  </p>
+                  <p class="onlineState">
+                    <i class="yficonfont icon-diannao"></i>在线状态：
+                    <span
+                      :class="{
+                        red: item.is_online == 0,
+                        green: item.is_online == 1
+                      }"
+                      >{{ item.is_online == 0 ? '离线' : '在线' }}</span
+                    >
+                  </p>
+                  <!-- <p>
                   <i class="yficonfont icon-dizhi"></i>
                   设备型号:
                   {{ item.device_model == 1 ? 'I' + '型' : 'II' + '型' }}
                 </p> -->
-                <p>
-                  <i class="yficonfont icon-shijian"></i>
-                  最新上报时间 : {{ (item.addtime * 1000) | formatTime }}
-                </p>
-                <p>
-                  <i class="yficonfont icon-chouchongbug"></i>
-                  最近3天/7天/30天杀虫数量 :
-                  <el-tag size="mini"
-                    >{{ item.pest_count[0] }}/{{ item.pest_count[1] }}/{{
-                      item.pest_count[2]
-                    }}</el-tag
-                  >
-                </p>
-                <p :title="item.address" class="address">
-                  <i class="yficonfont icon-dizhi"></i>
-                  地址 : {{ (item.address || '无') | ellipsis }}
-                </p>
-                <!-- <p>
+                  <p>
+                    <i class="yficonfont icon-shijian"></i>
+                    最新上报时间 : {{ (item.addtime * 1000) | formatTime }}
+                  </p>
+                  <p>
+                    <i class="yficonfont icon-chouchongbug"></i>
+                    最近3天/7天/30天杀虫数量 :
+                    <el-tag size="mini"
+                      >{{ item.pest_count[0] }}/{{ item.pest_count[1] }}/{{
+                        item.pest_count[2]
+                      }}</el-tag
+                    >
+                  </p>
+                  <p :title="item.address" class="address">
+                    <i class="yficonfont icon-dizhi"></i>
+                    地址 : {{ (item.address || '无') | ellipsis }}
+                  </p>
+                  <!-- <p>
                   <i class="yficonfont icon-shijian"></i>
                   添加诱芯<span
                     @click="addYx(item.d_id)"
                     class="el-icon-edit"
                   ></span>
                 </p> -->
-                <!-- <p>
+                  <!-- <p>
                   <i class="yficonfont icon-shijian"></i>
                   {{
                     item.decoy !== "" || item.decoy == undefined
@@ -105,32 +107,32 @@
                       : "待添加诱芯"
                   }}<span @click="addYx(item.d_id)" class="el-icon-edit"></span>
                 </p> -->
-                <p>
-                  <i class="yficonfont icon-biaoqian"></i>
-                  诱芯名称 : {{ item.decoy == '' ? '待添加诱芯' : item.decoy }}
-                </p>
-                <p>
-                  <i class="yficonfont icon-shijian"></i>
-                  诱芯到期时间 :
-                  <span
-                    :style="{
-                      color:
-                        item.xy_expire.indexOf('已经到期') != -1
-                          ? 'red'
-                          : item.xy_expire.indexOf('即将到期') != -1
-                          ? 'red'
-                          : '',
-                    }"
-                    >{{ item.xy_expire }}</span
-                  >
-                </p>
-                <p v-if="userType == 1">
-                  <i class="yficonfont icon-yonghu"></i>
-                  销售用户：{{ item.sale_user || '无' }}
-                </p>
-                <p class="btns">
-                  <i class="yficonfont icon-yemiancaozuo"></i>
-                  <!-- <template v-if="item.device_model == 2">
+                  <p>
+                    <i class="yficonfont icon-biaoqian"></i>
+                    诱芯名称 : {{ item.decoy == '' ? '待添加诱芯' : item.decoy }}
+                  </p>
+                  <p>
+                    <i class="yficonfont icon-shijian"></i>
+                    诱芯到期时间 :
+                    <span
+                      :style="{
+                        color:
+                          item.xy_expire.indexOf('已经到期') != -1
+                            ? 'red'
+                            : item.xy_expire.indexOf('即将到期') != -1
+                            ? 'red'
+                            : ''
+                      }"
+                      >{{ item.xy_expire }}</span
+                    >
+                  </p>
+                  <p v-if="userType == 1">
+                    <i class="yficonfont icon-yonghu"></i>
+                    销售用户：{{ item.sale_user || '无' }}
+                  </p>
+                  <p class="btns">
+                    <i class="yficonfont icon-yemiancaozuo"></i>
+                    <!-- <template v-if="item.device_model == 2">
                     <el-button
                       size="mini"
                       type="info"
@@ -138,123 +140,129 @@
                       >查看图片</el-button
                     >
                   </template> -->
-                  <el-button
-                    v-if="$QueryPermission(65)"
-                    v-btnRight:deviceControl="$route.path"
-                    size="mini"
-                    type="warning"
-                    @click="
-                      EquipControl(
-                        item.device_model,
-                        item.d_id,
-                        item.imei,
-                        item.device_name,
-                        item.dtype
-                      )
-                    "
-                    >设备控制</el-button
-                  >
-                  <el-button
-                    v-btnRight:sim="$route.path"
-                    v-if="$QueryPermission(66)"
-                    size="mini"
-                    type="success"
-                    @click="lookSIMCode(item.d_id)"
-                    >SIM卡</el-button
-                  >
-                  <el-button
-                    v-if="$QueryPermission(67)"
-                    v-btnRight:dataDetails="$route.path"
-                    size="mini"
-                    type="danger"
-                    @click="
-                      dataDetails(
-                        item.imei,
-                        item.d_id,
-                        item.device_name,
-                        item.address,
-                        item.device_model,
-                        item.addtime
-                      )
-                    "
-                    >数据详情</el-button
-                  >
-                </p>
-              </div>
-            </equip-item>
-          </el-card>
-        </el-col>
-      </el-row>
-    </template>
-    <template v-if="displayType == 2">
-      <el-card class="box-card">
-        <el-table v-loading="loading" :data="equipList" stripe style="width: 100%">
-          <el-table-column prop="device_name" label="设备名称" width="180">
-            <template slot-scope="scope">{{ scope.row.device_name || '无' }}</template>
-          </el-table-column>
-          <el-table-column prop="device_id" label="设备ID" width="180">
-            <template slot-scope="scope">{{ scope.row.imei }}</template>
-          </el-table-column>
-          <el-table-column prop="device_code" label="设备编号" width="180">
-            <template slot-scope="scope">{{ scope.row.device_code || '无' }}</template>
-          </el-table-column>
-          <el-table-column prop="device_status" label="在线状态">
-            <template slot-scope="scope">
-              <p style="color: #17bb89" v-if="scope.row.is_online == 1">在线</p>
-              <p style="color: #eb6765" v-if="scope.row.is_online == 0">离线</p>
-            </template>
-          </el-table-column>
-          <el-table-column prop="xy_type" label="设备型号">
+                    <el-button
+                      v-if="$QueryPermission(65)"
+                      v-btnRight:deviceControl="$route.path"
+                      size="mini"
+                      type="warning"
+                      @click="
+                        EquipControl(
+                          item.device_model,
+                          item.d_id,
+                          item.imei,
+                          item.device_name,
+                          item.dtype
+                        )
+                      "
+                      >设备控制</el-button
+                    >
+                    <el-button
+                      v-btnRight:sim="$route.path"
+                      v-if="$QueryPermission(66)"
+                      size="mini"
+                      type="success"
+                      @click="lookSIMCode(item.d_id)"
+                      >SIM卡</el-button
+                    >
+                    <el-button
+                      v-if="$QueryPermission(67)"
+                      v-btnRight:dataDetails="$route.path"
+                      size="mini"
+                      type="danger"
+                      @click="
+                        dataDetails(
+                          item.imei,
+                          item.d_id,
+                          item.device_name,
+                          item.address,
+                          item.device_model,
+                          item.addtime
+                        )
+                      "
+                      >数据详情</el-button
+                    >
+                  </p>
+                </div>
+              </equip-item>
+            </el-card>
+          </el-col>
+        </el-row>
+      </template>
+      <template v-if="displayType == 2">
+        <el-card class="box-card" style="height: calc(100% - 60px); overflow: auto">
+          <el-table
+            v-loading="loading"
+            :data="equipList"
+            style="width: 100%"
+            :header-cell-style="{ background: '#F7F9FA' }"
+          >
+            <el-table-column prop="address" label="地区" width="250">
+              <template slot-scope="scope">{{ scope.row.address || '无' }}</template>
+            </el-table-column>
+            <el-table-column prop="device_name" label="测报点" width="180">
+              <template slot-scope="scope">{{ scope.row.device_name || '无' }}</template>
+            </el-table-column>
+            <el-table-column prop="device_id" label="终端ID" width="180">
+              <template slot-scope="scope">{{ scope.row.imei }}</template>
+            </el-table-column>
+            <el-table-column prop="device_code" label="设备编号" width="180">
+              <template slot-scope="scope">{{ scope.row.device_code || '无' }}</template>
+            </el-table-column>
+            <el-table-column prop="device_status" label="在线状态">
+              <template slot-scope="scope">
+                <p style="color: #17bb89" v-if="scope.row.is_online == 1">在线</p>
+                <p style="color: #eb6765" v-if="scope.row.is_online == 0">离线</p>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="xy_type" label="设备型号">
             <template slot-scope="scope">
               <p v-if="scope.row.device_model == 1">I型</p>
               <p v-if="scope.row.device_model == 2">II型</p>
             </template>
-          </el-table-column>
-          <el-table-column prop="status_time" label="最新上报时间" width="180">
-            <template slot-scope="scope">{{ (scope.row.addtime * 1000) | formatTime }}</template>
-          </el-table-column>
-          <el-table-column prop="address" label="最近3天杀虫数量">
-            <template slot-scope="scope">{{ scope.row.pest_count[0] }}</template>
-          </el-table-column>
-          <el-table-column prop="address" label="最近7天杀虫数量">
-            <template slot-scope="scope">{{ scope.row.pest_count[1] }}</template>
-          </el-table-column>
-          <el-table-column prop="address" label="最近30天杀虫数量">
-            <template slot-scope="scope">{{ scope.row.pest_count[2] }}</template>
-          </el-table-column>
-          <el-table-column prop="address" label="地址" width="250">
-            <template slot-scope="scope">{{ scope.row.address || '无' }}</template>
-          </el-table-column>
-          <el-table-column prop="decoy" label="诱芯名称" width="100">
-            <template slot-scope="scope">{{
-              scope.row.decoy == '' ? '待添加诱芯' : scope.row.decoy
-            }}</template>
-          </el-table-column>
-          <el-table-column prop="xy_expire" label="诱芯到期时间" width="180">
-            <template slot-scope="scope">
-              <span
-                :style="{
-                  color:
-                    scope.row.xy_expire.indexOf('已经到期') != -1
-                      ? 'red'
-                      : scope.row.xy_expire.indexOf('即将到期') != -1
-                      ? 'red'
-                      : '',
-                }"
-                >{{ scope.row.xy_expire }}</span
-              >
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" fixed="right" width="300">
-            <template slot-scope="scope">
-              <!-- <el-button
+          </el-table-column> -->
+            <el-table-column prop="status_time" label="最新上报时间" width="180">
+              <template slot-scope="scope">{{ (scope.row.addtime * 1000) | formatTime }}</template>
+            </el-table-column>
+            <el-table-column prop="address" label="3天诱虫量" width="120">
+              <template slot-scope="scope">{{ scope.row.pest_count[0] }}</template>
+            </el-table-column>
+            <el-table-column prop="address" label="7天诱虫量">
+              <template slot-scope="scope">{{ scope.row.pest_count[1] }}</template>
+            </el-table-column>
+            <el-table-column prop="address" label="30天诱虫量">
+              <template slot-scope="scope">{{ scope.row.pest_count[2] }}</template>
+            </el-table-column>
+
+            <el-table-column prop="decoy" label="诱芯名称" width="100">
+              <template slot-scope="scope">{{
+                scope.row.decoy == '' ? '待添加诱芯' : scope.row.decoy
+              }}</template>
+            </el-table-column>
+            <el-table-column prop="xy_expire" label="诱芯到期时间" width="180">
+              <template slot-scope="scope">
+                <span
+                  :style="{
+                    color:
+                      scope.row.xy_expire.indexOf('已经到期') != -1
+                        ? 'red'
+                        : scope.row.xy_expire.indexOf('即将到期') != -1
+                        ? 'red'
+                        : ''
+                  }"
+                  >{{ scope.row.xy_expire }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="200">
+              <template slot-scope="scope">
+                <!-- <el-button
                 v-if="scope.row.device_model == 2"
                 size="mini"
                 type="info"
                 @click="viewImage(scope.row.imei, scope.row.d_id)"
                 >查看图片</el-button
               > -->
-              <el-button
+                <!-- <el-button
                 v-if="$QueryPermission(65)"
                 v-btnRight:deviceControl="$route.path"
                 size="mini"
@@ -269,51 +277,58 @@
                   )
                 "
                 >设备控制</el-button
-              >
-              <el-button
+              > -->
+                <!-- <el-button
                 v-btnRight:sim="$route.path"
                 v-if="$QueryPermission(66)"
                 size="mini"
                 type="success"
                 @click="lookSIMCode(scope.row.d_id)"
                 >SIM卡</el-button
-              >
-              <el-button
-                v-if="$QueryPermission(67)"
-                v-btnRight:dataDetails="$route.path"
-                size="mini"
-                type="danger"
-                @click="
-                  dataDetails(
-                    scope.row.imei,
-                    scope.row.d_id,
-                    scope.row.device_name,
-                    scope.row.address,
-                    scope.device_model
-                  )
-                "
-                >数据详情</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-    </template>
-    <!-- 暂无数据 -->
-    <div
-      class="expertDiagnosis_referral_units_not"
-      v-if="equipList.length <= 0 && displayType == 1"
-    >
-      <img :src="$imghost + zanwu" alt class="expertDiagnosis_referral_units_notImg" />
+              > -->
+                <el-button
+                  v-if="$QueryPermission(67)"
+                  v-btnRight:dataDetails="$route.path"
+                  size="mini"
+                  type="text"
+                  @click="
+                    dataDetails(
+                      scope.row.imei,
+                      scope.row.d_id,
+                      scope.row.device_name,
+                      scope.row.address,
+                      scope.device_model
+                    )
+                  "
+                  >详情</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="text"
+                  @click="viewImage(scope.row.imei, scope.row.d_id)"
+                  >诱芯更换记录</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </template>
+      <!-- 暂无数据 -->
+      <div
+        class="expertDiagnosis_referral_units_not"
+        v-if="equipList.length <= 0 && displayType == 1"
+      >
+        <img :src="$imghost + zanwu" alt class="expertDiagnosis_referral_units_notImg" />
+      </div>
+      <el-pagination
+        background
+        :page-size="8"
+        layout="total, sizes,jumper, next,pager , prev"
+        :total="totalNum"
+        :current-page="queryInfo.page"
+        @current-change="changePage"
+      ></el-pagination>
     </div>
-    <el-pagination
-      background
-      :page-size="8"
-      layout="prev, pager, next, jumper"
-      :total="totalNum"
-      :current-page="queryInfo.page"
-      @current-change="changePage"
-    ></el-pagination>
     <!-- SIM卡对话框 -->
     <SIM v-if="simCodeVisible" :d_id="d_id" @closeSim="simCodeVisible = false"></SIM>
     <!-- 设备控制对话框II型,目前平台只有I型 -->
@@ -450,7 +465,7 @@
                 :picker-options="{
                   start: '0:00',
                   step: '1:00',
-                  end: '23:00',
+                  end: '23:00'
                 }"
               ></el-time-select>
               <span style="margin: 0 10px">至</span>
@@ -461,7 +476,7 @@
                 :picker-options="{
                   start: '0:00',
                   step: '1:00',
-                  end: '23:00',
+                  end: '23:00'
                 }"
               ></el-time-select>
             </div>
@@ -594,14 +609,14 @@ export default {
         case 7:
           return '销号'
       }
-    },
+    }
   },
   data() {
     return {
       user_tag: null, // 1超级管理员，2经销商，3农林政府单位，4普通用户，5销售用户
       zanwu: '/images/expertDiagnosis/zanwu.png',
       // 图表和表格切换
-      displayType: '',
+      displayType: 2,
       // 设备列表
       equipList: [],
       role: 'admin',
@@ -617,7 +632,7 @@ export default {
         data_plan: 0, // 套餐大小
         data_usage: 0, // 当月用量
         data_balance: 0, // 剩余流量
-        expiry_date: 0, // 到期日期
+        expiry_date: 0 // 到期日期
       },
       code: null, // 标识
       simLoading: true,
@@ -627,13 +642,13 @@ export default {
         is_online: null,
         dver: '',
         f_id: '',
-        ename: '',
+        ename: ''
         // device_model: null
       },
       equipInfo: {
         // 设备控制回显
         device_id: '',
-        device_name: '',
+        device_name: ''
       },
       // 设备控制I 型
       equipContrlForm1: {
@@ -648,7 +663,7 @@ export default {
         pic_f: '', // 定时拍照时间间隔
         dat_t: null, // 数据上传时间间隔
         turn_t: null, // 定时转动沾虫板
-        ds: '', // 开关，1开机，0关机
+        ds: '' // 开关，1开机，0关机
       },
       totalNum: 0,
       // SIM卡对话框
@@ -664,8 +679,8 @@ export default {
       setYxDialogVisible: false,
       yx: {
         d_id: '',
-        decoy: '',
-      },
+        decoy: ''
+      }
     }
   },
   created() {
@@ -702,7 +717,7 @@ export default {
     data_balance_per: function () {
       let aa = Number(this.sim.data_balance / this.sim.data_plan) * 100
       return aa
-    },
+    }
   },
   watch: {},
   methods: {
@@ -739,8 +754,8 @@ export default {
           page: this.queryInfo.page,
           device_status: this.queryInfo.is_online,
           device_model: 1,
-          customer_uid: this.sale_user_uid, // 销售用户id
-        }),
+          customer_uid: this.sale_user_uid // 销售用户id
+        })
       }).then((res) => {
         if (res.data.message == '') {
           this.equipList = res.data.data.data
@@ -772,7 +787,7 @@ export default {
       //   query: { device_model, name, add, addtime },
       // });
       this.$router.push({
-        path: `/index/xycbDataDetail?e_id=` + e_id + '&d_id=' + d_id,
+        path: `/index/xycbDataDetail?e_id=` + e_id + '&d_id=' + d_id
       })
     },
     // sim卡状态
@@ -784,7 +799,7 @@ export default {
       this.currImei = id
       this.$router.push({
         path: `/index/xycbDataPhotos/${id}`,
-        query: { d_id: d_id },
+        query: { d_id: d_id }
       })
     },
     // 设备控制操作
@@ -799,7 +814,7 @@ export default {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=forecast.send_control.device_control_info',
-        data: this.qs.stringify({ d_id, cmd: 'paramconf' }),
+        data: this.qs.stringify({ d_id, cmd: 'paramconf' })
       }).then((res) => {
         if (res.data.message == '') {
           if (res.data.data && Object.keys(res.data.data).length > 0) {
@@ -810,7 +825,7 @@ export default {
               timctrl: data.work_tim.timctrl,
               ds: data.power.ds,
               dat_f: data.data_tim.dat_f,
-              clt_t: data.clt_tim.clt_t,
+              clt_t: data.clt_tim.clt_t
             }
             obj.st = obj.st && obj.st < 10 ? '0' + obj.st + ':00' : obj.st + ':00'
             obj.et = obj.et && obj.et < 10 ? '0' + obj.et + ':00' : obj.et + ':00'
@@ -855,7 +870,7 @@ export default {
         work_tim: { timctrl: newForm.timctrl, st: newForm.st, et: newForm.et },
         data_tim: { dat_f: newForm.dat_f },
         power: { ds: newForm.ds },
-        clt_tim: { clt_t: newForm.clt_t },
+        clt_tim: { clt_t: newForm.clt_t }
       }
       // console.log(obj);
       this.$axios({
@@ -864,8 +879,8 @@ export default {
         data: this.qs.stringify({
           device_type_id: 4,
           d_id: this.d_id,
-          config: JSON.stringify(obj),
-        }),
+          config: JSON.stringify(obj)
+        })
       }).then((res) => {
         if (res.data.message == '') {
           this.$resetMessage.success('设备控制修改成功')
@@ -1014,7 +1029,7 @@ export default {
       this.$confirm('此操作对设备进行' + name + ',  是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       })
         .then(() => {
           this.$axios({
@@ -1023,8 +1038,8 @@ export default {
             data: this.qs.stringify({
               cmd,
               device_type_id: 4,
-              d_id: this.d_id,
-            }),
+              d_id: this.d_id
+            })
           }).then((res) => {
             if (res.data.message == '') {
               this.$resetMessage.success('指令下发成功!')
@@ -1034,7 +1049,7 @@ export default {
         .catch(() => {
           this.$message({
             type: 'info',
-            message: '已取消',
+            message: '已取消'
           })
         })
     },
@@ -1047,8 +1062,8 @@ export default {
         url: '/api/api_gateway?method=device.device_manage.get_spore_time',
         data: this.qs.stringify({
           device_type_id: 4,
-          d_id,
-        }),
+          d_id
+        })
       }).then((res) => {
         if (res.data.message == '') {
           let data = res.data.data
@@ -1068,8 +1083,8 @@ export default {
         data: this.qs.stringify({
           device_type_id: 4,
           d_id: this.yx.d_id,
-          decoy: this.yx.decoy,
-        }),
+          decoy: this.yx.decoy
+        })
       }).then((res) => {
         if (res.data.message == '') {
           this.$message.success('添加成功!')
@@ -1078,13 +1093,13 @@ export default {
         }
         this.setYxDialogVisible = false
       })
-    },
+    }
   },
   components: {
     SearchBar,
     EquipItem,
-    SIM,
-  },
+    SIM
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -1120,6 +1135,11 @@ export default {
     text-align: right;
   }
 }
+.content {
+  height: calc(100% - 116px);
+  background: #fff;
+  position: relative;
+}
 .handAddForm {
   /deep/.el-form-item {
     margin-bottom: 8px;
@@ -1183,4 +1203,20 @@ export default {
 /deep/.el-table .cell {
   text-align: center;
 }
+.custom-ffffff .el-pagination {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+  text-align: justify;
+  margin-bottom: 0;
+  /deep/.el-pagination__jump,
+  /deep/.el-pager,
+  /deep/.btn-next,
+  /deep/.btn-prev {
+    float: right;
+  }
+}
 </style>

src/pages/forecasting/xycb_1_3/xycbDataDetail.vue

@@ -0,0 +1,776 @@
+<template>
+  <div style="cursor: default">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>防治系统</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/index/xycb' }"
+        >性诱测报</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>数据详情</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-button type="success" size="small" @click="goBackPage()"
+      ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
+    >
+    <div class="equipInfo">
+      <div class="equipMsg">
+        <span>设备ID：{{ equipStatus.e_id }}</span>
+        <span>设备名称：{{ equipStatus.name || "无" }}</span>
+        <span>位置：{{ equipStatus.add || "无" }}</span>
+      </div>
+      <DateSearch ref="timeCirculation" @timeScreen="timeScreen" @dateChange="dateChange"></DateSearch>
+    </div>
+    <div class="ctrl-check">
+      <el-button type="primary" size="mini" @click="$throttle(refresh, 2000)"
+        >更新数据</el-button
+      >
+    </div>
+    <!-- 统计图 -->
+    <div>
+      <div v-loading="refreshload">
+        <el-row :gutter="10">
+          <el-col :md="24" :lg="20">
+            <el-card class="box-card">
+              <div class="charts" id="charts">
+                <highcharts :options="optionFn"></highcharts>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :md="24" :lg="4">
+            <el-card class="box-card">
+              <div class="pie">
+                <div class="item">
+                  <img src="@/assets/images/forecasting/xy/fs.png" />
+                  <div>风速 : {{ fs + "(m/s)" }}</div>
+                </div>
+                <div class="item">
+                  <img src="@/assets/images/forecasting/xy/fx.png" />
+                  <div>风向 : {{ fx }}</div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <div class="dataTableSearch">
+          <div>
+            <el-button type="primary" size="mini" @click="deriveData()"
+              >导出</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <el-card class="box-card" v-loading="refreshload">
+        <el-table :data="tableData" stripe style="width: 100%" v-if="$QueryPermission(268)">
+          <el-table-column
+            v-for="(item, index) in tableHeadTxt"
+            :key="index"
+            :prop="item[1]"
+            :label="item[0]"
+            :width="setWidth(item)"
+          >
+            <template slot-scope="scope">{{
+              scope.row[scope.column.property]
+            }}</template>
+          </el-table-column>
+        </el-table>
+        <el-table :data="tableData" stripe style="width: 100%" v-else>
+          <el-table-column
+            v-for="(item, index) in tableHeadTxt2"
+            :key="index"
+            :prop="item[1]"
+            :label="item[0]"
+            :width="setWidth(item)"
+          >
+            <template slot-scope="scope">{{
+              scope.row[scope.column.property]
+            }}</template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper"
+          :total="total"
+          :current-page="queryInfo.page"
+          @current-change="changePage"
+        ></el-pagination>
+      </el-card>
+
+      <!-- 导出对话框 -->
+      <el-dialog title="导出信息" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
+        <!-- <span>这是一段信息</span> -->
+
+        <!-- 下拉框和输入框 -->
+        <ul class="iptUl">
+          <li class="iptList">
+            <div class="iptTxt">
+              <span style="color: red">*</span>文件名称：
+            </div>
+            <div class="iptBox">
+              <el-input
+                placeholder="请输入文件的名称"
+                v-model="value"
+                clearable
+              >
+              </el-input>
+            </div>
+          </li>
+          <li class="iptList">
+            <div class="iptTxt">
+              <span style="color: red">*</span>下载类型：
+            </div>
+            <div class="iptBox">
+              <el-select v-model="value1" placeholder="请选择">
+                <el-option
+                  v-for="item in optionsA"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </li>
+        </ul>
+        <!-- 下拉框和输入框 -->
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addData()">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- 导出对话框 -->
+    </div>
+  </div>
+</template>
+
+<script>
+import DateSearch from "@/components/DateSearch";
+import HighCharts from "highcharts";
+import HighchartsNoData from "highcharts/modules/no-data-to-display";
+HighchartsNoData(HighCharts);
+import { Loading } from "element-ui";
+import Circulation from '../../../../static/js/equipState_dict.json'
+
+export default {
+  data() {
+    return {
+      user_tag:null,//1超级管理员，2经销商，3农林政府单位，4普通用户，5销售用户
+      device_model: this.$route.query.device_model, //性诱1型或II型
+      btnSelected: "",
+      lineTime: "",
+      dataTime: "",
+      worms: [
+        {
+          value: 1,
+          label: "蛾子",
+        },
+        {
+          value: 2,
+          label: "蚊子",
+        },
+      ],
+      // 状态信息
+      equipStatus: {
+        e_id: this.$route.params.e_id,
+        // device_name: this.$route.query.device_name,
+        // address: this.$route.query.address,
+        name: this.$route.query.name,
+        add: this.$route.query.add,
+      },
+      // 统计图表信息
+      equipChartData: [],
+      //总数据条数
+      total: 0,
+      // 动态表头
+      tableHeadTxt: [
+        ["设备开关", "ds"],
+        ["工作状态", "ws"],
+        ["环境温度(℃)", "at"],
+        ["环境湿度(%)", "ah"],
+        ["充电电压(V)", "cv"],
+        ["电池电压(V)", "bv"],
+        ["充电状态", "cs"],
+        ["电池状态", "bs"],
+        ["诱虫次数", "infr_ct"],
+        ["信号强度", "csq"],
+        ["上报时间", "addtime"],
+      ],
+      tableHeadTxt2: [
+        ["设备开关", "ds"],
+        ["工作状态", "ws"],
+        ["环境温度(℃)", "at"],
+        ["环境湿度(%)", "ah"],
+        ["充电状态", "cs"],
+        ["电池状态", "bs"],
+        ["诱虫次数", "infr_ct"],
+        ["上报时间", "addtime"],
+      ],
+      // 表格数据
+      tableData: [],
+      timeRange: "",
+      queryInfo: {
+        begin: "",
+        end: "",
+        e_id: this.$route.params.e_id,
+        d_id: this.$route.params.d_id,
+        page: 1,
+      },
+      //图表实时否有数据
+      isEchartData: true,
+      //表格和图表按钮样式切换参数
+      display: "0", //0代表表格、1代表图表
+      displayView: true,
+      // 表格和图表显示切换控制
+      showControl: true,
+      //echarts图表参数
+      echartOptions: [],
+      // 动态表头
+      tableHead: [],
+      // 表格数据
+      hisData: [],
+      // 导出
+      dialogVisible: false,
+      optionsA: [
+        {
+          value: "选项1",
+          label: "全部",
+        },
+        {
+          value: "选项2",
+          label: "时间段",
+        },
+      ],
+      value: "", //文件名称
+      value1: "", //下载类型
+      value2: "", //时间段
+      timeShow: false, //选择时间
+      fs: "--", //风速
+      fx: "--", //风向
+      loadingInstance: {},
+      ChartData: [
+        {
+          name: "温度（°C）",
+          dat: [],
+        },
+        {
+          name: "湿度（%）",
+          dat: [],
+        },
+        {
+          // name: "红外计数值",
+          name: "诱虫次数",
+          dat: [],
+        },
+        {
+          name: "高压计数值",
+          dat: [],
+        },
+        {
+          name: "cpu温度（°C）",
+          dat: [],
+        },
+      ],
+      equipStateDict: {}, //
+      //保存一个标识，用来区分是点击还是自动获取
+      sign: null,
+      timeScreenData: null,
+      refreshload:false
+    };
+  },
+  created() {
+    this.user_tag = localStorage.getItem("user_tag")
+  },
+  mounted() {
+    // this.getChartDataList()
+    // this.getHisDataList()
+    this.equipStateDict = Circulation
+    this.refreshData();
+    this.loadingInstance = Loading.service({
+      fullscreen: false,
+      target: document.getElementById("charts"),
+    });
+  },
+  computed: {
+     userType: function () {
+      //获取用户类型
+      return window.sessionStorage.getItem("myuser_type");
+    },
+    optionFn() {
+      return {
+        chart: {
+          zoomType: "x",
+        },
+        title: {
+          text: "环境温湿度",
+          align: "left",
+        },
+        lang: {
+          noData: "暂无数据",
+        },
+        noData: {
+          style: {
+            fontWeight: "bold",
+            fontSize: "15px",
+            color: "#303030",
+          },
+        },
+        subtitle: {
+          text: "",
+        },
+        xAxis: {
+          crosshair: true, //十字基准线
+          type: "datetime",
+          dateTimeLabelFormats: {
+            //根据时间间距X轴自动显示哪种格式
+            millisecond: "%H:%M:%S.%L",
+            second: "%H:%M:%S",
+            minute: "%H:%M",
+            hour: "%H:%M",
+            day: "%m-%d",
+            week: "%m-%d",
+            month: "%Y-%m",
+            year: "%Y",
+          },
+        },
+        yAxis: {
+          title: {
+            text: "",
+          },
+        },
+        legend: {
+          // layout: 'vertical',
+          align: "right",
+          verticalAlign: "top",
+        },
+        plotOptions: {
+          series: {
+            label: {
+              connectorAllowed: false,
+            },
+            pointStart: 2010,
+          },
+        },
+        series: [
+          {
+            type: "spline",
+            name: this.ChartData[0].name,
+            data: this.ChartData[0].dat,
+          },
+          {
+            type: "spline",
+            name: this.ChartData[1].name,
+            data: this.ChartData[1].dat,
+          },
+        ],
+        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
+        credits: {
+          //去掉默认的highcharts.com
+          enabled: false,
+        },
+        tooltip: {
+          // crosshairs: true,
+          shared: true, //折线共享
+          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
+        },
+      };
+    },
+  },
+  methods: {
+    // 设置hightcharts配置
+    refreshData() {
+      HighCharts.setOptions({
+        // 所有语言文字相关配置都设置在 lang 里
+        lang: {
+          resetZoom: "刷新",
+          resetZoomTitle: "重置缩放比例",
+        },
+      });
+    },
+    // 当使用日期筛选
+    timeScreen(data) {
+      this.timeScreenData = data;
+    },
+
+    //获取折线数据
+    getChartDataList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
+        data: this.qs.stringify({
+          device_type_id: 4,
+          d_id: this.queryInfo.d_id,
+          start_time: this.queryInfo.begin,
+          end_time: this.queryInfo.end,
+        }),
+      }).then((res) => {
+        //console.log(this.sign + "这是变量");
+        //console.log(this.queryInfo.begin + "这是开始时间");
+        if (res.data.data.length == 0 && this.timeScreenData == null) {
+          if (this.sign == this.queryInfo.begin || this.sign == null) {
+            this.$refs.timeCirculation.say();
+            //console.log("这是自动的");
+          } else {
+            //console.log("这是点击的");
+          }
+          this.sign = this.queryInfo.begin; //保存一个标识，用来区分是点击还是自动获取
+        }
+        this.ChartData[0].dat = [];
+        this.ChartData[1].dat = [];
+        if (res.data.message == "" && res.data.data.length > 0) {
+          var data = res.data.data;
+          for (let item of data) {
+            if(item.new_tem){
+              this.ChartData[0].dat.unshift([
+                item.addtime * 1000 + 8 * 3600000,
+                Number(item.new_tem),
+              ]);
+            }else{
+              this.ChartData[0].dat.unshift([
+                item.addtime * 1000 + 8 * 3600000,
+                Number(item.temperature),
+              ]);
+            }
+            if(item.new_hum){
+              this.ChartData[1].dat.unshift([
+                item.addtime * 1000 + 8 * 3600000,
+                Number(item.new_hum),
+              ]);
+            }else{
+              this.ChartData[1].dat.unshift([
+                item.addtime * 1000 + 8 * 3600000,
+                Number(item.humidity),
+              ]);
+            }
+
+          }
+        }
+        this.loadingInstance.close();
+      });
+    },
+    //获取表格数据
+    getHisDataList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
+        data: this.qs.stringify({
+          device_type_id: 4,
+          device_id: this.queryInfo.e_id,
+          start_time: this.queryInfo.begin,
+          end_time: this.queryInfo.end,
+          page: this.queryInfo.page,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.total = res.data.data.counts;
+          var data = res.data.data.data;
+          //console.log(data)
+          // 得到最新的风速、风向
+          if (this.queryInfo.page == 1 && data[0]) {
+            this.fs = data[0].d_h_t.wind_sped;
+            let fx = data[0].d_h_t.wind_drec;
+            // if (fx > 337.5 || fx < 22.5) {
+            if (fx > 337.5 && fx < 22.5) {
+              fx = "北";
+            } else if (fx > 22.5 && fx < 67.5) {
+              fx = "东北";
+            } else if (fx > 67.5 && fx < 112.5) {
+              fx = "东";
+            } else if (fx > 112.5 && fx < 157.5) {
+              fx = "东南";
+            } else if (fx > 157.5 && fx < 202.5) {
+              fx = "南";
+            } else if (fx > 202.5 && fx < 247.5) {
+              fx = "西南";
+            } else if (fx > 247.5 && fx < 292.5) {
+              fx = "西";
+            } else if (fx > 292.5 && fx < 337.5) {
+              fx = "西北";
+            } else if (fx == 666) {
+              fx = '无'
+            }
+            this.fx = fx;
+          }
+          if (data.length > 0) {
+            this.tableData = [];
+            for (var i = 0; i < data.length; i++) {
+              var dht = data[i].d_h_t;
+              dht.addtime = this.formatTime(dht.addtime * 1000);
+              dht.ws = this.equipStateDict.ws.value[dht.ws]; //工作状态
+              dht.cs = this.equipStateDict.cs.value[dht.cs]; //充电状态
+              dht.bs = this.equipStateDict.bs.value[dht.bs] //电池状态
+              dht.rps = this.equipStateDict.rps.value[dht.rps] //雨控状态
+              dht.ds = this.equipStateDict.ds.value[dht.ds]; // 设备开关
+              dht.tps = this.equipStateDict.tps.value[dht.tps]; //温控状态
+              dht.lps = this.equipStateDict.lps.value[dht.lps]; //光控状态
+              // dht.cv = dht.cv / 1000;
+              if (dht.cv < 1) {
+                dht.cv = 0
+              } else {
+                dht.cv = dht.cv
+              }
+
+              if (dht.bv < 0) {
+                dht.bv = 0
+              } else {
+                dht.bv = dht.bv
+              }
+              // dht.cv = dht.cv;
+              // dht.bv = dht.bv;
+              // dht.bv = dht.bv / 1000;
+              if(dht.new_hum){
+                dht.ah = dht.new_hum
+              }
+              if(dht.new_tem){
+                dht.at = dht.new_tem
+              }
+              //console.log(dht)
+              this.tableData.push(dht);
+            }
+          } else {
+            this.tableData = [];
+          }
+        }
+      });
+    },
+    //改变page
+    changePage(val) {
+      this.queryInfo.page = val;
+      this.getHisDataList();
+    },
+    dateChange(data) {
+      this.queryInfo.page = 1;
+      this.queryInfo.begin = data.begin;
+      this.queryInfo.end = data.end;
+      this.getHisDataList();
+      this.getChartDataList();
+    },
+    setWidth(item) {
+      if (item[1] == "addtime") {
+        return 180 + "px";
+      } else if (item[1] == "proj") {
+        return 150 + "px";
+      }
+    },
+    refresh() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.send_control.get_device_config",
+        data: this.qs.stringify({
+          device_type_id: 4,
+          d_id: this.queryInfo.d_id,
+          control_type: "data",
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.refreshload=true
+          setTimeout(()=>{
+            this.getChartDataList()
+            this.getHisDataList()
+            this.$message.success("刷新成功");
+            this.refreshload = false
+        },2000)
+        } else {
+          this.$message.err("刷新失败");
+        }
+      });
+    },
+    //返回上一页
+    goBackPage() {
+      this.$router.go(-1);
+    },
+
+    // 导出s数据
+    deriveData() {
+      this.dialogVisible = true;
+    },
+    //导出数据确定
+    addData() {
+      var that = this;
+      if (that.value == "" || that.value1 == '') {
+        this.$resetMessage({
+          message: "请将必填项填写完整",
+          type: "warning",
+          duration: 1500,
+        });
+      } else{
+        var begin = "";
+        var end = "";
+        // if (that.value2) {
+        //   // begin = parseInt(new Date(that.value2[0]).getTime() / 1000);
+        //   // end = parseInt(new Date(that.value2[1]).getTime() / 1000);
+        //   begin = this.queryInfo.begin;
+        //   end = this.queryInfo.end
+        // } else {
+        //   begin = "";
+        //   end = "";
+        // }
+        if (that.value1=="选项2") {
+          begin = this.queryInfo.begin;
+          end = this.queryInfo.end;
+        } else if(that.value1=="选项1"){
+          begin = "";
+          end = "";
+        }
+        // //console.log(this.value);
+        // //console.log(that.queryInfo.d_id);
+        // //console.log(begin);
+        // //console.log(end);
+        // //console.log(
+        //   "/api/cbd_export?device_id=" +
+        //     that.queryInfo.d_id +
+        //     "&filename=" +
+        //     that.value +
+        //     "&start_time=" +
+        //     begin +
+        //     "&end_time=" +
+        //     end +
+        //     "&device_type=4"
+        // );
+        var username = localStorage.getItem("cUsername")
+        window.location.href =
+          this.$deriveData +
+          // "http://192.168.1.77:8002"+
+          "/api/cbd_export?device_id=" +
+          that.queryInfo.d_id +
+          "&filename=" +
+          that.value +
+          "&start_time=" +
+          begin +
+          "&end_time=" +
+          end +
+          "&device_type=4"+
+          "&username=" +
+          username
+          ;
+      }
+    },
+  },
+  components: {
+    DateSearch,
+  },
+  watch: {
+    fs(val){
+        if(val=='900'){
+          this.fs = '无'
+        }
+    },
+    value1(val) {
+      if (val == "选项2") {
+        this.timeShow = true;
+      }
+      if (val == "选项1") {
+        this.timeShow = false;
+      }
+    },
+    dialogVisible(val) {
+      if (val == false) {
+        this.value = "";
+        this.value1 = "";
+        this.value2 = "";
+        this.timeShow = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.box-card {
+  position: relative;
+}
+.equipInfo {
+  .equipMsg {
+    font-size: 14px;
+    color: #3d3d3d;
+    span {
+      margin-left: 5px;
+    }
+  }
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+
+.time-check {
+  display: flex;
+  justify-content: space-between;
+  .el-input__inner {
+    margin-left: 10px;
+    width: 222px;
+  }
+}
+
+.chartsSelect {
+  text-align: right;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  right: 21px;
+}
+.charts,
+.pie {
+  height: 423px;
+  display: flex;
+  flex-direction: column;
+  .item {
+    flex: 1;
+    text-align: center;
+    font-size: 16px;
+  }
+}
+.equipStatus {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+  .equipIcon {
+    margin-right: 14%;
+  }
+  .equipParams {
+    min-width: 80px;
+    line-height: 27px;
+    p {
+      color: #a6a6a6;
+    }
+  }
+}
+
+.dataTableSearch {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+  .el-input__inner {
+    width: 222px;
+  }
+}
+
+// .check-btns{display:flex;justify-content: space-between;margin-bottom:20px}
+.echarts {
+  width: 100%;
+  height: 300px;
+}
+.ctrl-check {
+  margin-bottom: 20px;
+}
+
+.iptList {
+  display: flex;
+  margin: 15px 0 15px 0;
+}
+.iptTxt {
+  text-align: right;
+  width: 20%;
+  margin: 0 5% 0 0;
+  display: inline-block;
+}
+.iptBox {
+  width: 40%;
+}
+
+// 表格文字居中
+/deep/.el-table th > .cell {
+  text-align: center;
+}
+
+/deep/.el-table .cell {
+  text-align: center;
+}
+</style>

src/pages/forecasting/xycb_1_3/xycbDataPhotos.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/index/xycb' }"
+        >性诱测报</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>查看图片</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-button type="success" size="small" @click="goBackPage()"
+      ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
+    >
+    <div class="check-btns">
+      <div class="type-check">
+        <el-button type="primary" size="mini" @click="equipStatusCheck('0')"
+          >拍照</el-button
+        >
+        <el-button type="primary" size="mini" @click="equipStatusCheck('1')"
+          >刷新</el-button
+        >
+        <template v-if="userType == 1">
+          <el-button
+            v-if="delBtnState"
+            type="primary"
+            size="mini"
+            @click="equipStatusCheck('2')"
+            >批量删除</el-button
+          >
+          <el-button
+            v-if="!delBtnState"
+            type="primary"
+            size="mini"
+            @click="equipStatusCheck('3')"
+            >删除</el-button
+          >
+          <el-button
+            v-if="!delBtnState"
+            size="mini"
+            @click="equipStatusCheck('4')"
+            >取消</el-button
+          >
+          <el-button type="primary" size="mini" @click="equipStatusCheck('5')"
+            >一键删除</el-button
+          >
+        </template>
+      </div>
+      <div class="search-box">
+        <el-date-picker
+          size="mini"
+          v-model="timeRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="DateChange"
+        ></el-date-picker>
+      </div>
+    </div>
+    <el-row :gutter="30" id="viewerDom" v-viewer v-if="photoList.length > 0">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="6"
+        :xl="6"
+        v-for="item in photoList"
+        :key="item.addr"
+      >
+        <div class="photoItem">
+          <div class="photoInfo" v-if="userType == 1">
+            <i
+              class="yficonfont icon-shanchu"
+              v-show="delBtnState"
+              @click="delectImg(item.addr)"
+            ></i>
+            <el-checkbox
+              v-show="!delBtnState"
+              v-model="item.checked"
+            ></el-checkbox>
+          </div>
+          <div class="photoImg">
+            <!-- 有的图片放到阿里云，有的放到了服务器 -->
+            <template v-if="item.addr.indexOf('http') != -1">
+              <img :src="item.addr" />
+            </template>
+            <template v-else>
+              <img :src="$host + item.addr" />
+            </template>
+          </div>
+          <div class="photoCtrl">
+            <span>{{ (item.addtime * 1000) | formatTime }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div style="text-align: center" v-else>
+      <img :src="$imghost + zanwu" alt />
+    </div>
+    <el-pagination
+      v-if="photoList.length > 0"
+      background
+      layout="prev, pager, next, jumper"
+      :total="totalNum"
+      :current-page="queryInfo.page"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      zanwu: '/images/expertDiagnosis/zanwu.png',
+      // 在线状态按钮切换
+      equipStatus: '0',
+      totalNum: 0,
+      timeRange: [],
+      delBtnState: true,
+      id: this.$route.params.id,
+      photoList: [],
+      queryInfo: {
+        begin: '',
+        end: '',
+        page: 1
+      },
+      addrlist: []
+    }
+  },
+  computed: {
+    userType: function() {
+      // 获取用户类型
+      return window.sessionStorage.getItem('myuser_type')
+    }
+  },
+  mounted() {
+    this.getPhoteList()
+  },
+  methods: {
+    equipStatusCheck(flag) {
+      this.active = flag
+      if (flag == 0) {
+        // 拍照
+        this.equipBtnControl('takephoto')
+      }
+      if (flag == 1) {
+        // 刷新
+        this.getPhoteList()
+      }
+      if (flag == 2) {
+        this.delBtnState = false
+      }
+      if (flag == 3) {
+        this.addrlist = this.photoList
+          .filter(item => {
+            return item.checked == true
+          })
+          .map(item => {
+            return item.addr
+          })
+        if (this.addrlist.length == 0) {
+          this.$message.warning('请选择要删除的图片！')
+        } else {
+          this.delImgFun(this.addrlist)
+        }
+      }
+      if (flag == 4) {
+        this.photoList.map(item => {
+          item.checked = false
+        })
+        this.delBtnState = true
+      }
+      if (flag == 5) {
+        this.delImgFun('')
+      }
+    },
+    equipBtnControl(cmd) {
+      this.$axios({
+        method: 'POST',
+        url:
+          '/api/api_gateway?method=forecast.send_control.admin_device_control',
+        data: this.qs.stringify({
+          cmd,
+          device_type_id: 4,
+          d_id: this.$route.query.d_id
+        })
+      }).then(res => {
+        if (res.data.message == '') {
+          this.$message.success('指令下发成功!')
+        }
+      })
+    },
+    getPhoteList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
+        data: this.qs.stringify({
+          device_id: this.id,
+          ret: 'list',
+          page: this.queryInfo.page,
+          time_begin: this.queryInfo.begin,
+          time_end: this.queryInfo.end
+        })
+      }).then(res => {
+        if (res.data.message == '') {
+          let data = res.data.data.data
+          this.photoList = data.map(item => {
+            item.checked = false
+            return item
+          })
+          this.totalNum = res.data.data.num
+          this.$message.success('请求最新图片成功！')
+        }
+      })
+    },
+    // 改变page
+    changePage(val) {
+      this.queryInfo.page = val
+      this.getPhoteList()
+    },
+    DateChange() {
+      this.queryInfo.page = 1
+      if (this.timeRange) {
+        this.queryInfo.begin = parseInt(
+          new Date(this.timeRange[0]).getTime() / 1000
+        )
+        this.queryInfo.end = parseInt(
+          new Date(this.timeRange[1]).getTime() / 1000
+        )
+      } else {
+        this.queryInfo.begin = ''
+        this.queryInfo.end = ''
+      }
+      this.getPhoteList()
+    },
+    delImgFun(addrlist) {
+      this.$confirm('此操作将永久删除该设备图片, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.$axios({
+            method: 'POST',
+            url:
+              '/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
+            data: this.qs.stringify({
+              device_id: this.id,
+              addrlist: JSON.stringify(addrlist)
+            })
+          }).then(res => {
+            if (res.data.message == '') {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              })
+              this.getPhoteList()
+            }
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    delectImg(addr) {
+      this.delImgFun([addr])
+    },
+    // 返回上一页
+    goBackPage() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.check-btns {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.photoItem {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  &:hover {
+    .photoInfo i {
+      display: block;
+    }
+  }
+  .photoInfo {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 999;
+    span {
+      color: #fff;
+    }
+    i {
+      display: none;
+      cursor: pointer;
+      color: red;
+    }
+  }
+  .photoImg {
+    height: 250px;
+    cursor: pointer;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .photoCtrl {
+    background-color: #fff;
+    text-align: center;
+    line-height: 50px;
+    font-size: 16px;
+    div {
+      flex: 1;
+      border-right: 1px solid #d8d8d8;
+      margin-bottom: 0;
+      cursor: pointer;
+      &:hover {
+        color: #14a478;
+      }
+    }
+    .el-col:last-child {
+      border-right: none;
+    }
+  }
+}
+</style>

src/pages/monitor-dgp/playback.vue

@@ -16,11 +16,13 @@
       >
       </el-date-picker>
     </div>
-    <div id="huifangPlayer" ref="videoContainerRef2"></div>
+    <video id="huifangPlayer" ref="videoContainerRef2" controls autoplay muted></video>
+
+    <!-- <div id="huifangPlayer" ref="videoContainerRef2"></div> -->
   </div>
 </template>
 <script>
-import HlsPlayer from '@ezuikit/player-hls'
+// import HlsPlayer from '@ezuikit/player-hls'
 
 export default {
   name: 'huifangPlayer',
@@ -29,10 +31,12 @@ export default {
   data() {
     return {
       baseid: '',
-      player: null,
-      start: new Date(new Date().getTime() - 24 * 3600 * 1000),
-      end: new Date(),
-      timeVal: [new Date(new Date().getTime() - 24 * 3600 * 1000), new Date()],
+      flvPlayer: null,
+
+      timeVal: [
+        new Date(new Date().getTime() - 24 * 3600 * 1000),
+        new Date(new Date().getTime() - 1 * 3600 * 1000)
+      ],
       videoURL: ''
     }
   },
@@ -47,13 +51,52 @@ export default {
     },
     initPlayer() {
       const container = this.$refs.videoContainerRef2
-      this.player = new HlsPlayer({
-        id: `huifangPlayer`, // 目标 dom 容器节点的 id
-        url: this.videoURL, // hls 取流地址
-        staticPath: '/static/hls/', // decoder静态资源文件夹 默认根目录
-        width: container.clientWidth, // 播放器宽度
-        height: container.clientHeight
-      })
+
+      if (flvjs.isSupported()) {
+        // console.log(videoElement);
+
+        // 创建 FLV 播放器实例
+        this.flvPlayer = flvjs.createPlayer({
+          type: 'flv', // 设置视频类型为 FLV
+          isLive: true, // 指定这是点播
+          hasAudio: false, // 指定视频流中没有音频
+          url: this.videoURL
+        })
+
+        // 将播放器绑定到 HTML 视频元素
+        this.flvPlayer.attachMediaElement(container)
+        // 加载视频流
+        this.flvPlayer.load()
+        // 播放视频
+        this.flvPlayer.play()
+        // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail, errInfo) => {
+        //   console.log(errType, errDetail, errInfo)
+        // })
+      }
+    },
+    destroyPlayer() {
+      if (this.flvPlayer) {
+        const container = this.$refs.videoContainerRef2
+        this.flvPlayer.pause()
+        this.flvPlayer.unload()
+        this.flvPlayer.detachMediaElement()
+        this.flvPlayer.destroy()
+        this.flvPlayer = null
+        container.src = ''
+      }
+    },
+    updateVideoSource(url) {
+      const container = this.$refs.videoContainerRef2
+      this.flvPlayer.pause()
+      this.flvPlayer.unload()
+      this.flvPlayer.detachMediaElement()
+
+      this.flvPlayer.destroy()
+      this.flvPlayer = null
+      container.src = ''
+      setTimeout(() => {
+        this.initPlayer()
+      }, 100)
     },
 
     changeDate() {
@@ -81,13 +124,19 @@ export default {
         if (res.data.message == '') {
           const data = res.data.data
           this.videoURL = data.rtmp
-          this.initPlayer()
+          this.destroyPlayer()
+          // 初始化播放器
+          setTimeout(() => {
+            this.initPlayer()
+          }, 1000)
+        } else {
+          this.$message.error(res.data.message)
         }
       })
     }
   },
   beforeDestroy() {
-    this.player && this.player.destroy()
+    this.destroyPlayer()
   }
 }
 </script>

src/router/index.js

@@ -394,6 +394,8 @@ const xycbDataPhotos = () =>
   import(/* webpackChunkName: "xycb" */ '@/pages/forecasting/xycb/XycbDataPhotos')
 const xycbDataDetail = () =>
   import(/* webpackChunkName: "xycb" */ '@/pages/forecasting/xycb/xydatainfo')
+// ---------------------------------------测报模块-----------------------------性诱测报一拖三-------------------------
+const XycbOneThree = () => import(/* webpackChunkName: "xycb" */ '@/pages/forecasting/xycb_1_3/Xycb')
 
 // ---------------------------------------测报模块-----------------------------性诱3.0-------------------------
 const ThirdXy = () => import(/* webpackChunkName: "xycb" */ '@/pages/forecasting/thirdxy/thirdxy')
@@ -1727,6 +1729,14 @@ export default new Router({
             keepAlive: true, // 留存数据
             title: '性诱测报'
           }
+        }, {
+          path: 'xycbOneThree',
+          component: XycbOneThree,
+          name: 'xycbOneThree',
+          meta: {
+            keepAlive: true, // 留存数据
+            title: '性诱测报(一拖三)'
+          }
         },
         {
           path: 'xycbDataPhotos/:id',