elink-star
/
epmet-oper-gov
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/yantai_dev' into dev

dev
tianq 3 years ago
parent
6a84dfd359 95b0e4762d
commit
4d0a3a0535
7 changed files with 315 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/views/modules/census/census-accountActiveList.vue
  2. 53
      src/views/modules/census/census-accountList.vue
  3. 84
      src/views/modules/census/census-houseList.vue
  4. 91
      src/views/modules/census/census-nineList.vue
  5. 69
      src/views/modules/census/census-orgStatusList.vue
  6. 115
      src/views/modules/census/census-residentList.vue
  7. 114
      src/views/modules/communityParty/dyhx/party.vue

16
src/views/modules/census/census-accountActiveList.vue
View File

@ -15,7 +15,7 @@
@change="handleChangeAgency" @change="handleChangeAgency"
/> />
</el-form-item> </el-form-item>
<el-form-item label="上报时间" prop="startTime"> <el-form-item label="活跃时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:picker-options="startPickerOptions" :picker-options="startPickerOptions"
@ -66,9 +66,9 @@
style="width: 100%" style="width: 100%"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="loginCount" label="登录次数" min-width="140" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="loginCount" label="登录次数" width="110" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="accountActivityCount" label="活跃账号数" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="accountActivityCount" label="活跃账号数" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="accountCount" align="center" width="110" label="总账号数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="accountCount" align="center" width="110" label="总账号数" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
@ -105,7 +105,7 @@
style="width: 100%" style="width: 100%"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@ -199,7 +199,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
return this.$store.state.inIframe ? this.clientHeight - 439 + this.iframeHeigh : this.clientHeight - 439; return this.$store.state.inIframe ? this.clientHeight - 448 + this.iframeHeigh : this.clientHeight - 448;
}, },
...mapGetters(['clientHeight', 'iframeHeight']) ...mapGetters(['clientHeight', 'iframeHeight'])
@ -481,8 +481,11 @@ export default {
} }
} }
} }
.div_table{
padding: 30px!important;
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -506,4 +509,5 @@ export default {
flex: 1; flex: 1;
} }
} }
</style> </style>

53
src/views/modules/census/census-accountList.vue
View File

@ -97,7 +97,7 @@
style="width: 100%" style="width: 100%"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column>
@ -130,20 +130,20 @@
</div> </div>
<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> <el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%">
<template v-if="orgType == 'community'"> <template v-if="orgType == 'community'">
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template> </template>
<template v-if="orgType == 'street'"> <template v-if="orgType == 'street'">
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" label="镇街名称" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="agencyName" label="镇街名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template> </template>
<template v-if="orgType == 'district'"> <template v-if="orgType == 'district'">
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="agencyName" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template> </template>
@ -250,7 +250,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 425 + this.iframeHeigh : this.clientHeight - 425; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 431 + this.iframeHeigh : this.clientHeight - 431;
return this.TableHeight; return this.TableHeight;
}, },
@ -539,15 +539,29 @@ export default {
// 获取饼状图 // 获取饼状图
async iniPieChart(chartData) { async iniPieChart(chartData) {
this.$refs.pieChart.clear(); this.$refs.pieChart.clear();
// 获取pieChart配置 // 获取pieChart配置
this.pieOption = { this.pieOption = {
grid: {
x: 50,
y: 50,
x2: 50,
y2: 50
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: chartData.name, data: chartData.name,
axisLine: {
show: true,
lineStyle: {
color: '#F3F7FD'
}
},
axisLabel: { axisLabel: {
color: '#666666',
interval: 0, interval: 0,
interval: 0, //设置横坐标为斜 interval: 0, //设置横坐标为斜
rotate: 30, //文字倾斜角度 rotate: 30, //文字倾斜角度
@ -557,8 +571,7 @@ export default {
} }
return value; return value;
} }
}, }
triggerEvent: true
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -567,18 +580,34 @@ export default {
areaStyle: { areaStyle: {
color: ['#fff', '#F3F7FD'] color: ['#fff', '#F3F7FD']
} }
} },
axisLabel: {
color: '#666666'
},
axisLine: {
show: true,
lineStyle: {
color: '#F3F7FD'
}
},
min:0,
max:1000,
}, },
series: [ series: [
{ {
data: chartData.data, data: chartData.data,
barWidth: 24,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: 'rgb(33, 149, 254)' color: 'rgb(33, 149, 254)',
borderRadius: [4, 4, 0, 0],
} }
} }
] ]
}; };
if (chartData.data.length>0) {
this.pieOption.yAxis.max=null
}
this.$refs.pieChart.setOption(this.pieOption); this.$refs.pieChart.setOption(this.pieOption);
}, },
handelClickMyPei(param) { handelClickMyPei(param) {
@ -657,8 +686,11 @@ export default {
} }
} }
} }
.div_table{
padding: 30px!important;
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -686,4 +718,5 @@ export default {
flex: 1; flex: 1;
} }
} }
</style> </style>

