Skip to content

S
sgaqgl-vue
Commit 02cc7407 authored by 黄自鹏's avatar 黄自鹏
Browse files
Options

调整

parent 856a03ac
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 75 deletions
src/views/dangerManagement/yhznytj/index.vue
View file @ 02cc7407
...@@ -32,7 +32,12 @@ ...@@ -32,7 +32,12 @@
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="6" class="search-col">
<div class="search-item">
<el-radio v-model="queryParams.hzfs" label="FL">按分类</el-radio>
<el-radio v-model="queryParams.hzfs" label="DJ">按等级</el-radio>
</div>
</el-col>
</el-row> </el-row>
</div> </div>
<!-- 按钮操作--> <!-- 按钮操作-->
...@@ -43,6 +48,11 @@ ...@@ -43,6 +48,11 @@
</TablePager> </TablePager>
</div> </div>
<div class="chartsbody">
<div id="yhtjChart" v-echartResize="resize" >
</div>
</div>
</div> </div>
</template> </template>
...@@ -58,113 +68,251 @@ ...@@ -58,113 +68,251 @@
tableMixin tableMixin
} from 'common' } from 'common'
export default { export default {
mixins: [tableMixin], mixins: [tableMixin],
name: 'appVersion', name: 'appVersion',
async mounted() {
var yhtjChart = document.getElementById('yhtjChart');
var inityhtjChart = echarts.init(yhtjChart);
this.myChart=inityhtjChart
this.$refs['TablePager'].pageQuery()
},
computed: {
radio() {
let val = this.queryParams.hzfs
return val
}
},
/* 初始额外赋值*/ /* 初始额外赋值*/
async mounted() { async mounted() {
this.getYearsToNow() this.getYearsToNow()
this.$refs['TablePager'].pageQuery() this.$refs['TablePager'].pageQuery()
}, },
data() { data() {
return { return {
yearsToNow:[], myChart:{},
/*需要的额外参数 */ yearsToNow: [],
/* 基础url*/ /*需要的额外参数 */
baseUrl: 'aqgl/yhgl/yhjl/yhtj', /* 基础url*/
/* 查询参数*/ baseUrl: 'aqgl/yhgl/yhjl/yhtj',
queryParams: { /* 查询参数*/
year:'', queryParams: {
month:'' hzfs: 'FL',
}, year: '',
month: ''
},
getYearsToNow() { getYearsToNow() {
// this.yearsToNow=[2020,2021,2022] // this.yearsToNow=[2020,2021,2022]
//获取到从那一年开始 //获取到从那一年开始
let smallYears = 2000 let smallYears = 2000
//获取当前时间 //获取当前时间
let date = new Date let date = new Date
let nowYears = date.getFullYear() let nowYears = date.getFullYear()
let Years = nowYears - smallYears let Years = nowYears - smallYears
let arrYear = [] let arrYear = []
for (let i = 0; i <= Years; i++) { for (let i = 0; i <= Years; i++) {
arrYear.push(nowYears--) arrYear.push(nowYears--)
} }
this.yearsToNow.push('') this.yearsToNow.push('')
arrYear.forEach(item => { arrYear.forEach(item => {
//下拉框的数组 //下拉框的数组
this.yearsToNow.push(item) this.yearsToNow.push(item)
}) })
}, },
/* 表格标题对应参数*/ /* 表格标题对应参数*/
tableTitle: [ tableTitle: [
{ {
prop: 'year', prop: 'year',
label: '年份', label: '年份',
width:292 width: 200
}, },
{ {
prop: 'month', prop: 'month',
label: '月份', label: '月份',
width:292 width: 200
}, },
{
prop: 'allCount',
label: '隐患数量',
width: 300
},
{ {
prop: 'wclCount', prop: 'yhflName',
label: '未处理完毕数量', label: '分类名称',
width: 300 width: 200
},
{
prop: 'yhdjName',
label: '隐患等级',
width: 200
},
{
prop: 'allCount',
label: '隐患数量',
width: 150
},
{
prop: 'wclCount',
label: '未处理完毕数量',
width: 150
}, },
{ {
prop: 'yclCount', prop: 'yclCount',
label: '已处理完毕数量', label: '已处理完毕数量',
width: 300 width: 150
}, },
{ {
prop: 'cqwclCount', prop: 'cqwclCount',
label: '超期未处理数量', label: '超期未处理数量',
width: 300 width: 150
}, },
{ {
prop: 'cqyclCount', prop: 'cqyclCount',
label: '超期已处理数量', label: '超期已处理数量',
width: 300 width: 150
}, },
{ {
prop: 'cqCount', prop: 'cqCount',
label: '超期总数量', label: '超期总数量',
width: 300 width: 150
}, },
// { // {
// prop: 'yqzgsj', // prop: 'yqzgsj',
// label: '统计日期', // label: '统计日期',
// width:300 // width:300
// } // }
] ]
} }
}, },
methods: { watch: {
radio(val) {
val == 'FL' && this.$refs['TablePager']['newGridList'].forEach(item => {
item.prop == 'yhdjName' && (item.show = false);
item.prop == 'yhflName' && (item.show = true)
})
val == 'DJ' && this.$refs['TablePager']['newGridList'].forEach(item => {
item.prop == 'yhdjName' && (item.show = true);
item.prop == 'yhflName' && (item.show = false)
})
},
},
methods: {
resize(){
this.myChart.resize()
},
getData: function(e) {
this.tabData = e
this.myChart.setOption(this.setOption());
},
setOption(){
let fxdList=[]
let wclCountList=[]
let yclCountList=[]
this.tabData.forEach(item=>{
fxdList.push(item.yhflName)
wclCountList.push(item.wclCount+item.yclCount)
yclCountList.push(item.yclCount)
})
/* 基础查询*/ var option = {
query: queryYhhz, dataZoom: [
/* 初始化赋值操作*/ {
init() { show: true,
start: 0,
end: 10
},
{
type: 'inside',
start: 0,
end: 10
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 20,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
grid: {
top:'10%',
left: '6%',
right: '3%',
bottom: '25%',
// containLabel: true
},
xAxis: {
type: 'category',
data: fxdList,
axisLabel: {
interval:0,//代表显示所有x轴标签显示
rotate:15, //代表逆时针旋转45度
}
},
yAxis: {
type: 'value'
},
legend: {
data: ['隐患数量', '处理完毕数量']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
series: [
{
name: '隐患数量',
data: wclCountList,
type: 'bar',
barMaxWidth: '20px',
itemStyle: {
color: '#f00000',
shadowColor: '#f00000',
borderType: 'dashed',
}, }
},
{
name: '处理完毕数量',
data: yclCountList,
type: 'bar',
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
},
barMaxWidth: '20px',
}
]
};
return option
},
/* 基础查询*/
query: queryYhhz,
/* 初始化赋值操作*/
init() {
}, },
components: {
Edit,
}
} },
components: {
Edit,
}
}
</script> </script>
<style scoped> <style scoped>
#yhtjChart{
height: 100%;
width: 100%;
border: 1px solid #eee;
}
.chartsbody{
height: 330px;
padding: 5px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment