Skip to content

R
rongtong-pc
Commit 17699257 authored by p-wanping.song's avatar p-wanping.song
Browse files
Options

添加四色图

parent 70b3b902
Hide whitespace changes
Inline Side-by-side
Showing with 628 additions and 78 deletions
src/api/risk/draw.js 0 → 100644
View file @ 17699257
import request from "@/utils/request";
// 查询固有风险清单库列表
export function ledgerRoomList(query) {
return request({
url: "system/ledger/room/list",
method: "get",
params: query,
});
}
// 查询固有风险清单库详细
export function getDictList(query) {
return request({
url: "/risk/plan/dict/data/list",
method: "get",
params: query,
});
}
src/views/risk/drawCanvas/index.vue 0 → 100644
View file @ 17699257
<template>
<div class="wrap" ref="mapmidbox">
<!-- <div class="north">
<img src="../../assets/imgs/north.png" alt="" />
</div> -->
<grid-layout
:layout.sync="layout"
:col-num="colNum"
:row-height="30"
:vertical-compact="false"
:use-css-transforms="true"
:prevent-collision="false"
:preventCollision="true"
>
<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"
:isDraggable="false"
:isResizable="false"
@resized="resizedEvent"
@moved="movedEvent"
:style="{
backgroundColor: item.c,
border: item.type == 'thorough' ? 'none !important' : ''
}"
>
<span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
item.name
}}</span>
<!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
</grid-item>
</grid-layout>
</div>
</template>
<script>
import { GridLayout, GridItem } from "vue-grid-layout";
import { ledgerRoomList ,getDictList} from "@/api/risk/draw";
// 动态添加/删除
export default {
name: "riskView",
components: {
GridLayout,
GridItem
},
data() {
return {
text: "房间位置绘制工具",
layout: [
// { x: 0, y: 0, w: 2, h: 3, i: "1",name: "办公室1",c:'#FF4433',isDraggable:false,isResizable:false,},
// { x: 2, y: 0, w: 2, h: 3, i: "2",name: "办公室2",c:'#FF9800',isDraggable:false,isResizable:false},
// { x: 4, y: 0, w: 2, h: 3, i: "3",name: "办公室2",c:'#FFFF00',isDraggable:false,isResizable:false},
// { x: 6, y: 0, w: 2, h: 3, i: "4",name: "办公室2",c:'#0091EA',isDraggable:false,isResizable:false},
// { x: 0, y: 3, w: 2, h: 3, i: "5",name: "办公室2",c:'#FF4433',isDraggable:false,isResizable:false},
],
draggable: false,
resizable: true,
colNum: 12,
// isScreenFull :null,
layOutItem: {}, //新增的房间对象
show: false,
title: "",
showPicker: false,
roomType: "",
roomName: "",
roomArr: [],
colorList: ["#FF4433", "#FF9800", "#FFFF00", "#0091EA"],
isViews: true, // true:查看页面； false: 添加页面
showHeader: true,
isRoom: true, //是否为添加房间
isBase: false,
baseName: "",
baseArr: [],
layoutData: []
};
},
props: {
isView: {
type: Boolean,
default: false
}
},
mounted() {
// screenfull.toggle(this.$refs.mapbox);
// this.$nextTick(() => {
// this.rotateBox();
// });
console.log("floorId==>>", this.$route.params.floorId);
if (this._props.isView) {
console.log("作为组件传值==>>");
this.isViews = true;
this.showHeader = false;
}
if (this.$route.params.isView) {
this.isViews = true;
this.initRotate();
window.addEventListener(
"onorientationchange" in window ? "orientationchange" : "resize",
this.orientationChange,
false
);
}
this.getRoomInfo();
},
methods: {
orientationChange() {
if (window.orientation === 180 || window.orientation === 0) {
console.log("竖屏状态！");
}
if (window.orientation === 90 || window.orientation === -90) {
console.log("横屏状态！");
}
// let width = document.documentElement.clientWidth//页面宽度
// let height = document.documentElement.clientHeight//页面高度
// console.log('width==>>',width)
// console.log('height==>>',height)
this.rotateBox();
},
initRotate() {
let width = document.documentElement.clientWidth, //页面宽度
height = document.documentElement.clientHeight, //页面高度
wrapper = this.$refs.mapmidbox, //需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
style = ""; //样式
console.log("width==>>", width);
console.log("height==>>", height);
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;";
wrapper.style.cssText = style;
},
rotateBox() {
// this.isScreenFull = !this.isScreenFull;//是否全屏状态
let width = document.documentElement.clientWidth, //页面宽度
height = document.documentElement.clientHeight, //页面高度
wrapper = this.$refs.mapmidbox, //需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
style = ""; //样式
console.log("width==>>", width);
console.log("height==>>", height);
// if (height < width) {//注意原来就是宽屏时不用横屏
// return;
// }
if (height < width) {
// 横屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(0deg); transform: rotate(0deg);";
// 注意旋转中点的处理
style +=
"-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
} else {
// 竖屏
// 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;";
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;";
}
console.log("style==>>", style);
wrapper.style.cssText = style;
},
getRoomInfo() {
let data = {
floorId: this.$route.params.floorId ? this.$route.params.floorId : "4"
};
ledgerRoomList(data)
.then(res => {
if (res.code == 200) {
this.layout = [];
this.layoutData = res.data;
res.data.forEach(item => {
item.position = JSON.parse(item.position);
item.position.i = item.id;
item.position.id = item.id;
if (!this.showHeader) {
item.position.isDraggable = false;
item.position.isResizable = false;
}
// if (!this.isViews || item.position.type == "thorough") {
// //添加页面不显示颜色
// item.position.c = "#e6e5e5";
// } else {
/**
* 根据风险评分来匹配相应的颜色
* score 风险评分字段
*/
// item.score = Number(item.score)
// if (item.score>=21 && item.score <= 27) { //优
// item.position.c = this.colorList[3]
// }else if(item.score>=14 && item.score <=20){ //良
// item.position.c = this.colorList[2]
// }else if (item.score>=7&& item.score <= 13) { //中
// item.position.c = this.colorList[1]
// }else if (item.score>=0 && item.score <= 6) { //差
// item.position.c = this.colorList[0]
// }
item.position.c = this.colorList[Math.floor(Math.random() * 4)];
// }
this.layout.push(item.position);
});
// console.log('layout==>>',this.layout)
}
})
.catch(err => {
console.log("err==>>", err);
});
// getDictList({
// dictType: "risk_plan_room_type"
// }).then(res => {
// this.roomArr = res.data;
// });
// getDictList({
// dictType: "risk_plan_base_room"
// }).then(res => {
// this.baseArr = res.data;
// });
},
// 增加
addItem() {
if (this.layout.find(item => item.i == "")) {
Toast.fail({
title: "提示",
forbidClick: true,
message: "请先点击确定，保存当前房间信息"
});
return;
}
this.roomType = "";
this.roomName = "";
this.title = "创建房间";
this.isRoom = true;
this.show = true;
this.isBase = false;
},
// 添加其他
addOther() {
if (this.layout.find(item => item.i == "")) {
Toast.fail({
title: "提示",
forbidClick: true,
message: "请先点击确定，保存当前房间信息"
});
return;
}
this.isRoom = false;
this.isBase = false;
this.roomType = "";
this.roomName = "";
this.title = "创建其他";
this.show = true;
},
//添加基础设施
addBase() {
if (this.layout.find(item => item.i == "")) {
Toast.fail({
title: "提示",
forbidClick: true,
message: "请先点击确定，保存当前房间信息"
});
return;
}
this.roomType = "";
this.roomName = "";
this.title = "添加基础设备";
this.isRoom = false;
this.isBase = true;
this.show = true;
},
// 移动后的事件
movedEvent(i, newX, newY) {
this.layOutItem.x = newX;
this.layOutItem.y = newY;
// console.log('layOutItem==>>',this.layOutItem)
// console.log('this.layout==>>',this.layout)
},
// 调整大小后的事件
resizedEvent: function(i, newH, newW) {
this.layOutItem.w = newW;
this.layOutItem.h = newH;
// console.log('layOutItem==>>',this.layOutItem)
// console.log('this.layout==>>',this.layout)
},
//关闭
close() {
history.go(-1);
},
//edger/room/update/batch
// 确定 执行批量编辑保存
confim() {
// if (this.roomName == '') {
// Toast.fail({
// title: '提示',
// forbidClick: true,
// message: '请先添加房间！',
// })
// return
// }
// let data = this.layoutData;
// this.layoutData.forEach(item => {
// item.position = JSON.stringify(item.position);
// });
// postFun("/ledger/room/update/batch", data)
// .then(res => {
// if (res.code == 200) {
// Toast.success("保存成功");
// this.getRoomInfo();
// }
// })
// .catch(err => {
// console.log("err==>>", err);
// });
},
//保存房间名称
cancelDialog() {
this.roomType = "";
this.roomName = "";
},
onConfirm(value) {
if (this.isRoom) {
this.roomType = value.dictValue;
} else {
this.roomName = value.dictValue;
}
this.showPicker = false;
}
}
};
</script>
<style scoped>
.router-view {
padding-bottom: 0px !important;
}
.wrap {
/* height: 100vh; */
width: 100vw;
position: relative;
}
.north {
position: absolute;
display: inline-block;
top: 1.5rem;
right: 0.5rem;
z-index: 999;
}
.north img {
width: 15px;
height: 30px;
}
.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 {
/* position: fixed;
top:auto;
right: auto;
left: 0;
bottom: 0; */
margin-top: 10px;
font-size: 0.3rem;
padding: 10px;
vertical-align: middle;
display: flex;
align-items: flex-start;
/* flex-direction: column; */
}
.setBtns .van-button--mini {
padding: 0 10px;
}
.remove {
position: absolute;
right: 2px;
top: 0;
cursor: pointer;
}
::v-deep .van-dialog__header {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.vue-grid-item {
-ms-touch-action: none;
touch-action: none;
box-sizing: border-box;
/* container-type: inline-size; */
}
.vue-grid-layout {
background: #f0f1f5;
}
.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 {
/* font-size: 6cqw; */
display: flex;
align-items: center;
justify-content: center;
/* position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0; */
margin: auto;
height: 100%;
width: 100%;
}
.rowText {
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}
.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;
}
.header {
width: 100%;
height: 1.2rem;
background: #2980f7;
text-align: center;
line-height: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.iconLeft {
color: white;
font-size: 12px;
transform: scale(0.8);
}
.header span {
color: white;
font-size: 16px;
line-height: 1.2rem;
margin: auto;
font-family: "Microsoft YaHei";
}
.iconRight {
color: white;
font-size: 12px;
transform: scale(0.8);
}
</style>
vue.config.js
View file @ 17699257
'use strict' "use strict";
const path = require('path') const path = require("path");
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, dir) return path.join(__dirname, dir);
} }
const CompressionPlugin = require('compression-webpack-plugin') const CompressionPlugin = require("compression-webpack-plugin");
const name = process.env.VUE_APP_TITLE || '融通物管安全管理平台' // 网页标题 const name = process.env.VUE_APP_TITLE || "融通物管安全管理平台"; // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口 const port = process.env.port || process.env.npm_config_port || 80; // 端口
// vue.config.js 配置说明 // vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
...@@ -20,116 +20,115 @@ module.exports = { ...@@ -20,116 +20,115 @@ module.exports = {
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。 // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/", publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist） // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist', outputDir: "dist",
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下） // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static', assetsDir: "static",
// 是否开启eslint保存检测，有效值：ture | false | 'error' // 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: process.env.NODE_ENV === "development",
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false, productionSourceMap: false,
// webpack-dev-server 相关配置 // webpack-dev-server 相关配置
devServer: { devServer: {
host: '0.0.0.0', host: "0.0.0.0",
port: port, port: port,
open: true, open: true,
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://192.168.4.232:8080`,//服务器地址 target: `http://192.168.4.232:8080`, //服务器地址
target: `http://192.168.15.230:8081`,//晓晋本地地址 // target: `http://192.168.15.230:8081`, //晓晋本地地址
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ["^" + process.env.VUE_APP_BASE_API]: "",
} },
} },
}, },
disableHostCheck: true disableHostCheck: true,
}, },
css: { css: {
loaderOptions: { loaderOptions: {
sass: { sass: {
sassOptions: { outputStyle: "expanded" } sassOptions: { outputStyle: "expanded" },
} },
} },
}, },
configureWebpack: { configureWebpack: {
name: name, name: name,
resolve: { resolve: {
alias: { alias: {
'@': resolve('src') "@": resolve("src"),
} },
}, },
plugins: [ plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件 // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({ new CompressionPlugin({
cache: false, // 不启用文件缓存 cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式 test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名 filename: "[path].gz[query]", // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩 algorithm: "gzip", // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩 minRatio: 0.8, // 压缩率小于1才会压缩
}) }),
], ],
}, },
chainWebpack(config) { chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test config.plugins.delete("preload"); // TODO: need test
config.plugins.delete('prefetch') // TODO: need test config.plugins.delete("prefetch"); // TODO: need test
// set svg-sprite-loader // set svg-sprite-loader
config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
config.module config.module
.rule('svg') .rule("icons")
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/) .test(/\.svg$/)
.include.add(resolve('src/assets/icons')) .include.add(resolve("src/assets/icons"))
.end() .end()
.use('svg-sprite-loader') .use("svg-sprite-loader")
.loader('svg-sprite-loader') .loader("svg-sprite-loader")
.options({ .options({
symbolId: 'icon-[name]' symbolId: "icon-[name]",
}) })
.end() .end();
config.when(process.env.NODE_ENV !== 'development', config => { config.when(process.env.NODE_ENV !== "development", (config) => {
config config
.plugin('ScriptExtHtmlWebpackPlugin') .plugin("ScriptExtHtmlWebpackPlugin")
.after('html') .after("html")
.use('script-ext-html-webpack-plugin', [{ .use("script-ext-html-webpack-plugin", [
{
// `runtime` must same as runtimeChunk name. default is `runtime` // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/ inline: /runtime\..*\.js$/,
}]) },
.end() ])
.end();
config.optimization.splitChunks({ config.optimization.splitChunks({
chunks: 'all', chunks: "all",
cacheGroups: { cacheGroups: {
libs: { libs: {
name: 'chunk-libs', name: "chunk-libs",
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
priority: 10, priority: 10,
chunks: 'initial' // only package third parties that are initially dependent chunks: "initial", // only package third parties that are initially dependent
}, },
elementUI: { elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package name: "chunk-elementUI", // split elementUI into a single package
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
}, },
commons: { commons: {
name: 'chunk-commons', name: "chunk-commons",
test: resolve('src/components'), // can customize your rules test: resolve("src/components"), // can customize your rules
minChunks: 3, // minimum common number minChunks: 3, // minimum common number
priority: 5, priority: 5,
reuseExistingChunk: true reuseExistingChunk: true,
} },
} },
}) });
config.optimization.runtimeChunk('single'), config.optimization.runtimeChunk("single"),
{ {
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件 from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
to: './' //到根目录下 to: "./", //到根目录下
} };
}) });
} },
} };
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