|
|
@@ -1,7 +1,5 @@
|
|
|
<template>
|
|
|
<div class="home-container">
|
|
|
-
|
|
|
-
|
|
|
<!-- 快捷菜单 -->
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
@@ -11,50 +9,73 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
|
|
|
-
|
|
|
<!-- 待办事项 -->
|
|
|
- <el-col :xs="24" :sm="12" :md="9" :lg="9">
|
|
|
+ <el-col :xs="24" :sm="12" :md="9" :lg="9">
|
|
|
<el-card class="card-group">
|
|
|
<p class="card-title">待办事项</p>
|
|
|
<el-row v-if="dataList.length > 0" :gutter="20">
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" v-for="(v,i) in dataList" :key="i">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :md="12"
|
|
|
+ :lg="12"
|
|
|
+ v-for="(v, i) in dataList"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
<div class="card-panel">
|
|
|
- <div class="card-panel-icon-wrapper icon-people" @click="clickNum(v)">
|
|
|
-<!-- <svg-icon icon-class="example" class-name="card-panel-icon" />-->
|
|
|
- <img class="card-item-icon" :src="require(`../assets/icons/home/${v.taskTypeText}.png`)" alt="">
|
|
|
+ <div
|
|
|
+ class="card-panel-icon-wrapper icon-people"
|
|
|
+ @click="clickNum(v)"
|
|
|
+ >
|
|
|
+ <!-- <svg-icon icon-class="example" class-name="card-panel-icon" />-->
|
|
|
+ <img
|
|
|
+ class="card-item-icon"
|
|
|
+ :src="require(`../assets/icons/home/${v.taskTypeText}.png`)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="card-icon-text">
|
|
|
- {{v.taskTypeText}}
|
|
|
+ {{ v.taskTypeText }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">
|
|
|
- {{v.statusText}}
|
|
|
+ {{ v.statusText }}
|
|
|
</div>
|
|
|
- <span v-if="!v.nums" style="font-size: 20px;">0</span>
|
|
|
- <span v-else @click="clickNum(v)" >
|
|
|
- <count-to :start-val="0" :end-val="v.nums" :duration="3000" class="card-panel-num" />
|
|
|
+ <span v-if="!v.nums" style="font-size: 20px">0</span>
|
|
|
+ <span v-else @click="clickNum(v)">
|
|
|
+ <count-to
|
|
|
+ :start-val="0"
|
|
|
+ :end-val="v.nums"
|
|
|
+ :duration="3000"
|
|
|
+ class="card-panel-num"
|
|
|
+ />
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <div style="padding: 25px;" v-else>
|
|
|
- <el-empty description="暂无数据"></el-empty>
|
|
|
+ <div style="padding: 25px" v-else>
|
|
|
+ <el-empty description="暂无数据"></el-empty>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
|
|
|
<!-- 其他 -->
|
|
|
- <el-col :xs="24" :sm="12" :md="15" :lg="15">
|
|
|
+ <el-col :xs="24" :sm="12" :md="15" :lg="15">
|
|
|
<el-card class="chart-wrapper">
|
|
|
<el-tabs type="border-card">
|
|
|
<el-tab-pane>
|
|
|
<span slot="label" class="tab_font">通知公告</span>
|
|
|
<div class="tab-panel">
|
|
|
<div v-if="msgsList.length > 0">
|
|
|
- <div class="msg-item" v-for="(v,i) in msgsList" :key="v.id" @click="showMsg(v)">
|
|
|
- <span class="item-title">{{v.title}}</span>
|
|
|
- <span class="item-time">{{v.publishTime}}</span>
|
|
|
+ <div
|
|
|
+ class="msg-item"
|
|
|
+ v-for="(v, i) in msgsList"
|
|
|
+ :key="v.id"
|
|
|
+ @click="showMsg(v)"
|
|
|
+ >
|
|
|
+ <span class="item-title">{{ v.title }}</span>
|
|
|
+ <span class="item-time">{{ v.publishTime }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-empty v-else description="暂无数据"></el-empty>
|
|
|
@@ -64,10 +85,10 @@
|
|
|
<span slot="label" class="tab_font">知识库</span>
|
|
|
<div class="tab-panel">
|
|
|
<div v-if="fileList.length > 0">
|
|
|
- <div class="file-item" v-for="(v,i) in fileList" :key="i">
|
|
|
+ <div class="file-item" v-for="(v, i) in fileList" :key="i">
|
|
|
<a :href="imageUrl(v.url)" target="_blank">
|
|
|
- <span><i class="el-icon-document"></i>{{v.name}}</span>
|
|
|
- <span>{{v.createTime}}</span>
|
|
|
+ <span><i class="el-icon-document"></i>{{ v.name }}</span>
|
|
|
+ <span>{{ v.createTime }}</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -85,18 +106,24 @@
|
|
|
:visible.sync="show"
|
|
|
width="1000px"
|
|
|
append-to-body
|
|
|
- @close="handleClose">
|
|
|
+ @close="handleClose"
|
|
|
+ >
|
|
|
<div class="panel-box" v-if="selectMsg">
|
|
|
- <h2>{{selectMsg.title}}</h2>
|
|
|
- <p><span>发布机构:{{selectMsg.publishOrg}}</span><span style="margin-left: 20px">发布日期:{{selectMsg.publishTime}}</span></p>
|
|
|
+ <h2>{{ selectMsg.title }}</h2>
|
|
|
+ <p>
|
|
|
+ <span>发布机构:{{ selectMsg.publishOrg }}</span
|
|
|
+ ><span style="margin-left: 20px"
|
|
|
+ >发布日期:{{ selectMsg.publishTime }}</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
<div class="content-box">
|
|
|
- <p class="text-box">{{selectMsg.content}}</p>
|
|
|
+ <p class="text-box">{{ selectMsg.content }}</p>
|
|
|
<div v-if="selectMsg.fileList && selectMsg.fileList.length > 0">
|
|
|
附件:
|
|
|
<ul v-if="selectMsg.fileList && selectMsg.fileList.length > 0">
|
|
|
- <li v-for="(v,i) in selectMsg.fileList" :key="v.url">
|
|
|
+ <li v-for="(v, i) in selectMsg.fileList" :key="v.url">
|
|
|
<a :href="imageUrl(v.url)" target="_blank">
|
|
|
- <span><i class="el-icon-document"></i>{{v.name}}</span>
|
|
|
+ <span><i class="el-icon-document"></i>{{ v.name }}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -108,88 +135,124 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import PanelGroup from './dashboard/PanelGroup'
|
|
|
-import CountTo from 'vue-count-to'
|
|
|
-import {homeData,fileList} from '@/api/login'
|
|
|
-import {imageUrl} from "@/utils/ruoyi";
|
|
|
-import dayjs from 'dayjs'
|
|
|
-import {mapGetters} from "vuex";
|
|
|
+import PanelGroup from "./dashboard/PanelGroup";
|
|
|
+import CountTo from "vue-count-to";
|
|
|
+import { homeData, fileList } from "@/api/login";
|
|
|
+import { imageUrl } from "@/utils/ruoyi";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { checkPermi } from "@/utils/permission.js";
|
|
|
export default {
|
|
|
- name: 'Index',
|
|
|
+ name: "Index",
|
|
|
components: {
|
|
|
PanelGroup,
|
|
|
- CountTo
|
|
|
+ CountTo,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- pageList:[
|
|
|
+ pageList: [
|
|
|
{
|
|
|
- name:'教育培训',
|
|
|
- path:'/core/core/edu/task',
|
|
|
- query:{
|
|
|
- status:0
|
|
|
- }
|
|
|
+ name: "教育培训",
|
|
|
+ path: "/core/core/edu/task",
|
|
|
+ query: {
|
|
|
+ status: 0,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name:'预案演练',
|
|
|
- path:'/drillTask',
|
|
|
- query:{
|
|
|
- status:'0'
|
|
|
- }
|
|
|
+ name: "预案演练",
|
|
|
+ path: "/drillTask",
|
|
|
+ query: {
|
|
|
+ status: "0",
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name:'安全检查',
|
|
|
- path:'/safetycheck/saftask',
|
|
|
+ name: "安全检查",
|
|
|
+ path: "/safetycheck/saftask",
|
|
|
query: {
|
|
|
- status:1
|
|
|
- }
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name:'来访审批',
|
|
|
- path:'/Introduce/core/letter/approve',
|
|
|
+ name: "来访审批",
|
|
|
+ path: "/Introduce/core/letter/approve",
|
|
|
query: {
|
|
|
- approveStatus:0
|
|
|
- }
|
|
|
+ approveStatus: 0,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name:'隐患问题',
|
|
|
- path:'/question/list',
|
|
|
+ name: "隐患问题",
|
|
|
+ path: "/question/list",
|
|
|
query: {
|
|
|
- confirmStatus: 0
|
|
|
- }
|
|
|
+ confirmStatus: 0,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name:'隐患整改',
|
|
|
- path:'/question/reform',
|
|
|
+ name: "隐患整改",
|
|
|
+ path: "/question/reform",
|
|
|
query: {
|
|
|
- reformStatus: 10
|
|
|
- }
|
|
|
+ reformStatus: 10,
|
|
|
+ },
|
|
|
},
|
|
|
],
|
|
|
- iconList:[],
|
|
|
- dataList:[],
|
|
|
- fileList:[],
|
|
|
- msgsList:[],
|
|
|
- show:false,
|
|
|
- selectMsg:null,
|
|
|
- }
|
|
|
+ iconList: [],
|
|
|
+ dataList: [],
|
|
|
+ fileList: [],
|
|
|
+ msgsList: [],
|
|
|
+ show: false,
|
|
|
+ selectMsg: null,
|
|
|
+ };
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
this.getData();
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(["roleList",'isAdmin']),
|
|
|
+ ...mapGetters(["roleList", "isAdmin"]),
|
|
|
},
|
|
|
methods: {
|
|
|
imageUrl,
|
|
|
- clickNum(item){
|
|
|
- let page = this.pageList.find(v=>v.name === item.taskTypeText);
|
|
|
+ clickNum(item) {
|
|
|
+ let page = this.pageList.find((v) => v.name === item.taskTypeText);
|
|
|
+ let authStr = "";
|
|
|
+ let menuName = "";
|
|
|
+ switch (item.taskTypeText) {
|
|
|
+ case "安全检查": //安全检查
|
|
|
+ authStr = "core:safetytask:list";
|
|
|
+ menuName = "检查登记跟踪";
|
|
|
+ break;
|
|
|
+ case "预案演练": //
|
|
|
+ authStr = "core:drillTask:list";
|
|
|
+ menuName = "演练登记跟踪";
|
|
|
+ break;
|
|
|
+ case "教育培训": //教育培训
|
|
|
+ authStr = "core:eduTask:list";
|
|
|
+ menuName = "培训登记跟踪";
|
|
|
+ break;
|
|
|
+ case "来访审批": //
|
|
|
+ authStr = "core:letter:approveList";
|
|
|
+ menuName = "来访事项审批";
|
|
|
+ break;
|
|
|
+ case "隐患问题": //
|
|
|
+ authStr = "question:list";
|
|
|
+ menuName = "隐患问题清单";
|
|
|
+ break;
|
|
|
+ case "隐患整改": //隐患整改
|
|
|
+ authStr = "question:reform";
|
|
|
+ menuName = "整改情况跟踪";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ debugger
|
|
|
+ if (!checkPermi([authStr])) {
|
|
|
+ this.$alert(`您没有${menuName}的权限,请联系管理员!`, "提示");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
this.$router.push({
|
|
|
- path:page.path,
|
|
|
- query:page.query
|
|
|
- })
|
|
|
+ path: page.path,
|
|
|
+ query: page.query,
|
|
|
+ });
|
|
|
},
|
|
|
- showMsg(v){
|
|
|
+ showMsg(v) {
|
|
|
this.show = true;
|
|
|
this.selectMsg = v;
|
|
|
},
|
|
|
@@ -197,65 +260,65 @@ export default {
|
|
|
this.show = false;
|
|
|
this.selectMsg = null;
|
|
|
},
|
|
|
- getData(){
|
|
|
- console.log(this.roleList,'1213')
|
|
|
- if(this.roleList.length > 0 && this.roleList[0] !== "ROLE_DEFAULT"){
|
|
|
- homeData().then(res=>{
|
|
|
+ getData() {
|
|
|
+ console.log(this.roleList, "1213");
|
|
|
+ if (this.roleList.length > 0 && this.roleList[0] !== "ROLE_DEFAULT") {
|
|
|
+ homeData().then((res) => {
|
|
|
this.dataList = res.data;
|
|
|
});
|
|
|
- fileList().then(res=>{
|
|
|
- let {index1,index2} = res.data;
|
|
|
- if(index1){
|
|
|
+ fileList().then((res) => {
|
|
|
+ let { index1, index2 } = res.data;
|
|
|
+ if (index1) {
|
|
|
this.msgsList = index1;
|
|
|
}
|
|
|
- if(!index2)return;
|
|
|
- this.fileList = index2.map(v=>{
|
|
|
- return JSON.parse(v)
|
|
|
+ if (!index2) return;
|
|
|
+ this.fileList = index2.map((v) => {
|
|
|
+ return JSON.parse(v);
|
|
|
});
|
|
|
- this.fileList.forEach(v=>{
|
|
|
- v.createTime = dayjs(v.createTime).format('YYYY-MM-DD')
|
|
|
- })
|
|
|
- })
|
|
|
+ this.fileList.forEach((v) => {
|
|
|
+ v.createTime = dayjs(v.createTime).format("YYYY-MM-DD");
|
|
|
+ });
|
|
|
+ });
|
|
|
} else {
|
|
|
- if(!this.isAdmin){
|
|
|
- this.$alert('请尽快联系管理员设置角色信息', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
+ if (!this.isAdmin) {
|
|
|
+ this.$alert("请尽快联系管理员设置角色信息", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-.home-container{
|
|
|
- .el-card__body{
|
|
|
+.home-container {
|
|
|
+ .el-card__body {
|
|
|
padding: 10px 20px 10px 20px;
|
|
|
}
|
|
|
- .card-group{
|
|
|
+ .card-group {
|
|
|
.el-card__body {
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
- .el-tabs{
|
|
|
+ .el-tabs {
|
|
|
border-radius: 4px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
- .el-tabs--border-card{
|
|
|
+ .el-tabs--border-card {
|
|
|
border: none;
|
|
|
}
|
|
|
- .chart-wrapper{
|
|
|
- .el-card__body{
|
|
|
+ .chart-wrapper {
|
|
|
+ .el-card__body {
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
- .card-panel-num{
|
|
|
- color:#1ea8e9;
|
|
|
+ .card-panel-num {
|
|
|
+ color: #1ea8e9;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.tab_font{
|
|
|
+.tab_font {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
@@ -267,79 +330,79 @@ export default {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
-.card-title{
|
|
|
+.card-title {
|
|
|
width: 120px;
|
|
|
margin: 0 0 10px 0;
|
|
|
padding-left: 4px;
|
|
|
- color:#fff;
|
|
|
+ color: #fff;
|
|
|
line-height: 26px;
|
|
|
font-weight: bold;
|
|
|
letter-spacing: 2px;
|
|
|
background: linear-gradient(to right, #71bfe3, #fff);
|
|
|
}
|
|
|
-.card-group{
|
|
|
+.card-group {
|
|
|
height: 528px;
|
|
|
- .card-title{
|
|
|
+ .card-title {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
-.tab-panel{
|
|
|
+.tab-panel {
|
|
|
height: 457px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
//css 透明的属性=
|
|
|
-.card-item-icon{
|
|
|
+.card-item-icon {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
- &:hover{
|
|
|
- opacity:.8;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
-.msg-item{
|
|
|
+.msg-item {
|
|
|
font-size: 15px;
|
|
|
padding: 0 10px;
|
|
|
- color:#1ea8e9;
|
|
|
+ color: #1ea8e9;
|
|
|
line-height: 39px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- cursor:pointer;
|
|
|
- &:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
|
- white-space:nowrap;
|
|
|
+ white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: start;
|
|
|
}
|
|
|
- .item-title{
|
|
|
- flex:.75;
|
|
|
+ .item-title {
|
|
|
+ flex: 0.75;
|
|
|
}
|
|
|
- .item-time{
|
|
|
- flex:.25;
|
|
|
+ .item-time {
|
|
|
+ flex: 0.25;
|
|
|
text-align: right;
|
|
|
}
|
|
|
}
|
|
|
-.file-item{
|
|
|
+.file-item {
|
|
|
font-size: 15px;
|
|
|
padding: 0 10px;
|
|
|
- color:#1ea8e9;
|
|
|
+ color: #1ea8e9;
|
|
|
//text-decoration:underline;
|
|
|
line-height: 39px;
|
|
|
- >a{
|
|
|
+ > a {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- >i{
|
|
|
+ > i {
|
|
|
width: 70%;
|
|
|
overflow: hidden;
|
|
|
- white-space:nowrap;
|
|
|
+ white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: start;
|
|
|
}
|
|
|
}
|
|
|
- &:hover{
|
|
|
- text-decoration:underline;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
//&:hover{
|
|
|
// background-color: #6eb9ec;
|
|
|
@@ -351,13 +414,13 @@ export default {
|
|
|
margin-top: 20px;
|
|
|
.card-panel {
|
|
|
display: flex;
|
|
|
- flex:1;
|
|
|
+ flex: 1;
|
|
|
justify-content: space-between;
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
background: #fff;
|
|
|
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
|
- border-color: rgba(0, 0, 0, .05);
|
|
|
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
|
|
+ border-color: rgba(0, 0, 0, 0.05);
|
|
|
margin: 10px 0;
|
|
|
|
|
|
.icon-people {
|
|
|
@@ -381,7 +444,7 @@ export default {
|
|
|
float: left;
|
|
|
font-size: 44px;
|
|
|
}
|
|
|
- .card-icon-text{
|
|
|
+ .card-icon-text {
|
|
|
padding-top: 8px;
|
|
|
text-align: center;
|
|
|
line-height: 20px;
|
|
|
@@ -410,18 +473,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.panel-box{
|
|
|
- >h2{
|
|
|
+.panel-box {
|
|
|
+ > h2 {
|
|
|
text-align: center;
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
- >p{
|
|
|
+ > p {
|
|
|
font-size: 14px;
|
|
|
color: #999;
|
|
|
text-align: end;
|
|
|
}
|
|
|
- .content-box{
|
|
|
- >p{
|
|
|
+ .content-box {
|
|
|
+ > p {
|
|
|
text-indent: 2em;
|
|
|
word-break: break-word;
|
|
|
white-space: pre-wrap;
|
|
|
@@ -435,24 +498,24 @@ export default {
|
|
|
padding: 10px;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
- >div{
|
|
|
- >ul{
|
|
|
+ > div {
|
|
|
+ > ul {
|
|
|
font-size: 15px;
|
|
|
margin: 0;
|
|
|
- color:#1ea8e9;
|
|
|
- >li{
|
|
|
+ color: #1ea8e9;
|
|
|
+ > li {
|
|
|
align-items: center;
|
|
|
- list-style:none;
|
|
|
+ list-style: none;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
- >li:hover{
|
|
|
- text-decoration:underline;
|
|
|
+ > li:hover {
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-@media (max-width:550px) {
|
|
|
+@media (max-width: 550px) {
|
|
|
.card-panel-description {
|
|
|
display: none;
|
|
|
}
|