index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <template>
  2. <div class="sensor-container">
  3. <a-spin :spinning="loading">
  4. <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
  5. <a-tab-pane key="1" tab="实时监测">
  6. <div class="box-bg table-box" style="margin-bottom: 10px">
  7. <div>
  8. <label style="color: #fff">设备类型:</label>
  9. <Select
  10. @change="handleSensorChange"
  11. :options="deviceTypeOption"
  12. :fieldNames="{ label: 'itemText', value: 'itemValue' }"
  13. v-model:value="deviceKind"
  14. style="width: 200px; margin-bottom: 5px; color: black"
  15. placeholder="请选择设备类型"
  16. :allowClear="true"
  17. />
  18. <MonitorTable
  19. ref="SensorMonitorRef"
  20. :columnsType="deviceKind + '_monitor'"
  21. :dataSource="dataSource"
  22. design-scope="modelsensor_monitor"
  23. @select-row="getSelectRow"
  24. :deviceType="deviceKind"
  25. :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }"
  26. size="''"
  27. title="传感器监测"
  28. >
  29. <template #filterCell="{ column, record }">
  30. <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
  31. record.warnFlag == '0' ? '正常' : '报警'
  32. }}</a-tag>
  33. <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
  34. record.netStatus == '0' ? '断开' : '连接'
  35. }}</a-tag>
  36. </template>
  37. </MonitorTable>
  38. </div>
  39. <!-- v-if="chartsColumns.length > 0" -->
  40. <div class="charts-box" v-if="false">
  41. <BarAndLine
  42. :chartsColumnsType="selectData.deviceType"
  43. xAxisPropType="readTime"
  44. :dataSource="detailDataSource"
  45. height="300px"
  46. :chartsColumns="chartsColumns"
  47. chartsType="detail"
  48. :option="echartsOption"
  49. @refresh="refreshEchatrs"
  50. />
  51. </div>
  52. </div>
  53. </a-tab-pane>
  54. <a-tab-pane key="2" tab="历史数据">
  55. <div class="tab-item table-box box-bg padding-0" v-if="activeKey == '2'">
  56. <HistoryTable
  57. :columns-type="deviceKind"
  58. :device-type="deviceKind"
  59. :device-list-api="list.bind(null, { devicetype: selectData.deviceType })"
  60. @change="historyDataSourceChange"
  61. designScope="modelsensor-history"
  62. :scroll="{ y: chartsColumns.length > 0 ? 400 : 600 }"
  63. />
  64. <div class="charts-box" v-if="chartsColumns.length > 0">
  65. <BarAndLine
  66. :chartsColumnsType="selectData.deviceType"
  67. xAxisPropType="gcreatetime"
  68. :dataSource="historyDataSource"
  69. height="300px"
  70. :chartsColumns="chartsColumns"
  71. chartsType="history"
  72. :option="echartsOption1"
  73. @refresh="refreshEchatrs"
  74. />
  75. </div>
  76. </div>
  77. </a-tab-pane>
  78. <a-tab-pane key="3" tab="报警历史">
  79. <div class="tab-item box-bg" v-if="activeKey == '3'">
  80. <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
  81. </div>
  82. </a-tab-pane>
  83. <a-tab-pane key="4" tab="操作历史">
  84. <div class="tab-item box-bg">
  85. <HandlerHistoryTable columns-type="operator_history" device-type="modelsensor" designScope="alarm-history" />
  86. </div>
  87. </a-tab-pane>
  88. </a-tabs>
  89. <div class="title-text">
  90. {{ selectData.strname }}
  91. </div>
  92. </a-spin>
  93. </div>
  94. </template>
  95. <script setup lang="ts">
  96. import BarAndLine from '/@/components/chart/BarAndLine.vue';
  97. import { Select } from 'ant-design-vue';
  98. import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
  99. import MonitorTable from '../comment/MonitorTable.vue';
  100. import HistoryTable from '../comment/HistoryTable.vue';
  101. import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  102. import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  103. import { list, getTableList } from './sensor.api';
  104. import { list as baseList } from '../../deviceManager/sensorTabel/sensor.api';
  105. import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
  106. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  107. import { cloneDeep } from 'lodash-es';
  108. const SensorMonitorRef = ref();
  109. const deviceBaseList = ref([]);
  110. const activeKey = ref('1');
  111. const deviceKind = ref('');
  112. const deviceTypeOption = ref([]);
  113. // 默认初始是第一行
  114. const selectRowIndex = ref(0);
  115. const dataSource = ref([]);
  116. const detailDataSource = ref<any[]>([]);
  117. const historyDataSource = ref<any[]>([]);
  118. const chartsColumns = ref<any[]>([]);
  119. const loading = ref(true);
  120. const echartsOption = {
  121. grid: {
  122. top: '20%',
  123. left: '10px',
  124. right: '5px',
  125. bottom: '5%',
  126. containLabel: true,
  127. },
  128. toolbox: {
  129. feature: {},
  130. },
  131. };
  132. const echartsOption1 = {
  133. grid: {
  134. top: '20%',
  135. left: '10px',
  136. right: '5px',
  137. bottom: '10%',
  138. containLabel: true,
  139. },
  140. toolbox: {
  141. feature: {},
  142. },
  143. };
  144. const selectData = reactive({
  145. strname: '',
  146. deviceType: '',
  147. deviceID: '',
  148. });
  149. const tabChange = (activeKeyVal) => {
  150. activeKey.value = activeKeyVal;
  151. detailDataSource.value = [];
  152. if (activeKeyVal == 1) {
  153. nextTick(() => {
  154. SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID]);
  155. });
  156. }
  157. };
  158. // https获取监测数据
  159. let timer: null | NodeJS.Timeout = null;
  160. const getMonitor = (flag?) => {
  161. if (Object.prototype.toString.call(timer) === '[object Null]') {
  162. timer = setTimeout(
  163. async () => {
  164. await getDataSource(deviceKind.value);
  165. if (timer) {
  166. timer = null;
  167. }
  168. getMonitor();
  169. },
  170. flag ? 0 : 1000
  171. );
  172. }
  173. };
  174. const getDataSource = async (devicetype) => {
  175. const type = devicetype ? devicetype : 'modelsensor';
  176. const res = await list({ devicetype: type, pagetype: 'normal' });
  177. dataSource.value = res.msgTxt[0].datalist || [];
  178. dataSource.value.map((data: any) => {
  179. const readData = data.readData;
  180. data = Object.assign(data, readData);
  181. return data;
  182. });
  183. const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  184. Object.assign(selectData, data);
  185. // if (chartsColumns.value.length <= 0 && selectData.deviceType) {
  186. // handleChange(selectData.deviceType);
  187. // }
  188. // 如果当前为监测tab
  189. if (activeKey.value === '1') {
  190. // const isHas = detailDataSource.value.find((item) => item['readTime'] === selectData['readTime']);
  191. // // 获取选中数据
  192. // if (!isHas) {
  193. // if (detailDataSource.value.length < 15) {
  194. // detailDataSource.value.push({ ...selectData });
  195. // } else {
  196. // detailDataSource.value.shift();
  197. // detailDataSource.value.push({ ...selectData });
  198. // }
  199. // }
  200. const dataList = cloneDeep(detailDataSource.value);
  201. if (dataList.length < 15) {
  202. dataList.push({ ...selectData });
  203. } else {
  204. dataList.shift();
  205. dataList.push({ ...selectData });
  206. }
  207. detailDataSource.value = dataList;
  208. }
  209. if (loading.value) {
  210. loading.value = false;
  211. }
  212. return data;
  213. };
  214. const getSelectRow = (selectRow, index) => {
  215. if (!selectRow) return;
  216. selectRowIndex.value = index;
  217. const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
  218. Object.assign(selectData, selectRow, baseData);
  219. if (selectData.deviceType) {
  220. // if (timer) {
  221. // clearTimeout(timer);
  222. // timer = undefined;
  223. // }
  224. if (activeKey.value === '1') detailDataSource.value = [];
  225. if (activeKey.value === '2') historyDataSource.value = [];
  226. handleChange(selectData.deviceType);
  227. }
  228. };
  229. // 获取设备基本信息列表
  230. const getDeviceBaseList = () => {
  231. getTableList({ pageSize: 1000 }).then((res) => {
  232. deviceBaseList.value = res.records;
  233. });
  234. };
  235. function handleChange(type) {
  236. chartsColumns.value = getTableHeaderColumns(type + '_chart');
  237. console.log('[ type ] >', type, chartsColumns.value);
  238. }
  239. function handleSensorChange(type) {
  240. loading.value = true;
  241. handleChange(type);
  242. timer = null;
  243. dataSource.value = [];
  244. detailDataSource.value = [];
  245. }
  246. function refreshEchatrs() {
  247. timer = null;
  248. // getMonitor(true);
  249. console.log('echarts 刷新');
  250. }
  251. function historyDataSourceChange(dataSource) {
  252. historyDataSource.value = dataSource;
  253. if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
  254. }
  255. onBeforeMount(() => {
  256. getDeviceBaseList();
  257. });
  258. onMounted(async () => {
  259. const res = await deviceList({ devicetype: 'modelsensor' });
  260. const obj = res.find((item) => item.itemValue === 'modelsensor');
  261. deviceTypeOption.value = obj ? obj.children : [];
  262. deviceKind.value = deviceTypeOption.value[0]['itemValue'] || 'modelsensor_monitor';
  263. handleChange(deviceKind.value);
  264. await getMonitor(true);
  265. });
  266. onUnmounted(() => {
  267. if (timer) {
  268. clearTimeout(timer);
  269. timer = undefined;
  270. }
  271. });
  272. </script>
  273. <style lang="less" scoped>
  274. @import '/@/design/vent/color.less';
  275. @import '/@/design/vent/modal.less';
  276. .padding-0 {
  277. padding: 10px 0 !important;
  278. }
  279. .sensor-container {
  280. height: 100%;
  281. position: relative;
  282. top: 65px;
  283. padding: 10px;
  284. z-index: 999;
  285. // max-height: calc(100vh - 150px);
  286. .@{ventSpace}-tabs {
  287. max-height: calc(100% - 100px);
  288. .tab-item {
  289. max-height: calc(100% - 170px);
  290. overflow-y: auto;
  291. }
  292. }
  293. .title-text {
  294. position: absolute;
  295. top: -24px;
  296. left: 0;
  297. width: 100%;
  298. text-align: center;
  299. color: #fff;
  300. }
  301. .table-box {
  302. // height: calc(60% - 150px);
  303. height: 780px;
  304. padding: 20px 10px;
  305. overflow-y: auto;
  306. }
  307. .box-bg {
  308. // border: 1px solid #4d7ad855;
  309. // border-radius: 2px;
  310. // // background-color: #001d3055;
  311. // -webkit-backdrop-filter: blur(8px);
  312. // backdrop-filter: blur(8px);
  313. // box-shadow: 0 0 10px #5984e055 inset;
  314. // background-color: #00b3ff12;
  315. padding-bottom: 10px;
  316. border: 1px solid #44d3ff70;
  317. border-radius: 2px;
  318. -webkit-backdrop-filter: blur(8px);
  319. box-shadow: 0 0 20px #44b4ff33 inset;
  320. background-color: #ffffff11;
  321. overflow-y: auto;
  322. }
  323. .charts-box {
  324. height: calc(40% - 80px);
  325. padding: 5px 10px;
  326. margin-top: 10px;
  327. }
  328. }
  329. :deep(.@{ventSpace}-tabs-tabpane-active) {
  330. height: 100%;
  331. }
  332. :deep(.@{ventSpace}-tabs-card) {
  333. .@{ventSpace}-tabs-tab {
  334. background: linear-gradient(#2cd1ff55, #1eb0ff55);
  335. border-color: #74e9fe;
  336. border-radius: 0%;
  337. &:hover {
  338. color: #64d5ff;
  339. }
  340. }
  341. .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
  342. color: aqua;
  343. }
  344. .@{ventSpace}-tabs-nav::before {
  345. border-color: #74e9fe;
  346. }
  347. .@{ventSpace}-picker,
  348. .@{ventSpace}-select-selector {
  349. width: 100% !important;
  350. background: #00000017 !important;
  351. border: 1px solid @vent-form-item-boder !important;
  352. input,
  353. .@{ventSpace}-select-selection-item,
  354. .@{ventSpace}-picker-suffix {
  355. color: #fff !important;
  356. }
  357. .@{ventSpace}-select-selection-placeholder {
  358. color: #b7b7b7 !important;
  359. }
  360. }
  361. .@{ventSpace}-pagination-next,
  362. .action,
  363. .@{ventSpace}-select-arrow,
  364. .@{ventSpace}-picker-separator {
  365. color: #fff !important;
  366. }
  367. .@{ventSpace}-table-cell-row-hover {
  368. background: #264d8833 !important;
  369. }
  370. .@{ventSpace}-table-row-selected {
  371. background: #00c0a311 !important;
  372. td {
  373. background-color: #00000000 !important;
  374. }
  375. }
  376. .@{ventSpace}-table-thead {
  377. // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
  378. background: #3d9dd45d !important;
  379. & > tr > th,
  380. .@{ventSpace}-table-column-title {
  381. // color: #70f9fc !important;
  382. border-color: #84f2ff !important;
  383. border-left: none !important;
  384. border-right: none !important;
  385. padding: 7px;
  386. }
  387. }
  388. .@{ventSpace}-table-tbody {
  389. tr > td {
  390. padding: 12px;
  391. }
  392. }
  393. .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
  394. background-color: #26648855 !important;
  395. }
  396. .jeecg-basic-table-row__striped {
  397. // background: #97efff11 !important;
  398. td {
  399. background-color: #97efff11 !important;
  400. }
  401. }
  402. :deep(.vent-form) {
  403. .@{ventSpace}-select-dropdown {
  404. color: #000000 !important;
  405. }
  406. }
  407. }
  408. </style>