You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
688 lines
18 KiB
Vue
688 lines
18 KiB
Vue
<!--
|
|
* @Author: daidai
|
|
* @Date: 2022-03-04 09:23:59
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-05-07 11:05:02
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\nmpa.vue
|
|
-->
|
|
<template>
|
|
<div class="con left">
|
|
<div style="margin-top: 1px;margin-bottom: -15px">
|
|
<el-button type="warning" icon="search" @click="yearClick" style="text-align:right;margin-left: 15px">
|
|
按年度统计
|
|
</el-button>
|
|
<el-button type="warning" icon="search" @click="quarterClick" style="text-align:right">按季度统计</el-button>
|
|
<el-button type="warning" icon="search" @click="monthClick" style="text-align:right">按月份统计</el-button>
|
|
<span class="demonstration" style="margin-left: 20px;color: yellow"></span>
|
|
|
|
<el-date-picker
|
|
v-model="value2"
|
|
type="monthrange"
|
|
align="right"
|
|
style="margin-left: 20px;color: yellow;margin-left: 15px;font-weight: bold"
|
|
unlink-panels
|
|
range-separator="至"
|
|
start-placeholder="开始月份"
|
|
end-placeholder="结束月份"
|
|
:picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
|
|
<el-button type="warning" icon="search" @click="customClick" style="margin-left: 15px">自定义统计</el-button>
|
|
</div>
|
|
<div class="contents">
|
|
<div class="contetn_left">
|
|
<ItemWrap style="height: 440px;margin-top: 1px" title="入网企业填报情况">
|
|
<centerTop></centerTop>
|
|
<Echart
|
|
:options="corpOptions1"
|
|
style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
|
|
></Echart>
|
|
<Echart
|
|
:options="corpOptions2"
|
|
style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
|
|
></Echart>
|
|
<Echart
|
|
:options="corpOptions3"
|
|
style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
|
|
></Echart>
|
|
|
|
</ItemWrap>
|
|
<!-- <item-wrap style="height: 220px;margin-top: 1px" title="单位类型">-->
|
|
<!-- -->
|
|
<!-- </item-wrap>-->
|
|
<ItemWrap
|
|
class="contetn_lr-item"
|
|
style="height: 375px;margin-top: 5px"
|
|
title="未上报企业目录"
|
|
>
|
|
<el-table v-loading="loading" :data="unList"
|
|
style="width: 100%"
|
|
:cell-style="{ color: '#fff' }"
|
|
:header-cell-style="{ color: '#fff' }"
|
|
highlight-current-row
|
|
|
|
:row-class-name="tableRowClassName">
|
|
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
|
<el-table-column label="单位名称" prop="corpName" width="280" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="上次上报时间" prop="lastUploadTime" width="180" show-overflow-tooltip></el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
style="float: right;margin-top: 15px"
|
|
:page-size="unLimit"
|
|
@current-change="handleChange"
|
|
layout="prev, pager, next"
|
|
:total="unTotal"
|
|
:current-page="unPage"
|
|
></el-pagination>
|
|
</ItemWrap>
|
|
</div>
|
|
<div class="contetn_right" style="margin-left: 15px">
|
|
<ItemWrap
|
|
class="contetn_lr-item"
|
|
style="width: 97%;
|
|
height: 440px"
|
|
title="企业品种上报列表"
|
|
>
|
|
<el-table v-loading="loading" :data="list"
|
|
style="width: 100%"
|
|
:cell-style="{ color: '#fff' }"
|
|
:header-cell-style="{ color: '#fff' }"
|
|
highlight-current-row
|
|
@row-click="intentDetail"
|
|
:row-class-name="tableRowClassName">
|
|
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
|
<el-table-column label="库存区间" prop="invDate" width="200" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
{{ dateRange }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="单位名称" prop="corpName" width="250" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单位类型" prop="bussinessName" width="140" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="品种数量" prop="statCount" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="器械数量" prop="qiXieCount" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="试剂数量" prop="shiJiCount" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="进口数量" prop="importCount" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="非进口数量" prop="unImportCount" width="100" show-overflow-tooltip></el-table-column>
|
|
<!-- <el-table-column label="单位品种数量" prop="statCount" width="140" show-overflow-tooltip></el-table-column>-->
|
|
</el-table>
|
|
<el-pagination
|
|
style="float: right;margin-top: 15px"
|
|
:page-size="limit"
|
|
@current-change="handleChange"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
:current-page="page"
|
|
></el-pagination>
|
|
</ItemWrap>
|
|
|
|
<div style="float: left;display: flex;margin-top: 15px">
|
|
<ItemWrap
|
|
class="contetn_lr-item"
|
|
style="width: 97%;height: 375px"
|
|
title="产品上报汇总">
|
|
<div class="contetn_lr-item2"
|
|
style="height: 280px; display: flex;justify-content: flex-start;border: 1px solid #034c6a;border-radius: 18px;">
|
|
<RightTop/>
|
|
<RightTop1/>
|
|
<RightTop2/>
|
|
<RightTop3/>
|
|
<RightTop4/>
|
|
</div>
|
|
</ItemWrap>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<el-dialog
|
|
title="上报品种明细"
|
|
:visible.sync="addDialogVisible"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
v-if="addDialogVisible"
|
|
append-to-body
|
|
width="75%"
|
|
>
|
|
<dialogCorpInfo
|
|
:editQuery="curCorp"
|
|
></dialogCorpInfo>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CenterBottom from "./center-bottom.vue";
|
|
import centerTop from "./center-top.vue";
|
|
import leftTop from "./left-top.vue";
|
|
import LeftBottom from "./left-bottom.vue";
|
|
import RightBottom from "./right-bottom.vue";
|
|
import RightFull from "./right-full.vue";
|
|
import RightTop from "./right-top.vue";
|
|
import RightTop1 from "./right-top1.vue";
|
|
import RightTop2 from "./right-top2.vue";
|
|
import RightTop3 from "./right-top3.vue";
|
|
import RightTop4 from "./right-top4.vue";
|
|
import {currentGET} from "@/api";
|
|
import dialogCorpInfo from "./dialogInoutInfo.vue";
|
|
import {formatDate} from "@/utils/date";
|
|
|
|
export default {
|
|
components: {
|
|
LeftBottom,
|
|
leftTop,
|
|
centerTop,
|
|
CenterBottom,
|
|
RightBottom, RightFull, RightTop1,
|
|
RightTop2,
|
|
RightTop3,
|
|
RightTop4,
|
|
RightTop, dialogCorpInfo
|
|
},
|
|
data() {
|
|
return {
|
|
ioOptions: {},
|
|
corpOptions1: {},
|
|
corpOptions2: {},
|
|
corpOptions3: {},
|
|
curCorp: {},
|
|
addDialogVisible: false,
|
|
value2: new Date().getTime() - 3600 * 1000 * 24 * 30,
|
|
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]);
|
|
}
|
|
}]
|
|
},
|
|
|
|
list: [],
|
|
page: 1,
|
|
limit: 6,
|
|
total: 0,
|
|
|
|
unList: [],
|
|
unPage: 1,
|
|
unLimit: 4,
|
|
unTotal: 0,
|
|
|
|
dateRange: "2023-12"
|
|
};
|
|
},
|
|
filters: {
|
|
numsFilter(msg) {
|
|
return msg || 0;
|
|
},
|
|
},
|
|
created() {
|
|
|
|
this.init();
|
|
this.getCorpInvData();
|
|
this.getUnCorpInvData();
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
|
|
init() {
|
|
this.ioOptions = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['期初数量', '入库数量', '出库数量'],
|
|
textStyle: {
|
|
color: "#fff"
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
|
|
data: ['器械类', '诊断试剂类', '一类医疗器械', '二类医疗器械', '三类医疗器械']
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '期初数量',
|
|
type: 'bar',
|
|
label: {
|
|
show: true,
|
|
position: 'inside'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F3DB5C'
|
|
},
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [200, 170, 240, 244, 200, 220, 210]
|
|
},
|
|
{
|
|
name: '入库数量',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#4ADEFE'
|
|
},
|
|
},
|
|
|
|
data: [320, 302, 341, 374, 390, 450, 420]
|
|
},
|
|
{
|
|
name: '出库数量',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
label: {
|
|
show: true,
|
|
position: 'left'
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#d56e6e',
|
|
},
|
|
},
|
|
data: [-120, -132, -101, -134, -190, -230, -210]
|
|
}
|
|
]
|
|
};
|
|
|
|
this.corpOptions1 = {
|
|
title: {
|
|
subtext: '生产企业',
|
|
color: "#fff",
|
|
left: 'center',
|
|
textStyle: {},
|
|
subtextStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '生产企业',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{value: 0, name: '已上报'},
|
|
{value: 2, name: '未上报'},
|
|
],
|
|
|
|
|
|
rich: {
|
|
b: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
lineHeight: 26,
|
|
},
|
|
c: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
per: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
label: {
|
|
|
|
normal: {
|
|
show: true,
|
|
position: 'inner',
|
|
formatter: "{b}/{c} ",
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.corpOptions2 = {
|
|
title: {
|
|
subtext: '经营企业',
|
|
color: "#fff",
|
|
left: 'center',
|
|
textStyle: {},
|
|
subtextStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '经营企业',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{value: 1, name: '已上报'},
|
|
{value: 0, name: '未上报'},
|
|
],
|
|
|
|
|
|
rich: {
|
|
b: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
lineHeight: 26,
|
|
},
|
|
c: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
per: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
label: {
|
|
|
|
normal: {
|
|
show: true,
|
|
position: 'inner',
|
|
formatter: "{b}/{c} ",
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.corpOptions3 = {
|
|
title: {
|
|
subtext: '医疗机构',
|
|
color: "#fff",
|
|
left: 'center',
|
|
textStyle: {},
|
|
subtextStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '医疗机构',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{value: 0, name: '已上报'},
|
|
{value: 5, name: '未上报'},
|
|
],
|
|
|
|
|
|
rich: {
|
|
b: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
lineHeight: 26,
|
|
},
|
|
c: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
per: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
label: {
|
|
|
|
normal: {
|
|
show: true,
|
|
position: 'inner',
|
|
formatter: "{b}/{c} ",
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
},
|
|
getCorpInvData() {
|
|
currentGET('corpInvList', {page: this.page, limit: this.limit, uploadFlag: 1}).then(res => {
|
|
// 复制过来的返回有两个层级 用三元智能判断转换
|
|
res = typeof res.data === "undefined" ? res : res.data
|
|
if (res.code == 20000) {
|
|
this.list = res.data.list
|
|
this.total = res.data.total
|
|
} else {
|
|
this.$Message({
|
|
text: res.msg,
|
|
type: 'warning'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getUnCorpInvData() {
|
|
currentGET('corpInvList', {page: this.page, limit: this.limit, uploadFlag: 0}).then(res => {
|
|
// 复制过来的返回有两个层级 用三元智能判断转换
|
|
res = typeof res.data === "undefined" ? res : res.data
|
|
if (res.code == 20000) {
|
|
this.unList = res.data.list
|
|
this.unTotal = res.data.total
|
|
} else {
|
|
this.$Message({
|
|
text: res.msg,
|
|
type: 'warning'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
intentDetail(row) {
|
|
this.curCorp = row;
|
|
this.addDialogVisible = true;
|
|
},
|
|
yearClick() {
|
|
this.dateRange = "2023";
|
|
},
|
|
quarterClick() {
|
|
this.dateRange = "2023.10-2023.12"
|
|
},
|
|
monthClick() {
|
|
this.dateRange = "2023.12"
|
|
},
|
|
customClick() {
|
|
this.dateRange = formatDate(this.value2[0], "yyyy.MM") + "-" + formatDate(this.value2[1], "yyyy.MM");
|
|
},
|
|
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// 内容
|
|
.contents {
|
|
.contetn_left {
|
|
width: 35%;
|
|
box-sizing: border-box;
|
|
// padding: 16px 0;
|
|
}
|
|
|
|
.contetn_right {
|
|
width: 65%;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
//左右两侧 三个块
|
|
.contetn_lr-item {
|
|
height: 380px;
|
|
}
|
|
|
|
|
|
.contetn_center_top {
|
|
width: 100%;
|
|
}
|
|
|
|
// 中间
|
|
.contetn_center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
//justify-content: space-around;
|
|
}
|
|
|
|
.contetn_center-bottom {
|
|
height: 380px;
|
|
}
|
|
|
|
//左边 右边 结构一样
|
|
.contetn_left,
|
|
.contetn_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
//justify-content: space-around;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/*最外层透明*/
|
|
::v-deep .el-table,
|
|
::v-deep .el-table__expanded-cell {
|
|
background-color: transparent !important;
|
|
|
|
.warning-row {
|
|
background: #e79b0c;
|
|
}
|
|
|
|
.success-row {
|
|
background: #549032;
|
|
}
|
|
|
|
}
|
|
|
|
/* 表格内背景颜色 */
|
|
::v-deep .el-table th,
|
|
::v-deep .el-table tr,
|
|
::v-deep .el-table td {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
::v-deep .el-table th {
|
|
background-color: #2f70be !important;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
@keyframes rotating {
|
|
0% {
|
|
-webkit-transform: rotate(0) scale(1);
|
|
transform: rotate(0) scale(1);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(180deg) scale(1.1);
|
|
transform: rotate(180deg) scale(1.1);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg) scale(1);
|
|
transform: rotate(360deg) scale(1);
|
|
}
|
|
}
|
|
</style>
|