inspectContent.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!--检查内容统计列表-->
  2. <template>
  3. <div class="safetyHazardStatistics">
  4. <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true">
  5. <el-form-item label="" prop="rectifyStatus">
  6. <el-select v-model="queryParams.hazardTypeMode" clearable placeholder="全部检查内容">
  7. <el-option
  8. v-for="item in materialTypeList"
  9. :key="item.dictValue"
  10. :label="item.dictLabel"
  11. :value="item.dictValue">
  12. </el-option>
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="" prop="deptId" label-width="50px">
  16. <el-select v-model="queryParams.deptId" @change="handleNodeClick" clearable placeholder="全部学院">
  17. <el-option
  18. v-for="item in deptSelectList"
  19. :key="item.deptId"
  20. :label="item.deptName"
  21. :value="item.deptId">
  22. </el-option>
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item label="" prop="subId" label-width="58px">
  26. <el-select v-model="queryParams.subId" placeholder="请选择实验室">
  27. <el-option
  28. v-for="item in subjectOptions"
  29. :key="item.id"
  30. :label="item.name"
  31. :value="item.id">
  32. </el-option>
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="" prop="dateRange" label-width="70px">
  36. <el-date-picker
  37. :clearable="false"
  38. v-model="dateRange"
  39. size="small"
  40. style="width: 240px"
  41. value-format="yyyy-MM-dd"
  42. type="daterange"
  43. range-separator="-"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. ></el-date-picker>
  47. </el-form-item>
  48. <el-form-item>
  49. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  50. <p class="reset-button-one" @click="resetQuery">重置</p>
  51. </el-form-item>
  52. <el-form-item style="float: right;" v-hasPermi="['safety:dataSub:export']">
  53. <el-dropdown @command="exportButton">
  54. <div class="form-dropdown-box">
  55. <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
  56. <p>导出</p>
  57. <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
  58. </div>
  59. <el-dropdown-menu slot="dropdown">
  60. <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
  61. <el-dropdown-item style="margin:0 10px;color:#333;" :command="{command:2}">导出选中数据</el-dropdown-item>
  62. </el-dropdown-menu>
  63. </el-dropdown>
  64. </el-form-item>
  65. </el-form>
  66. <div class="num-data-box">
  67. 共搜索到隐患总数 {{numData.numData}},已整改数 {{numData.sumYzg}}, 未整改数 {{numData.sumWzg}},整改率 {{numData.rate}}
  68. </div>
  69. <el-table border :data="tableList" ref="multipleTable"
  70. :row-key="getRowKeys"
  71. @select="select" @select-all="selectAll">
  72. <el-table-column type="selection" width="50" align="center" fixed/>
  73. <el-table-column label="序号" align="center" type="index" width="60" fixed/>
  74. <el-table-column label="检查内容" align="center" prop="hazardTypeModeName" show-overflow-tooltip width="200" fixed/>
  75. <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="200" fixed/>
  76. <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="180"/>
  77. <el-table-column label="隐患总数" align="center" prop="sumTotal" show-overflow-tooltip width="100"/>
  78. <el-table-column label="隐患占比" align="center" prop="percent" show-overflow-tooltip width="180"/>
  79. <el-table-column label="已整改" align="center" prop="sumYzg" show-overflow-tooltip width="180"/>
  80. <el-table-column label="未整改" align="center" prop="sumWzg" show-overflow-tooltip width="180"/>
  81. <el-table-column label="整改率" align="center" prop="percent2" show-overflow-tooltip width="180"/>
  82. </el-table>
  83. <pagination :page-sizes="[20, 30, 40, 50]"
  84. v-show="total>0"
  85. :total="total"
  86. :page.sync="queryParams.pageNum"
  87. :limit.sync="queryParams.pageSize"
  88. @pagination="getList"
  89. />
  90. </div>
  91. </template>
  92. <script>
  93. import { listDepartments } from "@/api/system/dept";
  94. import { dataStatisticsContentList,dataStatisticsContentListTop } from "@/api/safetyCheck/index";
  95. import { dangerList } from '@/api/gasManage3_0/gasManage'
  96. import { subjectDictList } from '@/api/laboratory/record'
  97. export default {
  98. name: 'safetyHazardStatistics',
  99. data(){
  100. return{
  101. deptSelectList:[],
  102. materialTypeList:[],
  103. subjectOptions:[],
  104. levelList:[{label:"一般隐患",key:"2"},{label:"重大隐患",key:"1"},{label:"管理问题",key:"3"}],
  105. dateRange:[],
  106. queryParams:{
  107. pageNum:1,
  108. pageSize:20,
  109. hazardTypeMode:"",
  110. deptId:"",
  111. subId:"",
  112. },
  113. setChildren:"",
  114. numData:{},
  115. tableList:[],
  116. total:0,
  117. }
  118. },
  119. created(){
  120. },
  121. mounted(){
  122. this.dangerList();
  123. this.initializationInterface();
  124. this.getList();
  125. },
  126. methods:{
  127. initializationInterface(){
  128. //获取学院列表
  129. listDepartments().then(response => {
  130. this.deptSelectList = response.data;
  131. });
  132. },
  133. //获取危险源类型
  134. dangerList(){
  135. let _this=this;
  136. dangerList().then( response => {
  137. let res=response.rows;
  138. _this.materialTypeList=res;
  139. });
  140. },
  141. // 节点单击事件
  142. handleNodeClick(data) {
  143. this.queryParams.deptId = data;
  144. this.getSubjectDictList(data);
  145. },
  146. /** 查询实验室字典列表 */
  147. getSubjectDictList (deptId) {
  148. this.subjectOptions = null;
  149. this.loading = true;
  150. let params = {};
  151. params.deptId = deptId;
  152. this.queryParams.subId = "";
  153. subjectDictList(params).then(response => {
  154. this.subjectOptions = response.data;
  155. this.loading = false;
  156. });
  157. },
  158. //获取数据列表
  159. getList(){
  160. let obj = JSON.parse(JSON.stringify(this.queryParams))
  161. if(this.dateRange[0]){
  162. obj.beginTime = this.dateRange[0];
  163. }else{
  164. obj.beginTime = "";
  165. }
  166. if(this.dateRange[1]){
  167. obj.endTime = this.dateRange[1];
  168. }else{
  169. obj.endTime = "";
  170. }
  171. dataStatisticsContentList(obj).then(response => {
  172. this.total = response.data.total;
  173. this.tableList = response.data.records;
  174. });
  175. dataStatisticsContentListTop(obj).then(response => {
  176. this.$set(this,'numData',response.data);
  177. });
  178. },
  179. /** 搜索按钮操作 */
  180. handleQuery() {
  181. this.$set(this.queryParams,'pageNum',1);
  182. this.getList();
  183. },
  184. /** 重置按钮操作 */
  185. resetQuery() {
  186. this.$set(this,'dateRange',[]);
  187. this.$set(this,'queryParams',{
  188. pageNum:1,
  189. pageSize:20,
  190. hazardTypeMode:"",
  191. deptId:"",
  192. subId:"",
  193. });
  194. this.handleQuery();
  195. },
  196. /** 导出按钮操作 */
  197. exportButton(item) {
  198. let self = this;
  199. if(item.command == 1){
  200. self.$confirm(`确认导出全部数据?`, "提示", {
  201. confirmButtonText: "确定",
  202. cancelButtonText: "取消",
  203. type: "warning"
  204. }).then(async () => {
  205. self.download('/zd-security/DataStatistics/contentExport/', {}, '检查内容统计.xlsx')
  206. }).catch(() => {})
  207. }else if(item.command == 2){
  208. let list = self.$refs.multipleTable.selection;
  209. let ids = [];
  210. for(let i=0;i<list.length;i++){
  211. ids.push(list[i].id)
  212. }
  213. if(ids.length>0) {
  214. self.$confirm(`确认导出选中数据?`, "提示", {
  215. confirmButtonText: "确定",
  216. cancelButtonText: "取消",
  217. type: "warning"
  218. }).then(async () => {
  219. self.download(`/zd-security/DataStatistics/contentExport/?ids=`+ids,{}, '检查内容统计.xlsx')
  220. this.$refs.multipleTable.clearSelection();
  221. }).catch(() => {})
  222. }else {
  223. this.msgError('请选择要导出的数据')
  224. }
  225. }
  226. },
  227. /*===记录勾选数据===
  228. 需要再el-table 添加 :row-key="getRowKeys"
  229. 需要在selection 添加 :reserve-selection="true"
  230. */
  231. getRowKeys(row) {
  232. return row.id
  233. },
  234. // 单选
  235. select (selection, row) {
  236. if (selection.some(el => { return row.id === el.id })) {
  237. if (row.children) {
  238. this.setChildren(row.children, true)
  239. }
  240. } else {
  241. if (row.children) {
  242. this.setChildren(row.children, false)
  243. }
  244. }
  245. },
  246. // 全选
  247. selectAll (selection) {
  248. const isSelect = selection.some(el => {
  249. const tableDataIds = this.tableData.map(j => j.id)
  250. return tableDataIds.includes(el.id)
  251. })
  252. const isCancel = !this.tableData.every(el => {
  253. const selectIds = selection.map(j => j.id)
  254. return selectIds.includes(el.id)
  255. })
  256. if (isSelect) {
  257. selection.map(el => {
  258. if (el.children) {
  259. this.setChildren(el.children, true)
  260. }
  261. })
  262. }
  263. if (isCancel) {
  264. this.tableData.map(el => {
  265. if (el.children) {
  266. this.setChildren(el.children, false)
  267. }
  268. })
  269. }
  270. },
  271. }
  272. }
  273. </script>
  274. <style scoped lang="scss">
  275. ::v-deep .el-table__body-wrapper{
  276. padding-bottom: 8px;
  277. }
  278. ::v-deep .el-table__fixed{
  279. margin-top:-1px;
  280. margin-left:-1px;
  281. height:calc(100% - 8px)!important;
  282. }
  283. ::v-deep .el-table__fixed-body-wrapper{
  284. height: calc(100% - 48px);
  285. overflow-y: auto;
  286. }
  287. .safetyHazardStatistics{
  288. flex:1;
  289. display: flex;
  290. flex-direction: column;
  291. overflow: hidden;
  292. padding:20px;
  293. .form-box{
  294. .form-dropdown-box{
  295. display: flex;
  296. margin:0;
  297. padding:0 10px;
  298. cursor: pointer;
  299. height:40px;
  300. img:nth-child(1){
  301. width:16px;
  302. height:16px;
  303. margin-top:12px;
  304. }
  305. p{
  306. width:47px;
  307. text-align: center;
  308. font-size:14px;
  309. margin:0;
  310. line-height:40px;
  311. }
  312. img:nth-child(3){
  313. width:10px;
  314. height:6px;
  315. margin-top:17px;
  316. }
  317. }
  318. }
  319. .num-data-box{
  320. background: rgba(1,131,250,0.2);
  321. color:#0183FA;
  322. font-size:14px;
  323. line-height:40px;
  324. padding:0 20px;
  325. border-radius:4px;
  326. margin-bottom:20px;
  327. }
  328. }
  329. </style>