ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

下次图标插件

newMaster
1747191978@qq.com 4 months ago
parent
d03f5f4dff
commit
91e0d04804
9 changed files with 2327 additions and 1056 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      acupuncture-前台/package.json
  2. 107
      acupuncture-前台/src/api/indexCom.js
  3. 1173
      acupuncture-前台/src/views/index.vue
  4. 296
      acupuncture-前台/src/views/indexCom/JM.vue
  5. 324
      acupuncture-前台/src/views/indexCom/XGZL.vue
  6. 1046
      acupuncture-前台/src/views/indexCom/index.js
  7. 246
      acupuncture-前台/src/views/indexCom/patient.vue
  8. 183
      acupuncture-前台/src/views/indexCom/query.vue
  9. 6
      package-lock.json

2
acupuncture-前台/package.json
View File

@ -40,7 +40,7 @@
"axios": "0.28.1",
"clipboard": "2.0.8",
"core-js": "3.37.1",
"echarts": "5.4.0",
"echarts": "^5.4.0",
"element-ui": "^2.15.14",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",

107
acupuncture-前台/src/api/indexCom.js
View File

@ -0,0 +1,107 @@
import request from "@/utils/request";
// 患者统计 - 饼状
export function queryPatient(data) {
return request({
url: "/qualityControl/home/queryPatient",
method: "post",
data: data,
});
}
// 患者统计 - 柱状图
export function queryByDatePatient(data) {
return request({
url: "/qualityControl/home/queryByDatePatient",
method: "post",
data: data,
});
}
// 静脉溶栓率 - 统计
export function queryJmrs(data) {
return request({
url: "/qualityControl/home/queryJmrs",
method: "post",
data: data,
});
}
// 静脉溶栓率 - 数据对比
// 静脉溶栓率 - DNT
export function queryDntResult(data) {
return request({
url: "/qualityControl/home/queryDntResult",
method: "post",
data: data,
});
}
// 静脉溶栓率 - Sich
export function querySichResult(data) {
return request({
url: "/qualityControl/home/querySichResult",
method: "post",
data: data,
});
}
// 血管治疗 - DPT
export function queryDptResult(data) {
return request({
url: "/qualityControl/home/queryDptResult",
method: "post",
data: data,
});
}
// 血管治疗 - Rpt
export function queryRptResult(data) {
return request({
url: "/qualityControl/home/queryRptResult",
method: "post",
data: data,
});
}
// 血管治疗 - SJDB
// export function selectXgzl(data) {
// return request({
// url: "/qualityControl/home/selectXgzl",
// method: "post",
// data: data,
// });
// }
export function dataComparison(data) {
return request({
url: "/qualityControl/home/selectXgzl",
method: "post",
data: data,
});
}
// 血管治疗统计
export function queryXgzlLv(data) {
return request({
url: "/qualityControl/home/queryXgzlLv",
method: "post",
data: data,
});
}
// 大屏急救数量统计
export function queryPatientList(data) {
return request({
url: "/qualityControl/home/queryPatientList",
method: "post",
data: data,
});
}
// 大屏急救时长分析
export function queryFirstAidTime(data) {
return request({
url: "/qualityControl/home/queryFirstAidTime",
method: "post",
data: data,
});
}
// 大屏智慧平车面板数据
export function queryData(data) {
return request({
url: "/qualityControl/home/queryData",
method: "post",
data: data,
});
}

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

File diff suppressed because it is too large

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

