evaluationWarningPage.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <template>
  2. <div class="evaluationWaring">
  3. <div class="evaluationWaringBtn">
  4. <div style="display:flex;justify-content: space-between;border-bottom: 1px solid#D6DBEA;">
  5. <div class="collectSeach" :style="$utils.collectSeachSty()">
  6. <div class="exceed">
  7. <span class="exceedSpan">业务属性:</span>
  8. <el-select v-model="sectionStr" placeholder="请选择业务属性">
  9. <el-option
  10. v-for="item in moduleData"
  11. :key="item.id"
  12. :label="item.sectionName"
  13. :value="item.id">
  14. </el-option>
  15. </el-select>
  16. </div>
  17. <div class="exceed">
  18. <span class="exceedSpan">预警时间:</span>
  19. <el-date-picker
  20. v-model="warnTime"
  21. value-format="YYYY-MM-DD HH:mm:ss"
  22. type="datetimerange"
  23. range-separator="至"
  24. start-placeholder="开始时间"
  25. end-placeholder="结束时间"
  26. @change="changeTime"
  27. />
  28. </div>
  29. <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
  30. </div>
  31. <div class="warningExport">
  32. <el-button
  33. type="info"
  34. icon="Download"
  35. size="mini"
  36. @click="handleExport"
  37. >导出</el-button>
  38. </div>
  39. </div>
  40. <div class="evaluationWaringTableData">
  41. <el-table :data="evaluationWaringData" style="width: 100%" :class="evalwarningTableSty()">
  42. <el-table-column label="序号" type="index" align="center" />
  43. <el-table-column label="考评单位" prop="company" width="200" />
  44. <el-table-column label="指标类型" prop="title" width="200" />
  45. <el-table-column label="预警内容" prop="content" />
  46. <el-table-column label="目标值" prop="targetValue" width="100" />
  47. <el-table-column label="完成值" prop="completeValue" width="100" />
  48. <el-table-column label="预警时间" prop="createTime" />
  49. <el-table-column label="确认人" prop="userName" />
  50. <el-table-column label="确认时间" prop="confirmTime" />
  51. <el-table-column label="状态" width="100">
  52. <template #default="scope">
  53. <span class="statusSty"
  54. :style="scope.row.isConfirm ? 'background:#61C760':'background:#5093E1'">
  55. {{scope.row.isConfirm?'已确认':'未确认'}}
  56. </span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="操作" width="100">
  60. <template #default="scope">
  61. <p class="indicitem" @click="confirmFn(scope.row)">确认</p>
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65. <el-pagination
  66. @size-change="handleSizeChange"
  67. @current-change="handleCurrentChange"
  68. :current-page="page.currentPage"
  69. :page-size="page.pagesize"
  70. layout="total, prev, pager, next, jumper"
  71. :total="page.total">
  72. </el-pagination>
  73. </div>
  74. </div>
  75. </div>
  76. </template>
  77. <script>
  78. import ExcelJS from 'exceljs'
  79. import fileSave from 'file-saver'
  80. import seachs from '../seachGroup.vue'
  81. import exportIcon from '../../assets/btnIcon/export.png'
  82. import {apiGetevaluationwarninginfoList, apiGetbinsectionList, apiGetevaluationwarninginfoSave} from '../../api/api'
  83. export default {
  84. components: { seachs },
  85. data() {
  86. return {
  87. sectionStr: '',
  88. warnTime: [],
  89. evaluationWaringData:[],
  90. moduleData: [],
  91. exportIcon: exportIcon,
  92. page:{
  93. pagesize: 15,
  94. currentPage: 1,
  95. total: 0
  96. },
  97. winPix: window.devicePixelRatio,
  98. }
  99. },
  100. created() {
  101. this.getevaluationWaringData()
  102. this.getBinSectionS()
  103. },
  104. methods:{
  105. getevaluationWaringData() {
  106. let that = this
  107. let st = that.warnTime.length>0?that.warnTime[0]:''
  108. let et = that.warnTime.length>0?that.warnTime[1]:''
  109. let params = {
  110. pageNum: that.page.currentPage,
  111. pageSize: that.page.pagesize,
  112. binStation: that.sectionStr,
  113. st: st,
  114. et: et
  115. }
  116. apiGetevaluationwarninginfoList(params).then(datas =>{
  117. if (datas && datas.data) {
  118. that.evaluationWaringData = datas.data.records
  119. that.page.total = datas.data.total
  120. }
  121. })
  122. },
  123. // 查询业务属性
  124. getBinSectionS() {
  125. let that = this
  126. apiGetbinsectionList().then(datas =>{
  127. if (datas && datas.data) {
  128. that.moduleData = datas.data
  129. }
  130. })
  131. },
  132. confirmFn(row) {
  133. let that = this
  134. row.isConfirm = true
  135. apiGetevaluationwarninginfoSave(row).then(datas =>{
  136. if (datas) {
  137. that.getevaluationWaringData()
  138. }
  139. })
  140. },
  141. changeTime(val) {
  142. console.log(val)
  143. },
  144. getSeachData() {
  145. this.page.currentPage = 1
  146. this.getevaluationWaringData()
  147. },
  148. resetSeach() {
  149. this.page.currentPage = 1
  150. this.sectionStr = ''
  151. this.getevaluationWaringData()
  152. },
  153. handleSizeChange(val){
  154. this.page.pagesize = val
  155. this.getevaluationWaringData()
  156. },
  157. handleCurrentChange(val){
  158. this.page.currentPage =val
  159. this.getevaluationWaringData()
  160. },
  161. handleExport() {
  162. let that = this
  163. let st = that.warnTime.length>0?that.warnTime[0]:''
  164. let et = that.warnTime.length>0?that.warnTime[1]:''
  165. let params = {
  166. pageNum: 1,
  167. pageSize: 10000,
  168. binStation: that.sectionStr,
  169. st: st,
  170. et: et
  171. }
  172. apiGetevaluationwarninginfoList(params).then(datas =>{
  173. if (datas && datas.data) {
  174. that.getExportWarData(datas.data.records)
  175. }
  176. })
  177. },
  178. getExportWarData(datas) {
  179. let data = datas //接口返回数据
  180. const workbook = new ExcelJS.Workbook()
  181. const worksheet = workbook.addWorksheet('Sheet1')
  182. //根据数据自己调整
  183. let colums = []
  184. colums = [
  185. { header: 'ID', key: 'id', width: 26 },
  186. { header: '考评单位', key: 'company', width: 26 },
  187. { header: '指标类型', key: 'title', width: 26 },
  188. { header: '预警内容', key: 'content', width: 26 },
  189. { header: '目标值', key: 'targetValue', width: 26 },
  190. { header: '完成值', key: 'completeValue', width: 26 },
  191. { header: '预警时间', key: 'createTime', width: 26 },
  192. { header: '确认人', key: 'userName', width: 26 },
  193. { header: '确认时间', key: 'confirmTime', width: 26 }
  194. ]
  195. worksheet.columns = colums
  196. worksheet.getRow(1).font = {
  197. size: 12,
  198. bold: true
  199. }
  200. worksheet.addRows(data)
  201. workbook.xlsx.writeBuffer().then(buffer => {
  202. //这里为type
  203. const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
  204. fileSave(blob, `考评预警数据导出.xlsx`)
  205. })
  206. },
  207. evalwarningTableSty() {
  208. if (this.winPix === 1.25) {
  209. return 'warning125Table'
  210. } else {
  211. return 'warning100Table'
  212. }
  213. }
  214. }
  215. }
  216. </script>
  217. <style lang="less">
  218. .evaluationWaring{
  219. .evaluationWaringBtn{
  220. .collectSeach{
  221. display: flex;
  222. padding: 24px 20px;
  223. .exceed{
  224. display: flex;
  225. .exceedSpan{
  226. width: 80px;
  227. height: 12px;
  228. font-size: 14px;
  229. font-family: Microsoft YaHei;
  230. font-weight: 400;
  231. color: #8991B0;
  232. line-height: 12px;
  233. margin-top: 14px;
  234. }
  235. }
  236. .el-select{
  237. margin-right:10px;
  238. .el-input__inner{
  239. height:40px;
  240. }
  241. .el-input__suffix{
  242. .el-select__caret{
  243. line-height:30px;
  244. }
  245. }
  246. }
  247. .el-date-editor{
  248. height: 40px;
  249. }
  250. }
  251. .warningExport{
  252. .el-button{
  253. position: relative;
  254. top: 24px;
  255. right: 10px;
  256. }
  257. }
  258. span{
  259. font-size:14px;
  260. }
  261. .PeriodBtn{
  262. display: flex;
  263. justify-content: end;
  264. padding: 20px 0;
  265. }
  266. .el-button{
  267. height: 30px;
  268. // width:100px;
  269. padding: 0 30px ;
  270. // padding-top: 8px;
  271. span{
  272. margin:0;
  273. }
  274. }
  275. .evaluationWaringTableData{
  276. margin-top: 20px;
  277. .warning125Table{
  278. .el-table__body-wrapper{
  279. height: 59vh !important;
  280. }
  281. }
  282. .warning100Table{
  283. .el-table__body-wrapper{
  284. height: 65vh !important;
  285. }
  286. }
  287. .el-table{
  288. .el-input__inner{
  289. height: 30px !important;
  290. }
  291. .el-radio__label{
  292. display: none;
  293. }
  294. .statusSty{
  295. width: 52px;
  296. height: 21px;
  297. line-height: 21px;
  298. display: inline-block;
  299. border-radius: 3px;
  300. color: #fff;
  301. padding: 0 0 0 10px;
  302. }
  303. .indicitem{
  304. color: #409EFF;
  305. font-size: 12px;
  306. margin-right: 20px;
  307. cursor:pointer;
  308. &:hover{
  309. text-decoration: underline;
  310. }
  311. }
  312. }
  313. .el-pagination{
  314. margin-top: 20px;
  315. text-align: end;
  316. position: relative;
  317. }
  318. }
  319. .el-overlay{
  320. .el-dialog{
  321. .el-dialog__body{
  322. padding: 30px 60px 30px 20px !important;
  323. .periodFrom{
  324. .el-select, .el-input{
  325. width: 100%;
  326. }
  327. .el-input{
  328. height: 30px;
  329. }
  330. }
  331. }
  332. }
  333. }
  334. }
  335. }
  336. </style>