123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <template>
- <div class="main">
- <Header/>
- <div class="main_t">
- <div class="main_t_t">
- <i class="main_t_t_l">当前位置:首页 ></i>
- <i>危险源统计</i>
- </div>
- <div class="main_t_b" id="plan_chart"></div>
- </div>
- <div class="main_b">
- <!--查询条件-->
- <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
- <el-form-item label="实验室" prop="dangerId" label-width="98px">
- <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
- <el-option
- v-for="item in labList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="危险源" prop="dangerId" label-width="98px">
- <el-select v-model="editForm.hazardId" popper-class="select-big-data" placeholder="请选择危险源">
- <el-option
- v-for="item in riskList"
- :key="item.id"
- :label="item.anotherName"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label-width="0">
- <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
- <el-button @click="resetForm('searchForm')">重置</el-button>
- </el-form-item>
- </el-form>
- <!--列表-->
- <el-table :data="tableData" style="width: 100%;" height="420" :row-class-name="tableRowClassName">
- <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
- <el-table-column align="center" header-align='center' prop="chName" label="危险源"></el-table-column>
- <el-table-column align="center" header-align='center' prop="num" label="数量"></el-table-column>
- <el-table-column align="center" header-align='center' prop="percentageNum" label="占比" width="420">
- <template #default="{row}">
- <el-progress :percentage="Number(row.percentageNum)" :stroke-width="20"></el-progress>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- style="margin-top: 14px"
- background
- @current-change="handleCurrentChange"
- :page-sizes="[10, 20, 30, 40]"
- :current-page.sync="editForm.pageNum"
- :page-size="editForm.pageSize"
- layout="total,prev, pager, next"
- :total="totalNum">
- </el-pagination>
- </div>
- </div>
- </template>
- <script>
- import {
- departmentsList,
- getSubjectDict,
- onlineByBigView,
- queryHazardColumnarTop,
- queryHazardList,
- queryHazardOption
- } from "../api/http"
- import $ from 'jquery'
- import * as echarts from 'echarts'
- import Header from '@/components/header.vue'
- export default {
- components: {
- Header
- },
- data() {
- return {
- editForm:{
- deptLevel:'',//这个是登陆后,刘波给你的院校的类型
- groupDeptId:'',//院系id
- subId:'',//实验室
- hazardId:'',//危险源
- pageNum:1,
- pageSize:10
- },
- subjectOptions:[],//院系
- riskList:[],//危险源
- totalNum:0,
- tableData:[
- {
- chName:'危化品',
- num:'73',
- unit:'kg',
- percentageNum:'73',
- },
- {
- chName:'气瓶',
- num:'62',
- unit:'瓶',
- percentageNum:'62',
- },
- {
- chName:'冷热设备',
- num:'51',
- unit:'台',
- percentageNum:'51',
- },
- {
- chName:'特种设备',
- num:'34',
- unit:'台',
- percentageNum:'34',
- },
- ],
- labList:[],
- }
- },
- methods: {
- back(){
- this.$router.push('/')
- },
- tableRowClassName({row, rowIndex}) {
- if (rowIndex%2 === 0) {
- return 'success-row';
- } else{
- return 'warning-row';
- }
- return '';
- },
- indexMethod(index) {
- return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
- },
- //请求列表
- getAjaxList:function (){
- let _this=this;
- //列表
- let obj={
- 'groupDeptId':this.editForm.groupDeptId,
- 'subjectId':this.editForm.subId,
- 'hazardId':this.editForm.hazardId,
- 'pageNum':this.editForm.pageNum,
- 'pageSize':this.editForm.pageSize,
- }
- queryHazardList(obj).then((res) =>{
- if(res.code==200){
- let data = res.rows;
- if(data && data.length>0){
- _this.tableData = data;
- _this.totalNum = parseInt(res.total);
- }else{
- _this.tableData = [];
- _this.totalNum = 0;
- }
- }
- })
- },
- getAjaxData: function () {
- let _this=this;
- //图表
- let obj={
- 'deptLevel':localStorage.getItem('deptLevel'),
- }
- queryHazardColumnarTop(obj).then((res) =>{
- if(res.code==200){
- let dataX=[];
- let dataValue=[];
- let data=res.data;
- for (var i = 0; i < data.length; i++) {
- dataX.push(data[i].chName)
- dataValue.push(data[i].num)
- }
- _this.riskDetailFun(dataX,dataValue)
- }
- })
- //查询危险源
- queryHazardOption({}).then((res) =>{
- if(res.code==200){
- let data=res.data;
- _this.riskList=data
- }
- })
- //查询院系
- departmentsList().then((res) =>{
- if(res.code==200){
- let data=res.data;
- _this.subjectOptions=data
- }
- })
- //查询实验室
- getSubjectDict().then((res) =>{
- if(res.code==200){
- let data=res.data;
- _this.labList=data
- }
- })
- },
- /*查询*/
- onSearch() {
- this.editForm.pageNum =1;
- this.getAjaxList();
- },
- /*重置*/
- resetForm(formName) {
- this.editForm.subId = "";
- this.editForm.hazardId = "";
- this.editForm.groupDeptId = "";
- this.onSearch();
- },
- handleCurrentChange(val) {
- this.editForm.pageNum = val;
- this.getAjaxList();
- },
- /*安全隐患详情图表*/
- riskDetailFun:function (dataX,dataValue) {
- const data = dataValue
- //const sideData = data.map(item => item + 4.5)//侧边主体高度
- let planOption = {
- color: ['#3398DB'],
- tooltip : {
- /* trigger: 'axis',
- axisPointer : { // 坐标轴指示器,坐标轴触发有效
- type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- }*/
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis : [
- {
- type : 'category',
- data : dataX,
- axisLabel: {
- textStyle: {//改变X轴字体颜色
- color: '#fff',
- },
- },
- axisTick:{//去掉X轴刻度
- show:false,
- },
- axisLine:{
- show: true,
- lineStyle: {
- "color": "#486CC2",
- width:2,
- }
- },
- }
- ],
- yAxis : [
- {
- type : 'value',
- splitLine: { // 分隔线
- show: false, // 默认显示,属性show控制显示与否
- lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
- color: ['#fff'],
- width: 1,
- type: 'solid',
- opacity:0.15
- },
- },
- axisLabel: {
- textStyle: {//改变X轴字体颜色
- color: '#fff',
- },
- },
- axisTick:{//去掉X轴刻度
- show:false,
- },
- axisLine:{
- show:true,
- lineStyle: {
- "color": "#486CC2",
- width:2,
- }
- },
- }
- ],
- series : [
- {
- name:'危险源统计',
- label: {
- normal: {
- show: true,
- position: 'top',
- textStyle: {
- color: '#fff',
- }
- }
- },
- itemStyle: {
- normal: {
- borderRadius:4,
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: '#007EFF'},
- {offset: 1, color: '#3FFFEA'}
- ]
- )
- },
- },
- type:'bar',
- barWidth: '60%',
- barMaxWidth: '5%',
- data:dataValue
- }
- ]
- };
- var plan_chart = echarts.init(document.getElementById('plan_chart'));
- plan_chart.setOption(planOption);
- }
- },
- mounted() {
- this.getAjaxData()
- this.getAjaxList()
- },
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style lang="scss" scoped>
- @function rw($px){
- @return $px*100/1920 *1vw;
- }
- @function rh($px){
- @return $px*100/1080 *1vh;
- }
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- }
- .main {
- width: rw(1920);
- height: rh(1080);
- /* background: url("../img/index_bg.png") no-repeat;
- background-size: 100% 100%;*/
- position: relative;
- left: 0;
- top: 0;
- z-index: 50;
- background: #062338;
- .header {
- width: 100%;
- position: absolute;
- left: rw(0);
- top: rh(0);
- z-index: 100;
- display: flex;
- justify-content: flex-start;
- .header_l {
- width: rw(182);
- height: rh(44);
- margin: rh(10) 0 0 rw(40);
- }
- .header_c {
- width: rw(1180);
- height: rh(152);
- margin-left: rw(136);
- background: url("~@/assets/image/index_icon2.png") no-repeat;
- background-size: 100% 100%;
- font-size: rh(30);
- font-family: Microsoft YaHei;
- font-weight: bold;
- color: #FFFFFF;
- line-height: rh(30);
- text-align: center;
- padding-top: rh(26);
- }
- .header_r {
- margin-left: rw(264);
- width: rw(82);
- height: rh(32);
- margin-top: rh(18);
- }
- }
- .main_t{
- background: rgba(9, 55, 81, 0.6);
- width: rw(1852);
- height: rh(352);
- position: absolute;
- left: rw(34);
- top: rh(86);
- z-index: 200;
- .main_t_t{
- margin: rh(20) 0 0 rw(18);
- >i{
- font-size: rh(16);
- font-family: Microsoft YaHei;
- font-weight: bold;
- color: #FFFFFF;
- line-height: rh(16);
- }
- >i:nth-of-type(1){
- }
- >i:nth-of-type(2){
- color: #1ED0F8;
- }
- }
- .main_t_b{
- width: rw(1852);
- height: rh(302);
- }
- }
- .main_b{
- background: rgba(9, 55, 81, 0.6);
- padding: 0 rw(32);
- width: rw(1852);
- height: rh(602);
- position: absolute;
- left: rw(34);
- top: rh(468);
- z-index: 200;
- }
- }
- </style>
- <style lang="scss">
- li{list-style:none}
- i,em,b{font-style:normal;font-weight:100;}
- body{margin: 0}
- </style>
|