交通局视频

src/views/globalMap/RightMenu/index.vue

@@ -69,6 +69,8 @@
           <Mitigation v-if="menuState.menuData[menuState.activeIndex]?.name === '防灾救援'" @handle-menu="handleMenu" />
           <!--交通视频-->
           <TrafficVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通视频'" @handle-menu="handleMenu" />
+          <!--交通局视频-->
+          <tranBureauVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通局视频'" @handle-menu="handleMenu" />
           <!--易涝隐患点-->
           <PotentialFloodHazard v-if="menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'" @handle-menu="handleMenu" />
           <!--通讯保障-->
@@ -111,6 +113,7 @@ import PreventDrowning from './PreventDrowning.vue';
 import Fireproofing from './Fireproofing.vue';
 import ForestDefenseVideo from './ForestDefenseVideo/index.vue';
 import Mitigation from './Mitigation.vue';
+import tranBureauVideo from './tranBureauVideo.vue';
 import PotentialFloodHazard from './PotentialFloodHazard.vue';
 import TowerStatus from './TowerStatus.vue';
 import CommunicationSupport from './CommunicationSupport.vue';

src/views/globalMap/RightMenu/tranBureauVideo.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text title">交通局视频</div>
+      <div class="box-left">
+        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <div class="btn" @click="handleCancel">取消</div>
+      </div>
+<!--      <div class="gradient-text">视频类型</div>-->
+      <div class="custom-table">
+        <div class="th">
+          <div class="td">
+            <div style="width: 240px">
+              <el-select
+                v-model="queryParams.area"
+                placeholder="所有区县"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+                @change="initData"
+              >
+                <el-option label="所有区县" value="" />
+                <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
+              </el-select>
+            </div>
+          </div>
+          <div class="td">
+            <div style="width: 240px">
+              <el-select
+                v-model="queryParams.type"
+                placeholder="类型"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+                @change="initData2"
+              >
+                <el-option label="所有类型" value="" />
+                <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.label" />
+              </el-select>
+            </div>
+          </div>
+          <div class="td">名称</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.area }}</div>
+            <div class="td">{{ item.type }}</div>
+            <div class="td">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="交通局视频" hide-footer>
+        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+          <HKVideo :dot_data="videoMonitorData" />
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue';
+import { getRescue } from '@/api/globalMap/mitigation';
+import { deepClone } from '@/utils';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
+const queryParams = reactive({
+  current: 1,
+  size: 10,
+  keyword: '',
+  area: ''
+});
+const total = ref(0);
+
+const listData = ref([]);
+
+let showDialog = ref(false);
+let videoMonitorData = ref({});
+const handleShowDialog = (row) => {
+  showDialog.value = false;
+  nextTick(() => {
+    videoMonitorData.value = row;
+    showDialog.value = true;
+  });
+};
+const initData = () => {
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area,
+    keyword: queryParams.keyword
+  };
+  delete newQueryParams.area;
+  delete newQueryParams.keyword;
+  getRescue(newQueryParams).then((res) => {
+    listData.value = res.rows;
+    total.value = res.total;
+  });
+};
+const initData2 = () => {}
+const handleCancel = () => {
+  queryParams.keyword = '';
+  initData();
+};
+initData();
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
+.custom-table {
+  width: 1499px;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 1499px;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    display: flex;
+  }
+  .tr {
+
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    //margin-left: -23px;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+.box-left {
+  display: flex;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  .btn {
+    width: 140px;
+    min-width: 140px;
+    height: 56px;
+    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+}
+</style>