@ -0,0 +1,296 @@
<template>
<div class="app-container">
<!-- 静脉溶栓 数据对比 -->
<div class="dis" style="width: 100%">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">静脉溶栓率 </span>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="JMz" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1; margin-left: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">数据对比</span>
<div class="dis">
<div class="dian-box dis">
<span class="dian" style="background: #00d1a1"></span>
静脉溶栓人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #4f8bff"></span>
急救特征人数
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="JMy" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
<!-- DNT分布 sICH发生率 -->
<div class="dis" style="width: 100%">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">DNT分布 </span>
<div class="dis">
<div class="dian-box dis">
<span class="dian" style="background: #ffcd6c"></span> ≤45 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #f97186"></span> ≤60 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #4f8bff"></span> >60 min
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="DNT" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1; margin-left: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">sICH发生率</span>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="sICH" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { queryDntResult, querySichResult, queryJmrs } from "@/api/indexCom.js";
import { JMRSL, JMSJDB, DNT, SICH } from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
data() {
return {
loading: false,
JMRSLvalue: null,
DNTvalue: null,
SICHvalue: null,
// 查询参数
queryParams: {
param: {
timeType: 4,
startTime: "",
endTime: "",
},
},
};
},
created() {
// this.getData();
},
methods: {
statistics(_data, _type) {
this.initial(_data, _type); // 处理数据
this.loading = true;
this.getData(); // 获取数据
},
// 查询
async getData() {
try {
//RSL 静脉溶栓率
await queryJmrs(this.queryParams).then((res) => {
this.JMRSLvalue = res.data;
console.log("this.JMRSLvalue: ", this.JMRSLvalue);
this.columnar();
});
//DNT
await queryDntResult(this.queryParams).then((res) => {
this.DNTvalue = res.data;
console.log("this.DNTvalue: ", this.DNTvalue);
this.lineDNT();
});
// //数据对比
await querySichResult(this.queryParams).then((res) => {
this.SICHvalue = res.data;
this.LineSICH();
});
this.LineJM();
this.columnar();
this.lineDNT();
this.LineSICH();
this.loading = false;
} catch (e) {}
},
// 静脉溶栓率` 数据对比
LineJM() {
JMSJDB.series[0].data = this.JMRSLvalue?.map((item) => {
return item.gailv;
});
JMSJDB.series[1].data = this.JMRSLvalue?.map((item) => {
return item.total;
});
JMSJDB.xAxis[0].data = this.JMRSLvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("JMy"), null, {
height: 300,
});
myChart.setOption(JMSJDB, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 静脉溶栓率
columnar() {
JMRSL.series[0].data = this.JMRSLvalue?.map((item) => {
return item.decimal;
});
JMRSL.xAxis.data = this.JMRSLvalue?.map((item) => {
return item.date;
});
JMRSL.series[0].data = this.JMRSLvalue?.map((item) => {
return item.decimal;
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("JMz"), null, {
height: 300,
});
myChart.setOption(JMRSL, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
lineDNT() {
DNT.series[0].data = this.DNTvalue?.map((item) => {
return item.dy45; //≤45
});
DNT.series[1].data = this.DNTvalue?.map((item) => {
return item.dy60; //≤60
});
DNT.series[2].data = this.DNTvalue?.map((item) => {
return item.other; //>60
});
DNT.xAxis.data = this.DNTvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("DNT"), null, {
height: 300,
});
myChart.setOption(DNT, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
LineSICH() {
SICH.series[0].data = this.SICHvalue?.map((item) => {
return item.decimal; //≤45
});
SICH.xAxis[0].data = this.SICHvalue?.map((item) => {
return item.time; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("sICH"), null, {
height: 300,
});
myChart.setOption(SICH, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 数据处理 查询类型判断参数
initial(_data, _type) {
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
this.queryParams.param = {
timeType: _type,
startTime: _data[0] + " " + "00:00:00",
endTime: _data[1] + " " + "23:59:59",
};
},
// 重新渲染图标
getRenew() {
this.LineJM();
this.columnar();
this.lineDNT();
this.LineSICH();
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card__body {
padding: 10px 0 !important;
}
.dis {
display: flex;
}
.header-title {
font-size: 18px;
}
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
.dian-box {
align-items: center;
}
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
.title-box {
justify-content: space-between;
}
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
>>> .el-radio__input {
display: none;
}
>>> .el-radio__label {
padding-left: 5px;
}
.app-container {
padding: 0;
}
.title1 {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
</style>

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

@ -0,0 +1,324 @@
<template>
<div class="app-container">
<!-- 静脉溶栓 数据对比 -->
<div class="dis" style="width: 100%">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">血管内治疗率 </span>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="XGZL" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1; margin-left: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">数据对比</span>
<div class="dis">
<div class="dian-box dis">
<span class="dian" style="background: #00d1a1"></span>
桥接治疗人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #4f8bff"></span>
非桥接治疗人数
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="SJDB" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
<!-- DNT分布 sICH发生率 -->
<div class="dis" style="width: 100%">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">DPT</span>
<div class="dis">
<div class="dian-box dis">
<span class="dian" style="background: #00d1a1"></span> ≤60 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #ffcd6c"></span> ≤90 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #a794fe"></span> >90 min
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="DPT" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1; margin-left: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">PRT</span>
<div class="dis">
<div class="dian-box dis">
<span class="dian" style="background: #a794fe"></span> ≤60 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #4f8bff"></span> ≤90 min
</div>
<div class="dian-box dis">
<span class="dian" style="background: #ffcd6c"></span> >90 min
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="RPT" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {
queryDptResult,
queryRptResult,
dataComparison,
queryXgzlLv,
} from "@/api/indexCom.js";
import { XGZL, XGSJDB, DPT, RPT } from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
data() {
return {
loading: false,
DPTvalue: null,
RPTvalue: null,
SJDBvalue: null,
XGZLvalue: null,
queryParams: {
param: {
timeType: 4,
startTime: "",
endTime: "",
},
},
};
},
created() {
// this.getData();
},
methods: {
statistics(_data, _type) {
this.initial(_data, _type); // 处理数据
this.loading = true;
this.getData(); // 获取数据
},
// 查询
async getData() {
try {
// /DNT
await queryDptResult(this.queryParams).then((res) => {
this.DPTvalue = res.data;
console.log("this.DPTvalue: ", this.DPTvalue);
this.DPT();
});
//RPT
await queryRptResult(this.queryParams).then((res) => {
this.RPTvalue = res.data;
this.RPT();
});
// 数据对比
// await dataComparison(this.queryParams).then((res) => {
// console.log("dataComparison: ", dataComparison);
// this.SJDBvalue = res.date;
// this.SJDB();
// });
await dataComparison(this.queryParams).then((res) => {
console.log("res1111: ", res);
this.SJDBvalue = res.data;
this.SJDB();
});
await queryXgzlLv(this.queryParams).then((res) => {
this.XGZLvalue = res.data;
this.XGZL();
});
this.loading = false;
} catch (e) {
console.log(e, "e");
}
},
// 数据对比
SJDB(_statData) {
XGSJDB.series[0].data = this.SJDBvalue?.map((item) => {
return item.qiaojie; //静脉溶栓人数
});
XGSJDB.series[1].data = this.SJDBvalue?.map((item) => {
return item.falseQiaojie; //静脉溶栓人数
});
XGSJDB.xAxis[0].data = this.SJDBvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("SJDB"), null, {
height: 300,
});
myChart.setOption(XGSJDB, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 血管治疗
XGZL() {
XGZL.series[0].data = this.XGZLvalue?.map((item) => {
return item.decimal; //静脉溶栓人数
});
XGZL.xAxis.data = this.XGZLvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("XGZL"), null, {
height: 300,
});
myChart.setOption(XGZL, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// DPT
DPT() {
DPT.series[0].data = this.DPTvalue?.map((item) => {
return item.dy60; //<= 60
});
DPT.series[1].data = this.DPTvalue?.map((item) => {
return item.dy90; //<= 90
});
DPT.series[2].data = this.DPTvalue?.map((item) => {
return item.other; //<= 90
});
DPT.xAxis[0].data = this.DPTvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("DPT"), null, {
height: 300,
});
myChart.setOption(DPT, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// RPT
RPT(_statData) {
RPT.series[0].data = this.RPTvalue?.map((item) => {
return item.dy60; //<= 60
});
RPT.series[1].data = this.RPTvalue?.map((item) => {
return item.dy90; //<= 90
});
RPT.series[2].data = this.RPTvalue?.map((item) => {
return item.other; //> 90
});
RPT.xAxis[0].data = this.RPTvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("RPT"), null, {
height: 300,
});
myChart.setOption(RPT, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 数据处理 查询类型判断参数
initial(_data, _type) {
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
this.queryParams.param = {
timeType: _type,
startTime: _data[0] + " " + "00:00:00",
endTime: _data[1] + " " + "23:59:59",
};
},
// 重新渲染图标
getRenew() {
this.SJDB(); // 数据对比
this.XGZL(); // 血管治疗
this.DPT();
this.RPT();
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card__body {
padding: 10px 0 !important;
}
.dis {
display: flex;
}
.header-title {
font-size: 18px;
}
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
.dian-box {
align-items: center;
}
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
.title-box {
justify-content: space-between;
}
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
>>> .el-radio__input {
display: none;
}
>>> .el-radio__label {
padding-left: 5px;
}
.app-container {
padding: 0;
}
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
</style>

1046
acupuncture-前台/src/views/indexCom/index.js
View File

File diff suppressed because it is too large

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

@ -0,0 +1,246 @@
<template>
<div class="app-container">
<div class="dis" style="width: 100%">
<div style="flex: 1; margin-right: 20px; min-width: 600px">
<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: #4f8bff"></span>
仅溶栓人数
</div>
<span class="dian" style="background: #ffcd6c"></span>
仅介入人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #00d1a1"></span>
未溶栓且未介入人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #a794fe"></span>
溶栓+介入人数
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="patienty" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 2; min-width: 610px">
<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: #4f8bff"></span>
仅溶栓人数
</div>
<span class="dian" style="background: #ffcd6c"></span>
仅介入人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #00d1a1"></span>
未溶栓且未介入人数
</div>
<div class="dian-box dis">
<span class="dian" style="background: #a794fe"></span>
溶栓+介入人数
</div>
</div>
</div>
<!-- 统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="patientz" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { queryPatient, queryByDatePatient } from "@/api/indexCom.js";
import { HZXX, HZXXSJFX } from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
data() {
return {
loading: false,
HZXXvalue: null,
SJDBvalue: null,
queryParams: {
param: {
timeType: 4,
startTime: "",
endTime: "",
},
},
};
},
created() {
// this.Linepatient()
// this.getData();
},
methods: {
statistics(_data, _type) {
this.initial(_data, _type); // 处理数据
this.loading = true;
this.getData(); // 获取数据
},
// 查询
async getData() {
try {
//患者信息
await queryPatient(this.queryParams).then((res) => {
this.HZXXvalue = res.data;
this.Linepatient();
});
//数据对比
await queryByDatePatient(this.queryParams).then((res) => {
this.SJDBvalue = res.data.list;
this.columnar();
});
this.loading = false;
} catch (e) {}
},
// 患者信息
Linepatient() {
HZXX.title.text = this.HZXXvalue?.total;
HZXX.series[0].data = [
{ value: this.HZXXvalue?.onlyRs, name: "仅溶栓人数", roundCap: true },
{
value: this.HZXXvalue?.onlyXgzl,
name: "仅介入人数",
roundCap: true,
},
{ value: this.HZXXvalue?.neither, name: "未溶栓且未介入人数" },
{ value: this.HZXXvalue?.both, name: "溶栓+介入人数" },
// { value: 200, name: "仅溶栓人数", roundCap: true },
// { value: 150, name: "血管内治疗人数", roundCap: true },
// { value: 100, name: "未溶栓人数" },
];
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("patienty"), null, {
height: 300,
});
myChart.setOption(HZXX, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 患者信息 - 数据分析
columnar() {
HZXXSJFX.series[0].data = this.SJDBvalue?.map((item) => {
return item.onlyRs; //仅溶栓人数
});
HZXXSJFX.series[1].data = this.SJDBvalue?.map((item) => {
return item.onlyXgzl; //仅介入人数
});
HZXXSJFX.series[2].data = this.SJDBvalue?.map((item) => {
return item.neither; //未溶栓且未介入人数
});
HZXXSJFX.series[3].data = this.SJDBvalue?.map((item) => {
return item.both; //溶栓+介入人数
});
HZXXSJFX.xAxis.data = this.SJDBvalue?.map((item) => {
return item.date; //X轴
});
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("patientz"), null, {
height: 300,
});
myChart.setOption(HZXXSJFX, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 数据处理 查询类型判断参数
initial(_data, _type) {
console.log("_data, _type: ", _data, _type);
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
this.queryParams.param = {
timeType: _type,
startTime: _data[0] + " " + "00:00:00",
endTime: _data[1] + " " + "23:59:59",
};
},
// 重新渲染图标
getRenew() {
this.Linepatient();
this.columnar();
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card__body {
padding: 10px 0 !important;
}
.dis {
display: flex;
}
.header-title {
font-size: 18px;
}
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
.dian-box {
align-items: center;
}
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
.title-box {
justify-content: space-between;
}
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
>>> .el-radio__input {
display: none;
}
>>> .el-radio__label {
padding-left: 5px;
}
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
</style>

183
acupuncture-前台/src/views/indexCom/query.vue
View File

@ -0,0 +1,183 @@
<template>
<div class="app-container">
<div class="title1">
<span class="title-bor"></span>
{{ title }}
</div>
<div>
<div>
<el-radio-group
v-model="radioValue"
size="small"
style="height: 36px"
@change="radioChange"
>
<el-radio label="0" border style="margin: 0 20px 0 0">周</el-radio>
<el-radio label="1" border style="margin: 0 20px 0 0">月</el-radio>
<el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio>
<el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio>
<!-- <el-radio label="4" border style="margin: 0 20px 0 0">周</el-radio>
<el-radio label="4" border style="margin: 0 20px 0 0">月</el-radio>
<el-radio label="1" border style="margin: 0 20px 0 0">季</el-radio>
<el-radio label="1" border style="margin: 0 20px 0 0">年</el-radio> -->
</el-radio-group>
<el-date-picker
v-model="pickerValue"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="pickerChage"
>
</el-date-picker>
</div>
</div>
</div>
</template>
<script>
// import { deviceType } from "./index.js";
// this.$store.commit('headerFun', data)
export default {
name: "Post",
props: ["title", "type"],
data() {
return {
radioValue: "1",
radioTime: [],
pickerValue: null,
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
};
},
created() {
console.log(this.pickerValue, 222);
},
methods: {
radioChange() {
const start = new Date();
const end = new Date();
this.timeType = 4;
if (this.radioValue == 0) {
this.timeType = 4;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.radioTime = [start, end];
}
if (this.radioValue == 1) {
this.timeType = 4;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
this.radioTime = [start, end];
}
if (this.radioValue == 2) {
this.timeType = 1;
const now = new Date(); // 当前日期
const nowYear = now.getFullYear(); //当前年
const nowMonth = now.getMonth(); //当前月
const nowDay = now.getDate(); // 当前日
const nowDayOfWeek = now.getDay(); // 周几
const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度
const startDate = new Date(nowYear, (jd - 1) * 3, 1);
const endDate = new Date(nowYear, jd * 3, 0);
this.radioTime = [startDate, endDate];
}
if (this.radioValue == 3) {
this.timeType = 1;
end.setTime(start.getTime());
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
this.radioTime = [start, end];
}
this.$emit(
"radio-change",
this.pickerValue || this.radioTime,
this.type,
this.timeType
);
},
pickerChage() {
if (!this.pickerValue) {
this.radioChange();
}
console.log(this.pickerValue, 111);
this.radioTime = [];
this.timeType = 4;
if (this.radioValue == 0) {
this.timeType = 4;
}
if (this.radioValue == 1) {
this.timeType = 4;
}
if (this.radioValue == 2) {
this.timeType = 1;
}
if (this.radioValue == 3) {
this.timeType = 1;
}
this.$emit("picker-change", this.pickerValue, this.type, this.timeType);
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
>>> .el-radio__input {
display: none;
}
>>> .el-radio__label {
padding-left: 5px;
}
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
.title1 {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
</style>

6
package-lock.json
View File

@ -0,0 +1,6 @@
{
"name": "针灸",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
Write Preview
Loading…
Cancel
Save