riskDetail.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. <template>
  2. <div class="main">
  3. <Header/>
  4. <div class="main_t">
  5. <div class="main_t_t">
  6. <i class="main_t_t_l">当前位置:首页 &gt;</i>
  7. <i>危险源统计</i>
  8. </div>
  9. <div class="main_t_b" id="plan_chart"></div>
  10. </div>
  11. <div class="main_b">
  12. <!--查询条件-->
  13. <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
  14. <el-form-item label="实验室" prop="dangerId" label-width="98px">
  15. <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
  16. <el-option
  17. v-for="item in labList"
  18. :key="item.id"
  19. :label="item.name"
  20. :value="item.id">
  21. </el-option>
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="危险源" prop="dangerId" label-width="98px">
  25. <el-select v-model="editForm.hazardId" popper-class="select-big-data" placeholder="请选择危险源">
  26. <el-option
  27. v-for="item in riskList"
  28. :key="item.id"
  29. :label="item.anotherName"
  30. :value="item.id">
  31. </el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label-width="0">
  35. <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
  36. <el-button @click="resetForm('searchForm')">重置</el-button>
  37. </el-form-item>
  38. </el-form>
  39. <!--列表-->
  40. <el-table :data="tableData" style="width: 100%;" height="420" :row-class-name="tableRowClassName">
  41. <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
  42. <el-table-column align="center" header-align='center' prop="chName" label="危险源"></el-table-column>
  43. <el-table-column align="center" header-align='center' prop="num" label="数量"></el-table-column>
  44. <el-table-column align="center" header-align='center' prop="percentageNum" label="占比" width="420">
  45. <template #default="{row}">
  46. <el-progress :percentage="Number(row.percentageNum)" :stroke-width="20"></el-progress>
  47. </template>
  48. </el-table-column>
  49. </el-table>
  50. <el-pagination
  51. style="margin-top: 14px"
  52. background
  53. @current-change="handleCurrentChange"
  54. :page-sizes="[10, 20, 30, 40]"
  55. :current-page.sync="editForm.pageNum"
  56. :page-size="editForm.pageSize"
  57. layout="total,prev, pager, next"
  58. :total="totalNum">
  59. </el-pagination>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import {
  65. departmentsList,
  66. getSubjectDict,
  67. onlineByBigView,
  68. queryHazardColumnarTop,
  69. queryHazardList,
  70. queryHazardOption
  71. } from "../api/http"
  72. import $ from 'jquery'
  73. import * as echarts from 'echarts'
  74. import Header from '@/components/header.vue'
  75. export default {
  76. components: {
  77. Header
  78. },
  79. data() {
  80. return {
  81. editForm:{
  82. deptLevel:'',//这个是登陆后,刘波给你的院校的类型
  83. groupDeptId:'',//院系id
  84. subId:'',//实验室
  85. hazardId:'',//危险源
  86. pageNum:1,
  87. pageSize:10
  88. },
  89. subjectOptions:[],//院系
  90. riskList:[],//危险源
  91. totalNum:0,
  92. tableData:[
  93. {
  94. chName:'危化品',
  95. num:'73',
  96. unit:'kg',
  97. percentageNum:'73',
  98. },
  99. {
  100. chName:'气瓶',
  101. num:'62',
  102. unit:'瓶',
  103. percentageNum:'62',
  104. },
  105. {
  106. chName:'冷热设备',
  107. num:'51',
  108. unit:'台',
  109. percentageNum:'51',
  110. },
  111. {
  112. chName:'特种设备',
  113. num:'34',
  114. unit:'台',
  115. percentageNum:'34',
  116. },
  117. ],
  118. labList:[],
  119. }
  120. },
  121. methods: {
  122. back(){
  123. this.$router.push('/')
  124. },
  125. tableRowClassName({row, rowIndex}) {
  126. if (rowIndex%2 === 0) {
  127. return 'success-row';
  128. } else{
  129. return 'warning-row';
  130. }
  131. return '';
  132. },
  133. indexMethod(index) {
  134. return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
  135. },
  136. //请求列表
  137. getAjaxList:function (){
  138. let _this=this;
  139. //列表
  140. let obj={
  141. 'groupDeptId':this.editForm.groupDeptId,
  142. 'subjectId':this.editForm.subId,
  143. 'hazardId':this.editForm.hazardId,
  144. 'pageNum':this.editForm.pageNum,
  145. 'pageSize':this.editForm.pageSize,
  146. }
  147. queryHazardList(obj).then((res) =>{
  148. if(res.code==200){
  149. let data = res.rows;
  150. if(data && data.length>0){
  151. _this.tableData = data;
  152. _this.totalNum = parseInt(res.total);
  153. }else{
  154. _this.tableData = [];
  155. _this.totalNum = 0;
  156. }
  157. }
  158. })
  159. },
  160. getAjaxData: function () {
  161. let _this=this;
  162. //图表
  163. let obj={
  164. 'deptLevel':localStorage.getItem('deptLevel'),
  165. }
  166. queryHazardColumnarTop(obj).then((res) =>{
  167. if(res.code==200){
  168. let dataX=[];
  169. let dataValue=[];
  170. let data=res.data;
  171. for (var i = 0; i < data.length; i++) {
  172. dataX.push(data[i].chName)
  173. dataValue.push(data[i].num)
  174. }
  175. _this.riskDetailFun(dataX,dataValue)
  176. }
  177. })
  178. //查询危险源
  179. queryHazardOption({}).then((res) =>{
  180. if(res.code==200){
  181. let data=res.data;
  182. _this.riskList=data
  183. }
  184. })
  185. //查询院系
  186. departmentsList().then((res) =>{
  187. if(res.code==200){
  188. let data=res.data;
  189. _this.subjectOptions=data
  190. }
  191. })
  192. //查询实验室
  193. getSubjectDict().then((res) =>{
  194. if(res.code==200){
  195. let data=res.data;
  196. _this.labList=data
  197. }
  198. })
  199. },
  200. /*查询*/
  201. onSearch() {
  202. this.editForm.pageNum =1;
  203. this.getAjaxList();
  204. },
  205. /*重置*/
  206. resetForm(formName) {
  207. this.editForm.subId = "";
  208. this.editForm.hazardId = "";
  209. this.editForm.groupDeptId = "";
  210. this.onSearch();
  211. },
  212. handleCurrentChange(val) {
  213. this.editForm.pageNum = val;
  214. this.getAjaxList();
  215. },
  216. /*安全隐患详情图表*/
  217. riskDetailFun:function (dataX,dataValue) {
  218. const data = dataValue
  219. //const sideData = data.map(item => item + 4.5)//侧边主体高度
  220. let planOption = {
  221. color: ['#3398DB'],
  222. tooltip : {
  223. /* trigger: 'axis',
  224. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  225. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  226. }*/
  227. },
  228. grid: {
  229. left: '3%',
  230. right: '4%',
  231. bottom: '3%',
  232. containLabel: true
  233. },
  234. xAxis : [
  235. {
  236. type : 'category',
  237. data : dataX,
  238. axisLabel: {
  239. textStyle: {//改变X轴字体颜色
  240. color: '#fff',
  241. },
  242. },
  243. axisTick:{//去掉X轴刻度
  244. show:false,
  245. },
  246. axisLine:{
  247. show: true,
  248. lineStyle: {
  249. "color": "#486CC2",
  250. width:2,
  251. }
  252. },
  253. }
  254. ],
  255. yAxis : [
  256. {
  257. type : 'value',
  258. splitLine: { // 分隔线
  259. show: false, // 默认显示,属性show控制显示与否
  260. lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
  261. color: ['#fff'],
  262. width: 1,
  263. type: 'solid',
  264. opacity:0.15
  265. },
  266. },
  267. axisLabel: {
  268. textStyle: {//改变X轴字体颜色
  269. color: '#fff',
  270. },
  271. },
  272. axisTick:{//去掉X轴刻度
  273. show:false,
  274. },
  275. axisLine:{
  276. show:true,
  277. lineStyle: {
  278. "color": "#486CC2",
  279. width:2,
  280. }
  281. },
  282. }
  283. ],
  284. series : [
  285. {
  286. name:'危险源统计',
  287. label: {
  288. normal: {
  289. show: true,
  290. position: 'top',
  291. textStyle: {
  292. color: '#fff',
  293. }
  294. }
  295. },
  296. itemStyle: {
  297. normal: {
  298. borderRadius:4,
  299. color: new echarts.graphic.LinearGradient(
  300. 0, 0, 0, 1,
  301. [
  302. {offset: 0, color: '#007EFF'},
  303. {offset: 1, color: '#3FFFEA'}
  304. ]
  305. )
  306. },
  307. },
  308. type:'bar',
  309. barWidth: '60%',
  310. barMaxWidth: '5%',
  311. data:dataValue
  312. }
  313. ]
  314. };
  315. var plan_chart = echarts.init(document.getElementById('plan_chart'));
  316. plan_chart.setOption(planOption);
  317. }
  318. },
  319. mounted() {
  320. this.getAjaxData()
  321. this.getAjaxList()
  322. },
  323. }
  324. </script>
  325. <!-- Add "scoped" attribute to limit CSS to this component only -->
  326. <style lang="scss" scoped>
  327. @function rw($px){
  328. @return $px*100/1920 *1vw;
  329. }
  330. @function rh($px){
  331. @return $px*100/1080 *1vh;
  332. }
  333. * {
  334. padding: 0;
  335. margin: 0;
  336. box-sizing: border-box;
  337. }
  338. .main {
  339. width: rw(1920);
  340. height: rh(1080);
  341. /* background: url("../img/index_bg.png") no-repeat;
  342. background-size: 100% 100%;*/
  343. position: relative;
  344. left: 0;
  345. top: 0;
  346. z-index: 50;
  347. background: #062338;
  348. .header {
  349. width: 100%;
  350. position: absolute;
  351. left: rw(0);
  352. top: rh(0);
  353. z-index: 100;
  354. display: flex;
  355. justify-content: flex-start;
  356. .header_l {
  357. width: rw(182);
  358. height: rh(44);
  359. margin: rh(10) 0 0 rw(40);
  360. }
  361. .header_c {
  362. width: rw(1180);
  363. height: rh(152);
  364. margin-left: rw(136);
  365. background: url("~@/assets/image/index_icon2.png") no-repeat;
  366. background-size: 100% 100%;
  367. font-size: rh(30);
  368. font-family: Microsoft YaHei;
  369. font-weight: bold;
  370. color: #FFFFFF;
  371. line-height: rh(30);
  372. text-align: center;
  373. padding-top: rh(26);
  374. }
  375. .header_r {
  376. margin-left: rw(264);
  377. width: rw(82);
  378. height: rh(32);
  379. margin-top: rh(18);
  380. }
  381. }
  382. .main_t{
  383. background: rgba(9, 55, 81, 0.6);
  384. width: rw(1852);
  385. height: rh(352);
  386. position: absolute;
  387. left: rw(34);
  388. top: rh(86);
  389. z-index: 200;
  390. .main_t_t{
  391. margin: rh(20) 0 0 rw(18);
  392. >i{
  393. font-size: rh(16);
  394. font-family: Microsoft YaHei;
  395. font-weight: bold;
  396. color: #FFFFFF;
  397. line-height: rh(16);
  398. }
  399. >i:nth-of-type(1){
  400. }
  401. >i:nth-of-type(2){
  402. color: #1ED0F8;
  403. }
  404. }
  405. .main_t_b{
  406. width: rw(1852);
  407. height: rh(302);
  408. }
  409. }
  410. .main_b{
  411. background: rgba(9, 55, 81, 0.6);
  412. padding: 0 rw(32);
  413. width: rw(1852);
  414. height: rh(602);
  415. position: absolute;
  416. left: rw(34);
  417. top: rh(468);
  418. z-index: 200;
  419. }
  420. }
  421. </style>
  422. <style lang="scss">
  423. li{list-style:none}
  424. i,em,b{font-style:normal;font-weight:100;}
  425. body{margin: 0}
  426. </style>