Skip to content

R
rongtong-app
Commit 1ec2d9e4 authored by dlkong's avatar dlkong
Browse files
Options

角色菜单，四色图初始化

parent 6de75853
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 764 additions and 33 deletions
.gitignore
View file @ 1ec2d9e4
.DS_Store .DS_Store
node_modules node_modules
/dist /dist
package-lock.json*
# local env files # local env files
.env.local .env.local
...@@ -19,3 +20,4 @@ yarn-error.log* ...@@ -19,3 +20,4 @@ yarn-error.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
*.zip
package-lock.json
View file @ 1ec2d9e4
This diff is collapsed.
src/App.vue
View file @ 1ec2d9e4
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
'riskAdd' 'riskAdd'
], ],
// 不需要展示底部tabbar的页面 // 不需要展示底部tabbar的页面
noTab:["login", "login2", 'addCurrent','addPresent','addInherent','riskInherent',"choose-people","scan",'success','fail','warn','center','reset-pas-two','riskTaskList'], noTab:["login", "login2", 'addCurrent','addPresent','addInherent','riskInherent',"choose-people","scan",'success','fail','warn','center','reset-pas-two','riskTaskList','riskView'],
// cachePage预先定义的缓存页面 // cachePage预先定义的缓存页面
otherCache: [], otherCache: [],
// 专门处理列表缓存的页面，这些页面缓存逻辑与其他缓存不一样去详情返回列表缓存，但是进入列表必须刷新,如何有需要缓存的列表请放到这里来。 // 专门处理列表缓存的页面，这些页面缓存逻辑与其他缓存不一样去详情返回列表缓存，但是进入列表必须刷新,如何有需要缓存的列表请放到这里来。
......
src/main.js
View file @ 1ec2d9e4
...@@ -4,18 +4,19 @@ import App from './App.vue' ...@@ -4,18 +4,19 @@ import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import qs from 'qs'; import qs from 'qs';
// import VueGridLayout from 'vue-grid-layout';
import './permission' import './permission'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import util from './api/util.js' import util from './api/util.js'
import {DropdownMenu, DropdownItem, Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row, Image as VanImage, Badge,NoticeBar,DatetimePicker, import {DropdownMenu, DropdownItem, Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row, Image as VanImage, Badge,NoticeBar,DatetimePicker,
Step, Steps } from 'vant' Step, Steps, Lazyload } from 'vant'
import 'lib-flexible/flexible' import 'lib-flexible/flexible'
import vueEsign from 'vue-esign' import vueEsign from 'vue-esign'
Vue.use(vueEsign) Vue.use(vueEsign)
Vue.prototype.util = util Vue.prototype.util = util
Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use(ContactCard).use(Form).use(AddressEdit).use(AddressList).use(Field).use(CellGroup).use(Cell).use(SwipeCell).use(Icon).use(Stepper).use(Card).use(Button).use(Swipe).use(SwipeItem).use(PullRefresh).use(List).use(Tab).use(Tabs).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(Search).use(Picker).use(Uploader).use(Notify) Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use(ContactCard).use(Form).use(AddressEdit).use(AddressList).use(Field).use(CellGroup).use(Cell).use(SwipeCell).use(Icon).use(Stepper).use(Card).use(Button).use(Swipe).use(SwipeItem).use(PullRefresh).use(List).use(Tab).use(Tabs).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(Search).use(Picker).use(Uploader).use(Notify)
.use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky) .use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky)
.use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage).use(Badge).use(NoticeBar).use(DatetimePicker).use(Step).use(Steps) .use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage).use(Badge).use(NoticeBar).use(DatetimePicker).use(Step).use(Steps).use(Lazyload)
Vue.use(DropdownMenu); Vue.use(DropdownMenu);
Vue.use(DropdownItem); Vue.use(DropdownItem);
// 引用高德地图组件 main.js // 引用高德地图组件 main.js
......
src/router/index.js
View file @ 1ec2d9e4
...@@ -120,7 +120,7 @@ const routes = [{ ...@@ -120,7 +120,7 @@ const routes = [{
name: 'riskManage', name: 'riskManage',
component: () => import('../views/riskProject/manage'), component: () => import('../views/riskProject/manage'),
}, },
//风险项目评估 //风险评估
{ {
path: '/riskAssess', path: '/riskAssess',
name: 'riskAssess', name: 'riskAssess',
...@@ -166,6 +166,21 @@ const routes = [{ ...@@ -166,6 +166,21 @@ const routes = [{
name: 'addPresent', name: 'addPresent',
component: () => import('../views/riskProject/add/addPresent.vue'), component: () => import('../views/riskProject/add/addPresent.vue'),
}, },
{//四色图
path: '/riskView',
name: 'riskView',
component: () => import('../views/drawCanvas/riskView.vue'),
},
{//任务台账
path: '/taskLedger',
name: 'taskLedger',
component: () => import('../views/riskProject/taskLedger/index.vue'),
},
{//任务台账
path: '/taskDetail',
name: 'taskDetail',
component: () => import('../views/riskProject/taskLedger/taskDetail.vue'),
},
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/views/drawCanvas/riskView.vue 0 → 100644
View file @ 1ec2d9e4
<template>
<div class="wrap" ref="mapmidbox">
<!-- <div class="layoutJSON">
名称<code>[x, y, w, h]</code>:
<div class="columns">
<div class="layoutItem" v-for="item in layout" :key="item.i">
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
</div>
</div>
</div> -->
<div class="setBtns">
<button @click="addItem">增加</button>
<button @click="restItem">重置</button>
<!-- <input type="checkbox" v-model="draggable" /> 拖拽 -->
<!-- <input type="checkbox" v-model="resizable" /> 大小 -->
</div>
<grid-layout :layout.sync="layout"
:col-num="colNum"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="false"
:use-css-transforms="true"
:prevent-collision="false"
>
<grid-item v-for="item in layout"
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
:style="{'backgroundColor':item.c,}"
>
<span class="text">{{item.i}}</span>
<span class="remove" @click="removeItem(item.i)">x</span>
</grid-item>
</grid-layout>
<van-grid direction="horizontal" :column-num="2" class="footer">
风险等级图例:
<span class="riskTab type1"></span>重大风险
<span class="riskTab type2"></span>较大风险
<span class="riskTab type3"></span>一般风险
<span class="riskTab type4"></span>较小风险
</van-grid>
</div>
</template>
<script>
import { GridLayout, GridItem } from "vue-grid-layout"
import screenfull from "screenfull";
import { getFun, postFun } from "@/service/table.js";
// 动态添加/删除
export default {
name:'riskView',
components: {
GridLayout,
GridItem
},
data() {
return {
layout: [
{ x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
{ x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
{ x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
{ x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
{ x: 0, y: 3, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
],
draggable: true,
resizable: true,
colNum: 16,
index: 0,
isScreenFull :null,
}
},
mounted() {
// this.$gridlayout.load();
this.index = this.layout.length;
// screenfull.toggle(this.$refs.mapbox);
this.$nextTick(() => {
// this.rotateBox();
});
},
methods: {
rotateBox() {
this.isScreenFull = !this.isScreenFull;//是否全屏状态
let width = document.documentElement.clientWidth,//页面宽度
height = document.documentElement.clientHeight,//页面高度
wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
style = "";//样式
if (height < width) {//注意原来就是宽屏时不用横屏
return;
}
if (this.isScreenFull) {
// 横屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style +=
"-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
} else {
// 竖屏
style += "width:100%";
style += "height:100%;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
}
wrapper.style.cssText = style;
},
// 增加
addItem: function () {
this.layout.push({
x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum/2 || 12), // puts it at the bottom
w: 2,
h: 3,
i: '办公室' + (this.index +1),
c: '#eee'
});
this.index++;
console.log('this.layout==>>',this.layout)
},
// 重置
restItem(){
this.layout = [
{ x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
{ x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
{ x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
{ x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
{ x: 0, y: 2, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
]
},
// 删除
removeItem: function (val) {
const index = this.layout.map(item => item.i).indexOf(val);
this.layout.splice(index, 1);
},
rgbColor(){//rgb颜色随机
const r = Math.floor(Math.random()*256);
const g = Math.floor(Math.random()*256);
const b = Math.floor(Math.random()*256);
return `rgb(${r},${g},${b})`;
},
}
}
</script>
<style scoped >
.wrap{
height: 100vh;
width: 100vw;
/* transform: rotate(90deg);
transform-origin: bottom left; */
}
.footer{
position: fixed;
left: 0;
bottom: 0;
font-size: 0.3rem;
font-weight: 600;
}
.riskTab{
display: inline-block;
width: 50px;
height: 20px;
margin: 0 10px 0px 15px;
border-radius: 5px;
}
.type1{
background-color: #FF4433;
}
.type2{
background-color: #FF9800;
}
.type3{
background-color: #FFFF00;
}
.type4{
background-color: #0091EA;
}
.layoutJSON {
background: #ddd;
border: 1px solid black;
padding: 10px;
}
.columns {
-moz-columns: 120px;
-webkit-columns: 120px;
columns: 120px;
}
/*************************************/
.setBtns{
padding: 10px;
vertical-align: middle;
display: flex;
align-items: center;
}
.setBtns input, .setBtns button{
margin-left: 15px;
}
.remove {
position: absolute;
right: 2px;
top: 0;
cursor: pointer;
}
.vue-grid-item {
-ms-touch-action: none;
touch-action: none;
box-sizing: border-box;
container-type: inline-size;
}
.vue-grid-layout {
background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: #cce;
}
.vue-grid-item .text {
writing-mode:vertical-rl;
font-size: 10cqw;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
.vue-draggable-handle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
background-position: bottom right;
padding: 0 8px 8px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/riskProject/manage/index.vue
View file @ 1ec2d9e4
...@@ -206,6 +206,7 @@ ...@@ -206,6 +206,7 @@
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#app { #app {
......
src/views/riskProject/taskLedger/index.vue 0 → 100644
View file @ 1ec2d9e4
<template>
<div class="wrap">
<van-sticky offset-top="0">
<LHeader :text="text"></LHeader>
</van-sticky>
<van-tabs
v-model="active"
color="#2980f7"
animated
:sticky="true"
>
<van-tab title="排序">
<template #title> 排序 <van-icon name="down" /></template>
<div
class="con-list"
>
<van-cell-group
inset
@click="touchstart(0)"
>
<div style="font-size: 0.45rem;padding: 5px 0;">项目评估任务单1</div>
<van-row gutter="">
<van-col span="17">
<van-row gutter="">
<van-col span="9">发起时间：</van-col>
<van-col span="15">2023-07-05</van-col>
</van-row>
<van-row gutter="">
<van-col span="9">处理人员：</van-col>
<van-col span="15">孔德龙</van-col>
</van-row>
</van-col>
<van-col span="7" :style="{'color':'#03b615'}">
发起
</van-col>
</van-row>
<!-- 长按显示遮罩层 -->
<van-overlay :show="showIndex == 0">
<div class="wrapper" @click.stop="showIndex = null">
<van-button round type="primary" @click="goDetail()"
>详情</van-button
>
</div>
</van-overlay>
</van-cell-group>
</div>
</van-tab>
<van-tab title="筛选">
<template #title> 筛选 <van-icon name="filter-o" /></template>
</van-tab>
</van-tabs>
</div>
</template>
<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
export default {
name:'taskLedger',//任务台账
data() {
return {
text:'任务台账',
active: 0,
showIndex: null, // 是否显示遮罩层,
}
},
components: {
LHeader,
},
mounted() {
},
methods: {
//点击列表
touchstart(index, item) {
if (this.showIndex != null) {
this.showIndex = null;
return;
}
this.showIndex = index;
},
// 详情
goDetail(){
this.$router.push({
name: "taskDetail",
params: {
id:'',
},
});
}
},
}
</script>
<style scoped lang="less">
.wrap{
height: 100vh;
width: 100vw;
}
.con-list {
padding: 0;
background-color: #f0f1f5;
.van-cell-group--inset {
margin: 0;
margin-bottom: 0.26667rem;
padding: 0.25rem;
font-size: 0.4rem;
position: relative;
border-radius: 4%;
box-shadow: 0px 0px 10px 2px #f3f3f3;
width: 90%;
margin: 0.4rem auto;
.van-row {
font-size: 0.4rem;
line-height: 0.8rem;
margin-bottom: 0;
}
.van-overlay {
position: absolute;
.wrapper {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100%;
}
}
}
}
</style>
src/views/riskProject/taskLedger/taskDetail.vue 0 → 100644
View file @ 1ec2d9e4
<template>
<div class="wrap">
<van-sticky offset-top="0">
<LHeader :text="text"></LHeader>
</van-sticky>
</div>
</template>
<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
export default {
name:'taskDetail',
data() {
return {
text: "任务单",
}
},
components: {
LHeader,
},
mounted() {
},
methods: {
},
}
</script>
<style scoped>
.wrap{
height: 100vh;
width: 100vw;
}
</style>
src/views/saveWorkbench/index.vue
View file @ 1ec2d9e4
...@@ -6,25 +6,31 @@ ...@@ -6,25 +6,31 @@
办公控制台 办公控制台
</header> </header>
</van-sticky> </van-sticky>
<!-- <van-search <van-notice-bar left-icon="volume-o" :scrollable="true" color="#a09c9c" background="#D5EAFF">
v-model="value" <van-swipe
placeholder="搜索" class="notice-swipe"
@search="onSearch" :show-indicators="false"
> width="100vw"
<template #right-icon> >
<van-icon name="add" @click="createdClick"/> <van-swipe-item>危险源系统正式上线</van-swipe-item>
</template> <van-swipe-item>汛期安全防护会议计划本周日召开</van-swipe-item>
</van-search> --> </van-swipe>
</van-notice-bar>
<van-swipe :autoplay="6000">
<van-swipe-item v-for="(item, index) in images" :key="index">
<img style="width:100%;height:200px" :src="item.url"/>
</van-swipe-item>
</van-swipe>
<div class="con"> <div class="con">
<van-cell-group inset> <van-cell-group inset v-for="(item, index) in riskList" :key="index">
<van-cell value="风险评估管理" /> <van-cell :value="item.menuName" />
<van-grid :column-num="5"> <van-grid :column-num="5">
<van-grid-item <van-grid-item
@click="dangerJump(item.path)" @click="dangerJump(it.path)"
v-for="item in riskList" v-for="it in item.children"
:key="item.key" :key="it.key"
:icon="item.imgUrl" :icon="it.icon"
:text="item.text" :text="it.menuName"
/> />
</van-grid> </van-grid>
</van-cell-group> </van-cell-group>
...@@ -44,45 +50,93 @@ export default { ...@@ -44,45 +50,93 @@ export default {
data() { data() {
return { return {
value:'', value:'',
riskList: [ /**
// { * 总公司：任务台账；
// key: "1", * 区域负责人：任务管理，任务审批，任务台账
// path: "/riskAdd", * 评估负责人： 执行管理，风险评估，任务审批，任务台账
// imgUrl: require("@/assets/workbench/risk-report.png"), * 组员： 风险评估，任务台账
// text: "任务创建", */
// }, riskList2: [
{
path: "/taskLedger",
imgUrl: require("@/assets/workbench/work-approval.png"),
text: "任务台账",
},
{ {
key: "2",
// path: "/danger",
path: "/riskManage", path: "/riskManage",
imgUrl: require("@/assets/workbench/risk-report.png"), imgUrl: require("@/assets/workbench/risk-report.png"),
text: "任务管理", text: "任务管理",
}, },
{ {
key: "3", path: "/taskManage",
imgUrl: require("@/assets/workbench/plane-approval.png"),
text: "任务审批",
},
{
path: "/riskExecution",
imgUrl: require("@/assets/workbench/rectification-notice.png"),
text: "执行管理",
},
{
path: "/riskAssess", path: "/riskAssess",
imgUrl: require("@/assets/workbench/risk-confirm.png"), imgUrl: require("@/assets/workbench/risk-confirm.png"),
text: "风险评估", text: "风险评估",
}, },
{ {
key: "4",
path: "/riskApprove", path: "/riskApprove",
imgUrl: require("@/assets/workbench/risk-account.png"), imgUrl: require("@/assets/workbench/risk-account.png"),
text: "风险审批", text: "风险审批",
}, },
{ {
key: "5",
path: "/riskLedger", path: "/riskLedger",
imgUrl: require("@/assets/workbench/danger-account.png"), imgUrl: require("@/assets/workbench/danger-account.png"),
text: "风险台账", text: "风险台账",
}, },
// {
// path: "/riskView",
// imgUrl: require("@/assets/workbench/quarter_record.png"),
// text: "四色图",
// },
], ],
riskList:[],
images:[
{
url: require('@/assets/workbench/u47.png'),
},
{
url: require('@/assets/workbench/u51.png'),
},
{
url: require('@/assets/workbench/u55.png'),
},
]
}; };
}, },
created() { created() {
},
mounted() {
this.getMenuList()
}, },
methods: { methods: {
//查询角色菜单列表
getMenuList(){
getFun('/menu/roleMenuTreeselect').then((res) => {
this.riskList = res.list
this.riskList.forEach((item,index) => {
item.children.forEach((i,k) => {
let data = this.riskList2.find((y) => y.text == i.menuName)
if (data) {
i.icon = data.imgUrl
}
})
});
console.log('this.riskList==>>',this.riskList)
}).catch((err) => {
console.log('err==>>',err)
})
},
onSearch(){ onSearch(){
}, },
...@@ -128,4 +182,20 @@ export default { ...@@ -128,4 +182,20 @@ export default {
height: 1rem; height: 1rem;
} }
} }
.notice-swipe {
height: 40px;
line-height: 40px;
color: #a09c9c;
}
.van-swipe-item{
width: 100%;
}
.my-swipe .van-swipe-item {
width: 100%;
height: 300px;
img{
width: 100%;
height: 100%;
}
}
</style> </style>
vue.config.js
View file @ 1ec2d9e4
...@@ -8,8 +8,9 @@ module.exports = { ...@@ -8,8 +8,9 @@ module.exports = {
//以上的ip和端口是我们本机的;下面为需要跨域的 //以上的ip和端口是我们本机的;下面为需要跨域的
proxy: { //配置跨域 proxy: { //配置跨域
'/app-api': { '/app-api': {
target: 'http://192.168.4.232:8080/', //这里是后台的地址 // target: 'http://192.168.4.232:8080/', //这里是后台的地址
// target: 'http://192.168.10.137:8080/', //这里是后台的地址 // target: 'http://192.168.10.137:8080/', //这里是后台的地址
target: 'http://192.168.10.36:8080/', //这里是后台的地址
ws: true, ws: true,
changOrigin: true, //允许跨域 changOrigin: true, //允许跨域
// logLevel: 'debug', // 显示代理调试信息 // logLevel: 'debug', // 显示代理调试信息
......
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