xfwlw.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <script>
  2. import {
  3. getJdjcUnit,
  4. getGcjztjUnit
  5. } from "@/api/index.js";
  6. import {
  7. area
  8. } from "@/api/area";
  9. import {
  10. getXfwlw
  11. } from "@/api/iot.js";
  12. import punishmentMixin from "@/mixin/unit.js";
  13. export default {
  14. name: "BasicInfoModalContent",
  15. mixins: [punishmentMixin],
  16. data() {
  17. return {
  18. options: [],
  19. fxdjList: [],
  20. tableData: [],
  21. unitList: [],
  22. value: "全市",
  23. params: {
  24. pageSize: 10,
  25. pageNum: 1,
  26. },
  27. total: 0,
  28. showFlag: 1
  29. };
  30. },
  31. props: {
  32. qy: String,
  33. },
  34. watch: {
  35. qy: {
  36. handler(val) {
  37. this.value = val;
  38. this.funUnitList();
  39. this.handUnitList();
  40. },
  41. immediate: true,
  42. deep: true,
  43. },
  44. },
  45. methods: {
  46. rowClickHandler(val) {
  47. this.$router.push(`/detail?id=${val.id}`);
  48. },
  49. funUnitList() {
  50. getXfwlw({
  51. ...this.params,
  52. qx: this.value === "重庆市" ? "" : this.value,
  53. }).then((res) => {
  54. this.tableData = res.data.rows;
  55. this.total = res.data.total;
  56. });
  57. },
  58. handleSizeChange(val) {
  59. this.params.pageSize = val;
  60. this.funUnitList();
  61. },
  62. handleCurrentChange(val) {
  63. this.params.pageNum = val;
  64. this.funUnitList();
  65. },
  66. handUnitList() {
  67. getXfwlw({
  68. ...this.params,
  69. qy: this.value === "重庆市" ? "" : this.value,
  70. }).then((res) => {
  71. const list = res.data.rows[0];
  72. // this.unitList = [{
  73. // title: "高层建筑总数(栋)",
  74. // unitNum: list.ggjz + list.gyjz + list.zzjz,
  75. // },
  76. // {
  77. // title: "超高层建筑总数(栋)",
  78. // unitNum: list.cggjz,
  79. // },
  80. // {
  81. // title: "老旧高层建筑总数(栋)",
  82. // unitNum: list.ljzzgc,
  83. // },
  84. // {
  85. // title: "公共建筑总数(栋)",
  86. // unitNum: list.ggjz,
  87. // },
  88. // {
  89. // title: "住宅建筑总数(栋)",
  90. // unitNum: list.zzjz,
  91. // },
  92. // ];
  93. });
  94. },
  95. resetForm() {
  96. this.value = "";
  97. (this.params = {
  98. pageSize: 10,
  99. pageNum: 1,
  100. }),
  101. this.funUnitList();
  102. },
  103. changeList(val) {
  104. this.showFlag = val
  105. },
  106. addClass(i) {
  107. return this.showFlag === i ? 'active' : 'tab-item'
  108. }
  109. },
  110. created() {
  111. this.funUnitList();
  112. this.handUnitList();
  113. area({
  114. pageNum: 1,
  115. pageSize: 100,
  116. }).then((res) => {
  117. this.options = res.data.rows;
  118. });
  119. },
  120. };
  121. </script>
  122. <template>
  123. <div>
  124. <!-- 搜索 -->
  125. <div class="maintenance-supervision">
  126. <!-- <div class="tab">
  127. <span class="tab-item" @click="changeList(1)" :class="addClass(1)">建筑类型</span>
  128. <span class="tab-item" @click="changeList(2)" :class="addClass(2)">年代</span>
  129. <span class="tab-item" @click="changeList(3)" :class="addClass(3)">高度</span>
  130. </div> -->
  131. <div class="maintenance-supervision_header">
  132. <div class="select-item">
  133. <el-select v-model="value" placeholder="请选择">
  134. <el-option :value="item.areaTitle" :label="item.areaTitle" v-for="(item, index) in options"
  135. :key="index">
  136. </el-option>
  137. </el-select>
  138. </div>
  139. </div>
  140. <div class="btn-item">
  141. <el-button @click="funUnitList">搜索</el-button>
  142. <el-button @click="resetForm">重置</el-button>
  143. </div>
  144. </div>
  145. <div>
  146. <basic-table :data="tableData" @row-click="rowClickHandler" style="text-align: center">
  147. <el-table-column type="index" label="序号">
  148. </el-table-column>
  149. <el-table-column prop="qx" label="区域" show-overflow-tooltip>
  150. </el-table-column>
  151. <el-table-column prop="ywcwlwjzs" label="已完成物联网建筑数(栋)" width="200" show-overflow-tooltip>
  152. </el-table-column>
  153. <el-table-column prop="zxjzs" label="在线建筑数(栋)" width="180" show-overflow-tooltip>
  154. </el-table-column>
  155. <el-table-column prop="gjjzs" label="告警建筑数(栋)" width="180" show-overflow-tooltip>
  156. </el-table-column>
  157. <el-table-column prop="hzbjzj" label="火灾报警主机(栋)" width="180" show-overflow-tooltip>
  158. </el-table-column>
  159. <el-table-column prop="syjc" label="水压监测(栋)" width="180" show-overflow-tooltip>
  160. </el-table-column>
  161. <el-table-column prop="dqhzjc" label="电气火灾监测(栋)" width="180" show-overflow-tooltip>
  162. </el-table-column>
  163. <el-table-column prop="smtdjc" label="生命通道监测(栋)" width="180" show-overflow-tooltip>
  164. </el-table-column>
  165. <el-table-column prop="xfkzsrylg" label="消防控制室人员离岗监控(栋)" width="220" show-overflow-tooltip>
  166. </el-table-column>
  167. <el-table-column prop="zxgj" label="在线/告警" width="150" show-overflow-tooltip>
  168. </el-table-column>
  169. </basic-table>
  170. </div>
  171. <br />
  172. <basic-pagination layout="->,prev, pager, next, sizes,jumper" :page-sizes="[10, 20, 50, 100]"
  173. :page-size="params.pageSize" :current-page="params.PageNum" :total="total" @size-change="handleSizeChange"
  174. @current-change="handleCurrentChange" />
  175. </div>
  176. </template>
  177. <style scoped lang="less">
  178. .maintenance-supervision {
  179. display: flex;
  180. align-items: center;
  181. // padding: 10px 10px 0px 20px;
  182. ::v-deep(.el-input__inner) {
  183. border: none;
  184. background: linear-gradient(360deg,
  185. rgba(0, 148, 255, 0.5) 0%,
  186. rgba(0, 148, 255, 0.31) 100%);
  187. color: #fff;
  188. }
  189. ::v-deep(.el-button) {
  190. border: none;
  191. background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
  192. color: #fff;
  193. }
  194. .maintenance-supervision_header {
  195. display: flex;
  196. // flex-wrap: wrap;
  197. justify-content: space-around;
  198. // border-bottom: 1px solid #154956;
  199. padding-bottom: 10px;
  200. font-size: 12px;
  201. color: rgb(79, 149, 186);
  202. // .select-item{
  203. // margin-right: 20px;
  204. // }
  205. }
  206. .btn-item {
  207. margin-bottom: 10px;
  208. }
  209. .warp {
  210. height: 520px;
  211. margin: 0 auto;
  212. overflow: hidden;
  213. .item {
  214. list-style: none;
  215. padding: 0;
  216. margin: 0 auto;
  217. cursor: pointer;
  218. }
  219. }
  220. /deep/.el-input__inner {
  221. background-color: #184254;
  222. width: 150px;
  223. height: 30px;
  224. margin-bottom: 5px;
  225. }
  226. /deep/.el-button {
  227. width: 100px;
  228. height: 32px;
  229. font-size: 14px;
  230. line-height: 2px;
  231. // margin: 0 20px 0 30px;
  232. color: #fff;
  233. border-radius: 5px;
  234. border: none;
  235. margin-left: 20px;
  236. }
  237. /deep/.el-button:hover {
  238. color: rgb(80, 147, 224);
  239. }
  240. /deep/.select_btn {
  241. position: absolute;
  242. top: 225px;
  243. right: 320px;
  244. //下拉框
  245. }
  246. /deep/.el-input {
  247. width: 150px;
  248. // margin-left: 20px;
  249. }
  250. .header {
  251. color: #fff;
  252. height: 33px !important;
  253. line-height: 33px !important;
  254. background-color: rgba(0, 163, 255, 0.3) !important;
  255. color: #61dbff;
  256. margin-top: 15px;
  257. margin-bottom: 6px;
  258. }
  259. .row,
  260. li,
  261. a {
  262. display: block;
  263. height: 39px;
  264. line-height: 39px;
  265. margin-bottom: 4px;
  266. display: flex;
  267. justify-content: space-between;
  268. align-items: center;
  269. font-size: 16px;
  270. background-color: rgba(0, 0, 0, 0.2);
  271. .time,
  272. .num,
  273. .person,
  274. .result {
  275. flex: 0.33;
  276. display: flex;
  277. justify-content: center;
  278. align-items: center;
  279. }
  280. .num {
  281. flex: 0.15;
  282. }
  283. }
  284. .inp {
  285. margin-left: 20px;
  286. }
  287. }
  288. .unit-bulid {
  289. display: flex;
  290. justify-content: space-between;
  291. margin-bottom: 20px;
  292. font-size: 18px;
  293. }
  294. .unit-num {
  295. width: 200px;
  296. height: 109px;
  297. border: 1px solid #0463a7;
  298. display: flex;
  299. flex-direction: column;
  300. align-items: center;
  301. justify-items: center;
  302. line-height: 59px;
  303. }
  304. .tab {
  305. display: flex;
  306. }
  307. .active {
  308. background: #0463a7 !important;
  309. }
  310. .tab-item {
  311. display: inline-block;
  312. width: 120px;
  313. height: 40px;
  314. text-align: center;
  315. line-height: 40px;
  316. font-size: 16px;
  317. color: #fff;
  318. border: 1px solid #fff;
  319. border-radius: 5px;
  320. margin-right: 15px;
  321. margin-bottom: 15px;
  322. }
  323. </style>