ccsens_zhengzhichuan
/
datang-meeting
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

页面尺寸变化重新渲染图表

new
1747191978@qq.com 1 year ago
parent
939404d827
commit
7bb4eb30e3
5 changed files with 454 additions and 396 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      acupuncture-前台/src/views/index.vue
  2. 90
      acupuncture-前台/src/views/indexCom/JM.vue
  3. 60
      acupuncture-前台/src/views/indexCom/XGZL.vue
  4. 4
      acupuncture-前台/src/views/indexCom/follow.vue
  5. 6
      acupuncture-前台/src/views/indexCom/patient.vue

8
acupuncture-前台/src/views/index.vue
View File

@ -65,9 +65,11 @@
}, },
methods: { methods: {
resize() { resize() {
// this.$refs.patient.getRenew(); console.log(111)
// this.$refs.JM.getRenew(); this.$refs.patient.getRenew();
// this.$refs.XGZL.getRenew(); this.$refs.JM.getRenew();
this.$refs.XGZL.getRenew();
this.$refs.follow.getRenew();
}, },
// 周 月 季 年 // 周 月 季 年
radioChange(_data, _type, _timeType) { radioChange(_data, _type, _timeType) {

90
acupuncture-前台/src/views/indexCom/JM.vue
View File

@ -78,19 +78,21 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize"; import resize from "@/views/dashboard/mixins/resize";
import { zlInfo } from "@/api/indexCom.js"; import {
import { zlInfo
} from "@/api/indexCom.js";
import {
diagnoseEcharts, diagnoseEcharts,
systemEcharts, systemEcharts,
physiqueEcharts, physiqueEcharts,
postureEcharts, postureEcharts,
agrypniaEcharts, agrypniaEcharts,
anxietyEcharts, anxietyEcharts,
} from "./index"; } from "./index";
export default { export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
mixins: [resize], mixins: [resize],
@ -150,7 +152,14 @@ export default {
async getData() { async getData() {
try { try {
await zlInfo(this.queryParams).then((res) => { await zlInfo(this.queryParams).then((res) => {
const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data; const {
jlfb,
smfb,
sort,
ttfb,
txfb,
zytz
} = res.data;
// 病种（主要诊断） // 病种（主要诊断）
this.diagnoseValue = sort.sort((a, b) => a.total - b.total); this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
this.handleDiagnose(); this.handleDiagnose();
@ -177,8 +186,7 @@ export default {
} }
this.handlePhysique(); this.handlePhysique();
// 体态 // 体态
this.postureValue = [ this.postureValue = [{
{
value: ttfb.score1, value: ttfb.score1,
name: "1分", name: "1分",
}, },
@ -314,79 +322,83 @@ export default {
}, },
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
this.Linepatient(); this.handleDiagnose();
this.columnar(); this.handleSystem();
this.handlePhysique();
this.handlePosture();
this.handleAgrypnia();
this.handleAnxiety();
}, },
}, },
}; };
</script> </script>
<style scoped src="@/assets/styles/common.css"></style> <style scoped src="@/assets/styles/common.css"></style>
<style scoped> <style scoped>
>>> .el-card__body { >>>.el-card__body {
padding: 10px 0 !important; padding: 10px 0 !important;
} }
.dis { .dis {
display: flex; display: flex;
} }
.header-title { .header-title {
font-size: 18px; font-size: 18px;
} }
.title-box { .title-box {
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
} }
.dian-box { .dian-box {
align-items: center; align-items: center;
} }
.dian { .dian {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 10px;
} }
.title-box { .title-box {
justify-content: space-between; justify-content: space-between;
} }
. >>> .el-radio--small.is-bordered { .>>>.el-radio--small.is-bordered {
margin-right: 20px !important; margin-right: 20px !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
>>> .el-radio__input { >>>.el-radio__input {
display: none; display: none;
} }
>>> .el-radio__label { >>>.el-radio__label {
padding-left: 5px; padding-left: 5px;
} }
.app-container { .app-container {
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.title-bor { .title-bor {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
width: 6px; width: 6px;
background: #4f8bff; background: #4f8bff;
margin-right: 10px; margin-right: 10px;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

60
acupuncture-前台/src/views/indexCom/XGZL.vue
View File

@ -22,14 +22,14 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1; margin-right: 20px"> <!-- <div style="flex: 1; margin-right: 20px">
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">病种方法分布</span> <span class="header-title">病种方法分布</span>
<div class="dis"></div> <div class="dis"></div>
</div> </div>
<div style="height: 300px" v-loading="loading"> <div style="height: 300px" v-loading="loading">
<!-- <div id="diseaseMethod" style="width: 100%"></div> --> <div id="diseaseMethod" style="width: 100%"></div>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -41,14 +41,55 @@
</div> </div>
</div> </div>
<div style="height: 300px" v-loading="loading"> <div style="height: 300px" v-loading="loading">
<!-- <div id="acupoint" style="width: 100%"></div> --> <div id="acupoint" style="width: 100%"></div>
</div> </div>
</el-card> </el-card>
</div> -->
<div style="flex: 1; margin-right: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">治疗效果</span>
<div class="dis">
<div class="dian-box dis">
<div class="dian-box dis">
<span class="dian" style="background: #5C7BD9"></span>
治愈
</div> </div>
<div class="dian-box dis">
<span class="dian" style="background: #91CC75"></span>
显效
</div> </div>
<div class="dian-box dis">
<span class="dian" style="background: #FAC858"></span>
好转
</div> </div>
<div class="app-container"> <div class="dian-box dis">
<span class="dian" style="background: #EE6666"></span>
无效
</div>
</div>
</div>
</div>
<div style="height: 300px" v-loading="loading">
<div id="effect" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">诊疗费用分布</span>
<div class="dis">
</div>
</div>
<div style="height: 300px" v-loading="loading">
<div id="cost" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
<!-- <div class="app-container">
<div class="dis" style="width: 100%"> <div class="dis" style="width: 100%">
<div style="flex: 1; margin-right: 20px"> <div style="flex: 1; margin-right: 20px">
<el-card shadow="always"> <el-card shadow="always">
@ -93,7 +134,7 @@
</el-card> </el-card>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
@ -198,7 +239,7 @@
] ]
this.handleEffect() this.handleEffect()
// 治疗费用 // 治疗费用
this.costValue =[zlfy.score1,zlfy.score2,zlfy.score3,zlfy.score4,zlfy.score5] this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5]
this.handleCost() this.handleCost()
}); });
this.loading = false; this.loading = false;
@ -263,8 +304,9 @@
}, },
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
this.Linepatient(); this.handleHealType();
this.columnar(); this.handleEffect();
this.handleCost()
}, },
}, },
}; };

4
acupuncture-前台/src/views/indexCom/follow.vue
View File

@ -146,8 +146,8 @@
}, },
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
// this.Linepatient(); this.handleFollow();
// this.columnar(); this.handleLossFollow()
}, },
}, },
}; };

6
acupuncture-前台/src/views/indexCom/patient.vue
View File

@ -245,8 +245,10 @@
}, },
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
// this.Linepatient(); this.Linepatient(); // 患者总数
// this.columnar(); this.handleAge(); // 年龄
this.columnar(); //性别分析图
this.handleDisease(); //病种分布
}, },
}, },
}; };

Write Preview
Loading…
Cancel
Save