cma_search/client/src/views/dashboard/index.vue

311 lines
8.1 KiB
Python

<template>
<div class="dashboard-container">
<el-row :gutter="10" class="panel-group">
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/share/qualification')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
检验检测资质
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.test_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/share/cma')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
检测能力(总部CMA+CNAS)
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.consumer1_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/share/cma2')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
检测能力(分子公司CMA)
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.consumer2_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/share/inspection')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
检验能力
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.test_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/share/correct')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
校准/检定能力
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.test_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="12" :xl="6" class="card-panel-col">
<div class="card-panel" @click="toPath('/test/videolist')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="table" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
视频培训
</div>
<!-- <count-to :start-val="0" v-bind:end-val="ret.test_count" :duration="1600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :sm="24" :lg="12" :xl="6">
<el-card>
<div slot="header" class="clearfix">
<span>待办任务提醒</span>
</div>
<div class="litem" @click="goRecord('task2do')" v-if="checkPermission(['task2do'])">
<el-link class="desc">
您有
<span style="color:red">{{task2Num}}</span>
条记录待完成
</el-link>
</div>
<div class="litem" @click="goRecord('待报送')" v-if="!checkPermission(['record_confirm']) && checkPermission(['record_up'])">
<el-link class="desc">
您有
<span style="color:red">{{todos.toup}}</span>
条记录待报送
</el-link>
</div>
<div class="litem">
<el-link class="desc" @click="goRecord('待整改')" v-if="!checkPermission(['record_confirm']) && checkPermission(['record_up'])">
您有
<span style="color:red">{{todos.tozg}}</span>
条记录待整改
</el-link>
</div>
<div class="litem" @click="goRecord('已报送')" v-if="checkPermission(['record_confirm'])">
<el-link class="desc" v-if="todos.toconfirm">
您有
<span style="color:red">{{todos.toconfirm}}</span>
条记录待确认
</el-link>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { getMyTask2Do } from "@/api/task";
import { mapGetters } from 'vuex'
import { getRecordtodos } from "@/api/todos"
import checkPermission from "@/utils/permission";
export default {
name: 'Dashboard',
computed: {
...mapGetters([
'name',
'perms'
])
},
data(){
return {
todos:{},
task2Num:0,
}
},
created(){
this.gettodos();
this.geTask2Num();
},
methods:{
checkPermission,
toPath(val) {
this.$router.push({path:val})
},
geTask2Num(){
getMyTask2Do({page:0}).then((res) => {
let data = res.data,list=[];
data.forEach(item => {
if(item.count_up<item.count_all){
list.push(item)
}
});
this.task2Num = list.length;
});
},
gettodos() {
getRecordtodos().then(res=>{
this.todos = res.data
})
},
goRecord(state){
if(state=='task2do'){
this.$router.push({name:'myGoalTask'})
}else{
this.$router.push({name:'Record', params: {state:state}})
}
}
}
}
</script>
<style lang="scss" scoped>
.litem {
margin-bottom: 4px;
.desc {
color: rgba(0, 0, 0, 0.65);
font-weight: bold;
font-size: 16px;
}
}
.dashboard {
&-container {
margin: 10px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
.panel-group {
margin-top: 10px;
.card-panel-col {
margin-bottom: 10px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width:800px) {
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 50%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 0px auto !important;
float: none !important;
}
}
.card-panel-description {
margin:0px !important;
float: none !important;
font-weight: bold;
/* margin: 26px; */
margin-top: 20px !important;
text-align: center;
/* margin-left: 0px; */
}
}
</style>