DeviceEcharts.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <div class="charts-container">
  3. <a-select ref="select" size="small" v-model:value="chartsType" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
  4. <a-select-option value="listMonitor">实时监测</a-select-option>
  5. <a-select-option value="detail">详情监测</a-select-option>
  6. <a-select-option value="history">历史记录</a-select-option>
  7. </a-select>
  8. <div class="charts-box" v-if="chartsType === 'listMonitor'">
  9. <BarAndLine
  10. :chartsColumnsType="chartsColumnsType"
  11. :xAxisPropType="xAxisPropType"
  12. :dataSource="dataSource"
  13. height="100%"
  14. :chartsColumns="chartsColumns"
  15. chartsType="listMonitor"
  16. />
  17. </div>
  18. <div class="charts-box" v-else-if="chartsType === 'detail' && deviceListApi">
  19. <Select
  20. :options="options"
  21. :fieldNames="{ label: 'strname', value: 'id' }"
  22. v-model:value="deviceId"
  23. placeholder="请选择查看的设备"
  24. size="small"
  25. style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
  26. />
  27. <BarAndLine
  28. :chartsColumnsType="chartsColumnsType"
  29. :xAxisPropType="resultXAxisPropType"
  30. :dataSource="detailDataSource"
  31. height="100%"
  32. :chartsColumns="chartsColumns"
  33. chartsType="detail"
  34. />
  35. </div>
  36. <div class="charts-box" v-else-if="chartsType === 'history'">
  37. <Select
  38. :options="options"
  39. :fieldNames="{ label: 'strname', value: 'id' }"
  40. v-model:value="deviceId"
  41. placeholder="请选择查看的设备"
  42. size="small"
  43. style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
  44. />
  45. <a-date-picker
  46. v-model:value="historyParams.tData"
  47. size="small"
  48. valueFormat="YYYY-MM-DD"
  49. placeholder="请选择查询日期"
  50. style="position: absolute; z-index: 99; left: 254px; width: 150px; top: 2px"
  51. />
  52. <a-time-range-picker
  53. v-model:value="historyParams.ttime"
  54. size="small"
  55. valueFormat="HH:mm:ss"
  56. style="position: absolute; z-index: 99; left: 406px; width: 200px; top: 2px"
  57. />
  58. <a-select
  59. ref="select"
  60. size="small"
  61. v-model:value="historyParams.skip"
  62. placeholder="请选择间隔时间"
  63. style="position: absolute; z-index: 99; top: 2px; left: 608px; width: 100px"
  64. >
  65. <a-select-option value="1">5秒</a-select-option>
  66. <a-select-option value="2">10秒</a-select-option>
  67. <a-select-option value="3">1分钟</a-select-option>
  68. <a-select-option value="4">5分钟</a-select-option>
  69. <a-select-option value="5">10分钟</a-select-option>
  70. </a-select>
  71. <Pagination
  72. size="small"
  73. v-model:current="currentPage"
  74. v-model:page-size="pageSize"
  75. :total="total"
  76. :show-total="(total) => `共 ${total} 条`"
  77. style="position: absolute; z-index: 99; top: 2px; right: 30px"
  78. />
  79. <BarAndLine
  80. :chartsColumnsType="chartsColumnsType"
  81. :xAxisPropType="resultXAxisPropType"
  82. :dataSource="resultDataSource"
  83. height="100%"
  84. :chartsColumns="chartsColumns"
  85. chartsType="history"
  86. />
  87. </div>
  88. </div>
  89. </template>
  90. <script lang="ts">
  91. import { ref, defineComponent, watch, reactive, onMounted, watchEffect } from 'vue';
  92. import BarAndLine from '/@/components/chart/BarAndLine.vue';
  93. import dayjs from 'dayjs';
  94. import { defHttp } from '/@/utils/http/axios';
  95. import { Select, Pagination } from 'ant-design-vue';
  96. export default defineComponent({
  97. name: 'DeviceEcharts',
  98. components: { BarAndLine, Select, Pagination },
  99. props: {
  100. chartsColumns: {
  101. type: Array,
  102. default: () => [],
  103. },
  104. chartsColumnsType: {
  105. type: String,
  106. required: true,
  107. },
  108. dataSource: {
  109. type: Array,
  110. default: () => [],
  111. },
  112. deviceListApi: {
  113. type: Function,
  114. required: true,
  115. },
  116. deviceType: {
  117. type: String,
  118. required: true,
  119. },
  120. option: {
  121. type: Object,
  122. default: () => ({}),
  123. },
  124. xAxisPropType: {
  125. type: String,
  126. required: true,
  127. },
  128. },
  129. setup(props) {
  130. const historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/list', params });
  131. const chartsType = ref('listMonitor');
  132. const deviceId = ref('');
  133. const options = ref([]);
  134. const historyParams = reactive({
  135. tData: dayjs(),
  136. ttime: ['', ''],
  137. ttime_begin: null,
  138. ttime_end: null,
  139. skip: null,
  140. });
  141. const resultXAxisPropType = ref('');
  142. const resultDataSource = ref<any[]>([]);
  143. const detailDataSource = ref<any[]>([]);
  144. const currentPage = ref<number>(1);
  145. const pageSize = ref<number>(20);
  146. const total = ref(0);
  147. const onChange = (pageNumber: number) => {
  148. console.log('Page: ', pageNumber);
  149. };
  150. watch(
  151. [chartsType, deviceId, historyParams, pageSize, currentPage,],
  152. async (
  153. [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
  154. [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
  155. ) => {
  156. console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
  157. if (newChartsType === 'listMonitor') {
  158. // 实时监测所有
  159. resultDataSource.value = props.dataSource;
  160. } else if (newChartsType === 'history') {
  161. // 历史
  162. resultXAxisPropType.value = 'gcreatetime';
  163. if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
  164. currentPage.value = 1;
  165. }
  166. const res = await historyList({
  167. ttime_begin: historyParams.ttime[0] ? historyParams.ttime[0] : null,
  168. ttime_end: historyParams.ttime[1] ? historyParams.ttime[1] : null,
  169. tData: dayjs(historyParams.tData).format('YYYY-MM-DD'),
  170. strtype: props.deviceType + '*',
  171. gdeviceid: newDeviceId,
  172. skip: historyParams.skip,
  173. pageSize: pageSize.value,
  174. pageNo: currentPage.value,
  175. });
  176. resultDataSource.value = res.datalist.records.map((item) => Object.assign(item, item.readData));
  177. total.value = res.datalist.total;
  178. } else if (newChartsType === 'detail') {
  179. // 设备详情
  180. resultXAxisPropType.value = 'readTime';
  181. if (newDeviceId !== oldDeviceId) {
  182. detailDataSource.value = [];
  183. }
  184. }
  185. }
  186. );
  187. watchEffect(() => {
  188. if (chartsType.value === 'detail') {
  189. const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
  190. if (currentData) {
  191. const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
  192. if (!isHas) {
  193. if (detailDataSource.value.length < 15) {
  194. detailDataSource.value.push(currentData);
  195. } else {
  196. detailDataSource.value.shift();
  197. detailDataSource.value.push(currentData);
  198. }
  199. }
  200. }
  201. }
  202. });
  203. onMounted(async () => {
  204. const res = await props.deviceListApi();
  205. options.value = res.records;
  206. deviceId.value = options.value[0]['id'];
  207. });
  208. return {
  209. chartsType,
  210. deviceId,
  211. resultDataSource,
  212. historyParams,
  213. options,
  214. resultXAxisPropType,
  215. detailDataSource,
  216. currentPage,
  217. pageSize,
  218. total,
  219. onChange,
  220. };
  221. },
  222. });
  223. </script>
  224. <style lang="less" scoped>
  225. @import '/@/design/vent/color.less';
  226. .charts-container {
  227. position: relative;
  228. height: 100%;
  229. .charts-box {
  230. height: 100%;
  231. }
  232. .@{ventSpace}-picker,
  233. .@{ventSpace}-select-selector {
  234. background: #00000017 !important;
  235. border: 1px solid @vent-form-item-boder !important;
  236. input,
  237. .@{ventSpace}-select-selection-item,
  238. .@{ventSpace}-picker-suffix {
  239. color: #fff !important;
  240. }
  241. .@{ventSpace}-select-selection-placeholder {
  242. color: #b7b7b7 !important;
  243. }
  244. }
  245. .@{ventSpace}-select-arrow,
  246. .@{ventSpace}-picker-separator {
  247. color: #fff !important;
  248. }
  249. }
  250. </style>