fxfbCont.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <script>
  2. import { getGcjztjUnit } from "@/api/index.js";
  3. import { getZhxf } from "@/api/iot.js";
  4. import { area } from "@/api/area";
  5. import punishmentMixin from "@/mixin/unit.js";
  6. export default {
  7. name: "BasicInfoModalContent",
  8. mixins: [punishmentMixin],
  9. data() {
  10. return {
  11. gjzt: "",
  12. zjjc: "",
  13. options: [],
  14. options1: [
  15. {
  16. value: "水压检测",
  17. label: "水压检测",
  18. },
  19. {
  20. value: "电气火灾监测",
  21. label: "电气火灾监测",
  22. },
  23. {
  24. value: "消防通道监测",
  25. label: "消防通道监测",
  26. },
  27. {
  28. value: "火灾报警主机监测",
  29. label: "火灾报警主机监测",
  30. },
  31. {
  32. value: "消防控制室人员离岗监控",
  33. label: "消防控制室人员离岗监控",
  34. },
  35. ],
  36. // 设备状态
  37. options2: [
  38. {
  39. value: "在线",
  40. label: "在线",
  41. },
  42. {
  43. value: "离线",
  44. label: "离线",
  45. },
  46. ],
  47. // 告警状态
  48. DeviceStatusList: [
  49. {
  50. value: "消音,手动报警,查岗应答",
  51. label: "消音,手动报警,查岗应答",
  52. },
  53. {
  54. value: "压力下线报警,电源正常,无故障",
  55. label: "压力下线报警,电源正常,无故障",
  56. },
  57. {
  58. value: "压力上线报警",
  59. label: "压力上线报警",
  60. },
  61. {
  62. value: "火警",
  63. label: "火警",
  64. },
  65. {
  66. value: "停车侦测",
  67. label: "停车侦测",
  68. },
  69. {
  70. value: "人员离岗",
  71. label: "人员离岗",
  72. },
  73. {
  74. value: "机动车违停",
  75. label: "机动车违停",
  76. },
  77. {
  78. value: "区域内人数报警",
  79. label: "区域内人数报警",
  80. },
  81. ],
  82. fxdjList: [],
  83. tableData: [],
  84. unitList: [],
  85. ywzt: [], //告警状态
  86. sblx: "",
  87. value: "全市",
  88. params: {
  89. pageSize: 10,
  90. pageNum: 1,
  91. },
  92. total: 0,
  93. search: "",
  94. };
  95. },
  96. props: {
  97. qy: String,
  98. sbType: String,
  99. },
  100. watch: {
  101. qy: {
  102. handler(val) {
  103. this.value = val;
  104. this.funUnitList();
  105. this.handUnitList();
  106. },
  107. immediate: true,
  108. deep: true,
  109. },
  110. sbType: {
  111. handler(val) {
  112. this.sblx = val;
  113. this.funUnitList();
  114. this.handUnitList();
  115. },
  116. immediate: true,
  117. deep: true,
  118. },
  119. },
  120. methods: {
  121. rowClickHandler(val) {
  122. // this.$router.push(`/detail?id=${val.id}`);
  123. },
  124. funUnitList() {
  125. getZhxf({
  126. qx: this.value === "重庆市" ? "" : this.value,
  127. gcjzmc: this.search,
  128. zt: this.gjzt, //设备状态
  129. sblx: this.sblx,
  130. ywzt: this.ywzt, //告警状态
  131. ...this.params,
  132. }).then((res) => {
  133. this.tableData = res.data.rows;
  134. this.total = res.data.total;
  135. });
  136. },
  137. handleSizeChange(val) {
  138. this.params.pageSize = val;
  139. this.funUnitList();
  140. },
  141. handleCurrentChange(val) {
  142. this.params.pageNum = val;
  143. this.funUnitList();
  144. },
  145. handUnitList() {
  146. getZhxf({
  147. ...this.params,
  148. qy: this.value === "重庆市" ? "" : this.value,
  149. }).then((res) => {
  150. const list = res.data.rows[0];
  151. });
  152. },
  153. resetForm() {
  154. this.value = "";
  155. this.search = "";
  156. this.zjjc = "";
  157. this.gjzt=''
  158. this.sblx = "";
  159. (this.params = {
  160. pageSize: 10,
  161. pageNum: 1,
  162. }),
  163. (this.params.jcj = "");
  164. this.funUnitList();
  165. },
  166. changeSlet(node) {
  167. console.log("-------状态", node);
  168. },
  169. },
  170. created() {
  171. this.funUnitList();
  172. this.handUnitList();
  173. area({
  174. pageNum: 1,
  175. pageSize: 100,
  176. }).then((res) => {
  177. this.options = res.data.rows;
  178. });
  179. },
  180. };
  181. </script>
  182. <template>
  183. <div>
  184. <!-- 搜索 -->
  185. <div class="maintenance-supervision">
  186. <div class="maintenance-supervision_header">
  187. <div class="select-item">
  188. <el-select v-model="value" placeholder="请选择" filterable>
  189. <el-option
  190. :value="item.areaTitle"
  191. :label="item.areaTitle"
  192. v-for="(item, index) in options"
  193. :key="index"
  194. >
  195. </el-option>
  196. </el-select>
  197. </div>
  198. <div class="inp">
  199. <el-input v-model="search" placeholder="请输入建筑名称" ></el-input>
  200. </div>
  201. <div>
  202. <el-select v-model="sblx" placeholder="火灾报警主机检测" filterable>
  203. <el-option
  204. :value="item.value"
  205. :label="item.label"
  206. v-for="(item, index) in options1"
  207. :key="index"
  208. >
  209. </el-option>
  210. </el-select>
  211. </div>
  212. <div>
  213. <el-select v-model="gjzt" placeholder="设备状态">
  214. <el-option
  215. :value="item.value"
  216. :label="item.lable"
  217. v-for="(item, index) in options2"
  218. :key="index"
  219. >
  220. </el-option>
  221. </el-select>
  222. </div>
  223. <div>
  224. <el-select
  225. v-model="ywzt"
  226. placeholder="告警状态"
  227. multiple
  228. filterable
  229. @change="changeSlet"
  230. style="height: 30px"
  231. >
  232. <el-option
  233. :value="item.value"
  234. :label="item.lable"
  235. v-for="(item, index) in DeviceStatusList"
  236. :key="index"
  237. >
  238. </el-option>
  239. </el-select>
  240. </div>
  241. <div class="btn-item">
  242. <el-button @click="funUnitList">搜索</el-button>
  243. <el-button @click="resetForm">重置</el-button>
  244. </div>
  245. </div>
  246. </div>
  247. <basic-table
  248. :data="tableData"
  249. @row-click="rowClickHandler"
  250. style="text-align: center"
  251. >
  252. <el-table-column type="index" label="序号"> </el-table-column>
  253. <el-table-column prop="qx" label="区域" show-overflow-tooltip>
  254. </el-table-column>
  255. <el-table-column prop="gcjzmc" label="建筑名称" show-overflow-tooltip>
  256. </el-table-column>
  257. <el-table-column prop="sblx" label="设备类型" show-overflow-tooltip>
  258. </el-table-column>
  259. <el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip>
  260. </el-table-column>
  261. <el-table-column prop="wz" label="安装位置" show-overflow-tooltip>
  262. </el-table-column>
  263. <el-table-column
  264. prop="jkz"
  265. label="检测值"
  266. show-overflow-tooltip
  267. v-if="sblx == '电气火灾监测'"
  268. >
  269. </el-table-column>
  270. <el-table-column prop="zt" label="设备状态"> </el-table-column>
  271. <el-table-column prop="ywzt" label="告警状态" show-overflow-tooltip>
  272. </el-table-column>
  273. <el-table-column prop="cztt" label="处置状态" show-overflow-tooltip>
  274. </el-table-column>
  275. </basic-table>
  276. <br />
  277. <basic-pagination
  278. layout="total,->,prev, pager, next, sizes,jumper"
  279. :page-sizes="[10, 20, 50, 100]"
  280. :page-size="params.pageSize"
  281. :current-page="params.PageNum"
  282. :total="total"
  283. @size-change="handleSizeChange"
  284. @current-change="handleCurrentChange"
  285. />
  286. </div>
  287. </template>
  288. <style scoped lang="less">
  289. .maintenance-supervision {
  290. // padding: 10px 10px 0px 20px;
  291. ::v-deep(.el-input__inner) {
  292. border: none;
  293. background: linear-gradient(
  294. 360deg,
  295. rgba(0, 148, 255, 0.5) 0%,
  296. rgba(0, 148, 255, 0.31) 100%
  297. );
  298. color: #fff;
  299. }
  300. ::v-deep(.el-button) {
  301. border: none;
  302. background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
  303. color: #fff;
  304. }
  305. .maintenance-supervision_header {
  306. display: flex;
  307. flex-wrap: wrap;
  308. justify-content: space-around;
  309. // border-bottom: 1px solid #154956;
  310. padding-bottom: 10px;
  311. font-size: 12px;
  312. color: rgb(79, 149, 186);
  313. // .select-item{
  314. // margin-right: 20px;
  315. // }
  316. }
  317. .btn-item {
  318. margin-bottom: 10px;
  319. }
  320. .warp {
  321. height: 520px;
  322. margin: 0 auto;
  323. overflow: hidden;
  324. .item {
  325. list-style: none;
  326. padding: 0;
  327. margin: 0 auto;
  328. cursor: pointer;
  329. }
  330. }
  331. /deep/.el-input__inner {
  332. background-color: #184254;
  333. width: 165px;
  334. height: 30px;
  335. margin-bottom: 5px;
  336. }
  337. /deep/.el-button {
  338. width: 100px;
  339. height: 32px;
  340. font-size: 14px;
  341. line-height: 2px;
  342. // margin: 0 20px 0 30px;
  343. color: #fff;
  344. border-radius: 5px;
  345. border: none;
  346. }
  347. /deep/.el-button:hover {
  348. color: rgb(80, 147, 224);
  349. }
  350. /deep/.select_btn {
  351. position: absolute;
  352. top: 225px;
  353. right: 320px;
  354. //下拉框
  355. }
  356. /deep/.el-input {
  357. width: 165px;
  358. // margin-left: 20px;
  359. }
  360. .header {
  361. color: #fff;
  362. height: 33px !important;
  363. line-height: 33px !important;
  364. background-color: rgba(0, 163, 255, 0.3) !important;
  365. color: #61dbff;
  366. margin-top: 15px;
  367. margin-bottom: 6px;
  368. }
  369. .row,
  370. li,
  371. a {
  372. display: block;
  373. height: 39px;
  374. line-height: 39px;
  375. margin-bottom: 4px;
  376. display: flex;
  377. justify-content: space-between;
  378. align-items: center;
  379. font-size: 16px;
  380. background-color: rgba(0, 0, 0, 0.2);
  381. .time,
  382. .num,
  383. .person,
  384. .result {
  385. flex: 0.33;
  386. display: flex;
  387. justify-content: center;
  388. align-items: center;
  389. }
  390. .num {
  391. flex: 0.15;
  392. }
  393. }
  394. .inp {
  395. margin-left: 20px;
  396. }
  397. }
  398. .unit-bulid {
  399. display: flex;
  400. justify-content: space-between;
  401. margin-bottom: 20px;
  402. font-size: 18px;
  403. }
  404. .unit-num {
  405. width: 200px;
  406. height: 109px;
  407. border: 1px solid #0463a7;
  408. display: flex;
  409. flex-direction: column;
  410. align-items: center;
  411. justify-items: center;
  412. line-height: 59px;
  413. }
  414. /deep/.el-input__inner {
  415. height: 30px;
  416. }
  417. </style>