AlarmItem.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /**
  2. *props: objTypeArr:[](对象类数组)
  3. **/
  4. <template>
  5. <span>
  6. <span class="show-box">
  7. <el-button style="width: 250px;" @click="btnClick">{{btnInfo}}</el-button>
  8. <i class="el-icon-circle-close-outline clear-icon" @click="clear"></i>
  9. </span>
  10. <el-dialog
  11. title="选择报警条目"
  12. :visible.sync="dialogVisible"
  13. width="40%"
  14. center
  15. append-to-body
  16. >
  17. <div class="alarm-item-box">
  18. <div class="radio-box">
  19. <el-radio-group v-model="radioValue" @change="radioChange">
  20. <el-radio-button label="fixed">固定条目</el-radio-button>
  21. <el-radio-button label="customed">自定义条目</el-radio-button>
  22. </el-radio-group>
  23. </div>
  24. <div class="table-box">
  25. <el-table
  26. ref="multipleTable"
  27. :loading="loading"
  28. :data="tableData"
  29. tooltip-effect="dark"
  30. style="width: 100%"
  31. border
  32. @selection-change="handleSelectionChange">
  33. <el-table-column
  34. header-align="center"
  35. prop="code"
  36. label="报警条目编码">
  37. </el-table-column>
  38. <el-table-column
  39. header-align="center"
  40. prop="name"
  41. label="报警条目名称">
  42. </el-table-column>
  43. <el-table-column
  44. type="selection"
  45. width="55">
  46. </el-table-column>
  47. </el-table>
  48. </div>
  49. <div class="btn-box">
  50. <el-button type="primary" @click="save">保存</el-button>
  51. <el-button class="cancel-btn" @click="cancel">取消</el-button>
  52. </div>
  53. </div>
  54. </el-dialog>
  55. </span>
  56. </template>
  57. <script>
  58. import fixedApi from "@/api/alarm/alarm"
  59. import fixedUtils from './utils'
  60. import { mapGetters } from 'vuex'
  61. export default {
  62. name: 'alarm-item',
  63. data() {
  64. return {
  65. btnInfo: "报警条目",
  66. loading: false,
  67. dialogVisible: false,
  68. radioValue: 'fixed', //默认固定
  69. tableData:[],
  70. multipleSelection:[],
  71. alarmItemArr:[]
  72. }
  73. },
  74. props: {
  75. objTypeArr: {
  76. type: Array,
  77. default: []
  78. }
  79. },
  80. computed: {
  81. ...mapGetters("alarm",["spaceCodeObj"])
  82. },
  83. methods: {
  84. btnClick() {
  85. this.dialogVisible = true;
  86. this.btnInfo = "报警条目";
  87. this.getAlarmItem()
  88. },
  89. // radio改变事件
  90. radioChange(val) {
  91. this.multipleSelection = [];
  92. this.alarmItemArr = [];
  93. this.getAlarmItem();
  94. },
  95. // 多选事件
  96. handleSelectionChange(val,index) {
  97. this.multipleSelection = val;
  98. },
  99. // 获取报警条目数据
  100. getAlarmItem() {
  101. this.tableData = []
  102. let category = null;
  103. let objType = null;
  104. if(this.objTypeArr.length) {
  105. if(this.objTypeArr[0]) { //第一项全部
  106. objType = this.objTypeArr[0]
  107. if(this.objTypeArr[0] == "building" || this.objTypeArr[0] == "floor") {
  108. category = null;
  109. }else if(this.objTypeArr[0] == "space") {
  110. if(this.objTypeArr.length == 1) {
  111. category = null;
  112. } else {
  113. // category = this.objTypeArr[this.objTypeArr.length - 1];
  114. let p = fixedUtils.spaceSonCode(this.objTypeArr[this.objTypeArr.length - 1], this.spaceCodeObj);
  115. category = p;
  116. }
  117. } else {
  118. category = [this.objTypeArr[this.objTypeArr.length - 1]];
  119. }
  120. }
  121. }
  122. let params = {
  123. criteria: {
  124. type: this.radioValue, //报警条目类别,fixed 固定,customed 自定义 **必须
  125. projectId: this.radioValue == "fixed" ? null : this.projectId, //项目id,自定义类别时不为空
  126. objType: objType, //对象类型,building,floor,space,system,facility,为null或没有此字段时不过滤此项
  127. category: category ? {"$in":category} : null,
  128. }
  129. };
  130. fixedApi.getListData(params).then(res => {
  131. if(res.result == "success"){
  132. if(res.content && res.content.length) {
  133. this.tableData = res.content;
  134. // 判断是否已经选中
  135. this.$nextTick(() => {
  136. if(this.alarmItemArr) {
  137. let indexArr = [];
  138. this.alarmItemArr.length ? this.alarmItemArr.forEach((item, idx) =>{
  139. this.tableData.forEach((ele, index) =>{
  140. if(ele.code === item.code){
  141. indexArr.push(index);
  142. }
  143. })
  144. }) : null;
  145. indexArr.length ? indexArr.forEach((item) => {
  146. this.$refs.multipleTable.toggleRowSelection(this.tableData[item], true);
  147. }) : null
  148. } else {
  149. this.$refs.multipleTable.clearSelection();
  150. }
  151. })
  152. } else {
  153. this.tableData =[];
  154. }
  155. }
  156. });
  157. },
  158. save() {
  159. this.alarmItemArr = this.multipleSelection;
  160. let codeArr = [];
  161. let str = "";
  162. this.multipleSelection.forEach((item, index, arr) => {
  163. codeArr.push(item.code);
  164. if(index == arr.length-1) {
  165. str += item.name;
  166. } else {
  167. str += item.name + "、";
  168. }
  169. })
  170. if(str.length > 22) {
  171. let strTem= str.substring(0, 13);
  172. if(strTem.charAt(strTem.length-1) == "、") {
  173. strTem = strTem.substr(0, strTem.length-1)
  174. }
  175. this.btnInfo = strTem.charAt(strTem.length-1) == "、" ? strTem : (strTem + "...");
  176. } else {
  177. this.btnInfo = str
  178. };
  179. if( !this.multipleSelection.length ) {
  180. this.btnInfo = "报警条目";
  181. }
  182. this.$emit("change", this.radioValue, codeArr);
  183. this.dialogVisible = false;
  184. },
  185. cancel() {
  186. this.dialogVisible = false;
  187. },
  188. clear() {
  189. this.multipleSelection = [];
  190. this.alarmItemArr = [];
  191. this.btnInfo = "报警条目";
  192. this.$emit("change", this.radioValue, []);
  193. }
  194. },
  195. created() {
  196. if(!this.spaceCodeObj) {
  197. this.$store.commit("alarm/ADD_INDEX")
  198. }
  199. },
  200. watch:{
  201. objTypeArr: {
  202. handler() {
  203. this.clear();
  204. }
  205. }
  206. }
  207. }
  208. </script>
  209. <style lang="less" scoped>
  210. .show-box {
  211. font-size: 20px;
  212. .clear-icon{
  213. cursor: pointer;
  214. }
  215. }
  216. .alarm-item-box{
  217. .radio-box{
  218. text-align: center;
  219. }
  220. .table-box{
  221. height: 500px;
  222. overflow-y: auto;
  223. margin-top: 10px;
  224. }
  225. .btn-box{
  226. margin-top:10px;
  227. text-align: center;
  228. .cancel-btn{
  229. margin-left: 50px;
  230. }
  231. }
  232. }
  233. </style>