Knowledge1.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <div class="knowledge-1">
  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="level"
  10. clearable
  11. placeholder="请选择"
  12. popper-class="select"
  13. >
  14. <el-option
  15. v-for="item in faultLevels"
  16. :key="item"
  17. :label="item"
  18. :value="item"
  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="type"
  29. placeholder="请选择"
  30. popper-class="select"
  31. >
  32. <el-option
  33. v-for="item in downTypes"
  34. :key="item"
  35. :label="item"
  36. :value="item"
  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-input v-model="content" placeholder="请输入查询内容"></el-input>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="query-actions">
  50. <button class="btn green" @click="onClickSearch">搜索</button>
  51. </div>
  52. </div>
  53. <div class="table-box">
  54. <ComTable :data="tableData" height="85vh"></ComTable>
  55. </div>
  56. <div class="dialog-box">
  57. <el-dialog
  58. title="详细信息"
  59. v-model="dialogVisible"
  60. custom-class="modal"
  61. :close-on-click-modal="false"
  62. >
  63. <know-info :data="infoData"></know-info>
  64. </el-dialog>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. import ComTable from "@com/coms/table/table.vue";
  70. import KnowInfo from "./knowinfo.vue";
  71. export default {
  72. components: { ComTable, KnowInfo },
  73. data() {
  74. const that = this;
  75. return {
  76. faultLevels: ["1级", "2级", "3级", "4级", "5级"], // 故障等级
  77. downTypes: ["正常停机", "快速停机", "紧急停机"], // 停机类型
  78. level: "",
  79. type: "",
  80. content: "",
  81. tableData: {
  82. column: [
  83. {
  84. name: "故障编码",
  85. field: "code",
  86. is_num: false,
  87. is_light: false,
  88. },
  89. {
  90. name: "故障名称",
  91. field: "name",
  92. is_num: false,
  93. is_light: false,
  94. },
  95. {
  96. name: "故障类别",
  97. field: "category",
  98. is_num: false,
  99. is_light: false,
  100. },
  101. {
  102. name: "故障级别",
  103. field: "faultlevel",
  104. is_num: false,
  105. is_light: false,
  106. },
  107. {
  108. name: "停机类型",
  109. field: "halttype",
  110. is_num: false,
  111. is_light: false,
  112. },
  113. {
  114. name: "设备类型",
  115. field: "devicemodel",
  116. is_num: false,
  117. is_light: false,
  118. },
  119. {
  120. name: "故障标识",
  121. field: "faultid",
  122. is_num: false,
  123. is_light: false,
  124. },
  125. {
  126. name: "操作",
  127. field: "",
  128. is_num: false,
  129. is_light: false,
  130. template() {
  131. return "<el-button type='text' style='cursor: pointer;'>详细信息</el-button>";
  132. },
  133. click(e, row) {
  134. that.getInformation(row);
  135. },
  136. },
  137. ],
  138. data: [],
  139. },
  140. infoData: "",
  141. dialogVisible: false,
  142. };
  143. },
  144. created() {
  145. this.level = this.faultLevels[0];
  146. this.type = this.downTypes[0];
  147. this.requestInfoList();
  148. },
  149. methods: {
  150. // 搜索按钮
  151. onClickSearch() {
  152. this.requestInfoList();
  153. },
  154. // 查看详细信息
  155. getInformation(item) {
  156. this.dialogVisible = true;
  157. this.infoData = item;
  158. },
  159. // 获取故障知识列表
  160. requestInfoList() {
  161. let that = this;
  162. this.API.requestData({
  163. method: "GET",
  164. baseURL: "http://10.155.32.4:8034/",
  165. subUrl: "/experienceBase/gzzs",
  166. data: {
  167. gzjb: that.level.substring(0, 1),
  168. tjlx: that.type,
  169. cxnr: that.content,
  170. pageNum: 1,
  171. pageSize: 1000,
  172. }, // 请求所携带参数,默认为空,可缺省
  173. success(res) {
  174. if (res.code == 200) {
  175. that.tableData.data = res.data;
  176. }
  177. },
  178. });
  179. },
  180. },
  181. };
  182. </script>
  183. <style lang="less" scope>
  184. @titleGray: #9ca5a8;
  185. @rowGray: #606769;
  186. @darkBack: #536268;
  187. .knowledge-1 {
  188. .el-select {
  189. width: 200px;
  190. }
  191. .el-input {
  192. width: 200px;
  193. }
  194. .dialog-box {
  195. height: 100%;
  196. display: flex;
  197. justify-content: center;
  198. align-items: center;
  199. }
  200. .el-dialog {
  201. min-width: 500px;
  202. min-height: 500px;
  203. }
  204. }
  205. </style>