You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.8 KiB
104 lines
2.8 KiB
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<div>
|
|
<el-form>
|
|
<el-form-item label="乡镇" prop="outStreet" label-width="80px" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')">
|
|
<el-select v-model="outStreet" placeholder="乡镇" @change="selectModel($event)" clearable>
|
|
<el-option v-for="item in outStreetArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" >
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="text-align: center" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')">
|
|
<h2>{{ title }}人员出入情况</h2>
|
|
</div>
|
|
<div style="text-align: center" v-else>
|
|
<h2>人员出入情况</h2>
|
|
</div>
|
|
<!-- <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>-->
|
|
<chart ref="chart1" :style="{width: '1000px', height: '300px'}" :options="orgOptions" :auto-resize="true"></chart>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "hellowEcharts",
|
|
data() {
|
|
return {
|
|
title: "平阴县",
|
|
outStreet:'',
|
|
outStreetArr:[],
|
|
barName:'',
|
|
peopleNumber : [1,2,3],
|
|
orgOptions:{}
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getDailyTypeArrInfo()
|
|
this.getPeopleNumber("");
|
|
},
|
|
mounted() {
|
|
// this.drawLine();
|
|
this.orgOptions = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ["外地人数", "返乡人数", "现住外地人数"]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: [0, 0, 0],
|
|
type: 'bar',
|
|
name:"人员情况",
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: 'rgba(20, 101, 230, 1)'
|
|
},
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取乡镇下拉信息(传参：4代表查“街道”)
|
|
getDailyTypeArrInfo () {
|
|
this.$http.get(`/sys/epidemicreportuserinfo/selectStreet/4`).then(({ data: res }) => {
|
|
this.outStreetArr = res
|
|
}).catch(() => {})
|
|
},
|
|
// 乡镇取值变化事件
|
|
selectModel (event) {
|
|
if (event == ''){
|
|
this.title = '平阴县'
|
|
this.barName = '平阴县'
|
|
this.getPeopleNumber(event);
|
|
}
|
|
this.outStreetArr.find((item) => {
|
|
if (item.dictValue === event) {
|
|
this.title = item.dictName
|
|
this.barName = item.dictName
|
|
this.outStreet = item.dictValue
|
|
this.getPeopleNumber(item.dictValue)
|
|
}
|
|
})
|
|
},
|
|
getPeopleNumber(item){
|
|
if (item == ""){
|
|
item = 0
|
|
}
|
|
this.$http.get(`/sys/select/getPeopleNumber/`+item).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.orgOptions.series[0].data = res.data
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|