checkIndexStatistics.vue 12 KB

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