index.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  1. <template>
  2. <div class="container-ln">
  3. <customHeader>潞宁新增</customHeader>
  4. <div class="video-ln">
  5. <div v-for="(item, index) in addrList" :key="index" class="video-module">
  6. <div class="player-name">{{ item.name }}</div>
  7. <div style="padding-top:3px">
  8. <template v-if="item.addr.startsWith('rtsp://')">
  9. <video :id="`video${index}`" muted autoplay></video>
  10. <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
  11. </template>
  12. <template v-else>
  13. <div :id="'player' + index"></div>
  14. </template>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="content-ln">
  19. <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
  20. <a-tab-pane key="1" tab="安全监控">
  21. <template v-if="deviceType == 'fan' && activeKey == '1'">
  22. <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
  23. </template>
  24. <template v-else-if="activeKey == '1' && deviceType">
  25. <template v-if="hasPermission('btn:noGb')">
  26. <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`"
  27. :dataSource="dataSource" design-scope="device_monitor" :isShowPagination="false"
  28. :isShowActionColumn="false"
  29. :is-show-select="false" title="设备监测" :scroll="{ y: 360 }" />
  30. </template>
  31. <template v-else>
  32. <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`"
  33. :dataSource="dataSource" design-scope="device_monitor" :isShowPagination="false"
  34. :isShowActionColumn="false"
  35. :is-show-select="false" title="设备监测" :form-config="undefined" :scroll="{ y: 650 }">
  36. <template #filterCell="{ column, record }">
  37. <template v-if="deviceType.startsWith('gate')">
  38. <template
  39. v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
  40. <a-tag
  41. v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
  42. color="red">正在打开</a-tag>
  43. <a-tag v-else-if="column.dataIndex === 'frontGateOpen'"
  44. color="processing">打开</a-tag>
  45. </template>
  46. <template
  47. v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
  48. <a-tag
  49. v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
  50. color="red">正在关闭</a-tag>
  51. <a-tag
  52. v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
  53. color="default">关闭</a-tag>
  54. <a-tag
  55. v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
  56. color="default">打开</a-tag>
  57. </template>
  58. <template
  59. v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
  60. <a-tag
  61. v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
  62. color="red">正在打开</a-tag>
  63. <a-tag v-else-if="column.dataIndex === 'rearGateOpen'"
  64. color="processing">打开</a-tag>
  65. </template>
  66. <template
  67. v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
  68. <a-tag
  69. v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
  70. color="red">正在关闭</a-tag>
  71. <a-tag
  72. v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
  73. color="default">关闭</a-tag>
  74. <a-tag
  75. v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
  76. color="default">打开</a-tag>
  77. </template>
  78. </template>
  79. <template v-if="deviceType.startsWith('windrect')">
  80. <a-tag v-if="column.dataIndex === 'sign'"
  81. :color="record.sign == '0' ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
  82. {{ record.sign == '0' ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag>
  83. <template
  84. v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
  85. <a-tag v-if="record.isRun == -2 || record.isRun == -1"
  86. :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
  87. record.isRun == -2 ? '空闲' : '等待'
  88. }}</a-tag>
  89. <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
  90. <Progress v-else :percent="Number(record.isRun)" size="small"
  91. status="active" />
  92. </template>
  93. </template>
  94. <template v-if="deviceType.startsWith('safetymonitor')">
  95. <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
  96. <div v-if="!record.V && column.dataIndex === 'V'">-</div>
  97. <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
  98. <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
  99. <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
  100. <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
  101. </template>
  102. <a-tag v-if="column.dataIndex === 'warnFlag'"
  103. :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
  104. {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag
  105. == 2 ? '断开' : '未监测'
  106. }}</a-tag>
  107. <a-tag v-if="column.dataIndex === 'netStatus'"
  108. :color="record.netStatus == '0' ? '#f00' : 'green'">{{
  109. record.netStatus == '0' ? '断开' : '连接'
  110. }}</a-tag>
  111. </template>
  112. </MonitorTable>
  113. </template>
  114. </template>
  115. </a-tab-pane>
  116. <a-tab-pane key="2" tab="瓦斯抽放">
  117. <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
  118. design-scope="device_monitor" :isShowPagination="false"
  119. :isShowActionColumn="false"
  120. :is-show-select="false" title="设备监测" :form-config="undefined" :scroll="{ y: 360 }">
  121. <template #filterCell="{ column, record }">
  122. <template v-if="deviceType.startsWith('gate')">
  123. <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
  124. <a-tag
  125. v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
  126. color="red">正在打开</a-tag>
  127. <a-tag v-else-if="column.dataIndex === 'frontGateOpen'"
  128. color="processing">打开</a-tag>
  129. </template>
  130. <template
  131. v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
  132. <a-tag
  133. v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
  134. color="red">正在关闭</a-tag>
  135. <a-tag
  136. v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
  137. color="default">关闭</a-tag>
  138. <a-tag
  139. v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
  140. color="default">打开</a-tag>
  141. </template>
  142. <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
  143. <a-tag
  144. v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
  145. color="red">正在打开</a-tag>
  146. <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
  147. </template>
  148. <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
  149. <a-tag
  150. v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
  151. color="red">正在关闭</a-tag>
  152. <a-tag
  153. v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
  154. color="default">关闭</a-tag>
  155. <a-tag
  156. v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
  157. color="default">打开</a-tag>
  158. </template>
  159. </template>
  160. <template v-if="deviceType.startsWith('windrect')">
  161. <a-tag v-if="column.dataIndex === 'sign'"
  162. :color="record.sign == '0' ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
  163. {{ record.sign == '0' ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag>
  164. <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
  165. <a-tag v-if="record.isRun == -2 || record.isRun == -1"
  166. :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
  167. record.isRun == -2 ? '空闲' : '等待'
  168. }}</a-tag>
  169. <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
  170. <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
  171. </template>
  172. </template>
  173. <template v-if="deviceType.startsWith('safetymonitor')">
  174. <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
  175. <div v-if="!record.V && column.dataIndex === 'V'">-</div>
  176. <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
  177. <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
  178. <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
  179. <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
  180. </template>
  181. <a-tag v-if="column.dataIndex === 'warnFlag'"
  182. :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
  183. {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag
  184. == 2 ? '断开' : '未监测'
  185. }}</a-tag>
  186. <a-tag v-if="column.dataIndex === 'netStatus'"
  187. :color="record.netStatus == '0' ? '#f00' : 'green'">{{
  188. record.netStatus == '0' ? '断开' : '连接'
  189. }}</a-tag>
  190. </template>
  191. </MonitorTable>
  192. </a-tab-pane>
  193. </a-tabs>
  194. </div>
  195. </div>
  196. </template>
  197. <script setup lang="ts">
  198. import { ref, reactive, onMounted, onUnmounted, shallowRef } from 'vue'
  199. import customHeader from '/@/components/vent/customHeader.vue';
  200. import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  201. import MonitorTable from '../comment/MonitorTable.vue';
  202. import { cameraAddr, } from '../camera/camera.api'
  203. import { list } from '../safetyMonitor/safety.api';
  204. import Player, { I18N } from 'xgplayer';
  205. import ZH from 'xgplayer/es/lang/zh-cn'
  206. import HlsPlugin from 'xgplayer-hls';
  207. import FlvPlugin from 'xgplayer-flv';
  208. import 'xgplayer/dist/index.min.css';
  209. import { usePermission } from '/@/hooks/web/usePermission';
  210. const { hasPermission } = usePermission();
  211. const activeKey = ref('1'); // tab key
  212. const deviceType = ref('safetymonitor'); // 监测设备类型
  213. const dataSource = shallowRef([]); // 实时监测数据
  214. const monitorTable = ref();
  215. const playerList = ref([])
  216. const webRtcServerList = <any[]>[]
  217. let addrList = ref<{ name: string, addr: string, devicekind: string }[]>([
  218. { name: '摄像头1', addr: "http://0.0.0.0:8080/live/16.flv", devicekind: 'wasichoufang' },
  219. { name: '摄像头2', addr: "http://0.0.0.0:8080/live/17.flv", devicekind: 'wasichoufang' }
  220. ])
  221. I18N.use(ZH)
  222. // https获取监测数据
  223. let timer: null | NodeJS.Timeout = null;
  224. function getMonitor(flag?) {
  225. if (deviceType.value) {
  226. if (timer) timer = null;
  227. timer = setTimeout(
  228. async () => {
  229. await getDataSource();
  230. if (timer) {
  231. getMonitor();
  232. }
  233. },
  234. flag ? 0 : 1000
  235. );
  236. }
  237. }
  238. //tabs选项切换
  239. async function tabChange(activeKeyVal) {
  240. activeKey.value = activeKeyVal;
  241. clearTimeout(timer);
  242. if (activeKey.value != '1') {
  243. deviceType.value = 'wasichoufang'
  244. } else {
  245. deviceType.value = 'safetymonitor'
  246. }
  247. getMonitor(true);
  248. }
  249. //获取安全监控-实时监测数据
  250. async function getDataSource() {
  251. const res = await list({ devicetype: deviceType.value, filterParams: {} });
  252. if (res.msgTxt.length > 0) {
  253. dataSource.value = [];
  254. let dataArr = res.msgTxt[0].datalist || [];
  255. dataArr.filter((data: any) => {
  256. const readData = data.readData;
  257. return Object.assign(data, readData);
  258. });
  259. if (deviceType.value == 'safetymonitor') {
  260. dataSource.value = dataArr;
  261. dataSource.value = dataArr.filter(v => v.strinstallpos == '31102采面钻孔下风侧一氧化碳' || v.strinstallpos == '31102采面钻孔下风侧甲烷')
  262. } else {
  263. dataSource.value = dataArr;
  264. }
  265. } else {
  266. dataSource.value = [];
  267. }
  268. }
  269. function getVideo() {
  270. const ip = VUE_APP_URL.webRtcUrl;
  271. for (let i = 0; i < addrList.value.length; i++) {
  272. const item = addrList.value[i]
  273. if (item.addr.startsWith('rtsp://')) {
  274. const dom = document.getElementById('video' + i) as HTMLVideoElement
  275. dom.muted = true;
  276. dom.volume = 0
  277. const webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip)
  278. webRtcServerList.push(webRtcServer)
  279. webRtcServer.connect(item.addr)
  280. } else {
  281. setNoRtspVideo('player' + i, item.addr)
  282. }
  283. }
  284. }
  285. async function getVideoAddrs() {
  286. clearCamera();
  287. playerList.value = []
  288. const cameraList = <{ name: string, addr: string }[]>[]
  289. for (let i = 0; i < addrList.value.length; i++) {
  290. const item = addrList.value[i];
  291. if (item['devicekind'] === 'toHKRtsp') {
  292. // 从海康平台接口获取视频流
  293. try {
  294. const data = await cameraAddr({ cameraCode: item['addr'] });
  295. if (data) {
  296. cameraList.push({ name: item['name'], addr: data['url'] });
  297. }
  298. // cameraList.push({
  299. // name: item['name'],
  300. // // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
  301. // addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
  302. // });
  303. } catch (error) {
  304. }
  305. } else {
  306. if (item['addr'].includes('0.0.0.0')) {
  307. item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname)
  308. }
  309. cameraList.push({ name: item['name'], addr: item['addr'] });
  310. }
  311. }
  312. }
  313. function goFullScreen(domId) {
  314. const videoDom = document.getElementById(domId) as HTMLVideoElement
  315. if (videoDom.requestFullscreen) {
  316. videoDom.requestFullscreen()
  317. videoDom.play()
  318. } else if (videoDom.mozRequestFullscreen) {
  319. videoDom.mozRequestFullscreen()
  320. videoDom.play()
  321. } else if (videoDom.webkitRequestFullscreen) {
  322. videoDom.webkitRequestFullscreen()
  323. videoDom.play()
  324. } else if (videoDom.msRequestFullscreen) {
  325. videoDom.msRequestFullscreen()
  326. videoDom.play()
  327. }
  328. }
  329. function clearCamera() {
  330. const num = webRtcServerList.length
  331. for (let i = 0; i < num; i++) {
  332. webRtcServerList[i].disconnect()
  333. webRtcServerList[i] = null
  334. }
  335. for (let i = 0; i < playerList.value.length; i++) {
  336. const player = playerList.value[i]
  337. if (player.destroy) player.destroy()
  338. }
  339. playerList.value = []
  340. }
  341. function setNoRtspVideo(id, videoAddr) {
  342. const fileExtension = videoAddr.split('.').pop();
  343. if (fileExtension === 'flv') {
  344. const player = new Player({
  345. lang: 'zh',
  346. id: id,
  347. url: videoAddr,
  348. width: 589,
  349. height: 330,
  350. poster: '/src/assets/images/vent/noSinge.png',
  351. plugins: [FlvPlugin],
  352. fluid: true,
  353. autoplay: true,
  354. isLive: true,
  355. playsinline: true,
  356. screenShot: true,
  357. whitelist: [''],
  358. ignores: ['time'],
  359. closeVideoClick: true,
  360. customConfig: {
  361. isClickPlayBack: false
  362. },
  363. flv: {
  364. retryCount: 3, // 重试 3 次,默认值
  365. retryDelay: 1000, // 每次重试间隔 1 秒,默认值
  366. loadTimeout: 10000, // 请求超时时间为 10 秒,默认值
  367. fetchOptions: {
  368. // 该参数会透传给 fetch,默认值为 undefined
  369. mode: 'cors'
  370. },
  371. targetLatency: 10, // 直播目标延迟,默认 10 秒
  372. maxLatency: 20, // 直播允许的最大延迟,默认 20 秒
  373. disconnectTime: 10, // 直播断流时间,默认 0 秒,(独立使用时等于 maxLatency)
  374. maxJumpDistance: 10,
  375. }
  376. });
  377. playerList.value.push(player)
  378. }
  379. if (fileExtension === 'm3u8') {
  380. let player
  381. if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
  382. // 原生支持 hls 播放
  383. player = new Player({
  384. lang: 'zh',
  385. id: id,
  386. url: videoAddr,
  387. width: 589,
  388. height: 330,
  389. isLive: true,
  390. autoplay: true,
  391. autoplayMuted: true,
  392. cors: true,
  393. poster: '/src/assets/images/vent/noSinge.png',
  394. hls: {
  395. retryCount: 3, // 重试 3 次,默认值
  396. retryDelay: 1000, // 每次重试间隔 1 秒,默认值
  397. loadTimeout: 10000, // 请求超时时间为 10 秒,默认值
  398. fetchOptions: {
  399. // 该参数会透传给 fetch,默认值为 undefined
  400. mode: 'cors'
  401. },
  402. targetLatency: 10, // 直播目标延迟,默认 10 秒
  403. maxLatency: 20, // 直播允许的最大延迟,默认 20 秒
  404. disconnectTime: 10, // 直播断流时间,默认 0 秒,(独立使用时等于 maxLatency)
  405. maxJumpDistance: 10,
  406. }
  407. })
  408. } else if (HlsPlugin.isSupported()) { // 第一步
  409. player = new Player({
  410. lang: 'zh',
  411. id: id,
  412. url: videoAddr,
  413. width: 589,
  414. height: 330,
  415. isLive: true,
  416. autoplay: true,
  417. autoplayMuted: true,
  418. plugins: [HlsPlugin], // 第二步
  419. poster: '/src/assets/images/vent/noSinge.png',
  420. hls: {
  421. retryCount: 3, // 重试 3 次,默认值
  422. retryDelay: 1000, // 每次重试间隔 1 秒,默认值
  423. loadTimeout: 10000, // 请求超时时间为 10 秒,默认值
  424. fetchOptions: {
  425. // 该参数会透传给 fetch,默认值为 undefined
  426. mode: 'cors'
  427. },
  428. targetLatency: 10, // 直播目标延迟,默认 10 秒
  429. maxLatency: 20, // 直播允许的最大延迟,默认 20 秒
  430. disconnectTime: 10, // 直播断流时间,默认 0 秒,(独立使用时等于 maxLatency)
  431. maxJumpDistance: 10,
  432. }
  433. })
  434. }
  435. playerList.value.push(player)
  436. }
  437. }
  438. onMounted(() => {
  439. getVideo()
  440. getVideoAddrs()
  441. getMonitor(true);
  442. })
  443. onUnmounted(() => {
  444. clearCamera()
  445. if (timer) {
  446. clearTimeout(timer);
  447. }
  448. timer = undefined;
  449. });
  450. </script>
  451. <style lang="less" scoped>
  452. @import '/@/design/vent/color.less';
  453. @import '/@/design/vent/modal.less';
  454. .container-ln {
  455. position: relative;
  456. width: 100%;
  457. height: 100%;
  458. padding: 0px 10px;
  459. box-sizing: border-box;
  460. .video-ln {
  461. display: flex;
  462. justify-content: space-around;
  463. align-items: center;
  464. width: 100%;
  465. height: 50%;
  466. padding-top: 80px;
  467. .video-module {
  468. position: relative;
  469. width: 45%;
  470. height: 100%;
  471. background: url('/@/assets/images/vent/camera_bg.png');
  472. background-size: 100% 100%;
  473. .player-name {
  474. font-size: 14px;
  475. position: absolute;
  476. top: 15px;
  477. right: 15px;
  478. color: #fff;
  479. background-color: hsla(0, 0%, 50%, .5);
  480. border-radius: 2px;
  481. padding: 1px 5px;
  482. max-width: 120px;
  483. overflow: hidden;
  484. white-space: nowrap;
  485. text-overflow: ellipsis;
  486. z-index: 999;
  487. }
  488. .click-box {
  489. position: absolute;
  490. width: 100%;
  491. height: 100%;
  492. top: 0;
  493. left: 0;
  494. }
  495. }
  496. }
  497. .content-ln {
  498. width: 100%;
  499. height: 50%;
  500. .tabs-box {
  501. width: calc(100% - 12px) !important;
  502. height: 100% !important;
  503. bottom: 3px !important;
  504. }
  505. }
  506. }
  507. @ventSpace: zxm;
  508. :deep(.@{ventSpace}-tabs-tabpane-active) {
  509. height: 100%;
  510. border: 1px solid #44d3ff70;
  511. border-radius: 2px;
  512. -webkit-backdrop-filter: blur(8px);
  513. box-shadow: 0 0 20px #44b4ff33 inset;
  514. background-color: #ffffff11;
  515. overflow-y: auto;
  516. }
  517. :deep(.@{ventSpace}-tabs-card) {
  518. .@{ventSpace}-tabs-tab {
  519. background: linear-gradient(#2cd1ff55, #1eb0ff55);
  520. border-color: #74e9fe;
  521. border-radius: 0%;
  522. &:hover {
  523. color: #64d5ff;
  524. }
  525. }
  526. .@{ventSpace}-tabs-content {
  527. height: 100% !important;
  528. }
  529. .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
  530. color: aqua;
  531. }
  532. .@{ventSpace}-tabs-nav::before {
  533. border-color: #74e9fe;
  534. }
  535. .@{ventSpace}-table-cell-row-hover {
  536. background: #264d8833 !important;
  537. }
  538. .@{ventSpace}-table-row-selected {
  539. background: #00c0a311 !important;
  540. td {
  541. background-color: #00000000 !important;
  542. }
  543. }
  544. .@{ventSpace}-table-thead {
  545. // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
  546. background: #3d9dd45d !important;
  547. &>tr>th,
  548. .@{ventSpace}-table-column-title {
  549. // color: #70f9fc !important;
  550. border-color: #84f2ff !important;
  551. border-left: none !important;
  552. border-right: none !important;
  553. padding: 7px;
  554. }
  555. }
  556. .@{ventSpace}-table-tbody {
  557. tr>td {
  558. padding: 12px;
  559. }
  560. }
  561. .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
  562. background-color: #26648855 !important;
  563. }
  564. .jeecg-basic-table-row__striped {
  565. // background: #97efff11 !important;
  566. td {
  567. background-color: #97efff11 !important;
  568. }
  569. }
  570. }
  571. </style>