Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- <el-row class="echertsBox" style="margin-bottom: 16px">
|
||||
<el-row class="echertsBox" style="margin-bottom: 16px">
|
||||
<div class="title">
|
||||
<h4>事件汇总</h4>
|
||||
<div class="timecSelect">
|
||||
@@ -26,26 +26,32 @@
|
||||
</div>
|
||||
<div class="bar_Box">
|
||||
<div id="chartDom" style="height: 230px; width: 100%;"></div>
|
||||
<ai-empty v-if="false" style="height: 230px;"></ai-empty>
|
||||
<ai-empty v-if="false" style="height: 200px; width: 100%;"></ai-empty>
|
||||
</div>
|
||||
</el-row> -->
|
||||
</el-row>
|
||||
<ai-card>
|
||||
<ai-title slot="title" title="余额变动明细"/>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select v-model="search.type" placeholder="请选择类型" @change="page.current=1,getIntegralChange()"
|
||||
:selectList="dict.getDict('integralDetailType')"/>
|
||||
<ai-select v-model="search.type" placeholder="请选择类型" @change="search.current=1,getIntegralChange()"
|
||||
:selectList="dict.getDict('integralType')"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<ai-download :instance="instance" url="" :params="search" fileName="网格员积分"
|
||||
<ai-download :instance="instance" :url="`/app/appintegraluser/changeIntegralExport?id=${$route.query.id}`" :params="search" fileName="网格员余额变动明细"
|
||||
:disabled="tableData.length == 0">
|
||||
<el-button size="small">导出</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
|
||||
<ai-table :tableData="tableData" :total="search.total" :current.sync="search.current" :size.sync="search.size"
|
||||
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
|
||||
|
||||
<el-table-column slot="eventDesc" label="事件" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span>{{ row.integralType == 3 ? row.integralRuleNamesearch : row.integralType == 0? row.eventDesc : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
@@ -64,8 +70,6 @@ export default {
|
||||
name: '',
|
||||
girdId: '',
|
||||
type: '',
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
@@ -75,7 +79,6 @@ export default {
|
||||
data: {},
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -83,28 +86,22 @@ export default {
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
watch: {
|
||||
timeList(newVal, oldVal) {
|
||||
if(!newVal) {
|
||||
// this.getList()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "doTime", label: '时间', align: "left", width: "200px" },
|
||||
{ prop: "integralType", label: '类型', align: "center", width: "180px", dict:"integralDetailType"},
|
||||
{ prop: "integralType", label: '类型', align: "center", width: "240px", dict:"integralType"},
|
||||
{ prop: "changeIntegral", label: '变动积分', align: "center",width: "200px",render: (h, { row }) => {
|
||||
return h('span', {}, `${row.integralCalcType == 1 ? '+' : '-'}${row.changeIntegral}`)
|
||||
}},
|
||||
{ prop: "nowIntegral", label: '剩余积分', align: "center",width: "200px" },
|
||||
{ prop: "eventDesc", label: '事件', align: "center", },
|
||||
{ slot: "eventDesc", label: '事件', align: "center", },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('integralDetailType')
|
||||
this.$dict.load('integralType')
|
||||
this.getDetail()
|
||||
this.getIntegralChange()
|
||||
},
|
||||
@@ -124,12 +121,12 @@ export default {
|
||||
|
||||
// 事件汇总 暂定
|
||||
|
||||
|
||||
// 余额变动明细
|
||||
getIntegralChange() {
|
||||
this.instance.post(`/app/appintegraluser/getChangeDetail`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
type: this.search.type, //积分类型
|
||||
...this.search, //积分类型
|
||||
id: this.$route.query.id,
|
||||
}
|
||||
}).then(res => {
|
||||
@@ -205,10 +202,6 @@ export default {
|
||||
this.myChart.resize()
|
||||
},
|
||||
|
||||
getTableData() {},
|
||||
|
||||
getListInit() {},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'gridScoreManage',
|
||||
@@ -219,7 +212,7 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.getColEcherts()
|
||||
this.getColEcherts()
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
@@ -234,6 +227,7 @@ export default {
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
.card_list {
|
||||
display: flex;
|
||||
.card {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.userName" clearable
|
||||
@clear="page.current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(page.current = 1), getTableData();}"/>
|
||||
<ai-download :instance="instance" url="" :params="search" fileName="网格员积分"
|
||||
<ai-download :instance="instance" url="`/app/appintegraluser/girdIntegralExport" :params="search" fileName="网格员积分"
|
||||
:disabled="tableData.length == 0">
|
||||
<el-button size="small">导出</el-button>
|
||||
</ai-download>
|
||||
@@ -96,6 +96,8 @@ export default {
|
||||
search: {
|
||||
userName: '',
|
||||
girdId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
tableData: [],
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
@@ -116,7 +118,6 @@ export default {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -39,12 +39,12 @@
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 0)" v-if="row.status == 1">
|
||||
<el-button type="text" @click="changeStatus(row.id, 0)" v-if="row.status == 1">
|
||||
停用
|
||||
</el-button>
|
||||
<el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 1)" v-else>启用</el-button>
|
||||
<el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="toEdit(row)">编辑</el-button>
|
||||
<el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_del')" @click="remove(row.id)">删除</el-button>
|
||||
<el-button type="text" @click="changeStatus(row.id, 1)" v-else>启用</el-button>
|
||||
<el-button type="text" @click="toEdit(row)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -120,9 +120,8 @@ export default {
|
||||
{prop: "type", label: "类型", dict: "integralRuleEventType"},
|
||||
{prop: "ruleType", label: "规则", dict: "integralRuleRuleType"},
|
||||
{prop: "scoringCycle", label: "周期范围", dict: "integralRuleScoringCycle"},
|
||||
// {prop: "", label: "积分分值", dict: "integralRuleScoringCycle"},
|
||||
{slot: "integral",label: "积分分值", align: "center"},
|
||||
{prop: "", label: "有效范围", dict: "integralRuleScoringCycle"},
|
||||
{prop: "validRangeType", label: "有效范围", dict: "integralRuleScoringCycle"},
|
||||
{prop: "status", label: "状态", align: "center", width: 96, dict: "integralRuleStatus"},
|
||||
{slot: "options", label: "操作", align: "center"},
|
||||
],
|
||||
@@ -145,7 +144,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appvillagerintegralrule/list`, null, {
|
||||
this.instance.post(`/app/appintegralrule/list`, null, {
|
||||
params: {...this.search, ...this.page},
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
@@ -176,11 +175,9 @@ export default {
|
||||
this.$confirm("删除后不可恢复,是否要删除该事项?", {
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.instance
|
||||
.post(`/app/appvillagerintegralrule/delete?ids=${id}`)
|
||||
.then((res) => {
|
||||
this.instance.post(`/app/appintegralrule/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.$message.success("删除成功!")
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
@@ -189,7 +186,7 @@ export default {
|
||||
changeStatus(id, status) {
|
||||
let text = status == 1 ? '启用' : '停用'
|
||||
this.$confirm(`确定${text}该条规则?`).then(() => {
|
||||
this.instance.post(`/app/appvillagerintegralrule/enableOrDisable?id=${id}`).then((res) => {
|
||||
this.instance.post(`/app/appintegralrule/enableStatus?id=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`${text}成功!`)
|
||||
this.getList();
|
||||
@@ -213,7 +210,7 @@ export default {
|
||||
let formData = this.$copy(this.form)
|
||||
formData.ladderRule = JSON.stringify(formData.ladderRule)
|
||||
formData.integral = formData.integral || 0
|
||||
this.instance.post(`/app/appvillagerintegralrule/addOrUpdate`, formData).then((res) => {
|
||||
this.instance.post(`/app/appintegralrule/addOrUpdate`, formData).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`${this.isEdit ? '编辑成功' : '添加成功'}`)
|
||||
this.onReset()
|
||||
|
||||
@@ -35,12 +35,18 @@
|
||||
</div>
|
||||
<div class="echertsBox">
|
||||
<div class="left_Box">
|
||||
<div id="chart1" style="height: 300px; width: 100%;"></div>
|
||||
<ai-empty v-if="false" style="height: 300px;"></ai-empty>
|
||||
<p>个人积分排行</p>
|
||||
<div>
|
||||
<div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
|
||||
<ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_Box">
|
||||
<div id="chart2" style="height: 300px; width: 100%;"></div>
|
||||
<ai-empty v-if="false" style="height: 300px;"></ai-empty>
|
||||
<p>网格积分排行</p>
|
||||
<div>
|
||||
<div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
|
||||
<ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
@@ -51,14 +57,16 @@
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-cascader ref="cascader2" v-model="search.girdId" :options="girdOptions" placeholder="所属网格" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" @change="gridChangeOpt"></el-cascader>
|
||||
<!-- <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker> -->
|
||||
:props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
|
||||
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="page.current=1, getTableData()"
|
||||
:selectList="dict.getDict('integralType')"/>
|
||||
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable
|
||||
@clear="page.current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
<el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.userName" clearable
|
||||
@clear="page.current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(page.current = 1), getTableData();}" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
@@ -121,23 +129,25 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: "积分统计",
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
tableData: [],
|
||||
search: {
|
||||
current: 1,
|
||||
name: '',
|
||||
girdId: ''
|
||||
userName: '',
|
||||
girdId: '',
|
||||
integralType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
page: {current: 1, size: 10,total: 0,},
|
||||
girdList: [],
|
||||
time: '',
|
||||
time: [],
|
||||
timeCheck: ['昨日','近7天','近30天','自定义'],
|
||||
dialog: false,
|
||||
dialogDate: false,
|
||||
timeList: '',
|
||||
type: '0',
|
||||
timeList: [],
|
||||
type: '1',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
data: {},
|
||||
@@ -147,13 +157,13 @@ export default {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
},
|
||||
details: {},
|
||||
fileDownLoad: [],
|
||||
girdSortList: [],
|
||||
userSortList: [],
|
||||
|
||||
userSortListX: [],
|
||||
userSortListY: [],
|
||||
girdSortListX: [],
|
||||
girdSortListY: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -163,7 +173,7 @@ export default {
|
||||
{ prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
|
||||
{ prop: "girdName", label: '所属网格', align: "center", width: "180px" },
|
||||
{ prop: "eventDesc", label: '事件', align: "center",width: "200px" },
|
||||
{ prop: "integralType", label: '类型', align: "center",width: "200px", dict:"integralDetailType" },
|
||||
{ prop: "integralType", label: '类型', align: "center",width: "200px", dict:"integralType" },
|
||||
// render: (h, {row}) => {
|
||||
// return h('span', {
|
||||
// style: {
|
||||
@@ -179,11 +189,12 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('epidemicDangerousAreaLevel')
|
||||
this.getStatistics()
|
||||
this.getGridList()
|
||||
this.getRanking()
|
||||
this.getTableData()
|
||||
this.$dict.load('epidemicDangerousAreaLevel','integralType').then(() => {
|
||||
this.getStatistics()
|
||||
this.getGridList()
|
||||
this.getRanking()
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 统计接口
|
||||
@@ -212,9 +223,14 @@ export default {
|
||||
endTime: this.endTime
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res, '积分排行');
|
||||
this.userSortList = res.data.userSortList
|
||||
this.girdSortList = res.data.girdSortList
|
||||
if(res?.data) {
|
||||
this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
|
||||
this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
|
||||
this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
|
||||
this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
|
||||
this.getColEcherts1(this.userSortListX,this.userSortListY)
|
||||
this.getColEcherts2(this.girdSortListX,this.girdSortListY)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 积分明细
|
||||
@@ -223,9 +239,6 @@ export default {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
integralType: this.integralType,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
@@ -235,21 +248,17 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
gridChangeOpt() {
|
||||
gridChangeOpt(val) {
|
||||
this.search.girdId = val?.[val.length - 1]
|
||||
this.$refs.cascader2.dropDownVisible = false;
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getColEcherts1() {
|
||||
getColEcherts1(xData,yData) {
|
||||
let chartDom1 = document.getElementById('chart1');
|
||||
chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
this.myChart1.setOption({
|
||||
|
||||
title: {
|
||||
text: '个人积分排行'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -260,7 +269,7 @@ export default {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '50px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -269,7 +278,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
@@ -280,7 +289,7 @@ export default {
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70,],
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@@ -302,14 +311,11 @@ export default {
|
||||
}, true);
|
||||
window.addEventListener("resize", this.onResize)
|
||||
},
|
||||
getColEcherts2() {
|
||||
getColEcherts2(xData,yData) {
|
||||
let chartDom2 = document.getElementById('chart2');
|
||||
chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
this.myChart2.setOption({
|
||||
title: {
|
||||
text: '网格积分排行'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -320,7 +326,7 @@ export default {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '50px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -329,7 +335,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
@@ -339,7 +345,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70,],
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@@ -373,7 +379,7 @@ export default {
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
|
||||
// 所有网格
|
||||
getGridList() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
@@ -417,6 +423,12 @@ export default {
|
||||
this.getDetail(id)
|
||||
},
|
||||
|
||||
onChange(val) {
|
||||
this.search.startTime = val?.[0]
|
||||
this.search.endTime = val?.[1]
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
@@ -436,6 +448,7 @@ export default {
|
||||
this.endTime = this.timeList?.[1]
|
||||
this.dialogDate = false
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
|
||||
},
|
||||
@@ -455,7 +468,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gridScoreStatistics {
|
||||
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
@@ -540,9 +552,11 @@ export default {
|
||||
display: flex;
|
||||
.left_Box {
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.right_Box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left_Box,
|
||||
@@ -555,7 +569,10 @@ export default {
|
||||
#chart1,
|
||||
#chart2 {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
height: 300px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -519,7 +519,7 @@
|
||||
|
||||
methods: {
|
||||
onNodeClick (e) {
|
||||
this.getGridInfo(e.id)
|
||||
this.getGridInfo(e)
|
||||
},
|
||||
|
||||
getInfo () {
|
||||
|
||||
@@ -1,49 +1,104 @@
|
||||
<template>
|
||||
<div class="pdgrid">
|
||||
<div class="pdgrid-title">
|
||||
<h2>幸福郫都微网实格架构</h2>
|
||||
<h2>{{ currGird }}</h2>
|
||||
</div>
|
||||
<div class="pdgrid-grid__title">
|
||||
<h2>郫都某街道</h2>
|
||||
<div class="pdgrid-grid__title" @click="isShowGrid2 = true">
|
||||
<h2 :title="girdName2">{{ girdName2 }}</h2>
|
||||
</div>
|
||||
<div class="pdgrid-body">
|
||||
<div class="pdgrid-body__item">
|
||||
<h2>240</h2>
|
||||
<div class="pdgrid-body__item" @click="isShowGrid3 = true">
|
||||
<h2>{{ girdNum3 }}</h2>
|
||||
<div class="bottom">
|
||||
<i></i>
|
||||
<p>第一网格</p>
|
||||
<p>{{ girdName3 }}</p>
|
||||
<i class="right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pdgrid-body__item" @click.stop="isShowGrid1 = true">
|
||||
<h2>240</h2>
|
||||
<div class="pdgrid-body__item" @click.stop="isShowGrid4 = true">
|
||||
<h2>{{ girdNum4 }}</h2>
|
||||
<div class="bottom">
|
||||
<i></i>
|
||||
<p>第二网格</p>
|
||||
<p>{{ girdName4 }}</p>
|
||||
<i class="right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pdgrid-body__item">
|
||||
<h2>240</h2>
|
||||
<div class="pdgrid-body__item" @click="isShowGrid5 = true">
|
||||
<h2>{{ girdNum5 }}</h2>
|
||||
<div class="bottom">
|
||||
<i></i>
|
||||
<p>微网格</p>
|
||||
<p>{{ girdName5 }}</p>
|
||||
<i class="right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="grid-dialog" v-show="isShowGrid1">
|
||||
<div class="mask" @click="isShowGrid1 = false"></div>
|
||||
<div class="grid-dialog" v-show="isShowGrid2">
|
||||
<div class="mask" @click="isShowGrid2 = false"></div>
|
||||
<div class="grid-container">
|
||||
<h2>已选择的网格</h2>
|
||||
<h2>{{ girdName2 }}</h2>
|
||||
<div class="grid-list">
|
||||
<div
|
||||
:class="[currIndex1 === index ? 'grid-active' : '']"
|
||||
v-for="(item, index) in 20"
|
||||
:class="[currIndex2 === index ? 'grid-active' : '']"
|
||||
v-for="(item, index) in girdInfoList2"
|
||||
:key="index"
|
||||
@click.stop="currIndex1 = index">
|
||||
幸福郫都微网实格架构
|
||||
:title="item.girdName"
|
||||
@click.stop="onGrid2Click(item, index)">
|
||||
{{ item.girdName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div class="grid-dialog" v-show="isShowGrid3">
|
||||
<div class="mask" @click="isShowGrid3 = false"></div>
|
||||
<div class="grid-container">
|
||||
<h2>{{ girdName3 }}</h2>
|
||||
<div class="grid-list">
|
||||
<div
|
||||
:class="[currIndex3 === index ? 'grid-active' : '']"
|
||||
v-for="(item, index) in girdInfoList3"
|
||||
:key="index"
|
||||
:title="item.girdName"
|
||||
@click.stop="onGrid3Click(item, index)">
|
||||
{{ item.girdName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div class="grid-dialog" v-show="isShowGrid4">
|
||||
<div class="mask" @click="isShowGrid4 = false"></div>
|
||||
<div class="grid-container">
|
||||
<h2>{{ girdName4 }}</h2>
|
||||
<div class="grid-list">
|
||||
<div
|
||||
:class="[currIndex4 === index ? 'grid-active' : '']"
|
||||
v-for="(item, index) in girdInfoList4"
|
||||
:key="index"
|
||||
:title="item.girdName"
|
||||
@click.stop="onGrid4Click(item, index)">
|
||||
{{ item.girdName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div class="grid-dialog" v-show="isShowGrid5">
|
||||
<div class="mask" @click="isShowGrid5 = false"></div>
|
||||
<div class="grid-container">
|
||||
<h2>{{ girdName5 }}</h2>
|
||||
<div class="grid-list">
|
||||
<div
|
||||
:class="[currIndex5 === index ? 'grid-active' : '']"
|
||||
v-for="(item, index) in girdInfoList5"
|
||||
:key="index"
|
||||
:title="item.girdName"
|
||||
@click.stop="onGrid5Click(item, index)">
|
||||
{{ item.girdName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,10 +111,30 @@
|
||||
export default {
|
||||
name: 'pdgrid',
|
||||
|
||||
props: ['instance'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
isShowGrid1: false,
|
||||
currIndex1: 0
|
||||
isShowGrid2: false,
|
||||
isShowGrid3: false,
|
||||
isShowGrid4: false,
|
||||
isShowGrid5: false,
|
||||
currIndex2: 0,
|
||||
currIndex3: 0,
|
||||
currIndex4: 0,
|
||||
currIndex5: 0,
|
||||
girdInfoList2: [],
|
||||
girdInfoList3: [],
|
||||
girdInfoList4: [],
|
||||
girdInfoList5: [],
|
||||
girdName2: '',
|
||||
girdName3: '',
|
||||
girdName4: '',
|
||||
girdName5: '',
|
||||
girdNum3: 0,
|
||||
girdNum4: 0,
|
||||
girdNum5: 0,
|
||||
currGird: ''
|
||||
}
|
||||
},
|
||||
|
||||
@@ -67,6 +142,8 @@
|
||||
this.$nextTick(() => {
|
||||
document.addEventListener('keydown', this.onKeyDown)
|
||||
})
|
||||
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
@@ -78,6 +155,79 @@
|
||||
if (e.keyCode == 27) {
|
||||
this.isShowGrid1 = false
|
||||
}
|
||||
},
|
||||
|
||||
onGrid2Click (item, index) {
|
||||
this.currIndex2 = index
|
||||
this.girdName2 = item.girdName
|
||||
this.currIndex3 = -1
|
||||
this.currIndex4 = -1
|
||||
this.currIndex5 = -1
|
||||
this.isShowGrid2 = false
|
||||
this.$emit('nodeClick', item.id)
|
||||
|
||||
this.currGird = item.girdName
|
||||
this.getInfo(item.id)
|
||||
},
|
||||
|
||||
onGrid3Click (item, index) {
|
||||
this.currIndex3 = index
|
||||
this.girdName3 = item.girdName
|
||||
this.currIndex4 = -1
|
||||
this.currIndex5 = -1
|
||||
this.girdNum3 = 1
|
||||
this.isShowGrid3 = false
|
||||
this.$emit('nodeClick', item.id)
|
||||
|
||||
this.currGird = item.girdName
|
||||
this.getInfo(item.id)
|
||||
},
|
||||
|
||||
onGrid4Click (item, index) {
|
||||
this.currIndex4 = index
|
||||
this.girdName4 = item.girdName
|
||||
this.currIndex5 = -1
|
||||
this.girdNum4 = 1
|
||||
this.isShowGrid4 = false
|
||||
this.$emit('nodeClick', item.id)
|
||||
|
||||
this.currGird = item.girdName
|
||||
this.getInfo(item.id)
|
||||
},
|
||||
|
||||
onGrid5Click (item, index) {
|
||||
this.currIndex5 = index
|
||||
this.girdName5 = item.girdName
|
||||
this.isShowGrid5 = false
|
||||
this.girdNum5 = 1
|
||||
this.$emit('nodeClick', item.id)
|
||||
|
||||
this.currGird = item.girdName
|
||||
this.getInfo(item.id)
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appgirdinfo/queryPdDetailByGirdId?id=${id || ''}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
res.data.girdInfoList2 && (this.girdInfoList2 = res.data.girdInfoList2)
|
||||
res.data.girdInfoList3 && (this.girdInfoList3 = res.data.girdInfoList3)
|
||||
res.data.girdInfoList4 && (this.girdInfoList4 = res.data.girdInfoList4)
|
||||
res.data.girdInfoList5 && (this.girdInfoList5 = res.data.girdInfoList5)
|
||||
|
||||
res.data.girdName2 && (this.girdName2 = res.data.girdName2)
|
||||
res.data.girdName3 && (this.girdName3 = res.data.girdName3)
|
||||
res.data.girdName4 && (this.girdName4 = res.data.girdName4)
|
||||
res.data.girdName5 && (this.girdName5 = res.data.girdName5)
|
||||
res.data.girdNum3 && (this.girdNum3 = res.data.girdNum3)
|
||||
res.data.girdNum4 && (this.girdNum4 = res.data.girdNum4)
|
||||
res.data.girdNum5 && (this.girdNum5 = res.data.girdNum5)
|
||||
|
||||
if (!id) {
|
||||
this.currGird = res.data.girdName2
|
||||
this.currIndex2 = res.data.girdInfoList2.findIndex(v => res.data.girdName2 === v.girdName)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -123,6 +273,11 @@
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 182px;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFFFFF;
|
||||
font-size: 21px;
|
||||
text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
|
||||
@@ -251,7 +406,7 @@
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
@@ -286,10 +441,14 @@
|
||||
& > div {
|
||||
height: 67px;
|
||||
line-height: 67px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 27px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all ease 0.5s;
|
||||
|
||||
&.grid-active {
|
||||
|
||||
Reference in New Issue
Block a user