parent
a2931feea2
commit
b819879a7b
|
After Width: | Height: | Size: 644 B |
|
After Width: | Height: | Size: 912 B |
|
After Width: | Height: | Size: 726 B |
|
After Width: | Height: | Size: 825 B |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="blockHeader">
|
||||
<div class="header--title">
|
||||
<div class="title--left">
|
||||
<div class="line"></div>
|
||||
<div class="title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="title--right" v-if="edit">
|
||||
<div class="anniu--btn--left">
|
||||
<el-button type="primary" plain size="mini" class="informant-btn" @click="sendEdit(0)">
|
||||
<img :src=" clickEdit ? require('@/assets/images/home/chongzhi@2x.png') :require('@/assets/images/home/edit@2x.png')" alt="" />
|
||||
{{ clickEdit ? '重置':'编辑' }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="anniu--btn--right" v-if="clickEdit">
|
||||
<el-button type="primary" plain size="mini" class="informant-btnTwo" @click="sendEdit(1)">
|
||||
<img src="@/assets/images/home/baocun@2x.png" alt="" />
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is--Slot">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'blockHeader',
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
required:true
|
||||
},
|
||||
edit:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clickEdit:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sendEdit(id){
|
||||
if(id) {
|
||||
// 保存按钮事件
|
||||
this.$emit('btnClick',2);
|
||||
this.clickEdit = false;
|
||||
} else {
|
||||
// 重置编辑按钮
|
||||
if(this.clickEdit) {
|
||||
// 重置按钮事件
|
||||
// this.clickEdit = false;
|
||||
this.$emit('btnClick',3);
|
||||
} else {
|
||||
// 编辑按钮事件
|
||||
this.clickEdit = true;
|
||||
this.$emit('btnClick',1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/utils.scss";
|
||||
.blockHeader {
|
||||
.header--title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title--left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
width: vw(4);
|
||||
height: vh(22);
|
||||
background: #1E80EB;
|
||||
margin-right: vw(9);
|
||||
}
|
||||
.title {
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1E80EB;
|
||||
}
|
||||
}
|
||||
.title--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.anniu--btn--left {
|
||||
::v-deep .informant-btn {
|
||||
width: vw(84);
|
||||
height: vh(40);
|
||||
background: #e4effd;
|
||||
border: vw(1) solid #1E80EB;
|
||||
border-radius: vw(4);
|
||||
line-height: vh(33);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
img {
|
||||
width: vw(13);
|
||||
margin-right: vw(5);
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: vw(14);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1E80EB;
|
||||
}
|
||||
}
|
||||
}
|
||||
.anniu--btn--right {
|
||||
margin-left: vw(10);
|
||||
::v-deep .informant-btnTwo {
|
||||
width: vw(84);
|
||||
height: vh(40);
|
||||
background: #e4effd;
|
||||
border: vw(1) solid #1E80EB;
|
||||
border-radius: vw(4);
|
||||
line-height: vh(33);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #1E80EB;
|
||||
img {
|
||||
width: vw(13);
|
||||
margin-right: vw(5);
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: vw(14);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is--Slot {
|
||||
margin-top: vh(24);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="my--descriptions" :class=" changeStyle ? 'my--descriptionsChange':''">
|
||||
<el-descriptions class="margin-top"
|
||||
:column="column"
|
||||
:size="size"
|
||||
:border="border"
|
||||
:colon="!changeStyle"
|
||||
:labelClassName=" width ? 'descriptions-labelWidth-style': changeStyle ? 'descriptions-labelChange-style':'descriptions-label-style'"
|
||||
:contentClassName=" width ? 'descriptions-contentWidth-style' : changeStyle ? 'descriptions-contentChange-style':'descriptions-content-style'">
|
||||
<el-descriptions-item v-for="item in descriptions" :key="item.id" :span="item.span ? item.span : 1 ">
|
||||
<template slot="label">
|
||||
{{ item.label }}
|
||||
</template>
|
||||
{{ item.value }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'myDescriptions',
|
||||
props:{
|
||||
descriptions:{
|
||||
type:Array,
|
||||
required:true
|
||||
},
|
||||
size:{
|
||||
type:String,
|
||||
default:'mini'
|
||||
},
|
||||
column:{
|
||||
type:Number,
|
||||
default:2
|
||||
},
|
||||
width:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
border:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
changeStyle:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/utils.scss";
|
||||
.my--descriptions {
|
||||
::v-deep .descriptions-label-style {
|
||||
background-color: #F7FBFE;
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #6A6C6F;
|
||||
width: vw(246);
|
||||
}
|
||||
::v-deep .descriptions-labelWidth-style {
|
||||
background-color: #F7FBFE;
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #6A6C6F;
|
||||
width: vw(306);
|
||||
}
|
||||
|
||||
::v-deep .descriptions-content-style {
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #292F38;
|
||||
width: vw(610);
|
||||
}
|
||||
::v-deep .descriptions-contentWidth-style {
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
width: vw(450);
|
||||
color: #292F38;
|
||||
}
|
||||
}
|
||||
.my--descriptionsChange {
|
||||
background-color: #F7FAFC;
|
||||
padding: vh(25) 0;
|
||||
.margin-top {
|
||||
::v-deep .el-descriptions__body {
|
||||
background-color: #F7FAFC;
|
||||
.descriptions-labelChange-style {
|
||||
background-color: #F7FAFC;
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #6A6C6F;
|
||||
width: vw(246);
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
.descriptions-contentChange-style {
|
||||
background-color: #F7FAFC;
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #292F38;
|
||||
width: vw(610);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:show-close="false"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
custom-class="dialog-boxed"
|
||||
:width="width"
|
||||
>
|
||||
|
||||
<div class="dialog-slot">
|
||||
<div class="closeClick">
|
||||
<div>{{ title }}</div>
|
||||
<i class="el-icon-close" @click="Close"></i>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { stringify } from 'querystring';
|
||||
|
||||
export default {
|
||||
name:"dialogTitle",
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false
|
||||
}
|
||||
},
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:"title",
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'50%'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
Close() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit('myForm')
|
||||
},
|
||||
tianbaoclose(){
|
||||
this.dialogVisible = false;
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/utils.scss";
|
||||
|
||||
.dialog-slot {
|
||||
padding: 0;
|
||||
.closeClick {
|
||||
position: absolute;
|
||||
top: vh(0);
|
||||
right: vw(0);
|
||||
padding: vw(10) vw(20);
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
background: #f8f9fa;
|
||||
box-shadow: 0px 1px 0px 0px #dbe0e8;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-family: Source Han Bolde CN;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: vh(5) 0 0 0;
|
||||
}
|
||||
div {
|
||||
font-size: vw(20);
|
||||
font-family: Source Han Bolde CN;
|
||||
font-weight: bold;
|
||||
color: #292f38;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="file-box">
|
||||
<div class="file-item" v-for="item,index in files" :key="item.id">
|
||||
<div class="item-left">
|
||||
<img src="@/assets/images/home/world.png" alt="">
|
||||
<div @click="downloadFile(index)">{{ item.name }}{{ item.size }}</div>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<img src="@/assets/images/home/download.png" alt="" @click="downloadFile(index)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageDate:[
|
||||
{
|
||||
url:require('@/assets/images/home/excel.png')
|
||||
},
|
||||
{
|
||||
url:require('@/assets/images/home/img.png')
|
||||
},
|
||||
{
|
||||
url:require('@/assets/images/home/world.png')
|
||||
},
|
||||
{
|
||||
url:require('@/assets/images/home/pdf.png')
|
||||
},
|
||||
],
|
||||
throttle:true,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
files:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return []
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//图标
|
||||
getImg(){
|
||||
let res = this.fileName.split('.')
|
||||
let msg =res[res.length-1]
|
||||
console.log(msg);
|
||||
if(msg == 'doc' || msg == 'docx'){
|
||||
return this.imageDate[2].url
|
||||
}else if(msg == 'xlsx' || msg == 'xls'){
|
||||
return this.imageDate[0].url
|
||||
}else if(msg == 'pdf'){
|
||||
return this.imageDate[3].url
|
||||
}else if(msg == 'png' || msg == 'jpg' ||msg == 'jpeg'){
|
||||
return this.imageDate[1].url
|
||||
}
|
||||
},
|
||||
downloadFile(index){
|
||||
// if(this.throttle) {
|
||||
// this.throttle = false;
|
||||
// this.download(
|
||||
// this.files.split(",")[1].split("/").splice(4).join("/"),
|
||||
// this.fileName
|
||||
// );
|
||||
// setTimeout(()=>{
|
||||
// this.throttle = true;
|
||||
// },1500)
|
||||
// }else {
|
||||
// this.$message({
|
||||
// message: "下载中请稍后",
|
||||
// type: "warning",
|
||||
// });
|
||||
// }
|
||||
this.$message({
|
||||
message: "下载中请稍后",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/utils.scss";
|
||||
.file-box {
|
||||
display: grid;
|
||||
grid-column: 1fr;
|
||||
grid-row-gap: vh(10);
|
||||
|
||||
.file-item {
|
||||
padding: vh(9) vw(10);
|
||||
width: 100%;
|
||||
background-color: #F8F9FA;
|
||||
border-radius: vw(2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: vw(21);
|
||||
// height: vw(23);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
div {
|
||||
font-size: vw(16);
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #6A6C6F;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
img {
|
||||
width: vw(19);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="right-content">
|
||||
<div class="name-content">
|
||||
<div class="drug-name">
|
||||
<span class="name">药品通用名称 : </span>
|
||||
<span class="tag">健母宝经典修护精华液</span>
|
||||
<div class="info-Tag">
|
||||
<div>10年老企</div>
|
||||
<div>高风险企业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-icon">
|
||||
<i class="el-icon-close" size="50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="left">
|
||||
<div class="left-grids">
|
||||
<gridsTitle title="检查人员组成" />
|
||||
<div class="main">
|
||||
<people />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-grids middle-box">
|
||||
<gridsTitle title="检查队伍学历分布" />
|
||||
<div class="main">
|
||||
<xueli />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-grids">
|
||||
<gridsTitle title="执法监督工作" />
|
||||
<div class="main">
|
||||
<zfdb />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<gridsTitle title="全省数据" />
|
||||
<div class="main">
|
||||
<leafletMap />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-grids">
|
||||
<gridsTitle title="检查员层级分布" />
|
||||
<div class="main">
|
||||
<hierarchy />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-grids middle-box">
|
||||
<gridsTitle title="检查员类别分布" />
|
||||
<div class="main">
|
||||
<typePie />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-grids">
|
||||
<gridsTitle title="检查员级别分布" />
|
||||
<div class="main">
|
||||
<LevelPie />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridsTitle from "../components/gridsTitle";
|
||||
import leafletMap from "../components/home/map";
|
||||
// 左侧图表
|
||||
import people from "../components/home/leftEcharts/people.vue";
|
||||
import xueli from "../components/home/leftEcharts/xueli.vue";
|
||||
import zfdb from "../components/home/leftEcharts/zfdb.vue";
|
||||
// 右侧图表
|
||||
import hierarchy from "../components/home/rightEchats/hierarchy.vue";
|
||||
import typePie from "../components/home/rightEchats/typePie.vue";
|
||||
import LevelPie from "../components/home/rightEchats/LevelPie.vue";
|
||||
export default {
|
||||
components: {
|
||||
gridsTitle,
|
||||
leafletMap,
|
||||
people,
|
||||
xueli,
|
||||
zfdb,
|
||||
hierarchy,
|
||||
typePie,
|
||||
LevelPie,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f2f2f2;
|
||||
padding: 10px;
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
flex: 2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.middle {
|
||||
height: 100%;
|
||||
background: #ffff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
.middle-box {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.right-content {
|
||||
background-color: #fff;
|
||||
.name-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #F2F3F5;
|
||||
.drug-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-family: Source Han Sans SC-Bold, Source Han Sans SC;
|
||||
font-weight: bold;
|
||||
color: #323233;
|
||||
.name {
|
||||
|
||||
}
|
||||
.tag {
|
||||
color: #1349C5;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.info-Tag {
|
||||
// margin-top: vh(9);
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
div {
|
||||
padding: 4px 11px;
|
||||
margin-right: 10px;
|
||||
background: #DDEBFA;
|
||||
border-radius: 4px;
|
||||
color: #1E80EB;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
background: #FDEBEB;
|
||||
border-radius: 4px;
|
||||
color: #E42424;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.close-icon {
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue