tabIndex.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. <template>
  2. <div class="detail-tab">
  3. <div class="tab_head">
  4. <zz-tabs :tabs="tabs" :value="value" @change="change"></zz-tabs>
  5. </div>
  6. <div class="box">
  7. <div class="query-box">
  8. <div class="left_search">
  9. <span class="el-mgRight-sm" v-show="value == 'history'"> 上报时间 </span>
  10. <span class="el-mgRight-sm" v-show="value == 'alarm'">告警时间</span>
  11. <span class="el-mgRight-sm" v-show="value == 'valveNote'">操作时间</span>
  12. <span>
  13. <el-date-picker
  14. v-model="dataValue"
  15. type="daterange"
  16. range-separator="至"
  17. start-placeholder="开始日期"
  18. end-placeholder="结束日期"
  19. :value-format="dateType"
  20. :picker-options="endDatePicker"
  21. @change="timeQuery"
  22. clearable
  23. >
  24. </el-date-picker>
  25. </span>
  26. </div>
  27. <el-tooltip class="item" effect="light" placement="bottom" content="导出">
  28. <i class="zoniot_font zoniot-icon-daochu2 tab_head-right" @click="exportExcel()"></i>
  29. </el-tooltip>
  30. </div>
  31. <div class="box__wrap" v-show="value == 'history'">
  32. <zz-table
  33. :cols="Cols"
  34. :settings="{ showIndex: true, stripe: true }"
  35. height="200"
  36. :data="
  37. historyDataList.slice(
  38. (hispageset.currentPage - 1) * hispageset.pageSize,
  39. hispageset.currentPage * hispageset.pageSize
  40. )
  41. "
  42. :loading="mixins_onQuery"
  43. :pageset="hispageset"
  44. @page-change="hispageChange"
  45. ></zz-table>
  46. <div class="echart_content" v-if="value == 'history'">
  47. <el-echart :option="chartoption"></el-echart>
  48. </div>
  49. </div>
  50. <div class="box__wrap" ref="alarmbox" v-show="value == 'alarm'">
  51. <zz-table
  52. class="fullheight"
  53. :cols="AlertsCols"
  54. :settings="{ showIndex: true, stripe: true }"
  55. :data="mixins_list"
  56. :loading="mixins_onQuery"
  57. :pageset="mixins_pageset"
  58. @page-change="pageChange"
  59. >
  60. </zz-table>
  61. </div>
  62. <div class="box__wrap" ref="valvebox" v-show="value == 'valveNote'">
  63. <zz-table
  64. :cols="valveInfoCols"
  65. class="fullheight"
  66. :settings="{ showIndex: true, stripe: true }"
  67. :data="mixins_list"
  68. :loading="mixins_onQuery"
  69. :pageset="mixins_pageset"
  70. @page-change="pageChange"
  71. >
  72. </zz-table>
  73. </div>
  74. </div>
  75. </div>
  76. </template>
  77. <script>
  78. import list from '@/utils/list';
  79. import { AlertsCols, historyCols, valveInfoCols } from '../baseData';
  80. import { getRowStr } from './basedata';
  81. import { deviceLoader } from '@/utils/basedata.js';
  82. import { chartOption } from './echartoption';
  83. export default {
  84. mixins: [list],
  85. props: ['params'],
  86. components: {},
  87. data() {
  88. let _this = this;
  89. return {
  90. deviceLoader,
  91. type: '',
  92. chartoption: {}, //
  93. value: 'history',
  94. dateType: 'yyyyMMdd',
  95. tabs: [
  96. {
  97. value: 'history',
  98. label: '历史数据'
  99. },
  100. {
  101. value: 'alarm',
  102. label: '告警记录'
  103. },
  104. {
  105. value: 'valveNote',
  106. label: '阀控记录'
  107. }
  108. // {
  109. // value: 'replace',
  110. // label: '换表记录'
  111. // }
  112. ],
  113. dataUnit: '',
  114. dataValue: [],
  115. endDatePicker: {
  116. disabledDate: (time) => {
  117. return time.getTime() > new Date().getTime();
  118. }
  119. },
  120. hispageset: {
  121. total: 0,
  122. pageSize: 15,
  123. pageNum: 1,
  124. currentPage: 1,
  125. pageSizes: [15, 30, 60, 120]
  126. },
  127. Cols: [
  128. { label: '上报时间', prop: 'receiveTime' },
  129. { label: '止度', prop: 'receiveTime' },
  130. { label: '阀门状态', prop: 'receiveTime' },
  131. { label: '设备状态', prop: 'receiveTime' }
  132. ],
  133. AlertsCols,
  134. /* 设备详情-阀控记录列表展示信息配置 */
  135. valveInfoCols: [
  136. {
  137. label: '操作原因',
  138. prop: 'operationCause'
  139. },
  140. {
  141. label: '操作类型',
  142. prop: 'operationType',
  143. format(val, data) {
  144. let name = '';
  145. switch (val) {
  146. case 0:
  147. return '关' + name;
  148. case 1:
  149. return '开' + name;
  150. default:
  151. return '-';
  152. }
  153. }
  154. },
  155. {
  156. label: '操作结果',
  157. prop: 'operationResult',
  158. format(val, data) {
  159. let name = '';
  160. if (_this.mixins_query.categoryId === 1) {
  161. name = '阀';
  162. } else {
  163. name = '闸';
  164. }
  165. switch (val) {
  166. case 0:
  167. return name + '关';
  168. case 1:
  169. return name + '开';
  170. case 2:
  171. return '执行中';
  172. default:
  173. return '-';
  174. }
  175. }
  176. },
  177. {
  178. label: '操作时间',
  179. prop: 'operationDate'
  180. },
  181. {
  182. label: '处理时间',
  183. prop: 'finishDate'
  184. }
  185. ],
  186. historyCols, //告警列表表头
  187. getRowStr,
  188. historyDataList: []
  189. };
  190. },
  191. created() {
  192. if (!!this.$route.query.type && this.$route.query.type == 2) {
  193. this.tabs[2].label = '闸控记录';
  194. }
  195. this.initDate('YYYYMMDD');
  196. this.mixins_query = {
  197. deviceId: this.params.id || '',
  198. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  199. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  200. };
  201. new Promise((resolve) => {
  202. this.getDeviceMeasuringPoint(resolve);
  203. }).then(() => {
  204. this.change('history');
  205. });
  206. },
  207. methods: {
  208. initDate(type) {
  209. let date = new Date();
  210. this.dataValue = [this.$moment(new Date(date.getFullYear(), date.getMonth(), 1)).format(type), this.$moment().format(type)];
  211. },
  212. change(value) {
  213. this.value = value;
  214. if (value == 'history') {
  215. this.getHistorical();
  216. this.getDiscount();
  217. } else if (value == 'alarm') {
  218. this.getAllHandleAbnormal();
  219. } else if (value == 'valveNote') {
  220. this.getValveData();
  221. }
  222. },
  223. hispageChange(obj) {
  224. if (obj.pageSize) {
  225. this.hispageset.pageSize = obj.pageSize;
  226. }
  227. if (obj.page) {
  228. this.hispageset.currentPage = obj.page;
  229. }
  230. },
  231. // 历史数据
  232. getDiscount() {
  233. this.$http
  234. .post('/sc-energy/device/getQuantity', this.mixins_query)
  235. .then(({ data, status }) => {
  236. if (status === 0) {
  237. let dataoption = { xData: [], yData: [] };
  238. if (data.length > 0) {
  239. data.map((item) => {
  240. if (item.date) {
  241. let itemdata = item.date ? item.date.toString().replace(/(\d{4})(\d{2})(\d{2})/gi, '$1-$2-$3') : '';
  242. itemdata = itemdata ? itemdata.slice(5) : '';
  243. if (itemdata) {
  244. dataoption.xData.push(itemdata);
  245. dataoption.yData.push(item.value || '0');
  246. }
  247. }
  248. });
  249. }
  250. this.chartoption = chartOption('#29B6FF', dataoption, '用水量', '#29B6FF', 't');
  251. }
  252. })
  253. .catch((err) => {
  254. this.chartoption = {};
  255. console.log(err);
  256. });
  257. },
  258. getHistorical() {
  259. this.historyDataList = [];
  260. // 获取历史数据列表
  261. this.mixins_query = {
  262. deviceId: this.params.id || '',
  263. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  264. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  265. };
  266. if (this.params.productId) {
  267. this.$http
  268. .post('/sc-energy/device/getData', this.mixins_query)
  269. .then(({ data, status }) => {
  270. if (status === 0) {
  271. if (data.length) {
  272. let dateTimeCol;
  273. this.historyDataList = [];
  274. for (let [k, v] of data.entries()) {
  275. dateTimeCol = _.map(v);
  276. let timeformat = this.$moment(Number(dateTimeCol[0])).format('YYYY-MM-DD HH:mm:ss');
  277. this.historyDataList.push(Object.assign({ receiveTime: timeformat }, data[k].measureData));
  278. }
  279. this.hispageset.total = data.length;
  280. this.mixins_onQuery = false;
  281. } else {
  282. this.mixins_onQuery = false;
  283. }
  284. } else {
  285. this.mixins_onQuery = false;
  286. }
  287. })
  288. .catch(() => {
  289. this.mixins_onQuery = false;
  290. });
  291. } else {
  292. this.mixins_onQuery = false;
  293. }
  294. },
  295. //告警
  296. getAllHandleAbnormal() {
  297. this.mixins_list = [];
  298. this.mixins_dataUrl = '/sc-energy/alarm/getPage';
  299. this.mixins_post = 'get';
  300. this.mixins_query = {
  301. categoryId: this.params.categoryId || '',
  302. deviceId: this.params.id || '',
  303. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  304. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  305. };
  306. this.mixins_search();
  307. },
  308. // 阀控记录
  309. getValveData() {
  310. this.mixins_list = [];
  311. this.mixins_post = 'get';
  312. this.mixins_dataUrl = '/sc-energy/device/command/page';
  313. this.mixins_query = {
  314. deviceId: this.params.id || '',
  315. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  316. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  317. };
  318. this.mixins_search();
  319. },
  320. timeQuery() {
  321. (this.mixins_query.startDate = !!this.dataValue ? `${this.dataValue[0]}` : ''),
  322. (this.mixins_query.endDate = !!this.dataValue ? `${this.dataValue[1]}` : '');
  323. this.change(this.value);
  324. },
  325. getDeviceMeasuringPoint(resolve) {
  326. if (this.params && this.params.productId) {
  327. this.$http
  328. .get('/sc-energy/measuring/point/find', { productId: this.params.productId })
  329. .then(({ status, msg, data = [] }) => {
  330. if (status === 0) {
  331. this.pointList = data;
  332. if (data.length) {
  333. this.Cols = [{ label: '上报时间', prop: 'receiveTime', width: 200 }];
  334. data.map((item, index) => {
  335. this.Cols.push({
  336. label: item.measuringName,
  337. prop: item.measuringCode,
  338. format(value) {
  339. if (item.dictList.length) {
  340. let newValue;
  341. item.dictList.map((item, index) => {
  342. if (item.dataValue == value) {
  343. newValue = item.dataName;
  344. }
  345. });
  346. return newValue;
  347. } else {
  348. return value;
  349. }
  350. }
  351. });
  352. });
  353. } else {
  354. this.mixins_onQuery = false;
  355. }
  356. } else {
  357. this.mixins_onQuery = false;
  358. }
  359. resolve && resolve(true);
  360. })
  361. .catch(() => {
  362. this.mixins_onQuery = false;
  363. });
  364. }
  365. },
  366. dataFormat(date) {
  367. return date
  368. .toLocaleString()
  369. .replace(/\/|[\u4e00-\u9fa5]|:|\s+/g, '')
  370. .substr(0, 8);
  371. },
  372. exportExcel(date) {
  373. let downurl = '';
  374. let params = {
  375. deviceId: this.params.id || '',
  376. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  377. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  378. };
  379. if (this.value == 'history') {
  380. params = {
  381. deviceId: this.params.id || '',
  382. startDate: this.dataValue.length ? `${this.dataValue[0]}` : '',
  383. endDate: this.dataValue.length ? `${this.dataValue[1]}` : ''
  384. };
  385. downurl = '/sc-energy/device/getDataExcel';
  386. } else if (this.value == 'alarm') {
  387. params = Object.assign(params, {
  388. categoryId: this.params.categoryId || '',
  389. deviceId: this.params.id || ''
  390. });
  391. downurl = '/sc-energy/alarm/exportExcel';
  392. } else {
  393. downurl = '/sc-energy/device/command/export/excel';
  394. params = {
  395. deviceId: this.params.id || '',
  396. startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
  397. endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
  398. };
  399. }
  400. this.__exportExcel(downurl, params);
  401. }
  402. }
  403. };
  404. </script>
  405. <style lang="scss" scoped>
  406. .tab_head-right {
  407. line-height: inherit;
  408. color: #0eaeff;
  409. font-size: 30px;
  410. }
  411. .box__wrap {
  412. /deep/ .fullheight {
  413. height: 100%;
  414. // height: fit-content;
  415. width: 100%;
  416. display: inline-flex;
  417. flex-direction: column;
  418. justify-content: space-between;
  419. .el-table {
  420. overflow-y: auto;
  421. }
  422. }
  423. }
  424. </style>