index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
  1. <template>
  2. <div class="device-box" id="monitorBox">
  3. <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox" v-if="isRefresh">
  4. <a-tab-pane key="1" tab="实时监测">
  5. <template v-if="deviceType == 'fan' && activeKey == '1'">
  6. <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
  7. </template>
  8. <template v-else-if="activeKey == '1' && deviceType">
  9. <template v-if="hasPermission('btn:noGb')">
  10. <MonitorTable
  11. ref="monitorTable"
  12. :columnsType="`${deviceType}_monitor`"
  13. :dataSource="dataSource"
  14. design-scope="device_monitor"
  15. :isShowPagination="false"
  16. :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
  17. :is-show-select="false"
  18. title="设备监测"
  19. :scroll="{ y: 650 }"
  20. >
  21. <template #filterCell="{ column, record }">
  22. <template v-if="deviceType.startsWith('safetymonitor')">
  23. <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
  24. <div v-if="!record.V && column.dataIndex === 'V'">-</div>
  25. <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
  26. <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
  27. <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
  28. <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
  29. </template>
  30. <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
  31. {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
  32. >
  33. <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
  34. record.netStatus == '0' ? '断开' : '连接'
  35. }}</a-tag>
  36. </template>
  37. </MonitorTable>
  38. </template>
  39. <template v-else>
  40. <MonitorTable
  41. ref="monitorTable"
  42. :columnsType="`${deviceType}_monitor`"
  43. :dataSource="dataSource"
  44. design-scope="device_monitor"
  45. :isShowPagination="false"
  46. :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
  47. :is-show-select="false"
  48. title="设备监测"
  49. :form-config="deviceType == 'safetymonitor' && sysOrgCode != 'zjtzqctmk' ? formConfig : undefined"
  50. :scroll="{ y: 650 }"
  51. >
  52. <template #filterCell="{ column, record }">
  53. <template v-if="deviceType.startsWith('safetymonitor')">
  54. <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
  55. <div v-if="!record.V && column.dataIndex === 'V'">-</div>
  56. <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
  57. <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
  58. <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
  59. <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
  60. </template>
  61. <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
  62. {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
  63. >
  64. <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
  65. record.netStatus == '0' ? '断开' : '连接'
  66. }}</a-tag>
  67. </template>
  68. </MonitorTable>
  69. </template>
  70. <!-- <MonitorTable
  71. ref="monitorTable"
  72. :columnsType="`${deviceType}_monitor`"
  73. :dataSource="dataSource"
  74. design-scope="device_monitor"
  75. :isShowPagination="false"
  76. :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
  77. :is-show-select="false"
  78. title="设备监测"
  79. :form-config="deviceType == 'safetymonitor' && sysOrgCode != 'zjtzqctmk' ? formConfig : undefined"
  80. :scroll="{ y: 650 }"
  81. > -->
  82. </template>
  83. <!-- 图表 -->
  84. <!-- <div style="width:100%;height:280px;margin: 20px 0px;">
  85. <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
  86. :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
  87. <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
  88. :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
  89. <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
  90. :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
  91. <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
  92. :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
  93. <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
  94. :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
  95. <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="strname" :dataSource="dataSource"
  96. height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
  97. <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
  98. :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
  99. </div> -->
  100. </a-tab-pane>
  101. <a-tab-pane key="2" tab="历史数据">
  102. <div class="tab-item">
  103. <HistoryTable
  104. ref="historyTable"
  105. v-if="activeKey == '2'"
  106. :columns-type="`${deviceType}`"
  107. :device-type="deviceType"
  108. designScope="device-history"
  109. />
  110. </div>
  111. <!-- 图表 -->
  112. <!-- <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">
  113. <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  114. height="100%" :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
  115. <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  116. height="100%" :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
  117. <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  118. height="100%" :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
  119. <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  120. height="100%" :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
  121. <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  122. height="100%" :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
  123. <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
  124. height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
  125. <BarAndLine v-else xAxisPropType="gdevicename" :dataSource="dataSourceHis" height="100%"
  126. :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
  127. </div> -->
  128. </a-tab-pane>
  129. <a-tab-pane key="3" tab="报警历史" v-if="!hasPermission('safety:hideWarning')">
  130. <div class="tab-item">
  131. <AlarmHistoryTable
  132. ref="alarmHistoryTable"
  133. v-if="globalConfig.History_Type == 'remote' && activeKey == '3'"
  134. columns-type="alarm"
  135. :list="safetyList"
  136. :device-type="deviceType"
  137. :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
  138. designScope="alarm-history"
  139. />
  140. <AlarmHistoryCommentTable
  141. ref="alarmHistoryTable"
  142. v-else-if="activeKey == '3'"
  143. columns-type="alarm"
  144. :device-type="deviceType"
  145. :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
  146. designScope="alarm-history"
  147. />
  148. </div>
  149. </a-tab-pane>
  150. <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor' && deviceType !== 'wasichoufang'">
  151. <div class="tab-item">
  152. <HandlerHistoryTable
  153. ref="handlerHistoryTable"
  154. v-if="activeKey == '4'"
  155. columns-type="operator_history"
  156. :device-type="deviceType"
  157. :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
  158. designScope="operator-history"
  159. />
  160. </div>
  161. </a-tab-pane>
  162. </a-tabs>
  163. <div class="right-btn-group">
  164. <div class="update-btn">
  165. <span>同步分站:</span>
  166. <a-select
  167. v-model:value="subStation"
  168. :options="subStationOptions"
  169. placeholder="同步分站"
  170. size="large"
  171. :fieldNames="{ label: 'strinstallpos', value: 'id' }"
  172. style="width: 150px"
  173. />
  174. <div class="btn btn1" @click="updateSubstation">确定</div>
  175. </div>
  176. <div class="export-btn"><div class="btn btn1" @click="exportData">一键导出</div></div>
  177. </div>
  178. </div>
  179. </template>
  180. <script setup lang="ts">
  181. import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
  182. import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
  183. import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
  184. import AlarmHistoryTable from './AlarmHistoryTable.vue';
  185. import HistoryTable from './HistoryTable.vue';
  186. import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  187. import MonitorTable from '../comment/MonitorTable.vue';
  188. import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  189. import { useRouter } from 'vue-router';
  190. import { formConfig, isHaveNoAction } from './safety.data';
  191. import { getDictItemsByCode } from '/@/utils/dict';
  192. import { usePermission } from '/@/hooks/web/usePermission';
  193. import { useGlobSetting } from '/@/hooks/setting';
  194. import { useMethods } from '/@/hooks/system/useMethods';
  195. import { message } from 'ant-design-vue';
  196. const { sysOrgCode } = useGlobSetting();
  197. const { hasPermission } = usePermission();
  198. const globalConfig = inject('globalConfig');
  199. const { handleExportXls } = useMethods();
  200. // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  201. // const echartsOption = {
  202. // grid: {
  203. // top: '60px',
  204. // left: '10px',
  205. // right: '25px',
  206. // bottom: '5%',
  207. // containLabel: true,
  208. // },
  209. // toolbox: {
  210. // feature: {},
  211. // },
  212. // };
  213. // let alive = ref(true)
  214. type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
  215. const props = defineProps({
  216. pageData: {
  217. type: Object,
  218. default: () => {},
  219. },
  220. });
  221. const scroll = {
  222. y: 360,
  223. };
  224. const monitorTable = ref();
  225. const historyTable = ref();
  226. const alarmHistoryTable = ref();
  227. const handlerHistoryTable = ref();
  228. const isRefresh = ref(true);
  229. const activeKey = ref('1'); // tab key
  230. const dataSource = shallowRef([]); // 实时监测数据
  231. const deviceType = ref(''); // 监测设备类型
  232. const subStation = ref('');
  233. const subStationOptions = ref([]);
  234. // let dataSourceHis = shallowRef([])//历史数据
  235. //历史数据
  236. async function changeHis(data) {
  237. // alive.value = false
  238. // nextTick(() => {
  239. // dataSourceHis = data
  240. // alive.value = true
  241. // })
  242. }
  243. async function tabChange(activeKeyVal) {
  244. activeKey.value = activeKeyVal;
  245. if (activeKey.value != '1') {
  246. if (timer != undefined) {
  247. clearTimeout(timer);
  248. timer = undefined;
  249. }
  250. } else {
  251. timer = null;
  252. await getMonitor(true);
  253. }
  254. }
  255. // https获取监测数据
  256. let timer: null | NodeJS.Timeout = null;
  257. function getMonitor(flag?) {
  258. if (deviceType.value) {
  259. if (timer) timer = null;
  260. if (Object.prototype.toString.call(timer) === '[object Null]') {
  261. timer = setTimeout(
  262. async () => {
  263. await getDataSource();
  264. if (timer) {
  265. getMonitor();
  266. }
  267. },
  268. flag ? 0 : 1000
  269. );
  270. }
  271. }
  272. }
  273. async function getDataSource() {
  274. const formData = monitorTable.value.getForm();
  275. const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
  276. if (res.msgTxt.length > 0) {
  277. dataSource.value = [];
  278. let dataArr = res.msgTxt[0].datalist || [];
  279. dataArr.filter((data: any) => {
  280. const readData = data.readData;
  281. return Object.assign(data, readData);
  282. });
  283. if (deviceType.value == 'safetymonitor') {
  284. // 如果是安全监控的数据时需要过滤常见设备数据,根据设定的常用安全监控字典去匹配
  285. let dictCodes = getDictItemsByCode('safetynormal');
  286. console.log(dictCodes,'111-----------')
  287. const searchForm = formData.getFieldsValue();
  288. if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
  289. console.log(searchForm,'000---------')
  290. const tempData = [];
  291. const tempData1 = [];
  292. for (let i = 0; i < dataArr.length; i++) {
  293. const item = dataArr[i];
  294. let flag = false;
  295. for (let i = 0; i < dictCodes.length; i++) {
  296. const dict = dictCodes[i];
  297. if (dict['value'] == item['dataTypeName']) {
  298. flag = true;
  299. }
  300. }
  301. if (flag) {
  302. tempData.push(item);
  303. } else {
  304. tempData1.push(item);
  305. }
  306. }
  307. if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
  308. dataSource.value = [...tempData, ...tempData1];
  309. } else {
  310. dataSource.value = [...tempData];
  311. }
  312. } else {
  313. dataSource.value = dataArr;
  314. }
  315. } else {
  316. dataSource.value = dataArr;
  317. }
  318. } else {
  319. dataSource.value = [];
  320. }
  321. }
  322. async function getSubstation() {
  323. const list: [] = await subStationList({ strtype: 'kafka', monitorparam: 'safetymonitor*' });
  324. subStationOptions.value = list;
  325. if (list.length > 0) {
  326. subStation.value = list[0]['id'];
  327. }
  328. }
  329. function exportData() {
  330. handleExportXls('安全监控导出', getExportUrl);
  331. }
  332. function updateSubstation() {
  333. if (subStation.value) {
  334. initSubStation({ substationID: subStation.value });
  335. } else {
  336. message.warning('请选择分站!');
  337. }
  338. }
  339. onMounted(async () => {
  340. const { currentRoute } = useRouter();
  341. if (unref(currentRoute)) {
  342. const path = unref(currentRoute).path;
  343. if (path) {
  344. deviceType.value = path.substring(path.lastIndexOf('/') + 1);
  345. }
  346. await getMonitor(true);
  347. await getSubstation();
  348. }
  349. });
  350. onUnmounted(() => {
  351. if (timer) {
  352. clearTimeout(timer);
  353. }
  354. timer = undefined;
  355. });
  356. </script>
  357. <style lang="less" scoped>
  358. @import '/@/design/vent/color.less';
  359. @import '/@/design/vent/modal.less';
  360. @ventSpace: zxm;
  361. .device-box {
  362. width: 100%;
  363. height: calc(100% - 100px);
  364. padding-bottom: 10px;
  365. margin-top: 20px;
  366. display: flex;
  367. justify-content: center;
  368. .tabs-box {
  369. width: calc(100% - 12px) !important;
  370. height: 100% !important;
  371. bottom: 3px !important;
  372. }
  373. .device-button-group {
  374. position: absolute;
  375. top: -30px;
  376. display: flex;
  377. width: 100%;
  378. .device-button {
  379. height: 26px;
  380. padding: 0 20px;
  381. background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
  382. clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
  383. display: flex;
  384. justify-content: center;
  385. align-items: center;
  386. color: #fff;
  387. position: relative;
  388. cursor: pointer;
  389. &:nth-child(1) {
  390. left: calc(-6px * 1);
  391. }
  392. &:nth-child(2) {
  393. left: calc(-6px * 2);
  394. }
  395. &:nth-child(3) {
  396. left: calc(-6px * 3);
  397. }
  398. &:nth-child(4) {
  399. left: calc(-6px * 4);
  400. }
  401. &:nth-child(5) {
  402. left: calc(-6px * 5);
  403. }
  404. &:nth-child(6) {
  405. left: calc(-6px * 6);
  406. }
  407. &:nth-child(7) {
  408. left: calc(-6px * 7);
  409. }
  410. &:nth-child(8) {
  411. left: calc(-6px * 8);
  412. }
  413. &:nth-child(9) {
  414. left: calc(-6px * 9);
  415. }
  416. &:nth-child(10) {
  417. left: calc(-6px * 10);
  418. }
  419. &:nth-child(11) {
  420. left: calc(-6px * 11);
  421. }
  422. &:nth-child(12) {
  423. left: calc(-6px * 12);
  424. }
  425. &:nth-child(13) {
  426. left: calc(-6px * 13);
  427. }
  428. &:nth-child(14) {
  429. left: calc(-6px * 14);
  430. }
  431. &:nth-child(15) {
  432. left: calc(-6px * 15);
  433. }
  434. &:first-child {
  435. clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
  436. }
  437. }
  438. .device-active {
  439. background: linear-gradient(45deg, #04e6fb, #0c5cab);
  440. &::before {
  441. border-color: #0efcff;
  442. box-shadow: 1px 1px 3px 1px #0efcff inset;
  443. }
  444. }
  445. }
  446. .enter-detail {
  447. color: #fff;
  448. cursor: pointer;
  449. position: absolute;
  450. right: 120px;
  451. top: -6px;
  452. padding: 5px;
  453. border-radius: 5px;
  454. margin-left: 8px;
  455. margin-right: 8px;
  456. width: auto;
  457. height: 33px !important;
  458. display: flex;
  459. align-items: center;
  460. justify-content: center;
  461. color: #fff;
  462. padding: 5px 15px 5px 15px;
  463. cursor: pointer;
  464. &:hover {
  465. background: linear-gradient(#2cd1ff55, #1eb0ff55);
  466. }
  467. &::before {
  468. width: calc(100% - 6px);
  469. height: 27px;
  470. content: '';
  471. position: absolute;
  472. top: 3px;
  473. right: 0;
  474. left: 3px;
  475. bottom: 0;
  476. z-index: -1;
  477. border-radius: inherit;
  478. /*important*/
  479. background: linear-gradient(#1fa6cb, #127cb5);
  480. }
  481. }
  482. }
  483. .right-btn-group {
  484. position: absolute;
  485. color: #fff;
  486. right: 20px;
  487. display: flex;
  488. .export-btn {
  489. }
  490. .update-btn {
  491. margin-right: 10px;
  492. display: flex;
  493. align-items: center;
  494. .btn {
  495. background: linear-gradient(#2cd1ff55, #1eb0ff55);
  496. }
  497. }
  498. .btn {
  499. padding: 8px 20px;
  500. position: relative;
  501. border-radius: 2px;
  502. color: #fff;
  503. width: fit-content;
  504. cursor: pointer;
  505. &::before {
  506. position: absolute;
  507. display: block;
  508. content: '';
  509. width: calc(100% - 4px);
  510. height: calc(100% - 4px);
  511. top: 2px;
  512. left: 2px;
  513. border-radius: 2px;
  514. z-index: -1;
  515. }
  516. }
  517. .btn1 {
  518. border: 1px solid #5cfaff;
  519. &::before {
  520. background-image: linear-gradient(#2effee92, #0cb1d592);
  521. }
  522. &:hover {
  523. border: 1px solid #5cfaffaa;
  524. &::before {
  525. background-image: linear-gradient(#2effee72, #0cb1d572);
  526. }
  527. }
  528. }
  529. }
  530. :deep(.@{ventSpace}-tabs-tabpane-active) {
  531. height: 100%;
  532. border: 1px solid #44d3ff70;
  533. border-radius: 2px;
  534. -webkit-backdrop-filter: blur(8px);
  535. box-shadow: 0 0 20px #44b4ff33 inset;
  536. background-color: #ffffff11;
  537. overflow-y: auto;
  538. }
  539. :deep(.@{ventSpace}-tabs-card) {
  540. .@{ventSpace}-tabs-tab {
  541. background: linear-gradient(#2cd1ff55, #1eb0ff55);
  542. border-color: #74e9fe;
  543. border-radius: 0%;
  544. &:hover {
  545. color: #64d5ff;
  546. }
  547. }
  548. .@{ventSpace}-tabs-content {
  549. height: 100% !important;
  550. }
  551. .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
  552. color: aqua;
  553. }
  554. .@{ventSpace}-tabs-nav::before {
  555. border-color: #74e9fe;
  556. }
  557. .@{ventSpace}-picker,
  558. .@{ventSpace}-select-selector {
  559. width: 100% !important;
  560. background: #00000017 !important;
  561. border: 1px solid @vent-form-item-boder !important;
  562. input,
  563. .@{ventSpace}-select-selection-item,
  564. .@{ventSpace}-picker-suffix {
  565. color: #fff !important;
  566. }
  567. .@{ventSpace}-select-selection-placeholder {
  568. color: #b7b7b7 !important;
  569. }
  570. }
  571. .@{ventSpace}-pagination-next,
  572. .action,
  573. .@{ventSpace}-select-arrow,
  574. .@{ventSpace}-picker-separator {
  575. color: #fff !important;
  576. }
  577. .@{ventSpace}-table-cell-row-hover {
  578. background: #264d8833 !important;
  579. }
  580. .@{ventSpace}-table-row-selected {
  581. background: #00c0a311 !important;
  582. td {
  583. background-color: #00000000 !important;
  584. }
  585. }
  586. .@{ventSpace}-table-thead {
  587. // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
  588. background: #3d9dd45d !important;
  589. & > tr > th,
  590. .@{ventSpace}-table-column-title {
  591. // color: #70f9fc !important;
  592. border-color: #84f2ff !important;
  593. border-left: none !important;
  594. border-right: none !important;
  595. padding: 7px;
  596. }
  597. }
  598. .@{ventSpace}-table-tbody {
  599. tr > td {
  600. padding: 12px;
  601. }
  602. }
  603. .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
  604. background-color: #26648855 !important;
  605. }
  606. .jeecg-basic-table-row__striped {
  607. // background: #97efff11 !important;
  608. td {
  609. background-color: #97efff11 !important;
  610. }
  611. }
  612. }
  613. </style>