Skip to content

S
screenForShow
Commit 761a45f1 authored by miaojiale's avatar miaojiale
Browse files
Options

修改图形

parent 295a2e0a
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 128 deletions
src/views/databoards/index.vue
View file @ 761a45f1
......@@ -36,26 +36,36 @@
v-for="(item, index) in gridList"
:key="index"
>
<p class="grid-title">{{ item.title }}</p>
<Row type="flex" justify="space-between">
<Col
:xs="24"
:sm="24"
:md="7"
class="grid-col grid-col-i"
v-for="(itemS, indexS) in item.smallList"
:key="indexS"
>
<p class="grid-data">{{ itemS.data }}</p>
<p class="grid-label">{{ itemS.label }}</p>
</Col>
</Row>
<p class="grid-title">{{ item.title }}</p>
<Row
type="flex"
justify="space-between"
>
<Col
:xs="24"
:sm="24"
:md="7"
class="grid-col grid-col-i"
v-for="(itemS, indexS) in item.smallList"
:key="indexS"
>
<p class="grid-data">{{ itemS.data }}</p>
<p class="grid-label">{{ itemS.label }}</p>
</Col>
</Row>
</Col>
</Row>
<!-- 漏斗图 -->
<Row>
<i-col :xs="24" :sm="24" :xl="12">
<Tabs value="ouhai" class="grid-map grid-funnel">
<i-col
:xs="24"
:sm="24"
:xl="12"
>
<Tabs
value="ouhai"
class="grid-map grid-funnel"
>
<TabPane
:label="
yearOpt
......@@ -64,7 +74,10 @@
"
name="ouhai"
>
<Spin fix v-show="isFunnelShow">
<Spin
fix
v-show="isFunnelShow"
>
<Icon
type="load-c"
size="30"
......@@ -83,21 +96,34 @@
</Tabs>
</i-col>
<!-- 地图 -->
<i-col :xs="24" :sm="24" :xl="12">
<Tabs value="ouhai" class="grid-map">
<i-col
:xs="24"
:sm="24"
:xl="12"
>
<Tabs
value="ouhai"
class="grid-map"
>
<!-- <TabPane
:label="dItem.label"
:name="dItem.name"
v-for="(dItem, dIndex) in mapList"
:key="dIndex"
> -->
<TabPane :label="areaM + '筛查地图'" name="ouhai">
<TabPane
:label="areaM + '筛查地图'"
name="ouhai"
>
<!-- <span
class="corner-icon"
@click="expandMap = !expandMap"
>放大</span
> -->
<Spin fix v-show="isMapShow">
<Spin
fix
v-show="isMapShow"
>
<Icon
type="load-c"
size="30"
......@@ -184,14 +210,21 @@
</TabPane>
</Tabs> -->
<!-- 地图 两步法 -->
<Tabs v-if="expandMap" class="center-tab-expand tab-expand">
<Tabs
v-if="expandMap"
class="center-tab-expand tab-expand"
>
<Icon
class="corner-icon"
type="md-arrow-dropright"
@click="expandMap = !expandMap"
size="24"
/>
<TabPane label="瓯海区筛查地理图" name="ouhai" class="flex-row">
<TabPane
label="瓯海区筛查地理图"
name="ouhai"
class="flex-row"
>
<!-- <emap width="1310px" :mapData="mapData" v-if="expandMap" /> -->
</TabPane>
</Tabs>
......@@ -203,11 +236,27 @@
<!-- 统计图 -->
<Row class="grid-content graph-row">
<Tabs v-model="tabModel">
<TabPane label="筛查工作进展分析" name="name1">
<i-col :xs="24" :sm="24" :xl="24" class="">
<Card shadow :title="area + '筛查工作进展趋势图'">
<TabPane
label="筛查工作进展分析"
name="name1"
>
<i-col
:xs="24"
:sm="24"
:xl="24"
class=""
>
<Card
shadow
:title="area + '筛查工作进展趋势图'"
>
<Row>
<i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-col"
>
<BarChart
:chartData="screeningTData"
title="筛查目标人群趋势图"
......@@ -215,7 +264,12 @@
xName="年份"
></BarChart>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-col"
>
<BarChart
:chartData="coverTData"
title="筛查覆盖率趋势图（筛查周期内累计统计）"
......@@ -226,7 +280,12 @@
<!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<BarChart :chartData="pathologyTData" title="早诊率趋势图"></BarChart>
</i-col>-->
<i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-col"
>
<BarChart
:chartData="firstTData"
title="血检人数趋势图"
......@@ -242,7 +301,12 @@
yName="中高危占比"
></BarChart>
</i-col> -->
<i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-col"
>
<BarChart
:chartData="endoscopeTData"
title="内镜人数趋势图"
......@@ -250,7 +314,12 @@
yName="内镜人数"
></BarChart>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="graph-col">
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-col"
>
<BarChart
:chartData="pathologyTData"
title="病理检查人数趋势图"
......@@ -270,7 +339,12 @@
name="name2"
:style="{ height: tabModel == 'name2' ? '' : '100px' }"
>
<i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-row"
>
<Card
shadow
:title="
......@@ -279,29 +353,46 @@
: '至今' + area + '筛查人群风险程度分析'
"
>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<!-- <div class="corner-index">
<Row>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-col"
>
<!-- <div class="corner-index">
<p class="corner-title">筛查人群总数</p>
<p class="corner-data">{{ riskCount }}</p>
</div> title="筛查人群风险程度分布图"-->
<p class="chart-title">筛查人群风险程度分布图</p>
<PieChart
:chartData="riskPData"
:title="riskCount"
></PieChart>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<BarChart
:chartData="riskCData"
title="中高危人数趋势图"
xName="年份"
yName="人数"
></BarChart>
<!-- color="#2852e7" -->
</i-col>
<p class="chart-title">筛查人群风险程度分布图</p>
<PieChart
:chartData="riskPData"
:title="riskCount"
></PieChart>
</i-col>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-col"
>
<BarChart
:chartData="riskCData"
title="中高危人数趋势图"
xName="年份"
yName="人数"
></BarChart>
<!-- color="#2852e7" -->
</i-col>
</Row>
</Card>
</i-col>
<i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-row"
>
<Card
shadow
:title="
......@@ -310,30 +401,47 @@
: '至今' + area + '筛查人群性别分析'
"
>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<!-- <div class="corner-index">
<Row>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-col"
>
<!-- <div class="corner-index">
<p class="corner-title">筛查人群总数</p>
<p class="corner-data">{{ genderCount }}</p>
</div>-->
<!-- <PercentChart :chartData="genderPData" title="筛查人群性别分布图"></PercentChart> -->
<p class="chart-title">筛查人群性别分布图</p>
<PieChart
:chartData="genderPData"
:title="genderCount"
></PieChart>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<LineChart
:chartData="genderCData"
title="各性别筛查完成人数趋势图"
xName="年份"
yName="人数"
></LineChart>
</i-col>
<!-- <PercentChart :chartData="genderPData" title="筛查人群性别分布图"></PercentChart> -->
<p class="chart-title">筛查人群性别分布图</p>
<PieChart
:chartData="genderPData"
:title="genderCount"
></PieChart>
</i-col>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-col"
>
<LineChart
:chartData="genderCData"
title="各性别筛查完成人数趋势图"
xName="年份"
yName="人数"
></LineChart>
</i-col>
</Row>
</Card>
</i-col>
<i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-row"
>
<Card
shadow
:title="
......@@ -342,7 +450,12 @@
: '至今' + area + '筛查人群年龄段分布图'
"
>
<i-col :xs="24" :sm="24" :xl="24" class="graph-human-col">
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-col"
>
<BarChart
:chartData="ageBData"
title="筛查人数"
......@@ -352,46 +465,80 @@
</i-col>
</Card>
</i-col>
<i-row :xs="24" :sm="24" :xl="12" class="graph-human-row">
<Card
shadow
:title="
<Row>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-row"
>
<Card
shadow
:title="
yearOpt
? yearOpt + '年' + area + '筛查人群疾病分布图'
: '至今' + area + '筛查人群疾病分布图'
"
>
<Row>
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-col"
>
<PieEcharts
:EchartsData="diseaseData"
id="pie"
style="height: 100%"
></PieEcharts>
</i-col>
</Row>
</Card>
</i-col>
<i-col
:xs="24"
:sm="24"
:xl="12"
class="graph-human-row"
>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<PieEcharts
:EchartsData="diseaseData"
id="pie"
style="height: 100%"
></PieEcharts>
</i-col>
</Card>
</i-row>
<i-row :xs="24" :sm="24" :xl="12" class="graph-human-row">
<Card
shadow
:title="
<Card
shadow
:title="
yearOpt
? yearOpt + '年' + area + '筛查人群上消化道异常分布图'
: '至今' + area + '筛查人群上消化道异常分布图'
"
>
<i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
<PieEcharts
:EchartsData="chronicData"
id="pieD"
style="height: 100%"
></PieEcharts>
</i-col>
</Card>
</i-row>
>
<Row>
<i-col
:xs="24"
:sm="24"
:xl="24"
class="graph-human-col"
>
<PieEcharts
:EchartsData="chronicData"
id="pieD"
style="height: 100%"
></PieEcharts>
</i-col>
</Row>
</Card>
</i-col>
</Row>
</TabPane>
<TabPane label="疾病防控成效分析" name="name3">
<TabPane
label="疾病防控成效分析"
name="name3"
>
<Row>
<i-col :xs="24" :sm="24" :xl="12" class="">
<i-col
:xs="24"
:sm="24"
:xl="12"
class=""
>
<Card shadow>
<i-col
:xs="24"
......@@ -420,7 +567,12 @@
</i-col> -->
</Card>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="">
<i-col
:xs="24"
:sm="24"
:xl="12"
class=""
>
<Card shadow>
<i-col
:xs="24"
......@@ -433,7 +585,12 @@
</i-col>
</Card>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="">
<i-col
:xs="24"
:sm="24"
:xl="12"
class=""
>
<Card shadow>
<i-col
:xs="24"
......@@ -446,7 +603,12 @@
</i-col>
</Card>
</i-col>
<i-col :xs="24" :sm="24" :xl="12" class="">
<i-col
:xs="24"
:sm="24"
:xl="12"
class=""
>
<Card shadow>
<i-col
:xs="24"
......@@ -461,8 +623,9 @@
yName="金额(万元)"
></show-bar>
</i-col>
</Card> </i-col
></Row>
</Card>
</i-col>
</Row>
</TabPane>
</Tabs>
</Row>
......@@ -506,7 +669,7 @@ export default {
ShowBar,
Point
},
data() {
data () {
return {
tableLoading: true,
expandFlag: false,
......@@ -964,7 +1127,7 @@ export default {
},
computed: {},
watch: {
directOpt(val) {
directOpt (val) {
this.selectArea = val
this.area = this.mapDistriction(val)
this.areaM = this.mapDistriction(val)
......@@ -972,7 +1135,7 @@ export default {
this.getResult(val)
}
},
mounted() {
mounted () {
this.selectArea = this.directOpt
this.area = this.mapDistriction(this.directOpt)
// this.getStatisticsDiseases()
......@@ -992,21 +1155,21 @@ export default {
//监听页面滚动事件
// window.addEventListener("scroll", this.handleScroll);
},
created() {
created () {
if (localStorage.getItem("diseaseType")) {
this.diseaseOpt = localStorage.getItem("diseaseType")
}
this.getResult(this.directOpt)
},
methods: {
handleScroll() {
handleScroll () {
//窗口滚要做的操作写这里
},
changeData() {
changeData () {
this.getIndex(this.directOpt)
this.getMap(this.directOpt)
},
mapClick(data, mode) {
mapClick (data, mode) {
//点击区下钻
if (mode == 1) {
this.directOpt = data.code
......@@ -1023,11 +1186,11 @@ export default {
this.areaM = "温州市"
}
},
expandTable() {
expandTable () {
this.expandFlag = !this.expandFlag
},
//指标统计
getIndex(addressCode) {
getIndex (addressCode) {
const params = {}
params.year = this.yearOpt
params.diseaseType = this.diseaseOpt
......@@ -1077,7 +1240,7 @@ export default {
this.getFunnel(addressCode)
// this.getTable();
},
getWorkTendency(addressCode) {
getWorkTendency (addressCode) {
const params = {}
params.diseaseType = this.diseaseOpt
params.year = this.yearOpt
......@@ -1275,7 +1438,7 @@ export default {
//--确诊癌症病例数趋势图
this.$forceUpdate()
},
getHumanTendency(addressCode) {
getHumanTendency (addressCode) {
const params = {}
params.diseaseType = this.diseaseOpt
// params.year = this.yearOpt;
......@@ -1369,7 +1532,7 @@ export default {
})
this.genderCData = data2
},
getHumanChart(addressCode) {
getHumanChart (addressCode) {
// 中高危风险人数分布
const data1 = {}
data1.data = []
......@@ -1559,7 +1722,7 @@ export default {
this.chronicData = data123
},
getHumanBar(addressCode) {
getHumanBar (addressCode) {
//年龄段
const d = [
{
......@@ -1654,7 +1817,7 @@ export default {
})
this.ageBData.data = ageData.data.concat(ageDataII.data)
},
getMap(addressCode) {
getMap (addressCode) {
this.isMapShow = true
const params = {}
params.year = this.yearOpt
......@@ -1730,7 +1893,7 @@ export default {
this.isMapShow = false
},
//漏斗图
getFunnel(addressCode) {
getFunnel (addressCode) {
this.isFunnelShow = true
const params = {}
params.year = this.yearOpt
......@@ -1802,7 +1965,7 @@ export default {
// })
this.$forceUpdate()
},
getTable(addressCode) {
getTable (addressCode) {
const params = {}
params.addressCode = addressCode
params.diseaseType = this.diseaseOpt
......@@ -1818,7 +1981,7 @@ export default {
})
},
//疾病防控成效
getResult(addressCode) {
getResult (addressCode) {
// this.ouhaiData.data=[]
// this.yongjiaData.data=[]
if (addressCode == "330304000000" || addressCode == "") {
......@@ -1878,7 +2041,7 @@ export default {
]
},
// 疾病数据
getStatisticsDiseases() {
getStatisticsDiseases () {
this.$API.getStatisticsDiseases().then((res) => {
if (res.code === 1) {
const d = res.object
......@@ -1904,7 +2067,7 @@ export default {
})
},
// 疾病分类数据
getStatisticsDiseasesType() {
getStatisticsDiseasesType () {
this.$API.getStatisticsDiseasesType().then((res) => {
if (res.code === 1) {
const d = res.object
......@@ -1925,7 +2088,7 @@ export default {
})
},
// 年龄性别分布
getStatisticsPatientAgeAndSex() {
getStatisticsPatientAgeAndSex () {
this.$API.getStatisticsPatientAgeAndSex().then((res) => {
if (res.code === 1) {
const d = res.object
......@@ -1985,7 +2148,7 @@ export default {
})
},
// 筛查数据
getStatisticsMonthly() {
getStatisticsMonthly () {
this.$API.getStatisticsMonthly().then((res) => {
if (res.code === 1) {
const d = res.object
......@@ -2005,7 +2168,7 @@ export default {
})
},
// 随访列表
getFollowupReport() {
getFollowupReport () {
const params = {}
params.pageNum = this.pageIndex
params.pageSize = this.pageSize
......@@ -2024,7 +2187,7 @@ export default {
this.totalCount = res.object.totalCount
})
},
handleFollow(row) {
handleFollow (row) {
sessionStorage.setItem("datamanage-path", this.$route.path)
this.$router.push({
name: "reportdata",
......@@ -2163,8 +2326,8 @@ export default {
.grid-row-t {
transition: width 2s;
.grid-col-t{
width: 24.8%;;
.grid-col-t {
width: 24.8%;
}
.ivu-col-span-md-5 {
width: 24.8%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment