point.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <el-row type="flex">
  3. <div class="query mg-b-8">
  4. <div class="query-items">
  5. <div class="query-item">
  6. <div class="lable">时间:</div>
  7. <div class="search-input">
  8. <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
  9. end-placeholder="结束日期">
  10. </el-date-picker>
  11. </div>
  12. </div>
  13. <div class="query-item">
  14. <div class="lable">等间隔:</div>
  15. <div class="search-input">
  16. <el-select v-if="!chooseStatus" @change="switchChange(selectValue)" class="inputs"
  17. v-model="selectValue" placeholder="请选择">
  18. <el-option v-for="item in timeoptions" :key="item.value" :label="item.label"
  19. :value="item.value">
  20. </el-option>
  21. </el-select>
  22. </div>
  23. </div>
  24. <div class="query-actions">
  25. <!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
  26. <button class="btn" @click="dbfx">原数据对标</button>
  27. </div>
  28. </div>
  29. </div>
  30. </el-row>
  31. <el-row :type="'flex'" class="content mg-b-8">
  32. <ComTable :data="tableData" :height="'30vh'" v-loading="tableLoading" ref="curRef" element-loading-text="拼命加载中"
  33. element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
  34. </el-row>
  35. <el-row :type="'flex'" class="content" :style="{height:'44vh'}">
  36. <el-col :span="24">
  37. <multiple-y-line-chart-normal height="45vh" :list="Powertrend" :yAxises="PowertrendYAxises"
  38. :showLegend="true" />
  39. </el-col>
  40. </el-row>
  41. </template>
  42. <script>
  43. import ComTable from "@/components/coms/table/table.vue";
  44. import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
  45. export default {
  46. components: {
  47. ComTable,
  48. MultipleYLineChartNormal
  49. },
  50. data() {
  51. const that = this;
  52. return {
  53. Powertrend: [{
  54. title: "",
  55. yAxisIndex: 0, // 使用单位
  56. value: [],
  57. }, ],
  58. PowertrendYAxises: [{
  59. name: "",
  60. min: 0,
  61. max: null,
  62. unit: "",
  63. position: "left",
  64. },
  65. {
  66. name: "",
  67. min: 0,
  68. max: 25,
  69. unit: "",
  70. position: "right",
  71. },
  72. ],
  73. selectValue: "60",
  74. timeoptions: [
  75. {
  76. value: "60",
  77. label: "一分钟",
  78. },
  79. {
  80. value: "300",
  81. label: "五分钟",
  82. },
  83. {
  84. value: "600",
  85. label: "十分钟",
  86. },
  87. {
  88. value: "1800",
  89. label: "三十分钟",
  90. },
  91. {
  92. value: "3600",
  93. label: "一小时",
  94. },
  95. {
  96. value: "86400",
  97. label: "一天",
  98. },
  99. ],
  100. time: [that.st - (3600 * 1000*24), that.st + (1000*10*60)],
  101. point: [],
  102. pointdes: [],
  103. pageSize: 20,
  104. model: [],
  105. station: '',
  106. windturbinename: "",
  107. isvisiable: false,
  108. checkLength: 0, //对标分析只能选择5个
  109. tableData: {
  110. column: [
  111. {
  112. name: "",
  113. field: "check",
  114. is_light: false,
  115. width: '50px',
  116. template: function() {
  117. return "<input class='check curCheckBox' type='CheckBox'/>";
  118. },
  119. click: function(event, data) {
  120. let point = data.point,
  121. pointdes = data.pointdes;
  122. if (event.target.checked == false && that.checkLength <= 5) {
  123. that.point.forEach((item, i) => {
  124. if (item == point) {
  125. that.point.splice(i, 1);
  126. that.pointdes.splice(i, 1);
  127. }
  128. });
  129. that.checkLength--;
  130. } else if (event.target.checked && that.checkLength < 5) {
  131. that.point.push(point);
  132. that.pointdes.push(pointdes);
  133. that.checkLength++;
  134. } else if (that.checkLength == 5) {
  135. event.target.checked = false;
  136. }
  137. },
  138. },
  139. {
  140. name: "序号",
  141. field: "index",
  142. is_light: false,
  143. width: '30px',
  144. },
  145. {
  146. name: "测点名称",
  147. field: "point",
  148. is_light: false,
  149. width: '400px',
  150. },
  151. {
  152. name: "测点描述",
  153. field: "pointdes",
  154. is_light: false,
  155. width: '350px',
  156. },
  157. {
  158. name: "操作",
  159. is_light: false,
  160. width: '250px',
  161. template: () => {
  162. return (
  163. "<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp"
  164. );
  165. },
  166. click(e, row) {
  167. that.onClickOption(e, row);
  168. },
  169. },
  170. ],
  171. data: [],
  172. }
  173. };
  174. },
  175. props: {
  176. data: {
  177. type: Array
  178. },
  179. st: {
  180. type: String
  181. },
  182. },
  183. methods: {
  184. onClickOption(e, row) { // 操作按钮
  185. let that = this;
  186. if ("config" == e.target.getAttribute("value")) { //原始数据
  187. that.requestDetailData([row.point], [row.pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
  188. new Date(that.time[1]))], that.selectValue);
  189. that.clearDb();
  190. }
  191. },
  192. list(data) {
  193. var that = this;
  194. that.tableData.data = [];
  195. if (data.length) {
  196. for (var i = 0; i < data.length; i++) {
  197. let obj = {
  198. index: i + 1,
  199. windturbineid: data[i].windturbineid,
  200. widget: data[i].widget,
  201. point: data[i].point,
  202. pointdes: data[i].pointdes,
  203. model: data[i].model,
  204. stationcn: data[i].stationcn,
  205. };
  206. that.tableData.data.push(obj);
  207. }
  208. that.requestDetailData([data[0].point], [data[0].pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
  209. new Date(that.time[1]))], that.selectValue);
  210. }
  211. },
  212. switchChange(interval, status) {
  213. if (status === 'interval') {
  214. this.chooseStatus = false
  215. this.selectValue = '60'
  216. } else if (status === 'original') {
  217. this.chooseStatus = true
  218. }
  219. },
  220. requestDetailData(point, pointdes, time, interval) {
  221. let that = this;
  222. let Powertrend = [];
  223. let dataPoint = '';
  224. pointdes.forEach((ele, index) => {
  225. Powertrend.push({
  226. title: ele,
  227. smooth: true,
  228. value: [],
  229. })
  230. })
  231. point.forEach((ele, index) => {
  232. dataPoint += ele + ','
  233. })
  234. dataPoint = dataPoint.slice(0, dataPoint.length - 1)
  235. that.API.requestData({
  236. showLoading: true,
  237. method: "GET",
  238. baseURL: "http://192.168.1.18:9002/",
  239. subUrl: "point/item",
  240. data: {
  241. point: dataPoint,
  242. startTs: time[0],
  243. endTs: time[1],
  244. interval: interval
  245. },
  246. success(res) {
  247. if (res.data) {
  248. res.data.forEach((ele, index) => {
  249. ele.list.forEach(cEle => {
  250. Powertrend[index].value.push({
  251. text: new Date(cEle.ts).formatDate("hh:mm"),
  252. value: cEle.doubleValue,
  253. });
  254. })
  255. });
  256. that.Powertrend = Powertrend;
  257. }
  258. },
  259. });
  260. },
  261. dbfx() {
  262. var that = this;
  263. if (that.point.length <= 5 && that.point.length != 0) {
  264. that.Powertrend = [];
  265. that.requestDetailData(that.point, that.pointdes, [Date.parse(new Date(that.time[0])), Date.parse(
  266. new Date(that.time[1]))], that.selectValue);
  267. }else{
  268. this.BASE.showMsg({
  269. type: "warning",
  270. msg: "请选择测点后再对标",
  271. });
  272. return
  273. }
  274. },
  275. clearDb() { //清空对标状态
  276. this.$refs.curRef.clearCheckBox();
  277. this.point = [];
  278. this.pointdes = [];
  279. this.checkLength = 0;
  280. },
  281. },
  282. created() {
  283. this.list(this.data);
  284. },
  285. watch: {
  286. selectValue() {
  287. this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
  288. this.time[1]))], this.selectValue);
  289. },
  290. time(e) {
  291. let st = Date.parse(new Date(e[0])),
  292. et = Date.parse(new Date(e[1]));
  293. if((et - st) > (86400000 * 7)){//判断选择日期区间大于一周则重新选择
  294. this.BASE.showMsg({
  295. type: "warning",
  296. msg: "请选择小于7天的日期区间",
  297. });
  298. return
  299. }
  300. this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
  301. this.time[1]))], this.selectValue);
  302. },
  303. },
  304. };
  305. </script>
  306. <style lang="less" scoped>
  307. .mb10 {
  308. margin-bottom: 10px;
  309. }
  310. .el-select.w {
  311. width: 100%;
  312. }
  313. </style>