Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabContent.vue
@鲁yixuan 鲁yixuan on 29 Aug 8 KB updata
  1. <template>
  2. <div :class="['zksqImg', ifExpand ? 'leftZk' : 'leftSq']" @click="changeifExpand" title="展开收起"></div>
  3. <div :class="['tabRightContent', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  4. <tabRightWL @showStationRiverclose="handlemodle"></tabRightWL>
  5. <tabRightGJ></tabRightGJ>
  6. <tabRightFX></tabRightFX>
  7. <tabRightCX></tabRightCX>
  8. </div>
  9. <!-- 河道横断面分析 -->
  10. <transition name="fade">
  11. <div :class="toggles ? 'supervisePopupPKs supervisePopupPK3' : ' supervisePopupPKs supervisePopupPK2'" v-if="showStationRiver">
  12. <div class="title">
  13. <div class="titleName">{{ supervisePopuplist.riverTitle }}</div>
  14. <div class="closePopup">
  15. <svg-icon icon-class="exit-fullscreen" class="screenfull" @click="toggle" />
  16. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  17. </div>
  18. </div>
  19. <div class="allContent">
  20. <RiverPorfileChart
  21. :echartData="supervisePopuplist.echartData"
  22. :refresh="supervisePopuplist.refresh"
  23. class="echartDatas"
  24. v-if="showStationRiver && toggles"
  25. ></RiverPorfileChart>
  26. <RiverPorfileChart
  27. :echartData="supervisePopuplist.echartData"
  28. :refresh="supervisePopuplist.refresh"
  29. class="echartDatas1"
  30. v-if="showStationRiver && !toggles"
  31. ></RiverPorfileChart>
  32. <el-table :data="supervisePopuplist.tableDatalist" style="width: 100%" v-if="toggles" height="460">
  33. <el-table-column prop="pointNumber" label="排口编号" width="180" />
  34. <el-table-column prop="groundElevation" label="地面高程(m)" width="180" />
  35. <el-table-column prop="y" label="标高(m)" />
  36. <el-table-column prop="roadName" label="所在街道" />
  37. </el-table>
  38. </div>
  39. </div>
  40. </transition>
  41.  
  42. <!-- 查看详情弹窗 -->
  43.  
  44. <div id="pop-up" :class="'detailbox'" v-if="showModal">
  45. <div class="weather-head">
  46. <div class="head-bg">视频监控详情</div>
  47. <el-icon :size="18" @click="closePopupshowModal" class="CloseOutline weather-icon"><Close /></el-icon>
  48. </div>
  49. <div class="weather-body Bubbleframe-body">
  50. <!-- <HKVideo videoHeightCus="300" :cameraIndexCode="cameraIndexCode"> </HKVideo> -->
  51. <!-- 实时预览 -->
  52. <HKVideo
  53. ref="video"
  54. :appkey="videoConfig.appKey"
  55. :secret="videoConfig.appSecret"
  56. :ip="videoConfig.ip"
  57. :port="videoConfig.port"
  58. :cameraIndexCode="AllData.cameraIndexCode"
  59. ></HKVideo>
  60. </div>
  61. </div>
  62. </template>
  63. <script setup name="tabRightContent">
  64. import bus from '@/bus';
  65. import HKVideo from '@/components/videoHK/index.vue'; //实时预览
  66. import { HKconfig } from '@/utils/HKConfig';
  67. // import Screenfull from '@/components/Screenfull';
  68. import tabRightPS from './tabRightPS.vue'; //排水设施
  69. import tabRightWL from './tabRightWL.vue'; //物联感知、
  70. import tabRightGJ from './tabRightGJ.vue'; //监测告警
  71. import tabRightFX from './tabRightFX.vue'; //风险研判
  72. import tabRightCX from './tabRightCX.vue'; //长效养护
  73. import RiverPorfileChart from '@/components/Echarts/riverPorfileChart.vue'; //河道横断面分析
  74. const showStationRiver = ref(false);
  75. const ifExpand = ref(true);
  76. const supervisePopuplist = ref('');
  77. const showStationRiver3 = ref(true);
  78. const showModal = ref(false);
  79. const toggles = ref(false);
  80.  
  81. const AllData = reactive({
  82. videoOK: true,
  83. videoBack: true,
  84. cameraIndexCode: 'f8b48c890c054ac190c124bb190a7007', //实时预览code
  85. cameraIndexCodeBK: '09aa2a2694744cb8b188442b0b2af9b7', //历史回放code
  86. layout: '1',
  87. defaultList: [
  88. { cameraIndexCode: 'f8b48c890c054ac190c124bb190a7007', wndId: 1 },
  89. { cameraIndexCode: '09aa2a2694744cb8b188442b0b2af9b7', wndId: 2 },
  90. { cameraIndexCode: '81eddc6915a440cfb15e3725116bb087', wndId: 3 },
  91. { cameraIndexCode: 'bb9b18f5b9be4277a6b648518f2b6878', wndId: 4 },
  92. ],
  93. });
  94. const videoConfig = reactive({
  95. appKey: HKconfig.appkey,
  96. appSecret: HKconfig.secret,
  97. ip: HKconfig.ip,
  98. port: HKconfig.port,
  99. });
  100.  
  101. onMounted(() => {
  102. bus.on('VideosHK', e => {
  103. //视频弹窗
  104. showModal.value = true;
  105. });
  106. });
  107.  
  108. const changeifExpand = val => {
  109. ifExpand.value = !ifExpand.value;
  110. bus.emit('ifexpandValue', ifExpand.value);
  111. };
  112.  
  113. const handlemodle = val => {
  114. ifExpand.value = false;
  115. bus.emit('ifexpandValue', ifExpand.value);
  116. toggles.value = false;
  117. bus.emit('supervisePopupPK3', true);
  118. showStationRiver.value = true;
  119. supervisePopuplist.value = val;
  120. };
  121. //放大缩小
  122. const toggle = val => {
  123. toggles.value = !toggles.value;
  124. };
  125. //取消视频弹窗
  126. const closePopupshowModal = () => {
  127. showModal.value = false;
  128. };
  129. // 取消弹窗;
  130. const closePopup = val => {
  131. showStationRiver.value = false;
  132. ifExpand.value = true;
  133. bus.emit('ifexpandValue', ifExpand.value);
  134. bus.emit('clonesupervisePopupPK3', true);
  135. };
  136.  
  137. onMounted(() => {
  138. bus.on('tabconten2vlaue', e => {
  139. ifExpand.value = !ifExpand.value;
  140. });
  141. }),
  142. onBeforeUnmount(() => {
  143. bus.off('VideosHK');
  144. bus.off('tabconten2vlaue');
  145. });
  146. </script>
  147. <style lang="scss" scoped>
  148. .zksqImg {
  149. border-radius: 10px 10px 0px 0px;
  150. width: 13px;
  151. height: 147px;
  152. background: url('@/assets/newImgs/down.png');
  153. background-size: 100% 100%;
  154. transform: rotate(180deg);
  155. position: absolute;
  156. top: 340px;
  157. z-index: 115;
  158. cursor: pointer;
  159. transition: 0.5s ease-in-out;
  160. }
  161. .leftZk {
  162. right: 534px;
  163. }
  164. .leftSq {
  165. right: 2px;
  166. }
  167. .tabRightContent {
  168. width: 528px;
  169. height: 750px;
  170. top: 8%;
  171. right: 5px;
  172. position: absolute;
  173. z-index: 115;
  174. }
  175. .echartDatas {
  176. width: 100% !important;
  177. height: 380px !important;
  178. margin: 10px auto;
  179. }
  180. .echartDatas1 {
  181. width: 100% !important;
  182. height: 180px !important;
  183. margin: 10px auto;
  184. }
  185. .supervisePopupPKs {
  186. position: fixed;
  187. -webkit-transform: translate(-112%, 0%);
  188. -ms-transform: translate(-112%, 0%);
  189. transform: translate(-112%, 0%);
  190. background: #021534;
  191. border: 0.00521rem solid #114f89;
  192. z-index: 2000;
  193. padding: 10px;
  194. animation: slideUp 1s ease-in-out forwards;
  195. .title {
  196. display: flex;
  197. justify-content: space-between;
  198. }
  199. .closePopup {
  200. display: flex;
  201. }
  202. .screenfull {
  203. margin-right: 20px;
  204. }
  205. .allContent {
  206. display: flex;
  207. flex-direction: column;
  208. }
  209. }
  210. @keyframes slideUp {
  211. from {
  212. transform: translateY(200%);
  213. opacity: 0;
  214. }
  215. to {
  216. transform: translateY(0);
  217. opacity: 1;
  218. }
  219. }
  220. .supervisePopupPK2 {
  221. top: 75%;
  222. right: 0%;
  223. -webkit-transform: translate(-112%, 0%);
  224. -ms-transform: translate(-112%, 0%);
  225. transform: translate(-112%, 0%);
  226. width: 100%;
  227. height: 230px;
  228. background: #021534;
  229. border: 0.00521rem solid #114f89;
  230. z-index: 2000;
  231. padding: 10px;
  232. }
  233. .supervisePopupPK3 {
  234. position: fixed;
  235. top: 2%;
  236. right: 0%;
  237. -webkit-transform: translate(-112%, 0%);
  238. -ms-transform: translate(-112%, 0%);
  239. transform: translate(-112%, 0%);
  240. width: 100%;
  241. height: 100vh;
  242. background: #021534;
  243. border: 0.00521rem solid #114f89;
  244. z-index: 2000;
  245. padding: 10px;
  246. animation: slideUp 1s ease-in-out forwards;
  247. }
  248. #pop-up {
  249. position: fixed;
  250. left: 50%;
  251. top: 50%;
  252. transform: translate(-50%, -50%);
  253. width: 590px;
  254. height: 560px;
  255. background: #021534;
  256. border: 1px solid #114f89;
  257. z-index: 2000;
  258.  
  259. .weather-head {
  260. position: relative;
  261. height: 36px;
  262. background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
  263.  
  264. .head-bg {
  265. position: absolute;
  266. width: 290px;
  267. line-height: 34px;
  268. height: 36px;
  269. left: 0;
  270. bottom: 0;
  271. background-size: 100% 100%;
  272. font-size: 18px;
  273. font-family: Source Han Sans CN;
  274. font-weight: 550;
  275. color: #ffffff;
  276. padding-left: 20px;
  277. }
  278.  
  279. .Bubbleframe-bg {
  280. position: absolute;
  281. width: 226px;
  282. line-height: 36px;
  283. height: 36px;
  284. left: 0;
  285. bottom: 0;
  286. background-size: 100% 100%;
  287. font-size: 18px;
  288. font-family: Source Han Sans CN;
  289. font-weight: 550;
  290. color: #ffffff;
  291. padding-left: 20px;
  292. }
  293.  
  294. .weather-icon {
  295. cursor: pointer;
  296. position: absolute;
  297. right: 12px;
  298. top: 50%;
  299. transform: translateY(-50%);
  300. color: #1096db;
  301. }
  302. }
  303.  
  304. .weather-body {
  305. padding: 11px;
  306. height: calc(100% - 36px);
  307. background: #021534;
  308. border: 1px solid #114f89;
  309. border-top: 1px solid #1096db;
  310. }
  311. }
  312. .weather-icon {
  313. cursor: pointer;
  314. position: absolute;
  315. right: 12px;
  316. top: 50%;
  317. transform: translateY(-50%);
  318. color: #1096db;
  319. font-size: 24px;
  320. }
  321. </style>