Skip to content

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

修改图形

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