Skip to content

A
agcs2.0-web
Commit 9a24a79b authored by 刘予佳's avatar 刘予佳
Browse files
Options

质控报告页面

parent 051d7d77
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 44 deletions
src/assets/style/_base.scss
View file @ 9a24a79b
......@@ -530,3 +530,93 @@ textarea:-ms-input-placeholder {
page-break-before: avoid;
}
}
//间距
$size-map: (
-2: -2px,
4: 4px,
5: 5px,
8: 8px,
10: 10px,
12: 12px,
15: 15px,
16: 16px,
20: 20px,
24: 24px,
25: 25px,
30: 30px,
32: 32px,
40: 40px,
50: 50px,
80: 80px,
140: 140px
);
@each $name in map-keys($size-map) {
$value: map-get($size-map, $name);
.mt-#{$name} {
margin-top: $value;
}
.mr-#{$name} {
margin-right: $value;
}
.mb-#{$name} {
margin-bottom: $value;
}
.ml-#{$name} {
margin-left: $value;
}
.margin-#{$name} {
margin: $value;
}
.pt-#{$name} {
padding-top: $value !important;
}
.pr-#{$name} {
padding-right: $value;
}
.pb-#{$name} {
padding-bottom: $value;
}
.pl-#{$name} {
padding-left: $value;
}
.pd-#{$name} {
padding: $value;
}
}
//字号
$font-map: (
10: 10px,
11: 11px,
14: 14px,
15: 15px,
18: 18px,
20: 20px,
24: 24px,
25: 25px,
30: 30px,
36: 36px,
40: 40px,
50: 50px,
80: 80px,
140: 140px
);
@each $size in map-keys($font-map) {
$value: map-get($font-map, $size);
.font-#{$size} {
font-size: $value;
}
}
src/layouts/components/NavBar/index.vue
View file @ 9a24a79b
......@@ -14,27 +14,21 @@
:class="['font', index == fontIndex ? 'active' : '']"
@click="changeFont(index)"
>
<div class="label">
{{ item.label }}
<div class="label">{{ item.label }}</div>
</div>
</div>
</div>
<div
v-show="curSelectedIndex != -1"
class="community"
@click="openModalFlag"
>
<img src="~@/assets/img/DataCenter/shift.png" alt="" />
<div v-show="curSelectedIndex != -1" class="community" @click="openModalFlag">
<img src="~@/assets/img/DataCenter/shift.png" alt />
{{ screeningList[curSelectedIndex].title }}
</div>
<div class="user">
<img src="~@/assets/img/DataCenter/user.png" alt="" />
<img src="~@/assets/img/DataCenter/user.png" alt />
<avatar></avatar>
</div>
<el-badge :value="messageCount" :class-name="'badge'">
<div class="user">
<img src="~@/assets/img/DataCenter/message.png" alt="" />
<img src="~@/assets/img/DataCenter/message.png" alt />
消息
</div>
</el-badge>
......@@ -143,6 +137,7 @@ export default {
display: flex;
justify-content: space-between;
color: #fff;
border-radius: 0px 0px 4px 4px;
.left-panel {
display: flex;
align-items: center;
......
src/layouts/index.vue
View file @ 9a24a79b
......@@ -10,10 +10,7 @@
>
<div :class="header === 'fixed' ? 'fixed-header' : ''">
<top-bar></top-bar>
<div
v-if="tagsBar === 'true' || tagsBar === true"
:class="{ 'tag-view-show': tagsBar }"
>
<div v-if="tagsBar === 'true' || tagsBar === true" :class="{ 'tag-view-show': tagsBar }">
<div class="vab-main">
<tags-bar></tags-bar>
</div>
......@@ -32,10 +29,7 @@
}"
>
<div :class="header === 'fixed' ? 'fixed-header' : ''">
<nav-bar
:cur-selected-index="curSelectedIndex"
@openModalFlag="openModalFlag"
></nav-bar>
<nav-bar :cur-selected-index="curSelectedIndex" @openModalFlag="openModalFlag"></nav-bar>
</div>
<side-bar></side-bar>
<div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
......@@ -55,37 +49,31 @@
<div class="modalContent">
<div class="title">请选择您的筛查填报场景</div>
<ul class="list">
<li
v-for="(item, index) in screeningList"
:key="index"
@click="selectedIndex = index"
>
<li v-for="(item, index) in screeningList" :key="index" @click="selectedIndex = index">
<div class="screeningItem">
<div class="circle">
<img
v-if="selectedIndex !== index"
src="~@/assets/img/DataCenter/circle.png"
alt=""
srcset=""
alt
srcset
/>
<img
v-if="selectedIndex == index"
src="~@/assets/img/DataCenter/selected.png"
alt=""
srcset=""
alt
srcset
/>
</div>
<div class="itemTitle">{{ item.title }}</div>
</div>
<div class="ItemIamge">
<img :src="item.src" alt="" />
<img :src="item.src" alt />
</div>
</li>
</ul>
<div class="submit">
<el-button type="primary" class="btn" @click="setSelectedIndex"
>保存</el-button
>
<el-button type="primary" class="btn" @click="setSelectedIndex">保存</el-button>
</div>
</div>
</el-dialog>
......@@ -215,7 +203,7 @@ export default {
}
&.fixed.no-tags-bar {
padding-top: 56px;
// padding-top: 56px;
}
::v-deep {
......@@ -277,7 +265,7 @@ export default {
}
&.fixed.no-tags-bar {
padding-top: 56px;
// padding-top: 56px;
}
.vab-main {
......@@ -323,6 +311,8 @@ export default {
.side-bar-container {
top: 90px;
height: calc(100vh - 90px);
border-radius: 0px 4px 4px 0px;
box-shadow: none;
}
}
::v-deep .homeDialog .el-dialog__header {
......
src/styles/variables.scss
View file @ 9a24a79b
......@@ -8,9 +8,9 @@
$base-color-default: #4e68ff;
$base-z-index: 999;
$base-menu-background: #08203d;
$base-menu-children-background: #08203d;
$base-menu-background-active: #164884;
$base-menu-background: #252C49;
$base-menu-children-background: #252C49;
$base-menu-background-active: #546184;
$base-menu-color: hsla(0, 0%, 100%, 0.95);
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
$base-title-color: #fff;
......@@ -30,7 +30,7 @@ $base-color-orange: #ff6700;
$base-color-red: #ff4d4f;
$base-color-gray: rgba(0, 0, 0, 0.65);
$base-main-width: 1279px;
$base-border-radius: 2px;
$base-border-radius: 4px;
$base-border-color: #dcdfe6;
$base-form-width: 600px;
$base-input-height: 32px;
......
src/views/qualitycontrol-report/index.vue
View file @ 9a24a79b
<template>
<div>质控报表</div>
<div class="main-box">
<div class="total-box">
<div class="box-title">
<div class="blue-area mr-12"></div>
<span class="bold-font">总体情况</span>
</div>
<el-row :gutter="20" class="data-box">
<el-col :span="6" v-for="(item,index) in totalList" :key="index">
<div class="grid-content mb-12">{{item.label}}</div>
<h1>{{totalData[item.prop]}}</h1>
</el-col>
</el-row>
</div>
<div class="person-area">
<div class="box-title">
<div class="blue-area mr-12"></div>
<span class="bold-font">个人绩效情况</span>
</div>
<div class="type-box">
<span class="mr-10">选择统计周期：</span>
<el-radio-group v-model="periodType">
<el-radio-button label="month">月度</el-radio-button>
<el-radio-button label="season">季度</el-radio-button>
<el-radio-button label="year">年度</el-radio-button>
</el-radio-group>
</div>
<div class="type-box">
<span class="mr-10">选择统计年份：</span>
<el-select v-model="yearBtn" placeholder="请选择">
<el-option v-for="item in yearList" :value="item" :key="item" :label="item"></el-option>
</el-select>
</div>
<el-table :data="tableData" border show-summary class="mt-20">
<el-table-column
v-for="(item,index) in tableColumn"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
return {
totalList:[
{
label:"累计审核病例数",
prop:"account"
},
{
label:"累计审核合格病例数",
prop:"account"
},
{
label:"累计审核驳回修改病例数",
prop:"account"
},
{
label:"累计审核不合格病例数",
prop:"account"
},
],
totalData:{
account:1600
},
periodType:"month",
yearList: [2021],
yearBtn:2022,
tableData:[{
id: '12987122',
name: '王小虎',
season: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
season: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
season: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
season: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
season: '539',
amount2: '4.1',
amount3: 15
}]
}
},
methods: {
getNow() {
const nowDate = new Date()
this.yearBtn = nowDate.getFullYear();
if(!this.yearList.find((item) => item == this.yearBtn)){
this.yearList.push(this.yearBtn)
this.yearList.sort((a, b) => {
return a - b
})
}
},
},
methods: {},
mounted() {},
created() {
this.getNow();
},
watch: {},
computed:{
tableColumn(){
const listM=[
{
label:"月份",
prop:"month"
},
{
label:"审核病例数（例）",
prop:"count"
},
]
const listS=[
{
label:"季度",
prop:"season"
},
{
label:"审核病例数（例）",
prop:"count"
},
]
if(this.periodType == 'month'){
return listM
}
if(this.periodType == 'season'){
return listS
}
}
}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
::v-deep {
.data-box {
margin: 24px 0px;
border-bottom: 1px solid #f3f3f3;
}
.el-col {
text-align: center;
margin: 12px 0px 28px;
border-right: 1px solid #f3f3f3;
.grid-content {
font-size: 16px;
font-family: AlibabaPuHuiTiR;
color: #333333;
}
h1 {
color: #4e68ff;
font-weight: bold;
font-size: 32px;
}
}
.el-col:last-child {
border-right: none;
}
}
.main-box {
margin: 24px;
}
.box-title {
display: flex;
flex-direction: row;
}
.blue-area {
width: 4px;
height: 24px;
background: #4e68ff;
}
.bold-font {
font-size: 18px;
font-family: AlibabaPuHuiTiM;
color: #333333;
font-weight: bold;
}
.type-box {
display: flex;
flex-direction: row;
margin: 32px 0px 0px;
line-height: 32px;
}
</style>
vue.config.js
View file @ 9a24a79b
......@@ -88,8 +88,8 @@ module.exports = {
},
proxy: {
"/api": {
target: "http://192.168.31.140:11021/",
// target: "https://ds.cixincloud.com/geca-api/",
// target: "http://192.168.31.140:11021/",
target: "https://ds.cixincloud.com/geca-api/",
changeOrigin: true,
pathRewrite: {
"^/api": "",
......
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