数据统计大屏修改
This commit is contained in:
aoli.qu
parent
ba934dc592
commit
07e4aed932
|
|
@ -17526,6 +17526,11 @@
|
||||||
"videojs-hotkeys": "^0.2.20"
|
"videojs-hotkeys": "^0.2.20"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue2-scale-box": {
|
||||||
|
"version": "0.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue2-scale-box/-/vue2-scale-box-0.1.7.tgz",
|
||||||
|
"integrity": "sha512-mI/eEaBg5+9Op8i7sHBPEWnxRC744xBZnl4lf6yF+2ShhURTunipWz7dMcJ0nhgZ1jK+I4rv2BF1oK+0K7CmlA=="
|
||||||
|
},
|
||||||
"vuex": {
|
"vuex": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@
|
||||||
"vue-svg-component-runtime": "^1.0.1",
|
"vue-svg-component-runtime": "^1.0.1",
|
||||||
"vue-ueditor-wrap": "^2.5.6",
|
"vue-ueditor-wrap": "^2.5.6",
|
||||||
"vue-video-player": "^5.0.2",
|
"vue-video-player": "^5.0.2",
|
||||||
|
"vue2-scale-box": "^0.1.7",
|
||||||
"vuex": "^3.1.1",
|
"vuex": "^3.1.1",
|
||||||
"wangeditor": "^3.1.1"
|
"wangeditor": "^3.1.1"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
#index {
|
#index {
|
||||||
color: #d3d6dd;
|
color: #d3d6dd;
|
||||||
// color: #0f1325;
|
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 1080px;
|
height: 1080px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -40,7 +39,7 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
font-size: 24px;
|
font-size: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
@ -68,11 +67,11 @@
|
||||||
|
|
||||||
// 平行四边形
|
// 平行四边形
|
||||||
.react-right {
|
.react-right {
|
||||||
&.react-l-s {
|
/* &.react-l-s {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
}
|
} */
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -99,7 +98,7 @@
|
||||||
width: 500px;
|
width: 500px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 年度开工率 -->
|
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="bottomLeftChart"
|
id="bottomLeftChart"
|
||||||
|
|
@ -15,50 +14,51 @@ import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: 'axis',
|
||||||
backgroundColor: "rgba(255,255,255,0.1)",
|
backgroundColor: 'rgba(255,255,255,0.1)',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: "shadow",
|
type: 'shadow',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
backgroundColor: "#7B7DDC"
|
backgroundColor: '#7B7DDC'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["已贯通", "计划贯通", "贯通率"],
|
data: ['集中供养数', '供养总人数', '集中供养率'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#B4B4B4"
|
color: '#B4B4B4',
|
||||||
|
fontSize:20
|
||||||
},
|
},
|
||||||
top: "0%"
|
top: '0%'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
x: "8%",
|
x: '8%',
|
||||||
width: "88%",
|
width: '88%',
|
||||||
y: "4%"
|
y: '4%'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: newData.category,
|
data: newData.category,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: '#B4B4B4'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
|
|
@ -70,69 +70,69 @@ export default {
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: '#B4B4B4'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value} "
|
formatter: '{value} '
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: '#B4B4B4'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value} "
|
formatter: '{value} '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "贯通率",
|
name: '集中供养率',
|
||||||
type: "line",
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
showAllSymbol: true,
|
showAllSymbol: true,
|
||||||
symbol: "emptyCircle",
|
symbol: 'emptyCircle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#F02FC2"
|
color: '#F02FC2'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: newData.rateData
|
data: newData.rateData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "已贯通",
|
name: '集中供养数',
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
barBorderRadius: 5,
|
barBorderRadius: 5,
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#956FD4" },
|
{ offset: 0, color: '#956FD4' },
|
||||||
{ offset: 1, color: "#3EACE5" }
|
{ offset: 1, color: '#3EACE5' }
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: newData.barData
|
data: newData.barData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "计划贯通",
|
name: '供养总人数',
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
barGap: "-100%",
|
barGap: '-100%',
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
barBorderRadius: 5,
|
barBorderRadius: 5,
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
{ offset: 0, color: 'rgba(156,107,211,0.8)' },
|
||||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
{ offset: 0.2, color: 'rgba(156,107,211,0.5)' },
|
||||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
{ offset: 1, color: 'rgba(156,107,211,0.2)' }
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -144,7 +144,7 @@ export default {
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -11,131 +11,56 @@ export default {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
category: [
|
category: [
|
||||||
"市区",
|
'下堡坪村',
|
||||||
"万州",
|
'蛟龙寺村',
|
||||||
"江北",
|
'九山村',
|
||||||
"南岸",
|
'马宗岭村',
|
||||||
"北碚",
|
'赵勉河村',
|
||||||
"綦南",
|
'秀水村',
|
||||||
"长寿",
|
'磨坪村',
|
||||||
"永川",
|
'十八湾村'
|
||||||
"璧山",
|
|
||||||
"江津",
|
|
||||||
"城口",
|
|
||||||
"大足",
|
|
||||||
"垫江",
|
|
||||||
"丰都",
|
|
||||||
"奉节",
|
|
||||||
"合川",
|
|
||||||
"江津区",
|
|
||||||
"开州",
|
|
||||||
"南川",
|
|
||||||
"彭水",
|
|
||||||
"黔江",
|
|
||||||
"石柱",
|
|
||||||
"铜梁",
|
|
||||||
"潼南",
|
|
||||||
"巫山",
|
|
||||||
"巫溪",
|
|
||||||
"武隆",
|
|
||||||
"秀山",
|
|
||||||
"酉阳",
|
|
||||||
"云阳",
|
|
||||||
"忠县",
|
|
||||||
"川东",
|
|
||||||
"检修"
|
|
||||||
],
|
],
|
||||||
lineData: [
|
lineData: [
|
||||||
18092,
|
15,
|
||||||
20728,
|
8,
|
||||||
24045,
|
5,
|
||||||
28348,
|
9,
|
||||||
32808,
|
7,
|
||||||
36097,
|
10,
|
||||||
39867,
|
9,
|
||||||
44715,
|
4
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
56061,
|
|
||||||
62677,
|
|
||||||
59521,
|
|
||||||
67560,
|
|
||||||
18092,
|
|
||||||
20728,
|
|
||||||
24045,
|
|
||||||
28348,
|
|
||||||
32808,
|
|
||||||
36097,
|
|
||||||
39867,
|
|
||||||
44715,
|
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
36097,
|
|
||||||
39867,
|
|
||||||
44715,
|
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
50061,
|
|
||||||
32677,
|
|
||||||
49521,
|
|
||||||
32808
|
|
||||||
],
|
],
|
||||||
barData: [
|
barData: [
|
||||||
4600,
|
13,
|
||||||
5000,
|
6,
|
||||||
5500,
|
4,
|
||||||
6500,
|
7,
|
||||||
7500,
|
6,
|
||||||
8500,
|
3,
|
||||||
9900,
|
7,
|
||||||
12500,
|
3
|
||||||
14000,
|
|
||||||
21500,
|
|
||||||
23200,
|
|
||||||
24450,
|
|
||||||
25250,
|
|
||||||
33300,
|
|
||||||
4600,
|
|
||||||
5000,
|
|
||||||
5500,
|
|
||||||
6500,
|
|
||||||
7500,
|
|
||||||
8500,
|
|
||||||
9900,
|
|
||||||
22500,
|
|
||||||
14000,
|
|
||||||
21500,
|
|
||||||
8500,
|
|
||||||
9900,
|
|
||||||
12500,
|
|
||||||
14000,
|
|
||||||
21500,
|
|
||||||
23200,
|
|
||||||
24450,
|
|
||||||
25250,
|
|
||||||
7500
|
|
||||||
],
|
],
|
||||||
rateData: []
|
rateData: []
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.setData();
|
this.setData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 根据自己的业务情况修改
|
// 根据自己的业务情况修改
|
||||||
setData () {
|
setData () {
|
||||||
for (let i = 0; i < this.cdata.barData.length -1; i++) {
|
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
|
||||||
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
const rate = this.cdata.barData[i] / this.cdata.lineData[i]
|
||||||
this.cdata.rateData.push(rate.toFixed(2));
|
this.cdata.rateData.push(rate.toFixed(2))
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="220px"
|
height="340px"
|
||||||
width="260px"
|
width="300px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -14,58 +14,59 @@ import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
'#37a2da',
|
||||||
"#32c5e9",
|
'#32c5e9',
|
||||||
"#9fe6b8",
|
'#fb7293'
|
||||||
"#ffdb5c",
|
|
||||||
"#ff9f7f",
|
|
||||||
"#fb7293",
|
|
||||||
"#e7bcf3",
|
|
||||||
"#8378ea"
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: 'item',
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: 'horizontal',
|
||||||
icon: "circle",
|
icon: 'circle',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: 'center',
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: '#fff',
|
||||||
|
"fontSize": 18
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: '等级统计',
|
||||||
type: "pie",
|
type: 'pie',
|
||||||
radius: [10, 50],
|
radius: [20, 100],
|
||||||
roseType: "area",
|
roseType: 'area',
|
||||||
center: ["50%", "40%"],
|
center: ['50%', '50%'],
|
||||||
data: newData.seriesData
|
data: newData.seriesData,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -74,8 +75,8 @@ export default {
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,25 +5,22 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue';
|
import Chart from './chart.vue'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
xData: ['一级护理', '二级护理', '三级护理'],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "data1" },
|
{ value: 10, name: '一级护理' },
|
||||||
{ value: 5, name: "data2" },
|
{ value: 5, name: '二级护理' },
|
||||||
{ value: 15, name: "data3" },
|
{ value: 15, name: '三级护理' }
|
||||||
{ value: 25, name: "data4" },
|
|
||||||
{ value: 20, name: "data5" },
|
|
||||||
{ value: 35, name: "data6" }
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
},
|
},
|
||||||
|
|
@ -33,4 +30,4 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,290 +1,88 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart :options="options" id="centreLeft2Chart" height="340px" width="270px" style="padding: 10px;"></Echart>
|
||||||
id="centreLeft2Chart"
|
|
||||||
ref="centreLeft2ChartRef"
|
|
||||||
:options="options"
|
|
||||||
height="360px"
|
|
||||||
width="330px"
|
|
||||||
></Echart>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart';
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {}
|
||||||
};
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Echart,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
cdata: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
},
|
||||||
},
|
components: {
|
||||||
watch: {
|
Echart
|
||||||
cdata: {
|
},
|
||||||
handler(newData) {
|
props: {
|
||||||
// 设置点的位置(经纬度)
|
cdata: {
|
||||||
const geoCoordMap = {
|
type: Object,
|
||||||
厦门市: [118.11022, 24.490474, 20],
|
default: () => ({})
|
||||||
福州市: [119.206239, 26.275302, 20],
|
}
|
||||||
泉州市: [118.589421, 24.908853, 20],
|
},
|
||||||
漳州市: [117.561801, 24.510897, 20],
|
watch: {
|
||||||
龙岩市: [116.82978, 25.391603, 20],
|
cdata: {
|
||||||
莆田市: [119.007558, 25.591011, 20],
|
handler(newData) {
|
||||||
三明市: [117.435001, 26.465444, 20],
|
this.options = {
|
||||||
南平市: [118.178459, 27.535627, 20],
|
// title: {
|
||||||
宁德市: [119.527082, 27.15924, 20],
|
// text: 'Referer of a Website',
|
||||||
};
|
// subtext: 'Fake Data',
|
||||||
let seriesData = [
|
// left: 'center'
|
||||||
{
|
// },
|
||||||
name: '厦门市',
|
tooltip: {
|
||||||
},
|
trigger: 'item'
|
||||||
{
|
|
||||||
name: '福州市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '泉州市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '漳州市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '龙岩市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '莆田市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '三明市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '南平市',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '宁德市',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
let convertData = function (data) {
|
|
||||||
let scatterData = [];
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
var geoCoord = geoCoordMap[data[i].name];
|
|
||||||
if (geoCoord) {
|
|
||||||
scatterData.push({
|
|
||||||
name: data[i].name,
|
|
||||||
value: geoCoord.concat(data[i].value),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return scatterData;
|
|
||||||
};
|
|
||||||
this.options = {
|
|
||||||
showLegendSymbol: true,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
lineHeight: 22,
|
|
||||||
},
|
},
|
||||||
position: point => {
|
legend: {
|
||||||
// 固定在顶部
|
orient: 'vertical',
|
||||||
return [point[0] + 50, point[1] - 20];
|
left: 'left',
|
||||||
},
|
textStyle: {
|
||||||
// 如果需要自定义 tooltip样式，需要使用formatter
|
color: '#fff',
|
||||||
/*
|
"fontSize": 18
|
||||||
formatter: params => {
|
|
||||||
return `<div style=""> ... </div>`
|
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
},
|
|
||||||
visualMap: {
|
|
||||||
min: 0,
|
|
||||||
max: 10,
|
|
||||||
show: false,
|
|
||||||
seriesIndex: 0,
|
|
||||||
// 颜色
|
|
||||||
inRange: {
|
|
||||||
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
|
||||||
},
|
},
|
||||||
},
|
series: [{
|
||||||
// 底部背景
|
// name: 'Access From',
|
||||||
geo: {
|
type: 'pie',
|
||||||
show: true,
|
radius: '75%',
|
||||||
aspectScale: 0.85, //长宽比
|
data: newData.seriesData,
|
||||||
zoom: 1.2,
|
emphasis: {
|
||||||
top: '10%',
|
itemStyle: {
|
||||||
left: '16%',
|
shadowBlur: 10,
|
||||||
map: '福建',
|
shadowOffsetX: 0,
|
||||||
roam: false,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
areaColor: 'rgba(0,0,0,0)',
|
color: function(colors) {
|
||||||
shadowColor: 'rgba(7,114,204, .8)',
|
var colorList = [
|
||||||
shadowOffsetX: 5,
|
'#457bef',
|
||||||
shadowOffsetY: 5,
|
'#ffaaff'
|
||||||
},
|
];
|
||||||
emphasis: {
|
return colorList[colors.dataIndex];
|
||||||
areaColor: '#00aeef',
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '相关指数',
|
|
||||||
type: 'map',
|
|
||||||
aspectScale: 0.85, //长宽比
|
|
||||||
zoom: 1.2,
|
|
||||||
mapType: '福建', // 自定义扩展图表类型
|
|
||||||
top: '10%',
|
|
||||||
left: '16%',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'red',
|
|
||||||
areaColor: 'rgba(19,54,162, .5)',
|
|
||||||
borderColor: 'rgba(0,242,252,.3)',
|
|
||||||
borderWidth: 1,
|
|
||||||
shadowBlur: 7,
|
|
||||||
shadowColor: '#00f2fc',
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
areaColor: '#4f7fff',
|
|
||||||
borderColor: 'rgba(0,242,252,.6)',
|
|
||||||
borderWidth: 2,
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: '#00f2fc',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
label: {
|
||||||
formatter: params => `${params.name}`,
|
|
||||||
show: true,
|
|
||||||
position: 'insideRight',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: '#efefef',
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: newData,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'effectScatter',
|
|
||||||
coordinateSystem: 'geo',
|
|
||||||
symbolSize: 7,
|
|
||||||
effectType: 'ripple',
|
|
||||||
legendHoverLink: false,
|
|
||||||
showEffectOn: 'render',
|
|
||||||
rippleEffect: {
|
|
||||||
period: 4,
|
|
||||||
scale: 2.5,
|
|
||||||
brushType: 'stroke',
|
|
||||||
},
|
|
||||||
zlevel: 1,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
normal: {
|
||||||
color: '#99FBFE',
|
show: false,
|
||||||
shadowBlur: 5,
|
|
||||||
shadowColor: '#fff',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: convertData(seriesData),
|
labelLine: {
|
||||||
},
|
normal: {
|
||||||
],
|
show: false
|
||||||
};
|
}
|
||||||
// 重新选择区域
|
}
|
||||||
this.handleMapRandomSelect();
|
}]
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 开启定时器
|
|
||||||
startInterval() {
|
|
||||||
const _self = this;
|
|
||||||
// 应通过接口获取配置时间，暂时写死5s
|
|
||||||
const time = 2000;
|
|
||||||
if (this.intervalId !== null) {
|
|
||||||
clearInterval(this.intervalId);
|
|
||||||
}
|
|
||||||
this.intervalId = setInterval(() => {
|
|
||||||
_self.reSelectMapRandomArea();
|
|
||||||
}, time);
|
|
||||||
},
|
|
||||||
// 重新随机选中地图区域
|
|
||||||
reSelectMapRandomArea() {
|
|
||||||
const length = 9;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
try {
|
|
||||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
|
||||||
let index = Math.floor(Math.random() * length);
|
|
||||||
while (index === this.preSelectMapIndex || index >= length) {
|
|
||||||
index = Math.floor(Math.random() * length);
|
|
||||||
}
|
}
|
||||||
map.dispatchAction({
|
},
|
||||||
type: 'mapUnSelect',
|
immediate: true,
|
||||||
seriesIndex: 0,
|
deep: true
|
||||||
dataIndex: this.preSelectMapIndex,
|
}
|
||||||
});
|
}
|
||||||
map.dispatchAction({
|
}
|
||||||
type: 'showTip',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: index,
|
|
||||||
});
|
|
||||||
map.dispatchAction({
|
|
||||||
type: 'mapSelect',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: index,
|
|
||||||
});
|
|
||||||
this.preSelectMapIndex = index;
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleMapRandomSelect() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
try {
|
|
||||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
|
||||||
const _self = this;
|
|
||||||
setTimeout(() => {
|
|
||||||
_self.reSelectMapRandomArea();
|
|
||||||
}, 0);
|
|
||||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
|
||||||
map.on('mouseover', function (params) {
|
|
||||||
clearInterval(_self.intervalId);
|
|
||||||
map.dispatchAction({
|
|
||||||
type: 'mapUnSelect',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: _self.preSelectMapIndex,
|
|
||||||
});
|
|
||||||
map.dispatchAction({
|
|
||||||
type: 'mapSelect',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: params.dataIndex,
|
|
||||||
});
|
|
||||||
_self.preSelectMapIndex = params.dataIndex;
|
|
||||||
});
|
|
||||||
// 移出区域重新随机选中地图区域，并开启定时器
|
|
||||||
map.on('globalout', function () {
|
|
||||||
_self.reSelectMapRandomArea();
|
|
||||||
_self.startInterval();
|
|
||||||
});
|
|
||||||
this.startInterval();
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,56 +5,21 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue';
|
import Chart from './chart.vue'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cdata: [
|
cdata: {
|
||||||
{
|
xData: ['男', '女'],
|
||||||
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
seriesData: [
|
||||||
name: '福州市',
|
{ value: 42, name: '男' },
|
||||||
value: 10,
|
{ value: 12, name: '女' }
|
||||||
elseData:{
|
]
|
||||||
// 这里放置地图 tooltip 里想显示的数据
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '厦门市',
|
|
||||||
value: 9,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '漳州市',
|
|
||||||
value: 8,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '泉州市',
|
|
||||||
value: 7,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '三明市',
|
|
||||||
value: 6,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '莆田市',
|
|
||||||
value: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '南平市',
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '龙岩市',
|
|
||||||
value: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '宁德市',
|
|
||||||
value: 2,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
},
|
},
|
||||||
|
|
@ -64,4 +29,4 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
id="centreLeft1Chart"
|
||||||
|
height="340px"
|
||||||
|
width="380px"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/common/echart'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
options: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cdata: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler (newData) {
|
||||||
|
this.options = {
|
||||||
|
color: [
|
||||||
|
'#37a2da',
|
||||||
|
"#ffdb5c",
|
||||||
|
"#ff9f7f",
|
||||||
|
'#fb7293',
|
||||||
|
"#e7bcf3",
|
||||||
|
'#8378ea'
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
icon: 'circle',
|
||||||
|
bottom: 0,
|
||||||
|
x: 'center',
|
||||||
|
data: newData.xData,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
"fontSize": 18
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '年龄统计',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [20, 100],
|
||||||
|
roseType: 'area',
|
||||||
|
center: ['50%', '40%'],
|
||||||
|
data: newData.seriesData,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
"fontSize": 18
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Chart :cdata="cdata" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from './chart.vue'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
cdata: {
|
||||||
|
xData: ['50岁以下', '50岁-59岁', '60岁-69岁','70岁-79岁','80岁-89岁','90岁以上'],
|
||||||
|
seriesData: [
|
||||||
|
{ value: 6, name: '50岁以下' },
|
||||||
|
{ value: 12, name: '50岁-59岁' },
|
||||||
|
{ value: 14, name: '60岁-69岁' },
|
||||||
|
{ value: 21, name: '70岁-79岁' },
|
||||||
|
{ value: 16, name: '80岁-89岁' },
|
||||||
|
{ value: 9, name: '90岁以上' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Chart
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Echart :options="options" id="centreLeft2Chart" height="360px" width="270px" style="padding: 10px;"></Echart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/common/echart'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cdata: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler(newData) {
|
||||||
|
this.options = {
|
||||||
|
// title: {
|
||||||
|
// text: 'Referer of a Website',
|
||||||
|
// subtext: 'Fake Data',
|
||||||
|
// left: 'center'
|
||||||
|
// },
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
// name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '75%',
|
||||||
|
data: newData.seriesData,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function(colors) {
|
||||||
|
var colorList = [
|
||||||
|
'#5470c6',
|
||||||
|
'#9A60B4',
|
||||||
|
];
|
||||||
|
return colorList[colors.dataIndex];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Chart :cdata="cdata" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from './chart.vue'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
cdata: {
|
||||||
|
xData: ['是', '否'],
|
||||||
|
seriesData: [
|
||||||
|
{ value: 26, name: '是' },
|
||||||
|
{ value: 11, name: '否' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Chart
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="bigScreenLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
|
<div id="bigScreenLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
|
||||||
<!-- <bigScreen></bigScreen> -->
|
<!-- <bigScreen></bigScreen> -->
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -24,8 +24,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#bigScreenLayout {
|
#app {
|
||||||
|
|
||||||
background-color: #0f1325;
|
background-color: #03050C;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<icon name="chart-bar" class="text-icon"></icon>
|
<icon name="chart-bar" class="text-icon"></icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="fs-xl text mx-2">数据统计图</span>
|
<span class="fs-xl text mx-2" style="font-size: 20px;">各村供养人数</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -3,58 +3,200 @@
|
||||||
<div class="bg-color-black">
|
<div class="bg-color-black">
|
||||||
<div class="d-flex pt-2 pl-2">
|
<div class="d-flex pt-2 pl-2">
|
||||||
<span>
|
<span>
|
||||||
<icon name="chart-area" class="text-icon"></icon>
|
<icon name="align-left" class="text-icon"></icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<span class="fs-xl text mx-2" style="font-size: 20px;">入住情况统计</span>
|
||||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
|
||||||
<div class="decoration2">
|
|
||||||
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="d-flex ai-center flex-column body-box">
|
||||||
<BottomRightChart />
|
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||||
|
</div>
|
||||||
|
<!-- 4个主要的数据 -->
|
||||||
|
<div class="bottom-data">
|
||||||
|
<div
|
||||||
|
class="item-box mt-2"
|
||||||
|
v-for="(item, index) in numberData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<p class="text" style="text-align: center;">
|
||||||
|
<dv-digital-flop class="dv-digital-flop" :config="item.number" />
|
||||||
|
</p>
|
||||||
|
<p class="text" >
|
||||||
|
{{ item.text }}
|
||||||
|
<span class="colorYellow" v-if="item.dw">({{ item.dw }})</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
|
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BottomRightChart
|
centerRight2Chart1
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '供养房',
|
||||||
|
value: 21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '餐厅',
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '厨房',
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '活动室',
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '办公室',
|
||||||
|
value: 4
|
||||||
|
}
|
||||||
|
],
|
||||||
|
showValue: true
|
||||||
|
},
|
||||||
|
numberData: [
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [22],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '入住房间',
|
||||||
|
dw: '间'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [37],
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '供养房间',
|
||||||
|
dw: '间'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [52],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '入住床位',
|
||||||
|
dw: '个'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [80],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '总床位数',
|
||||||
|
dw: '个'
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [32.25],
|
||||||
|
toFixed: 2,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '床位入住率',
|
||||||
|
dw: '%'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" class>
|
<style lang="scss" scoped>
|
||||||
$box-height: 520px;
|
$box-height: 485px;
|
||||||
$box-width: 100%;
|
$box-width: 100%;
|
||||||
#bottomRight {
|
#bottomRight {
|
||||||
padding: 14px 16px;
|
padding: 20px 16px;
|
||||||
height: $box-height;
|
height: $box-height;
|
||||||
width: $box-width;
|
width: $box-width;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
.bg-color-black {
|
.bg-color-black {
|
||||||
height: $box-height - 30px;
|
padding: 5px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
color: #c3cbde;
|
color: #c3cbde;
|
||||||
}
|
}
|
||||||
//下滑线动态
|
.body-box {
|
||||||
.decoration2 {
|
border-radius: 10px;
|
||||||
position: absolute;
|
overflow: hidden;
|
||||||
right: 0.125rem;
|
.dv-cap-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 270px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chart-box {
|
.bottom-data {
|
||||||
margin-top: 16px;
|
position: absolute;
|
||||||
width: 170px;
|
top: 270px;
|
||||||
height: 170px;
|
left: 30px;
|
||||||
.active-ring-name {
|
.item-box {
|
||||||
padding-top: 10px;
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
// 金币
|
||||||
|
.coin {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
/* p {
|
||||||
|
text-align: center;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
// 让下方单位的精度值隐藏
|
||||||
|
::v-deep .dv-capsule-chart .unit-label {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
v-for="item in titleItem"
|
v-for="item in titleItem"
|
||||||
:key="item.title"
|
:key="item.title"
|
||||||
>
|
>
|
||||||
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
|
<p class="ml-3 colorBlue fw-b fs-xl bt-zh">{{ item.title }}</p>
|
||||||
<div>
|
<div>
|
||||||
<dv-digital-flop
|
<dv-digital-flop
|
||||||
class="dv-dig-flop ml-1 mt-2 pl-3"
|
class="dv-dig-flop ml-1 mt-2 pl-3"
|
||||||
|
|
@ -20,12 +20,12 @@
|
||||||
<span>
|
<span>
|
||||||
<icon name="chart-pie" class="text-icon"></icon>
|
<icon name="chart-pie" class="text-icon"></icon>
|
||||||
</span>
|
</span>
|
||||||
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
<span class="fs-xl text mx-2 mb-1 pl-3 bt-zh">所属村组榜</span>
|
||||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||||
</div>
|
</div>
|
||||||
<div class="percent">
|
<div class="percent">
|
||||||
<div class="item bg-color-black">
|
<div class="item bg-color-black">
|
||||||
<span>今日任务通过率</span>
|
<span>集中供养率</span>
|
||||||
<CenterChart
|
<CenterChart
|
||||||
:id="rate[0].id"
|
:id="rate[0].id"
|
||||||
:tips="rate[0].tips"
|
:tips="rate[0].tips"
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="item bg-color-black">
|
<div class="item bg-color-black">
|
||||||
<span>今日任务达标率</span>
|
<span>分散供养率</span>
|
||||||
<CenterChart
|
<CenterChart
|
||||||
:id="rate[1].id"
|
:id="rate[1].id"
|
||||||
:tips="rate[1].tips"
|
:tips="rate[1].tips"
|
||||||
|
|
@ -56,74 +56,74 @@ export default {
|
||||||
return {
|
return {
|
||||||
titleItem: [
|
titleItem: [
|
||||||
{
|
{
|
||||||
title: '今年累计任务建次数',
|
title: '累计入住数',
|
||||||
number: {
|
number: {
|
||||||
number: [120],
|
number: [120],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
fontSize: 26
|
fontSize: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '本月累计任务次数',
|
title: '今年入住数',
|
||||||
number: {
|
number: {
|
||||||
number: [18],
|
number: [18],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
fontSize: 26
|
fontSize: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今日累计任务次数',
|
title: '本月新增数',
|
||||||
number: {
|
number: {
|
||||||
number: [2],
|
number: [2],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
fontSize: 26
|
fontSize: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今年失败任务次数',
|
title: '目前在院数',
|
||||||
number: {
|
|
||||||
number: [14],
|
|
||||||
toFixed: 1,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 26
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '今年成功任务次数',
|
|
||||||
number: {
|
number: {
|
||||||
number: [106],
|
number: [106],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
fontSize: 26
|
fontSize: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今年达标任务个数',
|
title: '外出就医数',
|
||||||
number: {
|
number: {
|
||||||
number: [100],
|
number: [14],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
fontSize: 26
|
fontSize: 30
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今日减员数',
|
||||||
|
number: {
|
||||||
|
number: [1],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -131,44 +131,36 @@ export default {
|
||||||
ranking: {
|
ranking: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '周口',
|
name: '下堡坪村',
|
||||||
value: 55
|
value: 55
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '南阳',
|
name: '蛟龙寺村',
|
||||||
value: 120
|
value: 120
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '西峡',
|
name: '九山村',
|
||||||
value: 78
|
value: 78
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '驻马店',
|
name: '马宗岭村',
|
||||||
value: 66
|
value: 12
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '新乡',
|
name: '赵勉河村',
|
||||||
value: 80
|
value: 32
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '新乡2',
|
name: '秀水村',
|
||||||
value: 80
|
value: 16
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '新乡3',
|
name: '磨坪村',
|
||||||
value: 80
|
value: 23
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '新乡4',
|
name: '十八湾村',
|
||||||
value: 80
|
value: 32
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '新乡5',
|
|
||||||
value: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '新乡6',
|
|
||||||
value: 80
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
carousel: 'single',
|
carousel: 'single',
|
||||||
|
|
@ -266,7 +258,7 @@ export default {
|
||||||
height: 120px;
|
height: 120px;
|
||||||
span {
|
span {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 14px;
|
font-size: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
@ -280,4 +272,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bt-zh {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,169 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="centerLeft1">
|
|
||||||
<div class="bg-color-black">
|
|
||||||
<div class="d-flex pt-2 pl-2">
|
|
||||||
<span>
|
|
||||||
<icon name="chart-bar" class="text-icon"></icon>
|
|
||||||
</span>
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="fs-xl text mx-2">任务通过率</span>
|
|
||||||
<dv-decoration-3 class="dv-dec-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex jc-center">
|
|
||||||
<CenterLeft1Chart />
|
|
||||||
</div>
|
|
||||||
<!-- 4个主要的数据 -->
|
|
||||||
<div class="bottom-data">
|
|
||||||
<div
|
|
||||||
class="item-box mt-2"
|
|
||||||
v-for="(item, index) in numberData"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="coin">￥</span>
|
|
||||||
<dv-digital-flop class="dv-digital-flop" :config="item.number" />
|
|
||||||
</div>
|
|
||||||
<p class="text" style="text-align: center;">
|
|
||||||
{{ item.text }}
|
|
||||||
<span class="colorYellow">(件)</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
numberData: [
|
|
||||||
{
|
|
||||||
number: {
|
|
||||||
number: [15],
|
|
||||||
toFixed: 1,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 24
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: '今日构建总量'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
number: {
|
|
||||||
number: [1144],
|
|
||||||
toFixed: 1,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 24
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: '总共完成数量'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
number: {
|
|
||||||
number: [361],
|
|
||||||
toFixed: 1,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 24
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: '正在编译数量'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
number: {
|
|
||||||
number: [157],
|
|
||||||
toFixed: 1,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 24
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: '未通过数量'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
CenterLeft1Chart
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.changeTiming()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTiming() {
|
|
||||||
setInterval(() => {
|
|
||||||
this.changeNumber()
|
|
||||||
}, 3000)
|
|
||||||
},
|
|
||||||
changeNumber() {
|
|
||||||
this.numberData.forEach((item, index) => {
|
|
||||||
item.number.number[0] += ++index
|
|
||||||
item.number = { ...item.number }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$box-width: 300px;
|
|
||||||
$box-height: 410px;
|
|
||||||
|
|
||||||
#centerLeft1 {
|
|
||||||
padding: 16px;
|
|
||||||
height: $box-height;
|
|
||||||
width: $box-width;
|
|
||||||
border-radius: 10px;
|
|
||||||
.bg-color-black {
|
|
||||||
height: $box-height - 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
color: #c3cbde;
|
|
||||||
}
|
|
||||||
.dv-dec-3 {
|
|
||||||
position: relative;
|
|
||||||
width: 100px;
|
|
||||||
height: 20px;
|
|
||||||
top: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-data {
|
|
||||||
.item-box {
|
|
||||||
& > div {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
font-size: 14px;
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
width: 50%;
|
|
||||||
color: #d3d6dd;
|
|
||||||
.dv-digital-flop {
|
|
||||||
width: 120px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
// 金币
|
|
||||||
.coin {
|
|
||||||
position: relative;
|
|
||||||
top: 6px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #ffc107;
|
|
||||||
}
|
|
||||||
.colorYellow {
|
|
||||||
color: yellowgreen;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="centerRight1">
|
|
||||||
<div class="bg-color-black">
|
|
||||||
<div class="d-flex pt-2 pl-2">
|
|
||||||
<span>
|
|
||||||
<icon name="chart-line" class="text-icon"></icon>
|
|
||||||
</span>
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="fs-xl text mx-2">任务完成排行榜</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex jc-center body-box">
|
|
||||||
<dv-scroll-board class="dv-scr-board" :config="config" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['组件', '分支', '覆盖率'],
|
|
||||||
data: [
|
|
||||||
['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
|
|
||||||
['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
|
||||||
['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
|
||||||
['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
|
||||||
['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
|
||||||
['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
|
||||||
['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
|
||||||
['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
|
||||||
['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
|
||||||
['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
|
|
||||||
],
|
|
||||||
rowNum: 7, //表格行数
|
|
||||||
headerHeight: 35,
|
|
||||||
headerBGC: '#0f1325', //表头
|
|
||||||
oddRowBGC: '#0f1325', //奇数行
|
|
||||||
evenRowBGC: '#171c33', //偶数行
|
|
||||||
index: true,
|
|
||||||
columnWidth: [50],
|
|
||||||
align: ['center']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$box-height: 410px;
|
|
||||||
$box-width: 300px;
|
|
||||||
#centerRight1 {
|
|
||||||
padding: 16px;
|
|
||||||
padding-top: 20px;
|
|
||||||
height: $box-height;
|
|
||||||
width: $box-width;
|
|
||||||
border-radius: 5px;
|
|
||||||
.bg-color-black {
|
|
||||||
height: $box-height - 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
color: #c3cbde;
|
|
||||||
}
|
|
||||||
.body-box {
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
.dv-scr-board {
|
|
||||||
width: 270px;
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="centerRight2">
|
|
||||||
<div class="bg-color-black">
|
|
||||||
<div class="d-flex pt-2 pl-2">
|
|
||||||
<span>
|
|
||||||
<icon name="align-left" class="text-icon"></icon>
|
|
||||||
</span>
|
|
||||||
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex ai-center flex-column body-box">
|
|
||||||
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
|
||||||
<centerRight2Chart1 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '南阳',
|
|
||||||
value: 167
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周口',
|
|
||||||
value: 67
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '漯河',
|
|
||||||
value: 123
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '郑州',
|
|
||||||
value: 55
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '西峡',
|
|
||||||
value: 98
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: { centerRight2Chart1 }
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
#centerRight2 {
|
|
||||||
$box-height: 410px;
|
|
||||||
$box-width: 340px;
|
|
||||||
padding: 5px;
|
|
||||||
height: $box-height;
|
|
||||||
width: $box-width;
|
|
||||||
border-radius: 5px;
|
|
||||||
.bg-color-black {
|
|
||||||
padding: 5px;
|
|
||||||
height: $box-height;
|
|
||||||
width: $box-width;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
color: #c3cbde;
|
|
||||||
}
|
|
||||||
.body-box {
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
.dv-cap-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<icon name="chart-bar" class="text-icon"></icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">护理等级</span>
|
||||||
|
<dv-decoration-3 class="dv-dec-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<CenterLeft1Chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CenterLeft1Chart
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-width: 300px;
|
||||||
|
$box-height: 410px;
|
||||||
|
|
||||||
|
#centerLeft1 {
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
min-width: $box-width;
|
||||||
|
border-radius: 10px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dv-dec-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-data {
|
||||||
|
.item-box {
|
||||||
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
// 金币
|
||||||
|
.coin {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
|
||||||
<div id="index" ref="appRef" :key="componentKey">
|
<div id="index" ref="appRef" :key="componentKey">
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
|
|
@ -8,9 +10,9 @@
|
||||||
<div class="d-flex jc-center">
|
<div class="d-flex jc-center">
|
||||||
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
||||||
<div class="title" @click="handleWelcome" style="cursor: pointer;">
|
<div class="title" @click="handleWelcome" style="cursor: pointer;">
|
||||||
<span class="title-text" style="display: inline-block;width: 80%;">
|
<span class="title-text" style="display: inline-block;width: 100%;line-height: 2;">
|
||||||
下堡坪乡农村福利院长者管理系统
|
下堡坪乡农村福利院长者管理系统
|
||||||
</span>
|
</span>
|
||||||
<dv-decoration-6
|
<dv-decoration-6
|
||||||
class="dv-dec-6"
|
class="dv-dec-6"
|
||||||
:reverse="true"
|
:reverse="true"
|
||||||
|
|
@ -29,16 +31,22 @@
|
||||||
<!-- 第二行 -->
|
<!-- 第二行 -->
|
||||||
<div class="d-flex jc-between px-2">
|
<div class="d-flex jc-between px-2">
|
||||||
<div class="d-flex aside-width">
|
<div class="d-flex aside-width">
|
||||||
<div class="react-left ml-4 react-l-s">
|
<!-- <div class="react-left ml-4 react-l-s">
|
||||||
<span class="react-left"></span>
|
<span class="react-left"></span>
|
||||||
<span class="text">数据分析1</span>
|
<span class="text">数据分析1</span>
|
||||||
|
</div> -->
|
||||||
|
<div class="react-left ml-3 fw-b" style="background-color: #1a5cd7;">
|
||||||
|
<span class="text">数据统计</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-left ml-3">
|
<div class="react-left ml-3">
|
||||||
<span class="text">数据分析2</span>
|
<span class="text">数据查询</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-left ml-3">
|
||||||
|
<span class="text">荣誉展示</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex aside-width">
|
<!-- <div class="d-flex aside-width">
|
||||||
<div class="react-right bg-color-blue mr-3">
|
<div class="react-right mr-3">
|
||||||
<span class="text fw-b">数据统计</span>
|
<span class="text fw-b">数据统计</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-right mr-4 react-l-s">
|
<div class="react-right mr-4 react-l-s">
|
||||||
|
|
@ -47,6 +55,21 @@
|
||||||
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="d-flex aside-width">
|
||||||
|
<div class="react-right mr-3 react-l-s" style="width: 250px;">
|
||||||
|
<span class="text ">实时监控</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-right mr-3 react-l-s" style="width: 250px;">
|
||||||
|
<span class="text ">健康预警</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-right mr-4 react-l-s" style="width: 380px;">
|
||||||
|
<span class="react-after"></span>
|
||||||
|
<span
|
||||||
|
class="text"
|
||||||
|
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -55,12 +78,12 @@
|
||||||
<div class="content-box">
|
<div class="content-box">
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-12>
|
<dv-border-box-12>
|
||||||
<centerLeft1 />
|
<xb />
|
||||||
</dv-border-box-12>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-12>
|
<dv-border-box-12>
|
||||||
<centerLeft2 />
|
<nltj />
|
||||||
</dv-border-box-12>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
<!-- 中间 -->
|
<!-- 中间 -->
|
||||||
|
|
@ -69,12 +92,14 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 中间 -->
|
<!-- 中间 -->
|
||||||
<div>
|
<div>
|
||||||
<centerRight2 />
|
<dv-border-box-12>
|
||||||
|
<hldj />
|
||||||
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-13>
|
<dv-border-box-12>
|
||||||
<centerRight1 />
|
<jzfp />
|
||||||
</dv-border-box-13>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -91,23 +116,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</scale-box>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import drawMixin from "../../utils/drawMixin";
|
import drawMixin from '../../utils/drawMixin'
|
||||||
import useDraw from '@/utils/useDraw'
|
import useDraw from '@/utils/useDraw'
|
||||||
import { formatTime } from '../../utils/index.js'
|
import { formatTime } from '../../utils/index.js'
|
||||||
import centerLeft1 from './centerLeft1'
|
import hldj from './hldj'
|
||||||
import centerLeft2 from './centerLeft2'
|
import xb from './xb'
|
||||||
import centerRight1 from './centerRight1'
|
import jzfp from './jzfp'
|
||||||
import centerRight2 from './centerRight2'
|
import nltj from './nltj'
|
||||||
import center from './center'
|
import center from './center'
|
||||||
import bottomLeft from './bottomLeft'
|
import bottomLeft from './bottomLeft'
|
||||||
import bottomRight from './bottomRight'
|
import bottomRight from './bottomRight'
|
||||||
|
import ScaleBox from "vue2-scale-box";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [ drawMixin ],
|
mixins: [ drawMixin ],
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
timing: null,
|
timing: null,
|
||||||
loading: true,
|
loading: true,
|
||||||
|
|
@ -116,19 +144,20 @@ export default {
|
||||||
dateWeek: null,
|
dateWeek: null,
|
||||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||||
decorationColor: ['#568aea', '#000000'],
|
decorationColor: ['#568aea', '#000000'],
|
||||||
componentKey: 0,
|
componentKey: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
centerLeft1,
|
ScaleBox,
|
||||||
centerLeft2,
|
hldj,
|
||||||
centerRight1,
|
xb,
|
||||||
centerRight2,
|
jzfp,
|
||||||
|
nltj,
|
||||||
center,
|
center,
|
||||||
bottomLeft,
|
bottomLeft,
|
||||||
bottomRight
|
bottomRight
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted () {
|
||||||
this.timeFn()
|
this.timeFn()
|
||||||
this.cancelLoading()
|
this.cancelLoading()
|
||||||
|
|
||||||
|
|
@ -136,8 +165,13 @@ export default {
|
||||||
|
|
||||||
// 调用 useDraw 返回的方法 屏幕适应
|
// 调用 useDraw 返回的方法 屏幕适应
|
||||||
windowDraw();
|
windowDraw();
|
||||||
|
console.log(111)
|
||||||
calcRate();
|
calcRate();
|
||||||
this.componentKey += 1;
|
console.log(222)
|
||||||
|
this.componentKey += 1
|
||||||
|
console.log(333)
|
||||||
|
|
||||||
|
// this.fullscreenCheck()
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
clearInterval(this.timing)
|
clearInterval(this.timing)
|
||||||
|
|
@ -146,14 +180,14 @@ export default {
|
||||||
unWindowDraw();
|
unWindowDraw();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
timeFn() {
|
timeFn () {
|
||||||
this.timing = setInterval(() => {
|
this.timing = setInterval(() => {
|
||||||
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
||||||
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
||||||
this.dateWeek = this.weekday[new Date().getDay()]
|
this.dateWeek = this.weekday[new Date().getDay()]
|
||||||
}, 1000)
|
}, 1000)
|
||||||
},
|
},
|
||||||
cancelLoading() {
|
cancelLoading () {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}, 500)
|
}, 500)
|
||||||
|
|
@ -163,10 +197,40 @@ export default {
|
||||||
path: '/welcome'
|
path: '/welcome'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
fullscreenCheck() {
|
||||||
|
if (!document.fullscreenElement &&
|
||||||
|
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
|
||||||
|
if (document.documentElement.requestFullscreen) {
|
||||||
|
document.documentElement.requestFullscreen();
|
||||||
|
} else if (document.documentElement.msRequestFullscreen) {
|
||||||
|
document.documentElement.msRequestFullscreen();
|
||||||
|
} else if (document.documentElement.mozRequestFullScreen) {
|
||||||
|
document.documentElement.mozRequestFullScreen();
|
||||||
|
} else if (document.documentElement.webkitRequestFullscreen) {
|
||||||
|
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../assets/scss/index.scss';
|
@import '../../assets/scss/index.scss';
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<icon name="chart-pie" class="text-icon"></icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">精准扶贫</span>
|
||||||
|
<dv-decoration-1 class="dv-dec-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<CenterRight2Chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CenterRight2Chart from '@/components/echart/centerRight/centerRight2Chart'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CenterRight2Chart
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#centerLeft1 {
|
||||||
|
$box-width: 270px;
|
||||||
|
$box-height: 410px;
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dv-dec-1 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<icon name="chart-bar" class="text-icon"></icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">是否在院</span>
|
||||||
|
<dv-decoration-3 class="dv-dec-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<CenterRight1Chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CenterRight1Chart from '@/components/echart/centerRight/centerRight1Chart'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CenterRight1Chart
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-width: 380px;
|
||||||
|
$box-height: 410px;
|
||||||
|
|
||||||
|
#centerLeft1 {
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
min-width: $box-width;
|
||||||
|
border-radius: 10px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dv-dec-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-data {
|
||||||
|
.item-box {
|
||||||
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
// 金币
|
||||||
|
.coin {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<icon name="chart-pie" class="text-icon"></icon>
|
<icon name="chart-pie" class="text-icon"></icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="fs-xl text mx-2">地图数据</span>
|
<span class="fs-xl text mx-2">性别</span>
|
||||||
<dv-decoration-1 class="dv-dec-1" />
|
<dv-decoration-1 class="dv-dec-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,11 +28,11 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#centerLeft1 {
|
#centerLeft1 {
|
||||||
$box-width: 300px;
|
$box-width: 270px;
|
||||||
$box-height: 410px;
|
$box-height: 410px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
height: $box-height;
|
height: $box-height;
|
||||||
min-width: $box-width;
|
width: $box-width;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
.bg-color-black {
|
.bg-color-black {
|
||||||
height: $box-height - 30px;
|
height: $box-height - 30px;
|
||||||
|
|
@ -40,6 +40,7 @@ export default {
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
color: #c3cbde;
|
color: #c3cbde;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.dv-dec-1 {
|
.dv-dec-1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -56,4 +57,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
<template>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<div class="table-page-search-wrapper">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-row :gutter="48">
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-form-item label="村组">
|
||||||
|
<a-select
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="queryParam.village"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择村组">
|
||||||
|
<a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-form-item label="年龄区间">
|
||||||
|
<a-select v-model="queryParam.ageRange" placeholder="请选择年龄区间" default-value="null" style="width: 100%">
|
||||||
|
<a-select-option value="1">50岁以下</a-select-option>
|
||||||
|
<a-select-option value="2">50岁-59岁</a-select-option>
|
||||||
|
<a-select-option value="3">60岁-69岁</a-select-option>
|
||||||
|
<a-select-option value="4">70岁-79岁</a-select-option>
|
||||||
|
<a-select-option value="5">80岁-89岁</a-select-option>
|
||||||
|
<a-select-option value="6">90岁以上</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-form-item label="性别">
|
||||||
|
<a-select v-model="queryParam.gender" placeholder="请选择性别" default-value="null" style="width: 100%">
|
||||||
|
<a-select-option value="1">男</a-select-option>
|
||||||
|
<a-select-option value="0">女</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="48">
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-form-item label="护理等级">
|
||||||
|
<a-select
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="queryParam.nursingLevel"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择护理等级">
|
||||||
|
<a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-form-item label="是否在院">
|
||||||
|
<a-select v-model="queryParam.isInHospital" placeholder="请选择" default-value="null" style="width: 100%">
|
||||||
|
<a-select-option value="1">是</a-select-option>
|
||||||
|
<a-select-option value="0">否</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||||
|
<a-button style="margin-left: 8px" @click="() => {queryParam = {}, $refs.table.refresh(true)}">重置</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" >
|
||||||
|
<template slot="bringTime" slot-scope="text, record">
|
||||||
|
{{ record.bringTime | moment('YYYY-MM-DD') }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="sex" slot-scope="text, record">
|
||||||
|
{{ record.sex == 1 ? '男' : '女' }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="isInHospital" slot-scope="text, record">
|
||||||
|
{{ record.isInHospital == 1 ? '是' : '否' }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="title" style="font-weight: bold;">
|
||||||
|
合计人数：{{ totalCount }}
|
||||||
|
</template>
|
||||||
|
</s-table>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { STable } from '@/components'
|
||||||
|
import { personPage } from '@/api/person/personSupport'
|
||||||
|
import {
|
||||||
|
dictionaryDropDown
|
||||||
|
} from '@/api/sys/dictionaryItem'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
STable
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 查询参数
|
||||||
|
queryParam: { village: '', ageRange: '', gender: '', nursingLevel: '', isInHospital: '' },
|
||||||
|
type: 1,
|
||||||
|
villageData: [],
|
||||||
|
nursingLevelData: [],
|
||||||
|
totalCount: 0,
|
||||||
|
// 表头
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
width: 200,
|
||||||
|
dataIndex: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '年龄',
|
||||||
|
dataIndex: 'age'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '村组',
|
||||||
|
dataIndex: 'villageName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '护理等级',
|
||||||
|
dataIndex: 'nursingLevelName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '供养类型',
|
||||||
|
dataIndex: 'supportTypeName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '性别',
|
||||||
|
dataIndex: 'sex',
|
||||||
|
scopedSlots: { customRender: 'sex' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '入院时间',
|
||||||
|
dataIndex: 'bringTime',
|
||||||
|
scopedSlots: { customRender: 'bringTime' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '居住房间',
|
||||||
|
dataIndex: 'roomBed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否在院',
|
||||||
|
dataIndex: 'isInHospital',
|
||||||
|
scopedSlots: { customRender: 'isInHospital' }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// 加载数据方法 必须为 Promise 对象
|
||||||
|
loadData: (parameter) => {
|
||||||
|
return personPage(Object.assign(parameter, this.queryParam,
|
||||||
|
{ type: this.type }
|
||||||
|
)).then((res) => {
|
||||||
|
this.totalCount = res.total
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 生命周期 - 创建完成
|
||||||
|
created () {
|
||||||
|
this.dictionaryDropDown()
|
||||||
|
},
|
||||||
|
// 生命周期 - 销毁完成
|
||||||
|
destroyed () { },
|
||||||
|
// 监控data中的数据变化
|
||||||
|
watch: {
|
||||||
|
$route (to, from) { // to是前往的路由 from是去往的路由 同一个组件只会渲染一次
|
||||||
|
this.$refs.table.refresh(true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 详情
|
||||||
|
handleDetail (record) {
|
||||||
|
this.$router.push({
|
||||||
|
path: '/person/support/detail',
|
||||||
|
query: {
|
||||||
|
type: this.type,
|
||||||
|
id: record.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取字典数据
|
||||||
|
*/
|
||||||
|
dictionaryDropDown () {
|
||||||
|
// 所在村
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0040'
|
||||||
|
}).then(res => {
|
||||||
|
this.villageData = res.data
|
||||||
|
})
|
||||||
|
// 护理等级
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0021'
|
||||||
|
}).then(res => {
|
||||||
|
this.nursingLevelData = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -5,15 +5,18 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</a-card> -->
|
</a-card> -->
|
||||||
<myHome></myHome>
|
<!-- <myHome></myHome> -->
|
||||||
|
<dataSupport></dataSupport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import MyHome from '@/views/data/index.vue'
|
import MyHome from '@/views/data/index.vue'
|
||||||
|
import DataSupport from '@/views/index/dataSupportList.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MyHome
|
MyHome,
|
||||||
|
DataSupport
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {}
|
return {}
|
||||||
|
|
|
||||||
|
|
@ -35,15 +35,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-row>
|
<!--
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item ref="phone" label="联系方式" prop="phone">
|
|
||||||
<a-input v-model="form.phone" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<a-row v-if="form.type == 1">
|
<a-row v-if="form.type == 1">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
|
<a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
|
||||||
|
|
@ -62,30 +54,33 @@
|
||||||
<a-input v-model="form.disabilityLevel" />
|
<a-input v-model="form.disabilityLevel" />
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>-->
|
||||||
|
|
||||||
<a-row>
|
|
||||||
<a-col>
|
|
||||||
<a-form-model-item
|
|
||||||
ref="residenceAddress"
|
|
||||||
label="户籍地址"
|
|
||||||
prop="residenceAddress"
|
|
||||||
:label-col="{ span: 2 }"
|
|
||||||
:wrapper-col="{ span: 21 }">
|
|
||||||
<a-input v-model="form.residenceAddress" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<template v-if="form.type == 2">
|
<template v-if="form.type == 2">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="phone" label="联系方式" prop="phone">
|
||||||
|
<a-input v-model="form.phone" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item
|
<a-form-model-item
|
||||||
ref="health"
|
ref="residenceAddress"
|
||||||
label="身体状况"
|
label="户籍地址"
|
||||||
prop="health"
|
prop="residenceAddress"
|
||||||
:label-col="{ span: 2 }"
|
:label-col="{ span: 2 }"
|
||||||
:wrapper-col="{ span: 21 }">
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-input v-model="form.residenceAddress" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item ref="health" label="身体状况" prop="health" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
<a-input v-model="form.health" />
|
<a-input v-model="form.health" />
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
@ -113,6 +108,47 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="form.type == 1">
|
<template v-if="form.type == 1">
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item
|
||||||
|
ref="nursingLevel"
|
||||||
|
label="护理等级"
|
||||||
|
prop="nursingLevel"
|
||||||
|
:label-col="{ span: 2 }"
|
||||||
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-select v-model="form.nursingLevel" style="width: 100%" placeholder="请选择护理等级">
|
||||||
|
<a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item ref="village" label="所在村" prop="village" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
|
<a-select v-model="form.village" style="width: 100%" placeholder="请选择存">
|
||||||
|
<a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item
|
||||||
|
ref="residenceVillage"
|
||||||
|
label="归属村组"
|
||||||
|
prop="residenceVillage"
|
||||||
|
:label-col="{ span: 2 }"
|
||||||
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-input v-model="form.residenceVillage" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
|
|
@ -126,7 +162,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-row>
|
<!-- <a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
<a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
<a-textarea :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.selfCare" />
|
<a-textarea :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.selfCare" />
|
||||||
|
|
@ -134,7 +170,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-divider orientation="left">特困供养金发放金额</a-divider>
|
<a-divider orientation="left">特困供养金发放金额</a-divider>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="bringTime" label="纳入时间" prop="bringTime">
|
<a-form-model-item ref="bringTime" label="纳入时间" prop="bringTime">
|
||||||
<a-date-picker v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="纳入时间" />
|
<a-date-picker v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="纳入时间" />
|
||||||
|
|
@ -167,10 +203,29 @@
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
-->
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" :label-col="{ span: 5 }">
|
<a-form-model-item ref="isInHospital" label="是否在院" prop="isInHospital" >
|
||||||
|
<a-radio-group v-model="form.isInHospital">
|
||||||
|
<a-radio :value="1">
|
||||||
|
是
|
||||||
|
</a-radio>
|
||||||
|
<a-radio :value="0">
|
||||||
|
否
|
||||||
|
</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" v-show="form.isInHospital == 0">
|
||||||
|
<a-form-model-item ref="hospitalMessage" label="住院信息" prop="hospitalMessage">
|
||||||
|
<a-input v-model="form.hospitalMessage" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" >
|
||||||
<a-radio-group v-model="form.ifHelpPoor">
|
<a-radio-group v-model="form.ifHelpPoor">
|
||||||
<a-radio :value="1">
|
<a-radio :value="1">
|
||||||
是
|
是
|
||||||
|
|
@ -182,21 +237,26 @@
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
|
||||||
<template v-if="form.id && form.type == 1">
|
|
||||||
<a-divider orientation="left">详细信息</a-divider>
|
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col :span="12" >
|
||||||
<a-form-model-item
|
<a-form-model-item ref="relativeContact" label="亲属联系方式" prop="relativeContact">
|
||||||
ref="residenceVillage"
|
<a-input v-model="form.relativeContact" />
|
||||||
label="户籍村属"
|
|
||||||
prop="residenceVillage"
|
|
||||||
:label-col="{ span: 2 }"
|
|
||||||
:wrapper-col="{ span: 21 }">
|
|
||||||
<a-input v-model="form.residenceVillage" />
|
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="bringTime" label="入住福利院时间" prop="bringTime">
|
||||||
|
<a-date-picker v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="入住福利院时间" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="form.id && form.type == 1">
|
||||||
|
<a-divider orientation="left">详细信息</a-divider>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item
|
<a-form-model-item
|
||||||
|
|
@ -422,11 +482,14 @@
|
||||||
age: null,
|
age: null,
|
||||||
sex: null,
|
sex: null,
|
||||||
phone: '',
|
phone: '',
|
||||||
supportType: 2,
|
supportType: 1,
|
||||||
residenceAddress: '',
|
residenceAddress: '',
|
||||||
ifDisabled: 0,
|
ifDisabled: 0,
|
||||||
ifHelpPoor: 0,
|
ifHelpPoor: 0,
|
||||||
|
isInHospital: 1,
|
||||||
maritalStatus: null,
|
maritalStatus: null,
|
||||||
|
nursingLevel: null,
|
||||||
|
village: null,
|
||||||
familyList: [
|
familyList: [
|
||||||
// { name: 'Tom', relation: '20', phone: '13872572250', workInfo:'ces' }
|
// { name: 'Tom', relation: '20', phone: '13872572250', workInfo:'ces' }
|
||||||
]
|
]
|
||||||
|
|
@ -434,6 +497,8 @@
|
||||||
},
|
},
|
||||||
supportTypeData: [],
|
supportTypeData: [],
|
||||||
maritalStatusData: [],
|
maritalStatusData: [],
|
||||||
|
nursingLevelData: [],
|
||||||
|
villageData: [],
|
||||||
rules: {
|
rules: {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -455,6 +520,16 @@
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入身份证号',
|
message: '请输入身份证号',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
nursingLevel: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择护理等级',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
village: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所在村',
|
||||||
|
trigger: 'blur'
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -484,10 +559,10 @@
|
||||||
|
|
||||||
// 动态回显身份证号相关信息
|
// 动态回显身份证号相关信息
|
||||||
this.idCardNoBlur()
|
this.idCardNoBlur()
|
||||||
this.form.supportType = parseInt(form.supportType)
|
// this.form.supportType = parseInt(form.supportType)
|
||||||
this.form.maritalStatus = parseInt(form.maritalStatus)
|
// this.form.maritalStatus = parseInt(form.maritalStatus)
|
||||||
|
|
||||||
this.dataLoaded = true;
|
this.dataLoaded = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onSubmit (e) {
|
onSubmit (e) {
|
||||||
|
|
@ -502,16 +577,16 @@
|
||||||
if (!errors) {
|
if (!errors) {
|
||||||
const partOneArr = []
|
const partOneArr = []
|
||||||
if (values[`${PARTONE}FamilyName`]) {
|
if (values[`${PARTONE}FamilyName`]) {
|
||||||
(values[`${PARTONE}FamilyName`]).forEach((item, index) => {
|
(values[`${PARTONE}FamilyName`]).forEach((item, index) => {
|
||||||
const obj = {
|
const obj = {
|
||||||
familyName: item,
|
familyName: item,
|
||||||
id: values[`${PARTONE}Id`][index],
|
id: values[`${PARTONE}Id`][index],
|
||||||
relation: values[`${PARTONE}Relation`][index],
|
relation: values[`${PARTONE}Relation`][index],
|
||||||
phone: values[`${PARTONE}Phone`][index],
|
phone: values[`${PARTONE}Phone`][index],
|
||||||
workInfo: values[`${PARTONE}WorkInfo`][index]
|
workInfo: values[`${PARTONE}WorkInfo`][index]
|
||||||
}
|
}
|
||||||
partOneArr.push(obj)
|
partOneArr.push(obj)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.form.familyList = partOneArr
|
this.form.familyList = partOneArr
|
||||||
}
|
}
|
||||||
|
|
@ -582,6 +657,18 @@
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.maritalStatusData = res.data
|
this.maritalStatusData = res.data
|
||||||
})
|
})
|
||||||
|
// 所在村
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0040'
|
||||||
|
}).then(res => {
|
||||||
|
this.villageData = res.data
|
||||||
|
})
|
||||||
|
// 护理等级
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0021'
|
||||||
|
}).then(res => {
|
||||||
|
this.nursingLevelData = res.data
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 返回
|
// 返回
|
||||||
goback () {
|
goback () {
|
||||||
|
|
|
||||||
|
|
@ -35,16 +35,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-row>
|
<!-- <a-row v-if="form.type == 1">
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item ref="phone" label="联系电话" prop="phone">
|
|
||||||
<a-input disabled v-model="form.phone" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<a-row v-if="form.type == 1">
|
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
|
<a-form-model-item ref="ifDisabled" label="是否残疾" prop="ifDisabled">
|
||||||
<a-radio-group v-model="form.ifDisabled" disabled>
|
<a-radio-group v-model="form.ifDisabled" disabled>
|
||||||
|
|
@ -62,22 +53,28 @@
|
||||||
<a-input disabled v-model="form.disabilityLevel" />
|
<a-input disabled v-model="form.disabilityLevel" />
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row> -->
|
||||||
|
|
||||||
<a-row>
|
|
||||||
<a-col>
|
|
||||||
<a-form-model-item
|
|
||||||
ref="residenceAddress"
|
|
||||||
label="户籍地址"
|
|
||||||
prop="residenceAddress"
|
|
||||||
:label-col="{ span: 2 }"
|
|
||||||
:wrapper-col="{ span: 21 }">
|
|
||||||
<a-input disabled v-model="form.residenceAddress" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<template v-if="form.type == 2">
|
<template v-if="form.type == 2">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="phone" label="联系电话" prop="phone">
|
||||||
|
<a-input disabled v-model="form.phone" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item
|
||||||
|
ref="residenceAddress"
|
||||||
|
label="户籍地址"
|
||||||
|
prop="residenceAddress"
|
||||||
|
:label-col="{ span: 2 }"
|
||||||
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-input disabled v-model="form.residenceAddress" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item
|
<a-form-model-item
|
||||||
|
|
@ -113,7 +110,47 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="form.type == 1">
|
<template v-if="form.type == 1">
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item
|
||||||
|
ref="nursingLevel"
|
||||||
|
label="护理等级"
|
||||||
|
prop="nursingLevel"
|
||||||
|
:label-col="{ span: 2 }"
|
||||||
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-select disabled v-model="form.nursingLevel" style="width: 100%" placeholder="请选择护理等级">
|
||||||
|
<a-select-option v-for="(item, index) in nursingLevelData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item ref="village" label="所在村" prop="village" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
|
<a-select disabled v-model="form.village" style="width: 100%" placeholder="请选择存">
|
||||||
|
<a-select-option v-for="(item, index) in villageData" :key="index" :value="item.value" :lable="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col>
|
||||||
|
<a-form-model-item
|
||||||
|
ref="residenceVillage"
|
||||||
|
label="归属村组"
|
||||||
|
prop="residenceVillage"
|
||||||
|
:label-col="{ span: 2 }"
|
||||||
|
:wrapper-col="{ span: 21 }">
|
||||||
|
<a-input v-model="form.residenceVillage" disabled />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item ref="supportType" label="供养方式" prop="supportType" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
<a-form-model-item ref="supportType" label="供养方式" prop="supportType" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
|
|
@ -126,6 +163,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
|
<!--
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
<a-form-model-item ref="selfCare" label="自理情况登记" prop="selfCare" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
||||||
|
|
@ -167,10 +205,29 @@
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
-->
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" :label-col="{ span: 5 }">
|
<a-form-model-item ref="isInHospital" label="是否在院" prop="isInHospital" >
|
||||||
|
<a-radio-group v-model="form.isInHospital" disabled>
|
||||||
|
<a-radio :value="1">
|
||||||
|
是
|
||||||
|
</a-radio>
|
||||||
|
<a-radio :value="0">
|
||||||
|
否
|
||||||
|
</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" v-show="form.isInHospital == 0">
|
||||||
|
<a-form-model-item ref="hospitalMessage" label="住院信息" prop="hospitalMessage">
|
||||||
|
<a-input v-model="form.hospitalMessage" disabled/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="ifHelpPoor" label="是否精准扶贫户" prop="ifHelpPoor" >
|
||||||
<a-radio-group v-model="form.ifHelpPoor" disabled>
|
<a-radio-group v-model="form.ifHelpPoor" disabled>
|
||||||
<a-radio :value="1">
|
<a-radio :value="1">
|
||||||
是
|
是
|
||||||
|
|
@ -182,21 +239,23 @@
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
|
||||||
<template v-if="form.id && form.type == 1">
|
|
||||||
<a-divider orientation="left">详细信息</a-divider>
|
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col :span="12" >
|
||||||
<a-form-model-item
|
<a-form-model-item ref="relativeContact" label="亲属联系方式" prop="relativeContact">
|
||||||
ref="residenceVillage"
|
<a-input v-model="form.relativeContact" disabled />
|
||||||
label="户籍村属"
|
|
||||||
prop="residenceVillage"
|
|
||||||
:label-col="{ span: 2 }"
|
|
||||||
:wrapper-col="{ span: 21 }">
|
|
||||||
<a-input disabled v-model="form.residenceVillage" />
|
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item ref="bringTime" label="入住福利院时间" prop="bringTime">
|
||||||
|
<a-date-picker disabled v-model="form.bringTime" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="入住福利院时间" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-if="form.id && form.type == 1">
|
||||||
|
<a-divider orientation="left">详细信息</a-divider>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-form-model-item
|
<a-form-model-item
|
||||||
|
|
@ -426,14 +485,18 @@
|
||||||
residenceAddress: '',
|
residenceAddress: '',
|
||||||
ifDisabled: 0,
|
ifDisabled: 0,
|
||||||
ifHelpPoor: 0,
|
ifHelpPoor: 0,
|
||||||
|
isInHospital: 1,
|
||||||
maritalStatus: null,
|
maritalStatus: null,
|
||||||
|
nursingLevel: null,
|
||||||
|
village: null,
|
||||||
familyList: [
|
familyList: [
|
||||||
{ name: 'Tom', relation: '20', phone: '13872572250', workInfo: 'ces' }
|
|
||||||
]
|
]
|
||||||
// disabilityLevel:''
|
// disabilityLevel:''
|
||||||
},
|
},
|
||||||
supportTypeData: [],
|
supportTypeData: [],
|
||||||
maritalStatusData: [],
|
maritalStatusData: [],
|
||||||
|
nursingLevelData: [],
|
||||||
|
villageData: [],
|
||||||
rules: {
|
rules: {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -597,6 +660,18 @@
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.maritalStatusData = res.data
|
this.maritalStatusData = res.data
|
||||||
})
|
})
|
||||||
|
// 所在村
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0040'
|
||||||
|
}).then(res => {
|
||||||
|
this.villageData = res.data
|
||||||
|
})
|
||||||
|
// 护理等级
|
||||||
|
dictionaryDropDown({
|
||||||
|
dictionaryCode: '0021'
|
||||||
|
}).then(res => {
|
||||||
|
this.nursingLevelData = res.data
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 返回
|
// 返回
|
||||||
goback () {
|
goback () {
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
<a-button v-if="hasPerm('person:support:add')" type="primary" icon="plus" @click="handleCreate" >新增</a-button>
|
<a-button v-if="hasPerm('person:support:add')" type="primary" icon="plus" @click="handleCreate" >新增</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-form>
|
</a-form>
|
||||||
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" >
|
<s-table ref="table" :columns="type==1?columns:columns2" :data="loadData" :rowKey="(record) => record.id" >
|
||||||
<template slot="bringTime" slot-scope="text, record">
|
<template slot="bringTime" slot-scope="text, record">
|
||||||
{{ record.bringTime | moment('YYYY-MM-DD') }}
|
{{ record.bringTime | moment('YYYY-MM-DD') }}
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -63,6 +63,42 @@ export default {
|
||||||
type: 1,
|
type: 1,
|
||||||
// 表头
|
// 表头
|
||||||
columns: [
|
columns: [
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
width: 200,
|
||||||
|
dataIndex: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '身份证号',
|
||||||
|
dataIndex: 'idCardNo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '村组',
|
||||||
|
dataIndex: 'villageName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '护理等级',
|
||||||
|
dataIndex: 'nursingLevelName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '供养类型',
|
||||||
|
dataIndex: 'supportTypeName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '入院时间',
|
||||||
|
dataIndex: 'bringTime',
|
||||||
|
scopedSlots: { customRender: 'bringTime' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'operation',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: { customRender: 'action' }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 表头
|
||||||
|
columns2: [
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
width: 200,
|
width: 200,
|
||||||
|
|
@ -77,7 +113,7 @@ export default {
|
||||||
dataIndex: 'phone'
|
dataIndex: 'phone'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: this.type == 1 ? '纳入时间' : '入住时间',
|
title: '入住时间',
|
||||||
dataIndex: 'bringTime',
|
dataIndex: 'bringTime',
|
||||||
scopedSlots: { customRender: 'bringTime' }
|
scopedSlots: { customRender: 'bringTime' }
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue