设备信息新增添加

public/static/qunaioXiTong.html

@@ -224,7 +224,7 @@
 
     // let URL=localStorage.getItem('localHost');
     // let URL='http://192.168.1.62:8081';
-    let URL='http://192.168.1.70:8082';
+    let URL='http://192.168.1.108:8081';
 
      // 驱鸟设备列表接口
      function selectBridDeviceList() {

src/api/quniao/infoStatistics.js

@@ -13,4 +13,12 @@ export function reportList(data) {
         method: 'post',
         data: data
     })
+}
+// 预览
+export function previewData(data) {
+    return request({
+        url: `/api/brid/previewData?reportCode=${data.reportCode}&reportType=${data.reportType}`,
+        method: 'post',
+        // data: data
+    })
 }

src/components/FlvPlayer/index.vue

@@ -82,39 +82,39 @@ video {
   height: 100%;
   object-fit: cover;
 }
-video::-webkit-media-controls-fullscreen-button {
+.videoDom::-webkit-media-controls-fullscreen-button {
     display: none;
 }
 
-video::-webkit-media-controls-play-button {
+.videoDom::-webkit-media-controls-play-button {
     display: none;
 }
 
-video::-webkit-media-controls-timeline {
+.videoDom::-webkit-media-controls-timeline {
     display: none;
 }
 
-video::-webkit-media-controls-current-time-display {
+.videoDom::-webkit-media-controls-current-time-display {
     display: none;
 }
 
-video::-webkit-media-controls-time-remaining-display {
+.videoDom::-webkit-media-controls-time-remaining-display {
     display: none;
 }
 
-video::-webkit-media-controls-mute-button {
+.videoDom::-webkit-media-controls-mute-button {
     display: none;
 }
 
-video::-webkit-media-controls-toggle-closed-captions-button {
+.videoDom::-webkit-media-controls-toggle-closed-captions-button {
     display: none;
 }
 
-video::-webkit-media-controls-enclosure {
+.videoDom::-webkit-media-controls-enclosure {
     display: none;
 }
 
-video::-webkit-media-controls-volume-slider {
+.videoDom::-webkit-media-controls-volume-slider {
     display: none;
 }
 

src/views/quniao/device/index.vue

@@ -168,7 +168,7 @@
           </div>
           <div class="buttonDiv">
             <img src="@/assets/images/img/kaishi.png" @click="onSubmit" />
-            <img src="@/assets/images/img/jieshu.png" />
+            <img src="@/assets/images/img/jieshu.png" @click="cancelTask"/>
           </div>
         </div>
       </div>
@@ -263,6 +263,7 @@ import {
   addDeviceTask,
 } from "@/api/quniao/deviceOption";
 import musicList from "./musicList.vue";
+import { get } from "jquery";
 export default {
   components: {
     musicList,
@@ -280,50 +281,62 @@ export default {
         {
           title: "一月",
           states: 1,
+          monthNum: 0,
         },
         {
           title: "二月",
           states: 1,
+          monthNum: 1,
         },
         {
           title: "三月",
           states: 1,
+          monthNum: 2,
         },
         {
           title: "四月",
           states: 1,
+          monthNum: 3,
         },
         {
           title: "五月",
           states: 1,
+          monthNum: 4,
         },
         {
           title: "六月",
           states: 1,
+          monthNum: 5,
         },
         {
           title: "七月",
           states: 1,
+          monthNum: 6,
         },
         {
           title: "八月",
           states: 1,
+          monthNum: 7,
         },
         {
           title: "九月",
           states: 1,
+          monthNum: 8,
         },
         {
           title: "十月",
           states: 1,
+          monthNum: 9,
         },
         {
           title: "十一月",
           states: 1,
+          monthNum: 10,
         },
         {
           title: "十二月",
           states: 1,
+          monthNum: 11,
         },
       ],
 
@@ -350,7 +363,6 @@ export default {
       console.log(value);
     },
     radioChange(value) {
-      console.log(value);
       this.deviceSetStatus = value;
     },
 
@@ -539,26 +551,193 @@ export default {
         console.log(res);
       });
     },
+    //获取当前的年 月 周 日等时间
+    getWeek(value) {
+      let data = new Date();
+
+      switch (value) {
+        case 1:
+          return data.getDate();
+          break;
+        case 2:
+          return data.getDay();
+          break;
+        case 3:
+          return data.getMonth();
+          break;
+        case 4:
+          return data.getFullYear();
+          break;
+      }
+    },
+    // 获取所选星期转数字
+    getWeekNum(value) {
+      let num = null;
+      switch (value) {
+        case "周一":
+          num = 1;
+          break;
+        case "周二":
+          num = 2;
+          break;
+        case "周三":
+          num = 3;
+          break;
+        case "周四":
+          num = 4;
+          break;
+        case "周五":
+          num = 5;
+          break;
+        case "周六":
+          num = 6;
+          break;
+        case "周日":
+          num = 0;
+          break;
+      }
+      return num;
+    },
+    // 获取下周日期
+    getNextMonday(targetWeekday) {
+      const today = new Date();
+      const currentWeekday = today.getDay(); // 当前星期几
+
+      let diff;
+      if (targetWeekday === 7) targetWeekday = 0; // 如果目标是周日，用 0 表示
+
+      if (currentWeekday === targetWeekday) {
+        // 如果今天正好是目标星期几，则返回下一周的日期
+        diff = 7;
+      } else {
+        diff = (targetWeekday - currentWeekday + 7) % 7 || 7;
+      }
+      const nextDate = new Date(today);
+      nextDate.setDate(today.getDate() + diff);
+      return this.formatDate(nextDate);
+    },
+    // 获取本周指定星期几的日期
+    getThisWeekDay(targetWeekday) {
+      const today = new Date();
+      const currentWeekday = today.getDay(); // 当前星期几
+
+      let targetNum;
+
+      if (typeof targetWeekday === "string") {
+        // 如果传入的是中文名，转成数字
+        targetNum = this.getWeekNum(targetWeekday);
+      } else {
+        targetNum = targetWeekday;
+      }
+
+      // 计算偏移天数（从今天往前或往后推）
+      const diff = targetNum - currentWeekday;
+      const targetDate = new Date(today);
+
+      targetDate.setDate(today.getDate() + diff);
+
+      return this.formatDate(targetDate);
+    },
+    // 获取指定月份的所有日期
+    getMonthDays(year, month, num) {
+      const date = new Date(year, month, num); // 设置为当月第一天
+      const days = [];
+
+      while (true) {
+        const currentYear = date.getFullYear();
+        const currentMonth = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始
+        const currentDate = String(date.getDate()).padStart(2, "0");
+
+        days.push({
+          taskTime: `${currentYear}-${currentMonth}-${currentDate}`,
+        });
+
+        date.setDate(date.getDate() + 1);
+        if (date.getMonth() !== month) break; // 如果下一天不是这个月了，就停止
+      }
+
+      return days;
+    },
+    getTaskTimes(value) {
+      let currentYear = this.getWeek(4); //获取当前年份
+      let currentMonth = this.getWeek(3); //获取当前月份
+      let currentDays = new Date(currentYear, currentMonth, 0).getDate(); //获取当前月份的天数
+      let currentWeek = this.getWeek(2); //获取当前星期
+      let currentDay = this.getWeek(1); //当前几号
+      let weekTimeList = [];
+      let weekTimeIndex = [];
+      if (value == 2) {
+        this.WeekList.forEach((item, index) => {
+          let weekIndex = this.getWeekNum(item);
+          if (weekIndex < currentWeek) {
+            // 下周日期
+            weekTimeList.push({ taskTime: this.getNextMonday(weekIndex) });
+          } else {
+            // 本周日期
+            weekTimeList.push({ taskTime: this.getThisWeekDay(weekIndex) });
+          }
+        });
+        return weekTimeList;
+      } else if (value == 3) {
+        let numValue = 1;
+        let list = [];
+        let newList = [];
+        this.MounthList.forEach((item) => {
+          let index = this.getMounth(item);
+          if (index == currentMonth) {
+            numValue = currentDay;
+          } else {
+            numValue = 1;
+          }
+          list.push(this.getMonthDays(currentYear, index, numValue));
+        });
+        weekTimeList = list.flat();
+        return weekTimeList;
+      }
+    },
+    // 判断月份
+    getMounth(value) {
+      let num;
+      console.log(value, "月份筛选");
+      this.mounthData.forEach((item) => {
+        if (item.title == value) {
+          num = item.monthNum;
+        }
+      });
+      return num;
+    },
+    // 格式化日期为 yyyy-MM-dd
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    },
     // 添加
     onSubmit() {
       let data = {
         deviceIds: this.checkList.toString(),
         taskType: this.radio,
-        taskTimes: [{ taskTime: this.dayData }],
         startTimeinfo: this.formatTime(this.startTime),
         endTimeinfo: this.formatTime(this.endTime),
         taskName: this.taskName,
+        taskTimes: [{ taskTime: this.dayData }],
       };
+      if (this.radio == 1) {
+        data.taskTimes = [{ taskTime: this.dayData }];
+      } else{
+        data.taskTimes = this.getTaskTimes(this.radio)||[];
+      }
+
       if (
         data.deviceIds &&
         data.taskType &&
-        data.taskTimes &&
+        data.taskTimes.length > 0 &&
         data.startTimeinfo &&
         data.endTimeinfo &&
         data.taskName
-      ) {
+      ) { 
         addDeviceTask(data).then((res) => {
-          console.log(res, 1111111111);
           if (res.code == 200) {
             this.getTaskList();
           }
@@ -566,16 +745,10 @@ export default {
       } else {
         this.$message.error("请填写完整信息");
       }
-      console.log(data);
     },
     // 时间格式转换
     formatTime(chinaStandard) {
       var date = new Date(chinaStandard);
-      //   var y = date.getFullYear();
-      //   var m = date.getMonth() + 1;
-      //   m = m < 10 ? "0" + m : m;
-      //   var d = date.getDate();
-      //   d = d < 10 ? "0" + d : d;
       var h = date.getHours();
       h = h < 10 ? "0" + h : h;
       var minute = date.getMinutes();
@@ -584,6 +757,17 @@ export default {
       s = s < 10 ? "0" + s : s;
       return h + ":" + minute + ":" + s;
     },
+    // 取消
+    cancelTask(){
+      this.radio=0;
+      this.checkList=[];
+      this.dayData="";
+      this.WeekList=[];
+      this.MounthList=[];
+      this.startTime="";
+      this.endTime="";
+      this.taskName="";
+    }
   },
 
   mounted() {

src/views/quniao/infoStatistics/index.vue

@@ -125,8 +125,8 @@
               <el-table-column prop="time" label="操作" align="center">
                 <template slot-scope="scope">
                   <div class="operation">
-                    <span>预览</span>
-                    <span>下载</span>
+                    <span @click="initPreviewData(scope.row)">预览</span>
+                    <span @click="onDownload(scope.row)">下载</span>
                   </div>
                 </template>
               </el-table-column>
@@ -143,12 +143,155 @@
         </div>
       </el-col>
     </el-row>
+    <el-dialog title="鸟类入侵报告" :visible.sync="dialogVisible">
+      <div class="content">
+        <div style="margin-left: 4%; width: 95%">
+          <div style="line-height: 30px">
+            <span class="second_title">一、报告概述</span>
+          </div>
+          <div class="second_Content">
+            宜宾换流站<span class="zhonDian">第二大组交流滤波器区域</span
+            >共发生鸟类<span class="zhonDian"
+              >入侵事件{{ previewList.content.length }}起</span
+            >，联动定向声波驱离装置<span class="zhonDian"
+              >启动{{ previewList.nameDeviceNum }}台</span
+            >，任务执行<span class="zhonDian">成功</span
+            >，未造成第二大组交流滤波器安全生产隐患。
+          </div>
+          <div class="report_time" v-if="previewList.content.length != 0">
+            报告时间：{{ previewList.content[0].createTime.split(" ")[0] }}
+          </div>
+          <div>
+            <span class="bird_table">表1鸟类入侵事件表</span>
+            <el-table :data="previewList.content" style="width: 99%" border>
+              ">
+              <el-table-column label="序号" align="center" width="100">
+                <template slot-scope="{ $index }">
+                  <span>{{ $index + 1 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="入侵时间"
+                prop="intrusion_time"
+                align="center"
+              />
+              <el-table-column
+                label="入侵区域"
+                prop="position"
+                align="center"
+              />
+              <el-table-column label="入侵方位" prop="rqfw" align="center" />
+              <el-table-column
+                label="打击设备"
+                prop="deviceName"
+                align="center"
+              />
+              <el-table-column label="设备分贝" prop="sbfb" align="center" />
+              <el-table-column label="执行时间" prop="zxsj" align="center" />
+              <el-table-column
+                label="执行结果"
+                prop="zxjgName"
+                align="center"
+              />
+            </el-table>
+            <span class="second_title bird_invade">二、鸟类入侵事件</span>
+            <div class="content1">
+              <div class="report_content">
+                <div
+                  style="margin-left: 4%; width: 95%"
+                  v-for="(item, index) in previewList.content"
+                  :key="index"
+                >
+                  <span class="third_title"
+                    >{{ index + 1 }}.鸟类入侵事件{{ index + 1 }}</span
+                  >
+                  <div class="second_Content">
+                    {{ index + 1 }}.1探测详情：{{ item.intrusion_time }},<span
+                      class="zhonDian"
+                      >{{ item.position }}</span
+                    >发生鸟类入侵事件。以防控区域中心北向为基准0角度，<span
+                      class="zhonDian"
+                      >目标位置为{{ item.rqfw }}</span
+                    >。识别结果如下<span class="zhonDian"></span>视频/图{{
+                      2 * index + 1
+                    }}鸟类入侵视频/图*
+                  </div>
+                  <div class="report_video">
+                    <video controls>
+                      <source
+                        type="video/mp4"
+                        id="video1"
+                        :src="'/static/gj/' + item.videoPath"
+                      />
+                    </video>
+                    <div class="bird_table">
+                      视频{{ 2 * index + 1 }}鸟类入侵视频
+                    </div>
+                  </div>
+                  <div>
+                    <img
+                      :src="'/static/gj/' + item.picTcPath"
+                      alt=""
+                      class="report_img"
+                    />
+                    <div class="bird_table">
+                      图{{ 2 * index + 1 }}鸟类入侵抓图
+                    </div>
+                  </div>
+                  <div style="margin-left: 4%; width: 95%; margin-top: 3%">
+                    <span
+                      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
+                        index + 1
+                      }}.2驱离详情：根据入侵方位，启动{{
+                        item.deviceName
+                      }}，<span class="zhonDian">设备分贝{{ item.sbfb }}dB</span
+                      >，<span class="zhonDian">执行时间{{ item.zxsj }}秒</span
+                      >，执行结果<span class="zhonDian">{{
+                        item.zxjgName
+                      }}</span
+                      >。打击结果如下视频/图{{
+                        2 * index + 2
+                      }}鸟类驱离视频/图*所示：</span
+                    >
+                  </div>
+                  <div>
+                    <video controls class="report_video">
+                      <source
+                        type="video/mp4"
+                        id="video1"
+                        :src="'/static/gj/' + item.video2Path"
+                      />
+                    </video>
+                    <span class="bird_table"
+                      >视频{{ 2 * index + 2 }}鸟类驱离视频</span
+                    >
+                  </div>
+                  <div>
+                    <img
+                      :src="'/static/gj/' + item.picDjPath"
+                      class="report_img"
+                    />
+                    <div class="bird_table">
+                      图{{ 2 * index + 2 }}鸟类驱离抓图
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
-import { intrusionNum, reportList } from "@/api/quniao/infoStatistics";
+import {
+  intrusionNum,
+  reportList,
+  previewData,
+} from "@/api/quniao/infoStatistics";
 import dayjs from "dayjs";
 export default {
   data() {
@@ -169,8 +312,14 @@ export default {
       tableQurayTime: [],
       tableData: [],
       total: 0,
+      dialogVisible: false,
+      previewList: {
+        content: [],
+        nameDeviceNum: 0,
+      },
     };
   },
+  comments: {},
   created() {
     this.changeDate();
   },
@@ -398,6 +547,39 @@ export default {
       this.tableQuray.pNum = page;
       this.initReportList();
     },
+    // 下载
+    onDownload(value) {
+      fetch(
+        `${process.env.VUE_APP_BASE_API}/api/brid/downReport?reportCode=${value.reportCode}&reportType=${value.reportType}`
+      ) // 发送请求到后台获取PDF报告的字节流
+        .then((response) => response.blob()) // 将响应转换为Blob对象
+        .then((blob) => {
+          console.log(URL);
+          var url = URL.createObjectURL(blob); // 创建Blob URL
+          var downloadLink = document.createElement("a");
+          downloadLink.href = url;
+          downloadLink.download = "report.doc"; // 设置文件名
+          downloadLink.style.display = "none"; // 隐藏<a>元素
+          document.body.appendChild(downloadLink); // 将<a>元素添加到页面中
+          downloadLink.click(); // 模拟点击下载链接
+          document.body.removeChild(downloadLink); // 移除<a>元素
+        })
+        .catch((error) => {
+          console.error("下载失败:", error);
+        });
+    },
+    // 预览
+    initPreviewData(item) {
+      // let data = {
+      //   reportCode: "BGD20231107",
+      //   reportType: 1,
+      // };
+      previewData(item).then((res) => {
+        console.log(res, "预览数据");
+        this.previewList = res;
+        this.dialogVisible = true;
+      });
+    },
   },
 };
 </script>
@@ -608,6 +790,86 @@ export default {
   background: transparent !important;
   color: #fff !important;
 }
+::v-deep .el-dialog {
+  background: #222f3d !important;
+}
+::v-deep .el-dialog__title {
+  color: white;
+  font-size: 1.5vw;
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  font-weight: bold;
+}
+.content {
+  overflow-y: scroll;
+  height: 92%;
+  width: 97%;
+  font-size: 1vw;
+  color: #fff;
+}
+.content::-webkit-scrollbar {
+  /* display: none; */
+  width: 5px;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 5px;
+}
+
+.content::-webkit-scrollbar-thumb {
+  /* display: none; */
+  /* width: 1px; */
+  background-color: #40e5f0;
+  border-radius: 5px;
+}
+.second_title {
+  font-size: 1.2vw;
+  font-weight: bold;
+}
+.report_time {
+  margin: 2%;
+  display: inline-block;
+}
+.second_Content {
+  text-indent: 2em;
+}
+.zhonDian {
+  font-weight: bold;
+  border-bottom: 1px solid white;
+}
+.bird_table {
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+}
+.bird_invade {
+  /* margin-left: 4%; */
+  margin-top: 2%;
+  display: inline-block;
+}
+.report_content {
+  width: 100%;
+  margin-top: 2%;
+  line-height: 30px;
+}
+.third_title {
+  margin-left: 0;
+  font-size: 1.1vw;
+  font-weight: bold;
+}
+.report_video {
+  margin-left: 4%;
+  width: 95%;
+  height: 48%;
+}
+.report_video video {
+  width: 100%;
+  height: 100%;
+}
+.report_img {
+  width: 95%;
+  margin-left: 4%;
+  margin-top: 2%;
+}
 </style>
 <style>
 </style>