- <template>
- <div :class="['zksqImg', ifExpand ? 'leftZk' : 'leftSq']" @click="changeifExpand" title="展开收起"></div>
- <div :class="['tabRightContent', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
- <tabRightWL @showStationRiverclose="handlemodle"></tabRightWL>
- <tabRightGJ></tabRightGJ>
- <tabRightFX></tabRightFX>
- <tabRightCX></tabRightCX>
- </div>
- <!-- 河道横断面分析 -->
- <transition name="fade">
- <div :class="toggles ? 'supervisePopupPKs supervisePopupPK3' : ' supervisePopupPKs supervisePopupPK2'" v-if="showStationRiver">
- <div class="title">
- <div class="titleName">{{ supervisePopuplist.riverTitle }}</div>
- <div class="closePopup">
- <svg-icon icon-class="exit-fullscreen" class="screenfull" @click="toggle" />
- <el-icon :size="18" @click="closePopup"><Close /></el-icon>
- </div>
- </div>
- <div class="allContent">
- <RiverPorfileChart
- :echartData="supervisePopuplist.echartData"
- :refresh="supervisePopuplist.refresh"
- class="echartDatas"
- v-if="showStationRiver && toggles"
- ></RiverPorfileChart>
- <RiverPorfileChart
- :echartData="supervisePopuplist.echartData"
- :refresh="supervisePopuplist.refresh"
- class="echartDatas1"
- v-if="showStationRiver && !toggles"
- ></RiverPorfileChart>
- <el-table :data="supervisePopuplist.tableDatalist" style="width: 100%" v-if="toggles" height="460">
- <el-table-column prop="pointNumber" label="排口编号" width="180" />
- <el-table-column prop="groundElevation" label="地面高程(m)" width="180" />
- <el-table-column prop="y" label="标高(m)" />
- <el-table-column prop="roadName" label="所在街道" />
- </el-table>
- </div>
- </div>
- </transition>
-
- <!-- 查看详情弹窗 -->
-
- <div id="pop-up" :class="'detailbox'" v-if="showModal">
- <div class="weather-head">
- <div class="head-bg">视频监控详情</div>
- <el-icon :size="18" @click="closePopupshowModal" class="CloseOutline weather-icon"><Close /></el-icon>
- </div>
- <div class="weather-body Bubbleframe-body">
- <!-- <HKVideo videoHeightCus="300" :cameraIndexCode="cameraIndexCode"> </HKVideo> -->
- <!-- 实时预览 -->
- <HKVideo
- ref="video"
- :appkey="videoConfig.appKey"
- :secret="videoConfig.appSecret"
- :ip="videoConfig.ip"
- :port="videoConfig.port"
- :cameraIndexCode="AllData.cameraIndexCode"
- ></HKVideo>
- </div>
- </div>
- </template>
- <script setup name="tabRightContent">
- import bus from '@/bus';
- import HKVideo from '@/components/videoHK/index.vue'; //实时预览
- import { HKconfig } from '@/utils/HKConfig';
- // import Screenfull from '@/components/Screenfull';
- import tabRightPS from './tabRightPS.vue'; //排水设施
- import tabRightWL from './tabRightWL.vue'; //物联感知、
- import tabRightGJ from './tabRightGJ.vue'; //监测告警
- import tabRightFX from './tabRightFX.vue'; //风险研判
- import tabRightCX from './tabRightCX.vue'; //长效养护
- import RiverPorfileChart from '@/components/Echarts/riverPorfileChart.vue'; //河道横断面分析
- const showStationRiver = ref(false);
- const ifExpand = ref(true);
- const supervisePopuplist = ref('');
- const showStationRiver3 = ref(true);
- const showModal = ref(false);
- const toggles = ref(false);
-
- const AllData = reactive({
- videoOK: true,
- videoBack: true,
- cameraIndexCode: 'f8b48c890c054ac190c124bb190a7007', //实时预览code
- cameraIndexCodeBK: '09aa2a2694744cb8b188442b0b2af9b7', //历史回放code
- layout: '1',
- defaultList: [
- { cameraIndexCode: 'f8b48c890c054ac190c124bb190a7007', wndId: 1 },
- { cameraIndexCode: '09aa2a2694744cb8b188442b0b2af9b7', wndId: 2 },
- { cameraIndexCode: '81eddc6915a440cfb15e3725116bb087', wndId: 3 },
- { cameraIndexCode: 'bb9b18f5b9be4277a6b648518f2b6878', wndId: 4 },
- ],
- });
- const videoConfig = reactive({
- appKey: HKconfig.appkey,
- appSecret: HKconfig.secret,
- ip: HKconfig.ip,
- port: HKconfig.port,
- });
-
- onMounted(() => {
- bus.on('VideosHK', e => {
- //视频弹窗
- showModal.value = true;
- });
- });
-
- const changeifExpand = val => {
- ifExpand.value = !ifExpand.value;
- bus.emit('ifexpandValue', ifExpand.value);
- };
-
- const handlemodle = val => {
- ifExpand.value = false;
- bus.emit('ifexpandValue', ifExpand.value);
- toggles.value = false;
- bus.emit('supervisePopupPK3', true);
- showStationRiver.value = true;
- supervisePopuplist.value = val;
- };
- //放大缩小
- const toggle = val => {
- toggles.value = !toggles.value;
- };
- //取消视频弹窗
- const closePopupshowModal = () => {
- showModal.value = false;
- };
- // 取消弹窗;
- const closePopup = val => {
- showStationRiver.value = false;
- ifExpand.value = true;
- bus.emit('ifexpandValue', ifExpand.value);
- bus.emit('clonesupervisePopupPK3', true);
- };
-
- onMounted(() => {
- bus.on('tabconten2vlaue', e => {
- ifExpand.value = !ifExpand.value;
- });
- }),
- onBeforeUnmount(() => {
- bus.off('VideosHK');
- bus.off('tabconten2vlaue');
- });
- </script>
- <style lang="scss" scoped>
- .zksqImg {
- border-radius: 10px 10px 0px 0px;
- width: 13px;
- height: 147px;
- background: url('@/assets/newImgs/down.png');
- background-size: 100% 100%;
- transform: rotate(180deg);
- position: absolute;
- top: 340px;
- z-index: 115;
- cursor: pointer;
- transition: 0.5s ease-in-out;
- }
- .leftZk {
- right: 534px;
- }
- .leftSq {
- right: 2px;
- }
- .tabRightContent {
- width: 528px;
- height: 750px;
- top: 8%;
- right: 5px;
- position: absolute;
- z-index: 115;
- }
- .echartDatas {
- width: 100% !important;
- height: 380px !important;
- margin: 10px auto;
- }
- .echartDatas1 {
- width: 100% !important;
- height: 180px !important;
- margin: 10px auto;
- }
- .supervisePopupPKs {
- position: fixed;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- animation: slideUp 1s ease-in-out forwards;
- .title {
- display: flex;
- justify-content: space-between;
- }
- .closePopup {
- display: flex;
- }
- .screenfull {
- margin-right: 20px;
- }
- .allContent {
- display: flex;
- flex-direction: column;
- }
- }
- @keyframes slideUp {
- from {
- transform: translateY(200%);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- .supervisePopupPK2 {
- top: 75%;
- right: 0%;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- width: 100%;
- height: 230px;
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- }
- .supervisePopupPK3 {
- position: fixed;
- top: 2%;
- right: 0%;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- width: 100%;
- height: 100vh;
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- animation: slideUp 1s ease-in-out forwards;
- }
- #pop-up {
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 590px;
- height: 560px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
-
- .weather-head {
- position: relative;
- height: 36px;
- background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
-
- .head-bg {
- position: absolute;
- width: 290px;
- line-height: 34px;
- height: 36px;
- left: 0;
- bottom: 0;
- background-size: 100% 100%;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #ffffff;
- padding-left: 20px;
- }
-
- .Bubbleframe-bg {
- position: absolute;
- width: 226px;
- line-height: 36px;
- height: 36px;
- left: 0;
- bottom: 0;
- background-size: 100% 100%;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #ffffff;
- padding-left: 20px;
- }
-
- .weather-icon {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #1096db;
- }
- }
-
- .weather-body {
- padding: 11px;
- height: calc(100% - 36px);
- background: #021534;
- border: 1px solid #114f89;
- border-top: 1px solid #1096db;
- }
- }
- .weather-icon {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #1096db;
- font-size: 24px;
- }
- </style>