HealthTab3.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <template>
  2. <div class="health-tab-3">
  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-select
  9. v-model="station"
  10. clearable
  11. placeholder="请选择"
  12. popper-class="select"
  13. >
  14. <el-option
  15. v-for="item in stations"
  16. :key="item.id"
  17. :label="item.name"
  18. :value="item.id"
  19. >
  20. </el-option>
  21. </el-select>
  22. </div>
  23. </div>
  24. <div class="query-item">
  25. <div class="lable">机组</div>
  26. <div class="search-input">
  27. <el-select
  28. v-model="windturbine"
  29. placeholder="请选择"
  30. popper-class="select"
  31. >
  32. <el-option
  33. v-for="item in windturbines"
  34. :key="item.id"
  35. :label="item.name"
  36. :value="item.id"
  37. >
  38. </el-option>
  39. </el-select>
  40. </div>
  41. </div>
  42. <div class="query-item">
  43. <div class="lable">开始日期:</div>
  44. <div class="search-input">
  45. <el-date-picker
  46. v-model="starts"
  47. type="date"
  48. placeholder="选择日期"
  49. popper-class="date-select"
  50. >
  51. </el-date-picker>
  52. </div>
  53. </div>
  54. <div class="query-item">
  55. <div class="lable">结束日期:</div>
  56. <div class="search-input">
  57. <el-date-picker
  58. v-model="endts"
  59. type="date"
  60. placeholder="选择日期"
  61. popper-class="date-select"
  62. >
  63. </el-date-picker>
  64. <div class="unit svg-icon svg-icon-gray">
  65. <svg-icon :svgid="''" />
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="query-actions" style="margin-right: 500px">
  71. <button class="btn green" @click="onClickSearch">搜索</button>
  72. </div>
  73. </div>
  74. <div class="table-box">
  75. <ComTable :data="tableData" height="80vh"></ComTable>
  76. </div>
  77. <div class="dialog-box">
  78. <el-dialog
  79. title="消缺跟踪"
  80. v-model="dialogVisible"
  81. width="950px"
  82. custom-class="modal"
  83. :close-on-click-modal="false"
  84. >
  85. <info-track :formdata="trackDate" />
  86. </el-dialog>
  87. </div>
  88. </div>
  89. </template>
  90. <script>
  91. import InfoTrack from "./infotrack.vue";
  92. import ComTable from "@com/coms/table/table.vue";
  93. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  94. import api from "@api/wisdomOverhaul/health/index.js";
  95. import api1 from "@api/economic/index.js";
  96. export default {
  97. components: { InfoTrack, ComTable, SvgIcon },
  98. data() {
  99. const that = this;
  100. return {
  101. stations: [], // 场站
  102. windturbines: [], // 风机
  103. station: "",
  104. windturbine: "CL01_001",
  105. starts: "",
  106. endts: new Date(),
  107. tableData: {
  108. column: [
  109. {
  110. name: "场站",
  111. field: "wfname",
  112. width: "150px",
  113. is_light: false,
  114. },
  115. {
  116. name: "风机编号",
  117. field: "wtid",
  118. width: "150px",
  119. is_light: false,
  120. },
  121. {
  122. name: "任务开始时间",
  123. width: "200px",
  124. field: "operationdate",
  125. is_light: false,
  126. },
  127. {
  128. name: "任务接受时间",
  129. width: "200px",
  130. field: "departuretime",
  131. is_light: false,
  132. },
  133. {
  134. name: "检修原因",
  135. field: "reason",
  136. is_light: false,
  137. },
  138. {
  139. name: "受否下单",
  140. width: "100px",
  141. field: "ismain",
  142. is_light: false,
  143. },
  144. {
  145. name: "任务状态",
  146. width: "150px",
  147. field: "status",
  148. is_light: false,
  149. },
  150. {
  151. name: "操作",
  152. width: "100px",
  153. field: "",
  154. is_num: false,
  155. is_light: false,
  156. template() {
  157. return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
  158. },
  159. click(e, row) {
  160. that.onClickTrack(row);
  161. },
  162. },
  163. ],
  164. data: [],
  165. },
  166. dialogVisible: false,
  167. trackDate: undefined,
  168. };
  169. },
  170. created() {
  171. this.starts = new Date(
  172. new Date().setMonth(new Date().getMonth() - 2)
  173. ).formatDate("yyyy-MM-dd");
  174. this.requestStations();
  175. },
  176. methods: {
  177. // 搜索按钮
  178. onClickSearch() {
  179. this.requestUnfinishedList();
  180. },
  181. // 消缺跟踪
  182. onClickTrack(row) {
  183. this.requestTrack(row);
  184. },
  185. // 获取场站
  186. requestStations() {
  187. api1.benchmarkingWplist({}).then((res) => {
  188. if (res.code == 200) {
  189. this.stations = res.data;
  190. this.station = this.stations[0]?.id;
  191. // this.windturbine = this.windturbines[0]?.id;
  192. this.requestUnfinishedList();
  193. }
  194. });
  195. // let that = this;
  196. // that.API.requestData({
  197. // method: "GET",
  198. // subUrl: "powercompare/windfarmAjax",
  199. // success(res) {
  200. // if (res.code == 200) {
  201. // that.stations = res.data;
  202. // that.station = that.stations[3].id;
  203. // that.requestUnfinishedList();
  204. // }
  205. // },
  206. // });
  207. },
  208. // 获取风机
  209. requestWindturbines(wpid) {
  210. api
  211. .powercompareWindturbineAjax({
  212. wpId: wpid,
  213. })
  214. .then((res) => {
  215. if (res.code == 200) {
  216. this.windturbines = res.data;
  217. this.windturbine = this.windturbines[0].id;
  218. }
  219. });
  220. // let that = this;
  221. // that.API.requestData({
  222. // method: "GET",
  223. // subUrl: "powercompare/windturbineAjax",
  224. // data: { wpId: wpid },
  225. // success(res) {
  226. // if (res.code == 200) that.windturbines = res.data;
  227. // },
  228. // });
  229. },
  230. // 获取未完成消缺单列表
  231. requestUnfinishedList() {
  232. api
  233. .recommenUnfinishedList({
  234. wpId: this.station,
  235. wtId: this.windturbine,
  236. beginDate: new Date(this.starts).formatDate("yyyy-MM-dd"),
  237. endDate: new Date(this.endts).formatDate("yyyy-MM-dd"),
  238. })
  239. .then((res) => {
  240. if (res.code == 200) {
  241. this.tableData.data = [];
  242. res.data.forEach((item) => {
  243. let obj = {
  244. wfname: item.wfname,
  245. wtid: item.wtid,
  246. operationdate: item.operationdate
  247. ? new Date(item.operationdate).formatDate(
  248. "yyyy-MM-dd hh:mm:ss"
  249. )
  250. : "",
  251. departuretime: item.departuretime
  252. ? new Date(item.departuretime).formatDate(
  253. "yyyy-MM-dd hh:mm:ss"
  254. )
  255. : "",
  256. reason: item.reason,
  257. ismain: item.ismain,
  258. status: item.status,
  259. rid: item.rid,
  260. };
  261. this.tableData.data.push(obj);
  262. });
  263. }
  264. });
  265. // let that = this;
  266. // that.API.requestData({
  267. // method: "POST",
  268. // subUrl: "recommen/unfinishedList",
  269. // data: {
  270. // wpId: that.station,
  271. // wtId: that.windturbine,
  272. // beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
  273. // endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
  274. // },
  275. // success(res) {
  276. // if (res.code == 200) {
  277. // that.tableData.data = [];
  278. // res.data.forEach((item) => {
  279. // let obj = {
  280. // wfname: item.wfname,
  281. // wtid: item.wtid,
  282. // operationdate: item.operationdate
  283. // ? new Date(item.operationdate).formatDate(
  284. // "yyyy-MM-dd hh:mm:ss"
  285. // )
  286. // : "",
  287. // departuretime: item.departuretime
  288. // ? new Date(item.departuretime).formatDate(
  289. // "yyyy-MM-dd hh:mm:ss"
  290. // )
  291. // : "",
  292. // reason: item.reason,
  293. // ismain: item.ismain,
  294. // status: item.status,
  295. // rid: item.rid,
  296. // };
  297. // that.tableData.data.push(obj);
  298. // });
  299. // }
  300. // },
  301. // });
  302. },
  303. // 通过消缺单获得详细信息
  304. requestTrack(row) {
  305. api
  306. .recommenFindMainTrack({
  307. rid: row.rid,
  308. })
  309. .then((res) => {
  310. if (res.code == 200) {
  311. this.trackDate = res.data;
  312. console.warn(this.trackDate);
  313. this.dialogVisible = true;
  314. }
  315. });
  316. // let that = this;
  317. // that.API.requestData({
  318. // method: "POST",
  319. // subUrl: "recommen/findMainTrack",
  320. // data: {
  321. // rid: row.rid,
  322. // },
  323. // success(res) {
  324. // if (res.code == 200) {
  325. // that.trackDate = res.data;
  326. // console.warn(that.trackDate);
  327. // that.dialogVisible = true;
  328. // }
  329. // },
  330. // });
  331. },
  332. },
  333. watch: {
  334. station(val) {
  335. this.windturbine = "";
  336. this.requestWindturbines(val);
  337. },
  338. },
  339. };
  340. </script>
  341. <style lang="less" scope>
  342. @titleGray: #9ca5a8;
  343. @rowGray: #606769;
  344. @darkBack: #536268;
  345. .health-tab-3 {
  346. .dialog-box {
  347. height: 100%;
  348. display: flex;
  349. justify-content: center;
  350. align-items: center;
  351. }
  352. }
  353. </style>