84
src/views/modules/census/census-houseList.vue
View File

@ -16,7 +16,7 @@
@change="handleChangeAgency" @change="handleChangeAgency"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="上报时间" prop="startTime"> <el-form-item label="更新时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:picker-options="startPickerOptions" :picker-options="startPickerOptions"
@ -50,7 +50,7 @@
<div class="div_table_title">房屋用途统计</div> <div class="div_table_title">房屋用途统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> <div class="box">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color1[index] }"></div> <div class="kuai" :style="{ backgroundColor: color1[index] }"></div>
@ -79,7 +79,7 @@
<div class="div_table_title">房屋状态统计</div> <div class="div_table_title">房屋状态统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> <div class="box">
<screen-echarts-frame2 <screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2" @handelClickMyPei="handelClickMyPei2"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -89,7 +89,7 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend2"> <div class="legend2">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)">
<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div> <div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div>
@ -122,14 +122,14 @@
style="width: 100%;" style="width: 100%;"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="streetName" label="镇街" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="streetName" width="110" label="镇街" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="区县" width="110" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="communityName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="communityName" width="110" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="gridName" align="center" label="网格" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="gridName" align="center" width="110" label="网格" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="houseName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="houseName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="purposeName" align="center" label="房屋用途" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="purposeName" align="center" width="110" label="房屋用途" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="rentFlagName" align="center" label="房屋状态" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="rentFlagName" align="center" width="110" label="房屋状态" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> <el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> <el-button size="small" type="text" @click="show(scope.row)">查看</el-button>
@ -233,8 +233,8 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color1: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915','#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color1: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
color2: ['#3C94FE', '#22C1C3', '#F0D915', '#FE6252', '#A17AFA', '#A19FFF', '#6FC364', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color2: ['#3C94FE', '#22C1C3', '#F0D915', '#FE6252', '#A17AFA', '#A19FFF', '#6FC364', '#FEB349', '#F44230', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [], pieData: [],
@ -247,7 +247,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 675 + this.iframeHeigh : this.clientHeight - 675; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 638 + this.iframeHeigh : this.clientHeight - 638;
return this.TableHeight; return this.TableHeight;
}, },
...mapGetters(['clientHeight', 'iframeHeight']) ...mapGetters(['clientHeight', 'iframeHeight'])
@ -469,7 +469,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -478,12 +478,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -500,6 +505,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -510,7 +516,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -573,7 +579,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -582,12 +588,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -604,6 +615,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -614,7 +626,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -777,8 +789,10 @@ export default {
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
margin-bottom: 30px; margin-top: 10px;
margin-bottom: 10px;
margin-right: 25px; margin-right: 25px;
width: 160px;
.kuai { .kuai {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -804,6 +818,7 @@ export default {
} }
} }
} }
//这个是单独的，带图片
.legend2 { .legend2 {
// display: flex; // display: flex;
// flex-flow: row wrap; // flex-flow: row wrap;
@ -813,6 +828,7 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
width: 160px;
.kuai { .kuai {
margin-right: 10px; margin-right: 10px;
border-radius: 4px; border-radius: 4px;
@ -893,8 +909,14 @@ export default {
} }
} }
} }
.div_table {
padding: 30px !important;
.table {
margin-top: 16px !important;
}
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -904,7 +926,7 @@ export default {
.diy-button--output { .diy-button--output {
width: 100px; width: 100px;
height: 38px; height: 38px;
z-index: 99;
background: #feb349; background: #feb349;
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
border-radius: 6px; border-radius: 6px;
@ -914,9 +936,23 @@ export default {
display: flex; display: flex;
.width1 { .width1 {
width: 220px; width: 220px;
margin-right: 50px;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
.flex1 { .flex1 {
flex: 1; flex: 1;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
} }
</style> </style>

91
src/views/modules/census/census-nineList.vue
View File

@ -28,7 +28,7 @@
<div class="div_table_title">九小场所分析</div> <div class="div_table_title">九小场所分析</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div style="height:220px;margin-top:20px"> <div class="box">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -38,8 +38,8 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div style="height:220px;margin-top:20px;display:flex;align-items: center;"> <div class="box">
<div class="legend"> <div class="legend" style="max-width: 1000px;">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content"> <div class="content">
@ -68,11 +68,14 @@
style="width: 100%;" style="width: 100%;"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<!-- <el-table-column prop="placeOrgName" align="center" label="区县" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="placeOrgName" align="center" label="镇街" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="placeOrgName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> -->
<el-table-column prop="placeOrgName" align="center" label="场所名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="placeOrgName" align="center" label="场所名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="placeTypeName" align="center" label="场所类型" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="placeTypeName" align="center" label="场所类型" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="scaleName" align="center" label="规模" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="scaleName" align="center" width="110" label="规模" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="personInCharge" align="center" label="负责人" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="personInCharge" align="center" width="110" label="负责人" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> <el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
@ -178,7 +181,7 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915','#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
chartData: {}, chartData: {},
placeType: '', placeType: '',
pieData: [] pieData: []
@ -186,7 +189,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 630 + this.iframeHeigh : this.clientHeight - 630; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 641 + this.iframeHeigh : this.clientHeight - 641;
return this.TableHeight; return this.TableHeight;
}, },
...mapGetters(['clientHeight', 'iframeHeight']) ...mapGetters(['clientHeight', 'iframeHeight'])
@ -363,7 +366,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -372,12 +375,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -394,6 +402,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -404,7 +413,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -537,8 +546,10 @@ export default {
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
margin-bottom: 30px; margin-top: 10px;
margin-bottom: 10px;
margin-right: 25px; margin-right: 25px;
width: 160px;
.kuai { .kuai {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -564,43 +575,7 @@ export default {
} }
} }
} }
.legend2 {
// display: flex;
// flex-flow: row wrap;
.legend-row {
width: 100%;
display: flex;
margin-bottom: 16px;
.kuai {
margin-right: 10px;
border-radius: 4px;
img {
width: 40px;
height: 40px;
}
}
.content {
display: flex;
align-items: center;
.name {
font-size: 14px;
color: #999;
width: 60px;
}
.num {
font-size: 16px;
font-weight: bold;
display: inline-block;
}
.unit {
font-size: 16px;
display: inline-block;
margin-left: 7px;
}
}
}
}
.btnSearch { .btnSearch {
width: 100px; width: 100px;
height: 36px; height: 36px;
@ -651,8 +626,12 @@ export default {
} }
} }
} }
.div_table {
padding: 30px !important;
.table{margin-top: 16px!important;}
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -672,9 +651,23 @@ export default {
display: flex; display: flex;
.width1 { .width1 {
width: 220px; width: 220px;
margin-right: 50px;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
.flex1 { .flex1 {
flex: 1; flex: 1;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
} }
</style> </style>

69
src/views/modules/census/census-orgStatusList.vue
View File

@ -17,7 +17,7 @@
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="" prop="startDate"> <el-form-item label="更新时间" prop="startDate">
<el-date-picker <el-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:picker-options="startPickerOptions" :picker-options="startPickerOptions"
@ -101,7 +101,7 @@
<el-col :span="24"> <el-col :span="24">
<div class="div_table"> <div class="div_table">
<div class="div_table_title">下级社区数量统计</div> <div class="div_table_title">下级社区数量统计</div>
<div :style="'height:' + TableHeight + 'px;margin-top:20px'" :h="maxTableHeight"> <div :style="'height:' + TableHeight + 'px;margin-top:20px'" :height="maxTableHeight">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -115,7 +115,7 @@
</div> </div>
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :before-close="handleClose"> <el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :before-close="handleClose">
<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> <el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%">
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="name" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="name" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="streeName" label="所属街道" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="streeName" label="所属街道" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column>
@ -217,7 +217,8 @@ export default {
multipleSelection: [], multipleSelection: [],
TableHeight: '', TableHeight: '',
pieData: {}, pieData: {},
agencyId: '' agencyId: '',
level: ''
}; };
}, },
components: { components: {
@ -225,7 +226,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 450 + this.iframeHeigh : this.clientHeight - 450; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 431 + this.iframeHeigh : this.clientHeight - 431;
console.log('this.TableHeight', this.TableHeight); console.log('this.TableHeight', this.TableHeight);
return this.TableHeight; return this.TableHeight;
}, },
@ -442,15 +443,29 @@ export default {
// 获取饼状图 // 获取饼状图
async iniPieChart(chartData) { async iniPieChart(chartData) {
this.$refs.pieChart.clear(); this.$refs.pieChart.clear();
// 获取pieChart配置 // 获取pieChart配置
this.pieOption = { this.pieOption = {
grid: {
x: 50,
y: 50,
x2: 50,
y2: 50
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: chartData.name, data: chartData.name,
axisLine: {
show: true,
lineStyle: {
color: '#F3F7FD'
}
},
axisLabel: { axisLabel: {
color: '#666666',
interval: 0, interval: 0,
interval: 0, //设置横坐标为斜 interval: 0, //设置横坐标为斜
rotate: 30, //文字倾斜角度 rotate: 30, //文字倾斜角度
@ -469,18 +484,34 @@ export default {
areaStyle: { areaStyle: {
color: ['#fff', '#F3F7FD'] color: ['#fff', '#F3F7FD']
} }
} },
axisLabel: {
color: '#666666'
},
axisLine: {
show: true,
lineStyle: {
color: '#F3F7FD'
}
},
min: 0,
max: 1000
}, },
series: [ series: [
{ {
data: chartData.data, data: chartData.data,
barWidth: 24,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: 'rgb(33, 149, 254)' color: 'rgb(33, 149, 254)',
borderRadius: [4, 4, 0, 0]
} }
} }
] ]
}; };
if (chartData.data.length>0) {
this.pieOption.yAxis.max=null
}
this.$refs.pieChart.setOption(this.pieOption); this.$refs.pieChart.setOption(this.pieOption);
}, },
handelClickMyPei(param) { handelClickMyPei(param) {
@ -559,24 +590,24 @@ export default {
} }
} }
} }
.div_table {
padding: 30px !important;
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
.cur { .diy-button--output {
cursor: pointer; width: 100px;
} height: 38px;
.flex {
display: flex; background: #feb349;
.width1 { box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
width: 220px; border-radius: 6px;
} color: #fff;
.flex1 {
flex: 1;
}
} }
</style> </style>

115
src/views/modules/census/census-residentList.vue
View File

@ -28,17 +28,17 @@
<div class="div_table_title">居民年龄统计</div> <div class="div_table_title">居民年龄统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div class="box">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@myChartMethod="pieInitOk" @myChartMethod="pieInitOk"
ref="pieChart" ref="pieChart"
></screen-echarts-frame> ></screen-echarts-frame>
</div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
@ -57,17 +57,17 @@
<div class="div_table_title">居民学历统计</div> <div class="div_table_title">居民学历统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div class="box">
<screen-echarts-frame2 <screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2" @handelClickMyPei="handelClickMyPei2"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@myChartMethod="pieInitOk2" @myChartMethod="pieInitOk2"
ref="pieChart2" ref="pieChart2"
></screen-echarts-frame2> ></screen-echarts-frame2>
</div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
@ -97,13 +97,13 @@
style="width: 100%;" style="width: 100%;"
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column prop="name" label="姓名" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="name" width="110" label="姓名" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="mobile" label="手机号" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="mobile" label="手机号" width="210" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="idCard" align="center" label="证件号" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="idCard" align="center" label="证件号" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="genderName" align="center" label="性别" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="genderName" width="110" align="center" label="性别" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="age" align="center" label="年龄" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="age" align="center" width="110" label="年龄" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="educationName" align="center" label="学历" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="educationName" width="110" align="center" label="学历" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> <el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> <el-button size="small" type="text" @click="show(scope.row)">查看</el-button>
@ -201,7 +201,7 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915','#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [], pieData: [],
@ -216,7 +216,7 @@ export default {
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 635 + this.iframeHeigh : this.clientHeight - 635; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 668 + this.iframeHeigh : this.clientHeight - 668;
return this.TableHeight; return this.TableHeight;
}, },
...mapGetters(['clientHeight', 'iframeHeight']) ...mapGetters(['clientHeight', 'iframeHeight'])
@ -437,7 +437,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -446,12 +446,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -468,6 +473,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -478,7 +484,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -541,7 +547,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -550,12 +556,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -572,6 +583,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -582,7 +594,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -746,8 +758,10 @@ export default {
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
margin-bottom: 30px; margin-top: 10px;
margin-bottom: 10px;
margin-right: 25px; margin-right: 25px;
width: 160px;
.kuai { .kuai {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -773,44 +787,7 @@ export default {
} }
} }
} }
.legend2 {
// display: flex;
// flex-flow: row wrap;
.legend-row {
cursor: pointer;
width: 100%;
display: flex;
margin-bottom: 16px;
.kuai {
margin-right: 10px;
border-radius: 4px;
img {
width: 40px;
height: 40px;
}
}
.content {
display: flex;
align-items: center;
.name {
font-size: 14px;
color: #999;
width: 60px;
}
.num {
font-size: 16px;
font-weight: bold;
display: inline-block;
}
.unit {
font-size: 16px;
display: inline-block;
margin-left: 7px;
}
}
}
}
.btnSearch { .btnSearch {
width: 100px; width: 100px;
height: 36px; height: 36px;
@ -833,7 +810,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: 0px; margin-top: 30px;
.census_searchcensus_box { .census_searchcensus_box {
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
@ -861,8 +838,12 @@ export default {
} }
} }
} }
.div_table {
padding: 30px !important;
.table{margin-top: 16px!important;}
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -882,9 +863,23 @@ export default {
display: flex; display: flex;
.width1 { .width1 {
width: 220px; width: 220px;
margin-right: 50px;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
.flex1 { .flex1 {
flex: 1; flex: 1;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
} }
</style> </style>

114
src/views/modules/communityParty/dyhx/party.vue
View File

@ -7,7 +7,6 @@
<el-cascader <el-cascader
class="customer_cascader" class="customer_cascader"
ref="myCascader" ref="myCascader"
clearable
v-model="formData.orgId" v-model="formData.orgId"
:options="orgOptions" :options="orgOptions"
:props="orgOptionProps" :props="orgOptionProps"
@ -16,7 +15,7 @@
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> <el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
<el-button class="diy-button--reset" size="small" @click="resetForm">重置</el-button> <el-button class="diy-button--output" size="small" @click="resetForm">重置</el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
@ -26,7 +25,7 @@
<div class="div_table_title">党员年龄统计</div> <div class="div_table_title">党员年龄统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div :style="'height:220px;margin-top:20px'"> <div class="box">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -36,7 +35,7 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
@ -49,7 +48,6 @@
</div> </div>
</div> </div>
</div> </div>
>
</div> </div>
<div class="census_searchcensus2"> <div class="census_searchcensus2">
<div class="census_searchcensus_box"></div> <div class="census_searchcensus_box"></div>
@ -60,7 +58,7 @@
class="table" class="table"
:data="tableDataAge" :data="tableDataAge"
border border
:height="tableHeight" :height="maxTableHeight"
v-loading="tableLoadingAge" v-loading="tableLoadingAge"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%" style="width: 100%"
@ -93,7 +91,7 @@
<div class="div_table_title">党员学历统计</div> <div class="div_table_title">党员学历统计</div>
<div class="flex"> <div class="flex">
<div class="width1"> <div class="width1">
<div :style="'height:220px;margin-top:20px'"> <div class="box">
<screen-echarts-frame2 <screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2" @handelClickMyPei="handelClickMyPei2"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -103,7 +101,7 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
@ -126,7 +124,7 @@
class="table" class="table"
:data="tableData" :data="tableData"
border border
:height="tableHeight" :height="maxTableHeight"
v-loading="tableLoading" v-loading="tableLoading"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%" style="width: 100%"
@ -220,7 +218,7 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915','#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [], pieData: [],
@ -274,8 +272,8 @@ export default {
}; };
}, },
computed: { computed: {
tableHeight() { maxTableHeight() {
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 635 + this.iframeHeigh : this.clientHeight - 635; this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 668 + this.iframeHeigh : this.clientHeight - 668;
return this.TableHeight; return this.TableHeight;
}, },
@ -400,7 +398,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['70%', '90%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -409,12 +407,16 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -441,7 +443,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['90%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -504,7 +506,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['65%', '88%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -513,12 +515,17 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
itemStyle: {
// 间隔
borderWidth: 2,
borderColor: '#fff'
},
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '65%'], radius: ['0%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -535,6 +542,7 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
animation: false, animation: false,
cursor: 'auto', cursor: 'auto',
emphasis: { emphasis: {
@ -545,7 +553,7 @@ export default {
}, },
{ {
type: 'pie', type: 'pie',
radius: ['80%', '85%'], radius: ['88%', '100%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -661,6 +669,7 @@ export default {
console.log(prev, cur, index); console.log(prev, cur, index);
return prev + cur; return prev + cur;
}); });
console.log('this.pieDatatotal',this.pieDatatotal);
this.chartData.name = data.map(item => item.value); this.chartData.name = data.map(item => item.value);
this.chartData.data = data.map(item => { this.chartData.data = data.map(item => {
return { return {
@ -671,6 +680,7 @@ export default {
}; };
}); });
console.log('chartData', this.chartData); console.log('chartData', this.chartData);
this.$forceUpdate();
this.initAgeCharts(this.chartData); this.initAgeCharts(this.chartData);
}, },
setPieData2() { setPieData2() {
@ -695,6 +705,7 @@ export default {
}); });
console.log('chartData', this.chartData2); console.log('chartData', this.chartData2);
this.$forceUpdate();
this.initEduCharts(this.chartData2); this.initEduCharts(this.chartData2);
}, },
@ -888,8 +899,10 @@ export default {
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
margin-bottom: 30px; margin-top: 10px;
margin-bottom: 10px;
margin-right: 25px; margin-right: 25px;
width: 160px;
.kuai { .kuai {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -915,44 +928,7 @@ export default {
} }
} }
} }
.legend2 {
// display: flex;
// flex-flow: row wrap;
.legend-row {
cursor: pointer;
width: 100%;
display: flex;
margin-bottom: 16px;
.kuai {
margin-right: 10px;
border-radius: 4px;
img {
width: 40px;
height: 40px;
}
}
.content {
display: flex;
align-items: center;
.name {
font-size: 14px;
color: #999;
width: 60px;
}
.num {
font-size: 16px;
font-weight: bold;
display: inline-block;
}
.unit {
font-size: 16px;
display: inline-block;
margin-left: 7px;
}
}
}
}
.btnSearch { .btnSearch {
width: 100px; width: 100px;
height: 36px; height: 36px;
@ -975,7 +951,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: 0px; margin-top: 30px;
.census_searchcensus_box { .census_searchcensus_box {
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
@ -1003,8 +979,14 @@ export default {
} }
} }
} }
.div_table {
padding: 30px !important;
.table {
margin-top: 16px !important;
}
}
.div_table_title { .div_table_title {
margin-top: 20px; margin-top: -10px;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
@ -1024,9 +1006,23 @@ export default {
display: flex; display: flex;
.width1 { .width1 {
width: 220px; width: 220px;
margin-right: 50px;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
.flex1 { .flex1 {
flex: 1; flex: 1;
.box {
height: 220px;
margin-top: 20px;
display: flex;
align-items: center;
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save