Warning.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div class="wind-site-warning">
  3. <div class="search pd-16">
  4. <el-row class="mg-b-16">
  5. <div class="query">
  6. <input class="search-input" name="query" v-model="query" />
  7. </div>
  8. <button class="btn search" @click="search">搜索</button>
  9. <div class="empty"></div>
  10. <button class="btn empty-btn" @click="reset">重置</button>
  11. </el-row>
  12. <el-row class="options">
  13. <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
  14. <div class="count">{{ option.count }}</div>
  15. <div class="text">{{ option.text }}</div>
  16. </el-col>
  17. </el-row>
  18. </div>
  19. <div class="warning-list">
  20. <Table :data="warning" />
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import Table from "../../../../components/coms/table/table.vue";
  26. export default {
  27. components: {
  28. Table,
  29. },
  30. data() {
  31. return {
  32. query: "",
  33. options: [],
  34. ackupData: {},
  35. warning: {
  36. column: [
  37. // {
  38. // name: "报警编号",
  39. // field: "Code",
  40. // is_num: true, // 是否为数字
  41. // },
  42. {
  43. name: "PLC变量名",
  44. field: "name",
  45. },
  46. {
  47. name: "报警信息",
  48. field: "value",
  49. },
  50. {
  51. name: "报警状态",
  52. field: "data1",
  53. template: function(data) {
  54. if (data === 1) return "<div class='error-state'></div>";
  55. else return "正常";
  56. },
  57. },
  58. ],
  59. data: [],
  60. },
  61. activeArray: [],
  62. isSearch: false,
  63. };
  64. },
  65. props: {
  66. data: {
  67. type: Object,
  68. default: () => {},
  69. },
  70. },
  71. mounted() {
  72. this.backupData = this.BASE.deepCopy(this.data);
  73. this.riseData(this.data);
  74. },
  75. methods: {
  76. onOptionClick(option, index) {
  77. option.isActive = !option.isActive;
  78. this.activeArray[index] = !this.activeArray[index];
  79. let warningData = [];
  80. this.activeArray.forEach((bool, index) => {
  81. if (bool) {
  82. this.options[index].vos.forEach((ele) => {
  83. warningData.push(ele);
  84. });
  85. }
  86. });
  87. this.warning.data = warningData;
  88. this.isSearch = false;
  89. this.query = "";
  90. },
  91. // 格式化数据
  92. riseData(data) {
  93. let options = [];
  94. let warningData = [];
  95. let index = 0;
  96. for (let key in data) {
  97. data.index = index;
  98. if (this.activeArray.length < index + 1) {
  99. this.activeArray.push(false);
  100. }
  101. options.push({
  102. id: data[key].id,
  103. text: data[key].name,
  104. vos: data[key].vos,
  105. count: data[key].vos.length,
  106. isActive: this.activeArray[index],
  107. });
  108. if (this.activeArray[index]) {
  109. data[key].vos.forEach((ele) => {
  110. warningData.push(ele);
  111. });
  112. }
  113. index++;
  114. }
  115. this.options = options;
  116. this.warning.data = warningData;
  117. if (this.isSearch) {
  118. this.search();
  119. }
  120. },
  121. search() {
  122. // 压器类总
  123. this.isSearch = true;
  124. if (this.query) {
  125. let warningData = [];
  126. this.BASE.deepCopy(this.warning.data).forEach((ele) => {
  127. if (ele.name.indexOf(this.query) !== -1) {
  128. warningData.push(ele);
  129. }
  130. });
  131. this.warning.data = warningData;
  132. } else {
  133. this.riseData(this.data);
  134. }
  135. },
  136. reset() {
  137. for (let i = 0; i < this.activeArray.length; i++) {
  138. this.activeArray[i] = false;
  139. }
  140. this.isSearch = false;
  141. this.query = "";
  142. let sourceMap = this.BASE.deepCopy(this.backupData);
  143. this.riseData(sourceMap, true);
  144. },
  145. },
  146. watch: {
  147. data(res) {
  148. this.backupData = this.BASE.deepCopy(res);
  149. this.riseData(res);
  150. },
  151. },
  152. };
  153. </script>
  154. <style lang="less">
  155. .wind-site-warning {
  156. border: 1px solid @darkgray;
  157. .search {
  158. .query {
  159. height: 100%;
  160. flex: 0 0 auto;
  161. .search-input {
  162. background: transparent;
  163. border: 1px solid @darkgray;
  164. padding: 0.741vh;
  165. color: @gray;
  166. outline: unset;
  167. border-radius: 0%;
  168. margin-right: 0.741vh;
  169. }
  170. }
  171. button {
  172. height: 100%;
  173. flex: 0 0 auto;
  174. background: transparent;
  175. border: 1px solid @darkgray;
  176. padding: 0.741vh 1.481vh;
  177. color: @gray;
  178. font-size: @fontsize-s;
  179. cursor: pointer;
  180. }
  181. .empty {
  182. flex: auto;
  183. }
  184. .options {
  185. .option-item {
  186. display: flex;
  187. padding-bottom: 0.741vh;
  188. color: @gray;
  189. cursor: pointer;
  190. font-size: @fontsize-s;
  191. .count {
  192. flex: 0 0 3.704vh;
  193. padding: 0.37vh;
  194. text-align: center;
  195. border: 1px solid @darkgray;
  196. margin-right: 0.37vh;
  197. line-height: 2.222vh;
  198. }
  199. .text {
  200. flex: 1 0 auto;
  201. padding: 0.741vh;
  202. text-align: center;
  203. border: 1px solid @darkgray;
  204. }
  205. & + .option-item {
  206. padding-left: 0.741vh;
  207. }
  208. &:nth-child(3n + 1) {
  209. padding-left: 0px;
  210. }
  211. &.has-value {
  212. .text,
  213. .count {
  214. border-color: @purple;
  215. color: @purple;
  216. }
  217. }
  218. &.active,
  219. &:hover {
  220. .text,
  221. .count {
  222. border-color: @green;
  223. color: @green;
  224. }
  225. }
  226. }
  227. }
  228. }
  229. .warning-list {
  230. .error-state {
  231. width: 0.741vh;
  232. height: 0.741vh;
  233. border-radius: 50%;
  234. background-color: @red;
  235. margin: auto;
  236. }
  237. tbody {
  238. height: 571px;
  239. }
  240. }
  241. }
  242. </style>