Commit 1ec2d9e4 authored by dlkong's avatar dlkong

角色菜单,四色图初始化

parent 6de75853
.DS_Store
node_modules
/dist
package-lock.json*
# local env files
.env.local
......@@ -19,3 +20,4 @@ yarn-error.log*
*.njsproj
*.sln
*.sw?
*.zip
......@@ -908,6 +908,166 @@
"@hapi/hoek": "^8.3.0"
}
},
"@interactjs/actions": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.2.tgz",
"integrity": "sha512-BHJcW84WCMf/LsKmha/1Yog7aH3+QBXbLvowvZvwYvgjdUIb3xCa1a7FUYXuWAeKNMyKPVjFun+WPce75B+1tA==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/arrange": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/arrange/-/arrange-1.10.2.tgz",
"integrity": "sha512-pPLA9o4RWMFN0VfalklOFSRLL4WqqXcD9no4XEuqV00goZPCxLBbMTztaWwnutlRy7evtOhUjUH+pZVsS+dZ4Q=="
},
"@interactjs/auto-scroll": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.2.tgz",
"integrity": "sha512-yYqzOawwvWd1NNnlqZdzrXoOMFafQ2/ws85erpJqdaNMQE221z2uP+QYhFRLQRgYUlTbHFfmjDpzhuJgq4uA8Q==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/auto-start": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.2.tgz",
"integrity": "sha512-nZudj8VzJzz+uEyDHqXwtKpvUYr+Oj1+xBrJEu21CywroHQWM2J4fCIiCgeCo3d5/p/TrzFk5b+YfAWePKiLxA==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/clone": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/clone/-/clone-1.10.2.tgz",
"integrity": "sha512-XzA8BRHSCwvysOegZ1kopg+IJF3erh4qzY6DRoZsIJovKAXawoa176E58IAzDbgYPJ2yoaSGT+XyzT2C0wa3pQ=="
},
"@interactjs/core": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.2.tgz",
"integrity": "sha512-SA5KRGo+gFJOhBj1Z2dLHhAf0/2nyHNd4SQ460aIQ3jj/QhqbJW6kGzmh7hBa2FzVGgxLhcQu7NZaP4rnDfUNw=="
},
"@interactjs/dev-tools": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.2.tgz",
"integrity": "sha512-aAd9NgTAGA3yVdFCYcAAYrM4TYQFuVqEvsF+xj+g5SlGyrJ7+GTjPZ2rScOyAsABY4Tz64L2pXvWmXMG87dncA==",
"requires": {
"@interactjs/interact": "1.10.2",
"@interactjs/utils": "1.10.2"
}
},
"@interactjs/feedback": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/feedback/-/feedback-1.10.2.tgz",
"integrity": "sha512-XlcoICGrFeUwwRtDgOpstOOvlU42WZoEg7gJHK3LwF7j0IctPd1+3blXofFlBeVvodle8MvUMepm5CRXz741fA=="
},
"@interactjs/inertia": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.2.tgz",
"integrity": "sha512-ZmN1joN6J36Q6SOp3V0iZOisXZOBMSAUj0STo8wbwCKy7K8IrC9vjUBbO2JM52cT6o7hg5ebHsp5c8FrebSHlg==",
"requires": {
"@interactjs/interact": "1.10.2",
"@interactjs/offset": "1.10.2"
}
},
"@interactjs/interact": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.2.tgz",
"integrity": "sha512-Ms5uVCY9IobVYpQyBnBdkP6Bk6iDY7TkC7GupsdUPUxzAvYSQCTEAGr/1PwxSrSS6dN/8O8TuyUWPbCaylr/JA==",
"requires": {
"@interactjs/core": "1.10.2",
"@interactjs/types": "1.10.2",
"@interactjs/utils": "1.10.2"
}
},
"@interactjs/interactjs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.2.tgz",
"integrity": "sha512-OwLl70af6lfZOOg/bvWKSNm1DS1nDI72QnzDYljSKfc2D8stqLIGDO1wPY2rhZudUG5q3t50EhmMUQF76yll/g==",
"requires": {
"@interactjs/actions": "1.10.2",
"@interactjs/arrange": "1.10.2",
"@interactjs/auto-scroll": "1.10.2",
"@interactjs/auto-start": "1.10.2",
"@interactjs/clone": "1.10.2",
"@interactjs/core": "1.10.2",
"@interactjs/dev-tools": "1.10.2",
"@interactjs/feedback": "1.10.2",
"@interactjs/inertia": "1.10.2",
"@interactjs/interact": "1.10.2",
"@interactjs/modifiers": "1.10.2",
"@interactjs/multi-target": "1.10.2",
"@interactjs/offset": "1.10.2",
"@interactjs/pointer-events": "1.10.2",
"@interactjs/react": "1.10.2",
"@interactjs/reflow": "1.10.2",
"@interactjs/utils": "1.10.2",
"@interactjs/vue": "1.10.2"
}
},
"@interactjs/modifiers": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.2.tgz",
"integrity": "sha512-3wYEucvZF2NTIslnVIKw5MWhkn9LM42cGCQaC19o3LZeWnbps7NnHJCyQp6zylJrCbwt7f+CSt4Oj2/s0f6XEA==",
"requires": {
"@interactjs/interact": "1.10.2",
"@interactjs/snappers": "1.10.2"
}
},
"@interactjs/multi-target": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/multi-target/-/multi-target-1.10.2.tgz",
"integrity": "sha512-O2GiIqgZBzjAVTOpL8doTnAcM9AtM3+H/Bb+An12wWKtNutVK7JbqUAO2nYueOk55/PP3yDLY9Qdr15RJns3lQ=="
},
"@interactjs/offset": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.2.tgz",
"integrity": "sha512-xLgQqinFUY7ZqSX9d9on7XRcxvQdHNEAktj2QFwxMsEwrA6zbKROpPVwt8WQ1yBAeJSFjgYGcmCMPW5K41dT0w==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/pointer-events": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.2.tgz",
"integrity": "sha512-O8s3N399hkGIzWGlcJVy0LJyDn5YWDh6XKjyowh/QivtlZSWPY8eglmlN2uZX0lmiqUYghbKI4CpQYP/cE0ZDA==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/react": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/react/-/react-1.10.2.tgz",
"integrity": "sha512-JXzPdANft+W2vq3SCSzprCwom5UuC8TaiAAhVdt8R+/P6xHbOeAX93XLS5YmDwT8e0Zh9J9jYvz55tkTdwjFZQ=="
},
"@interactjs/reflow": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.2.tgz",
"integrity": "sha512-pc6o6RRhSCYQC4auZexRb7z5FQkdSVev5HzlRfUAjfw4C076qgbcs63ESRKy4YXdSBtUTvARQZxpuWUNGquzJw==",
"requires": {
"@interactjs/interact": "1.10.2"
}
},
"@interactjs/snappers": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.2.tgz",
"integrity": "sha512-wQ41Vn5GRn6VavjIEUtTkd9d5QgdKgC4+CPW0fjKkiQclLBmaic7VibNETO8twN0Jx5e73EoPj9K2nAVHIA0hA=="
},
"@interactjs/types": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.2.tgz",
"integrity": "sha512-l0T1bU8OHRv716ztQOYwP+K7b/lA76C0T3r/cdabbUv6CKeAFdFRRFlmNxYOM36SxMGWAiq5VWrN3SeXlB7Fow=="
},
"@interactjs/utils": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.2.tgz",
"integrity": "sha512-sOr+pu7XGAN4qv+ikajMo3RJygbkbMLegmx0Tv5Qf6e80sF42FjkmHeMGuV7fL98nwat0VmDiWerOFBnKctXow=="
},
"@interactjs/vue": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@interactjs/vue/-/vue-1.10.2.tgz",
"integrity": "sha512-msLdc42DFsCPQZt6YBGZrw8Ro23kQcNnj+iLz2OUQcOrp/lma7WjorUuAwwfyFna2DevLtiYlMLbT0dpO/cVhg=="
},
"@intervolga/optimize-cssnano-plugin": {
"version": "1.0.6",
"resolved": "https://registry.npm.taobao.org/@intervolga/optimize-cssnano-plugin/download/@intervolga/optimize-cssnano-plugin-1.0.6.tgz",
......@@ -2916,6 +3076,11 @@
"resolved": "http://registry.npm.taobao.org/batch/download/batch-0.6.1.tgz",
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
},
"batch-processor": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
"integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
},
"bcrypt-pbkdf": {
"version": "1.0.2",
"resolved": "http://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
......@@ -5178,6 +5343,14 @@
"resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.322.tgz",
"integrity": "sha1-pvfhx5AlwrBYOOjjRPbonrgyE6g="
},
"element-resize-detector": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
"integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
"requires": {
"batch-processor": "1.0.0"
}
},
"elliptic": {
"version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz",
......@@ -12105,6 +12278,12 @@
"ajv-keywords": "^3.4.1"
}
},
"screenfull": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==",
"dev": true
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
......@@ -15484,6 +15663,20 @@
}
}
},
"vue-grid-layout": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.4.0.tgz",
"integrity": "sha512-MRQVt1BdWDaPN4gKGEKOVVwiTyucqJhrGEyjiY9Muor+dzFFq4Hm0geSpYJpLvC1GLlTL8KWUwy0suKrHm+mqg==",
"requires": {
"@interactjs/actions": "1.10.2",
"@interactjs/auto-scroll": "1.10.2",
"@interactjs/auto-start": "1.10.2",
"@interactjs/dev-tools": "1.10.2",
"@interactjs/interactjs": "1.10.2",
"@interactjs/modifiers": "1.10.2",
"element-resize-detector": "^1.2.1"
}
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
......
......@@ -40,7 +40,7 @@ export default {
'riskAdd'
],
// 不需要展示底部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预先定义的缓存页面
otherCache: [],
// 专门处理列表缓存的页面,这些页面缓存逻辑与其他缓存不一样去详情返回列表缓存,但是进入列表必须刷新,如何有需要缓存的列表请放到这里来。
......
......@@ -4,18 +4,19 @@ import App from './App.vue'
import router from './router'
import store from './store'
import qs from 'qs';
// import VueGridLayout from 'vue-grid-layout';
import './permission'
import Cookies from 'js-cookie'
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,
Step, Steps } from 'vant'
Step, Steps, Lazyload } from 'vant'
import 'lib-flexible/flexible'
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
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)
.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(DropdownItem);
// 引用高德地图组件 main.js
......
......@@ -120,7 +120,7 @@ const routes = [{
name: 'riskManage',
component: () => import('../views/riskProject/manage'),
},
//风险项目评估
//风险评估
{
path: '/riskAssess',
name: 'riskAssess',
......@@ -166,6 +166,21 @@ const routes = [{
name: 'addPresent',
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({
......
<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
......@@ -206,6 +206,7 @@
},
};
</script>
<style lang="less" scoped>
#app {
......
<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>
<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>
......@@ -6,25 +6,31 @@
办公控制台
</header>
</van-sticky>
<!-- <van-search
v-model="value"
placeholder="搜索"
@search="onSearch"
>
<template #right-icon>
<van-icon name="add" @click="createdClick"/>
</template>
</van-search> -->
<van-notice-bar left-icon="volume-o" :scrollable="true" color="#a09c9c" background="#D5EAFF">
<van-swipe
class="notice-swipe"
:show-indicators="false"
width="100vw"
>
<van-swipe-item>危险源系统正式上线</van-swipe-item>
<van-swipe-item>汛期安全防护会议计划本周日召开</van-swipe-item>
</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">
<van-cell-group inset>
<van-cell value="风险评估管理" />
<van-cell-group inset v-for="(item, index) in riskList" :key="index">
<van-cell :value="item.menuName" />
<van-grid :column-num="5">
<van-grid-item
@click="dangerJump(item.path)"
v-for="item in riskList"
:key="item.key"
:icon="item.imgUrl"
:text="item.text"
@click="dangerJump(it.path)"
v-for="it in item.children"
:key="it.key"
:icon="it.icon"
:text="it.menuName"
/>
</van-grid>
</van-cell-group>
......@@ -44,45 +50,93 @@ export default {
data() {
return {
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",
imgUrl: require("@/assets/workbench/risk-report.png"),
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",
imgUrl: require("@/assets/workbench/risk-confirm.png"),
text: "风险评估",
},
{
key: "4",
path: "/riskApprove",
imgUrl: require("@/assets/workbench/risk-account.png"),
text: "风险审批",
},
{
key: "5",
path: "/riskLedger",
imgUrl: require("@/assets/workbench/danger-account.png"),
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() {
},
mounted() {
this.getMenuList()
},
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(){
},
......@@ -128,4 +182,20 @@ export default {
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>
......@@ -8,8 +8,9 @@ module.exports = {
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: { //配置跨域
'/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.36:8080/', //这里是后台的地址
ws: true,
changOrigin: true, //允许跨域
// 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