Commit cd6a914e authored by lizhichao's avatar lizhichao

新乐危化品平台

parents
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# hcsystem
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "hcsystem",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@jiaminghi/data-view": "^2.9.4",
"@types/axios": "^0.14.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"element-ui": "^2.13.0",
"ol": "^6.4.3",
"vue": "^2.6.11",
"vue-amap": "^0.5.10",
"vue-class-component": "^7.2.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vuex": "^3.1.2",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-typescript": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"parcel-bundler": "^1.12.4",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"typescript": "~3.7.5",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
body{padding: 0;margin: 0;background: #f9f9f9;overflow: hidden;width: 100%;height: 100%;font-size:14px;}
body.childPage{padding: 20px;}
[v-cloak]{display: none !important;}
.fl{float: left;}
.fr{float: right;}
.cent{text-align: center;}
.colorM{color: #1abc9c;}
.colorR{color: #F8333A;}
.colorB{color: #409EFF;}
.colorSL{color: #008000;}
.colorP{color: #6833F8;}
.pointer{cursor: pointer;}
.el-table th{background: #f9fafc;}
.el-table th,.el-table td{text-align: center;}
/* iframe{height: calc(100vh - 59px);} */
html{width: 100%;height: 100%;}
.hide{display: none;}
.marg10{margin-left: 10px;}
.margT10{margin-top: 10px;}
.iconfont{font-size: 20px;}
main > div{background: #ffffff;height:calc(100vh - 120px);padding: 0 10px;}
main > div .el-table{height:calc(100% - 120px);}
main > div .el-table .el-table__body-wrapper{height: calc(100% - 48px); overflow-y: auto;}
.userlist {
padding: 0 10px;
}
.topBar {
padding-top: 22px;
}
.el-pagination {
text-align: center;
padding-top: 20px;
}
.has-gutter tr th {
background: #f9fafc;
}
.el-dialog__body{max-height: 60vh;overflow: auto;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.ico">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1602732_a5503lsbuo.css"><!--单色 icon-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2005193_5ks6ghpnjgu.css"><!--图形-->
<script src="//at.alicdn.com/t/font_1767165_i3wsv6ptjfc.js"></script><!--彩色 svg icon-->
<link rel="stylesheet" href="./common.css"><!--自定义样式-->
<link rel="stylesheet" href="https://js.arcgis.com/3.33/dijit/themes/nihilo/nihilo.css">
<title>危化品企业监管平台</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="https://js.arcgis.com/3.33/"></script>
</html>
<template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {
},
})
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
}
</style>
<template>
<el-cascader
:disabled="disabled"
:options="options"
:props="props"
placeholder="请选择区域"
@change="handleChange"
v-model="citytxt"
></el-cascader>
</template>
<style lang="scss" scoped>
.el-cascader {
width: 100%;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
// let city = require('@/assets/citycode.json');
@Component({
components: {}
})
export default class Home extends Vue {
@Prop({
//父组件传来的值
type: Array,
default() {
return [];
}
})
public valueqv: any;
@Prop(Boolean) param!: Boolean;
@Prop(Boolean) disabled!: Boolean;
@Provide() citytxt: any = [];
@Provide() options: any = [];
@Provide() props: any = {
value: "id",
label: "label",
children: "children"
};
@Watch("valueqv") formChange(v: any) {
this.citytxt = this.valueqv;
}
getTreeData() {
let that = this;
METHOD.axiosGet(that, `/district/getDistrictData`, function(res: any) {
if (res.code == 0) {
that.options = res.data;
sessionStorage.setItem("cityJson", JSON.stringify(res.data));
}
});
}
handleChange(v: any) {
this.$emit("changeFun", v);
}
created() {
this.citytxt = this.valueqv;
let cityData = sessionStorage.getItem("cityJson");
if (cityData) {
this.options = JSON.parse(cityData);
} else {
this.getTreeData();
}
}
}
</script>
<template>
<div class="drawToolBox">
<div class="drawIcon" @click="toolShow = !toolShow">
<img :src="require('@/utils/plotUtil/img/arrow.png')" alt />
标绘
</div>
<transition name="fade">
<div class="drawTool" v-if="toolShow">
<h2>
态势标绘
<span @click="toolShow = !toolShow">&times;</span>
</h2>
<div id="menu">
<div class="menu_type">
<ul>
<li v-for="(i, index) in menuType" :key="index" :class="{ active: index == inde }" @click="inde = index">
<div class="menu_img">
<img :src="i.imgSrc" alt />
</div>
<div class="menu_txt">{{ i.txt }}</div>
</li>
<li
@click="
clearCurrFeature();
inde = 4;
"
>
<div class="menu_img">
<img :src="require('@/utils/plotUtil/img/clear.png')" alt />
<div class="menu_txt">清除</div>
</div>
</li>
<!--<li @click="function(){inde = 5;}" :class="{'active': 5 == inde}">
<div class="menu_img">
<img :src="require('@/utils/plotUtil/img/move.png')" alt />
<div class="menu_txt">移动</div>
</div>
</li>-->
<li @click="inde = 6" :class="{ active: 6 == inde }">
<div class="menu_img">
<img :src="require('@/utils/plotUtil/img/qita.png')" alt />
<div class="menu_txt">其他</div>
</div>
</li>
</ul>
</div>
<div class="menuSonType" v-show="inde == 0">
<button type="button" @click="activate('MARKER')" :class="{ act: 'MARKER' == TYPE }" style="padding-top:5px">点</button>
</div>
<div class="menuSonType" v-show="inde == 1">
<button type="button" @click="activate('CIRCLE')" :class="{ act: 'CIRCLE' == TYPE }">圆</button>
<button type="button" @click="activate('ELLIPSE')" :class="{ act: 'ELLIPSE' == TYPE }">椭圆</button>
<button type="button" @click="activate('LUNE')" :class="{ act: 'LUNE' == TYPE }">弓形</button>
<button type="button" @click="activate('SECTOR')" :class="{ act: 'SECTOR' == TYPE }">扇形</button>
<button type="button" @click="activate('CLOSED_CURVE')" :class="{ act: 'CLOSED_CURVE' == TYPE }">曲线面</button>
<button type="button" @click="activate('POLYGON')" :class="{ act: 'POLYGON' == TYPE }">多边形</button>
<button type="button" @click="activate('RECTANGLE')" :class="{ act: 'RECTANGLE' == TYPE }">矩形</button>
<button type="button" @click="activate('FREEHAND_POLYGON')" :class="{ act: 'FREEHAND_POLYGON' == TYPE }">自由面</button>
<button type="button" @click="activate('GATHERING_PLACE')" :class="{ act: 'GATHERING_PLACE' == TYPE }">聚集地</button>
</div>
<div class="menuSonType" v-show="inde == 2">
<button type="button" @click="activate('DOUBLE_ARROW')" :class="{ act: 'DOUBLE_ARROW' == TYPE }">钳击</button>
<button type="button" @click="activate('STRAIGHT_ARROW')" :class="{ act: 'STRAIGHT_ARROW' == TYPE }">直箭头</button>
<button type="button" @click="activate('FINE_ARROW')" :class="{ act: 'FINE_ARROW' == TYPE }">细直箭头</button>
<button type="button" @click="activate('ASSAULT_DIRECTION')" :class="{ act: 'ASSAULT_DIRECTION' == TYPE }">突击方向</button>
<button type="button" @click="activate('ATTACK_ARROW')" :class="{ act: 'ATTACK_ARROW' == TYPE }">进攻方向</button>
<button type="button" @click="activate('TAILED_ATTACK_ARROW')" :class="{ act: 'TAILED_ATTACK_ARROW' == TYPE }">进攻方向(尾)</button>
<button type="button" @click="activate('SQUAD_COMBAT')" :class="{ act: 'SQUAD_COMBAT' == TYPE }">分队战斗行动</button>
<button type="button" @click="activate('TAILED_SQUAD_COMBAT')" :class="{ act: 'TAILED_SQUAD_COMBAT' == TYPE }">分队战斗行动(尾)</button>
</div>
<div class="menuSonType" v-show="inde == 3">
<button type="button" @click="activate('ARC')" :class="{ act: 'ARC' == TYPE }">弧线</button>
<button type="button" @click="activate('CURVE')" :class="{ act: 'CURVE' == TYPE }">曲线</button>
<button type="button" @click="activate('POLYLINE')" :class="{ act: 'POLYLINE' == TYPE }">折线</button>
<button type="button" @click="activate('FREEHAND_LINE')" :class="{ act: 'FREEHAND_LINE' == TYPE }">自由线</button>
</div>
<div class="menuSonType" v-show="inde == 6">
<button type="button" @click="plotOperator('moveUp')" :class="{ act: 'moveUp' == TYPE }">上移</button>
<button type="button" @click="plotOperator('moveDown')" :class="{ act: 'moveDown' == TYPE }">下移</button>
<button type="button" @click="plotOperator('setToTop')" :class="{ act: 'setToTop' == TYPE }">置顶</button>
<button type="button" @click="plotOperator('setToBottom')" :class="{ act: 'setToBottom' == TYPE }">置底</button>
<button type="button" @click="plotOperator('clearFeatures', true)" :class="{ act: 'clearFeatures' == TYPE }">全部清除</button>
</div>
<div class="styleBox" v-if="op_feature && featureStyle.image">
<img
src="@/assets/flag.png"
alt
width="50px"
@click="
featureStyle.image.icon = { src: require('../assets/flag.png'), scale: 0.5 };
setStyle();
"
/>
<img
src="@/assets/start.png"
alt
width="20px"
@click="
featureStyle.image.icon = { src: require('../assets/start.png'), scale: 1 };
setStyle();
"
/>
<img
src="@/assets/mid.png"
alt
width="20px"
@click="
featureStyle.image.icon = { src: require('../assets/mid.png'), scale: 1 };
setStyle();
"
/>
<img
src="@/assets/end.png"
alt
width="20px"
@click="
featureStyle.image.icon = { src: require('../assets/end.png'), scale: 1 };
setStyle();
"
/>
</div>
<div class="styleBox" v-if="op_feature">
<p v-if="featureStyle.image && featureStyle.image.icon.scale">
图标尺寸:
<input type="number" v-model="featureStyle.image.icon.scale" @input="setStyle()" />
</p>
<p v-if="featureStyle.stroke && featureStyle.stroke.color">
线条颜色:
<input type="color" v-model="featureStyle.stroke.color" @change="setStyle()" />
</p>
<p v-if="featureStyle.stroke && featureStyle.stroke.width">
线条宽度:
<input type="number" v-model="featureStyle.stroke.width" @input="setStyle()" />
</p>
<p v-if="featureStyle.fill && featureStyle.fill.color">
填充颜色:
<span
class="coRgba coGreen"
@click="
featureStyle.fill.color = 'rgba(0, 255,0, 0.4)';
setStyle();
"
></span>
<span
class="coRgba coBlue"
@click="
featureStyle.fill.color = 'rgba(0, 0, 255, 0.4)';
setStyle();
"
></span>
<span
class="coRgba coPurple"
@click="
featureStyle.fill.color = 'rgba(255, 3, 236, 0.4)';
setStyle();
"
></span>
<span
class="coRgba coRed"
@click="
featureStyle.fill.color = 'rgba(255, 3, 3, 0.4)';
setStyle();
"
></span>
</p>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import "ol/ol.css";
import { Map, View } from "ol";
import { OverviewMap, defaults } from "ol/control";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat, toLonLat } from "ol/proj";
import olPlot from "@/utils/plotUtil/index.js";
@Component({
components: {},
})
export default class Home extends Vue {
@Prop(Object) MAP;
@Provide() inde = null;
@Provide() TYPE = null;
@Provide() toolShow = false;
@Provide() menuType = [
{
imgSrc: require("@/utils/plotUtil/img/flag.png"),
txt: "点标",
},
{
imgSrc: require("@/utils/plotUtil/img/circle.png"),
txt: "面标",
},
{
imgSrc: require("@/utils/plotUtil/img/arrow.png"),
txt: "箭头",
},
{
imgSrc: require("@/utils/plotUtil/img/line.png"),
txt: "线标",
},
// {
// imgSrc: require("@/utils/plotUtil/img/clear.png"),
// txt: "清除",
// },
// {
// imgSrc: require("@/utils/plotUtil/img/move.png"),
// txt: "移动",
// },
// {
// imgSrc: require("@/utils/plotUtil/img/qita.png"),
// txt: "其他",
// },
];
@Provide() op_feature = null;
@Provide() op_layer;
@Provide() featureStyle = {
fill: "",
stroke: "",
};
@Watch("featureStyle") change(newVal) {}
activate(type, zindex) {
let that = this;
that.op_feature = null;
that.TYPE = type;
that.op_layer.addFeature(olPlot.PlotTypes[type]);
}
//其他操作
plotOperator(method, no_need_feature) {
this.TYPE = method;
console.log(this.op_feature, !this.op_feature);
if (!this.op_feature) {
alert("请先选择一个标绘图元");
return;
}
this.op_layer[method](this.op_feature);
if (method == "clearFeatures") this.op_feature = null;
}
//清除当前标绘
clearCurrFeature() {
if (!this.op_feature) {
alert("请先选择一个标绘图元!");
return;
}
this.op_layer.removeFeature(this.op_feature);
this.op_feature = null;
}
//设置样式
setStyle() {
if (!this.op_feature) {
alert("请先选择一个标绘图元");
return;
}
this.op_feature.setStyle(this.featureStyle);
}
toggleType(key, evt) {
console.log(key, evt);
}
mounted() {
let that = this;
that.op_layer = new olPlot.PlottingLayer(that.MAP);
//激活绘图工具时
that.op_layer.on(olPlot.FeatureOperatorEvent.ACTIVATE, function (e) {
that.op_feature = e.feature_operator;
//获取当前图形样式
that.featureStyle = that.op_feature.getStyle();
});
//绘制完成时
that.op_layer.on(olPlot.FeatureOperatorEvent.DEACTIVATE, function (e) {
that.TYPE = null;
});
}
}
</script>
<style lang="scss">
#menu .menuSonType:nth-child(3) {
@for $i from 1 through 9 {
button:nth-child(#{$i}) {
background: url("../assets/tsicon/tsicon0#{$i}.png") top center #fff no-repeat;
}
}
}
#menu .menuSonType:nth-child(4) {
@for $i from 1 through 8 {
button:nth-child(#{$i}) {
background: url("../assets/tsicon/tsicon#{$i + 9}.png") top center #fff no-repeat;
}
}
}
#menu .menuSonType:nth-child(5) {
@for $i from 1 through 4 {
button:nth-child(#{$i}) {
background: url("../assets/tsicon/tsicon#{$i + 17}.png") top center #fff no-repeat;
}
}
}
#menu .menuSonType:nth-child(6){
button{
padding-top: 5px;
}
}
#menu .menuSonType button {
background-size: auto 30px !important;
padding-top: 30px;
border: 1px solid #0c59a3;
box-sizing: border-box;
border-radius: 3px;
}
</style>
<style>
.drawToolBox {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
}
.drawTool {
background: #fff;
border: 1px solid #1b944b;
width: 450px;
position: absolute;
right: 3em;
top: 0;
}
.drawTool h2 {
background: #1b5194;
color: white;
margin: 0;
padding: 5px;
text-align: left;
font-weight: normal;
font-size: 1.1em;
}
.drawTool h2 span {
font-size: 20px;
float: right;
cursor: pointer;
width: 20px;
}
.drawTool #menu {
padding: 10px;
}
.menu_type {
}
.menu_type ul {
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
margin: 0;
padding: 0;
}
.menu_type ul li {
text-align: center;
font-size: 13px;
display: block;
padding: 5px;
border: 2px solid #cfe1d6;
border-right: none;
width: 45px;
height: 45px;
cursor: pointer;
}
.menu_type ul li.active {
background-color: #e2e2e2;
}
.menu_type ul li:last-child {
border-right: 2px solid #cfe1d6;
}
.menu_type ul li img {
width: 30px;
height: 30px;
}
.menu_img {
height: 30px;
}
.menu_txt {
height: 15px;
line-height: 15px;
}
.menuSonType {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
border-radius: 5px;
position: relative;
margin-top: 10px;
}
.menuSonType:before {
content: "";
width: 0;
height: 0;
border-width: 10px;
display: block;
overflow: hidden;
border-color: transparent;
border-style: solid;
border-bottom-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 50%;
top: -20px;
transform: translateX(-50%);
}
.menuSonType button {
background: #fff;
background: #fff;
margin: 5px;
outline: none;
border: none;
font-size: 16px;
padding: 5px 8px;
}
.menuSonType button.act {
box-shadow: 0 0 8px 3px #5db7f7;
}
/*画图时的提示文字*/
.se-tooltip {
background: rgba(255, 255, 255, 0.8);
border: 1px dashed red;
}
.colorFan {
display: inline-block;
width: 10px;
height: 10px;
}
.styleBox {
overflow: hidden;
border: 1px solid #e2e0e0;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
}
.styleBox .stit {
font-size: 16px;
text-align: center;
}
.styleBox p {
margin: 0;
line-height: 30px;
display: inline-block;
padding: 5px 2px;
font-size: 14px;
box-sizing: border-box;
text-align: center;
}
.styleBox p input {
width: 40px;
height: 20px;
}
.styleBox button {
display: block;
background: linear-gradient(#34a5f8, #088ef0);
color: #fff;
outline: none;
border: none;
padding: 6px 10px;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
margin: 0 auto;
font-size: 14px;
border-radius: 3px;
}
/* <span class="coRgba coGreen"></span>
<span class="coRgba coBlue"></span>
<span class="coRgba coPurple"></span>
<span class="coRgba coRed"></span> */
.coRgba {
display: inline-block;
margin: 0 3px;
padding: 8px;
cursor: pointer;
}
.coGreen {
background: #0bd30b;
}
.coBlue {
background: blue;
}
.coPurple {
background: #e107e1;
}
.coRed {
background: red;
}
.styleBox > img {
padding: 10px;
}
.styleBox > img:nth-child(1) {
padding: 5px;
cursor: pointer;
}
.p-helper-control-point-div {
width: 12px;
height: 12px;
border: 1px solid #000;
background-color: #ff0;
opacity: 0.8;
cursor: pointer;
user-select: none;
border-radius: 50%;
}
.drawIcon {
width: 2em;
padding: 5px;
right: 1.2em;
line-height: 1;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #2b84ff;
font-size: 14px;
cursor: pointer;
}
.drawIcon img {
width: 2em;
}
</style>
<template>
<div class="mapwrap">
<el-dialog
title="绘制厂区边界"
:visible.sync="dialogTableVisible"
:show-close="false"
:close-on-click-modal="false"
id="mapcnt"
>
<el-row class="lt">
<el-button type="success" size="small" @click="starDrawBounds"
><i class="el-icon-edit"></i> 开始绘制</el-button
>
<el-button type="warning" size="small" @click="removeBounds"
><i class="el-icon-delete"></i> 清除绘制</el-button
>
<el-button type="primary" size="small" @click="confirmFun"
>提交边界</el-button
>
<el-button size="small" @click="$emit('dialogcancelFunB')"
>取消</el-button
>
</el-row>
<el-row>
<div id="mapContainerB" class="mapContainer">
<Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
</div>
</el-row>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
@Component({
components: {
Search,
},
})
export default class DrawBounds extends Vue {
@Provide() MAP: any;
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Prop(Boolean) dialogTableVisible!: Boolean;
@Prop(String) boundary!: String;
@Provide() Coordinates: any = [];
@Provide() mapView: any = {
center: "",
zoom: "",
polygoncoorArr: [],
};
@Provide() currSelectPolygon: any;
starDrawBounds() {
let that = this;
that.Mutil.drawPloygon(null, function (feature: any, target: any) {
//drawend 触发事件
let currView = that.MAP.getView();
that.mapView.center = currView.getCenter();
that.mapView.zoom = currView.getZoom();
let x = feature.getGeometry().getCoordinates({
right: true,
});
that.mapView.polygoncoorArr.push(x);
});
}
removeBounds() {
let that = this;
that.Mutil.removeSearchm("boundary");
that.mapView = {
center: "",
zoom: "",
polygoncoorArr: [],
};
}
confirmFun() {
let that = this;
that
.$confirm("确认提交厂区边界吗?", "提示", {
type: "info",
})
.then(() => {
that.$emit("drawconfirm", JSON.stringify(that.mapView));
that.$emit("dialogcancelFunB");
})
.catch(() => {
return;
});
}
mounted() {
let that = this;
console.log( that.dialogTableVisible )
that.$nextTick(() => {
that.Mutil = new Mutil("mapContainerB");
that.MAP = that.Mutil.MAP;
that.mapLoadDone = true;
if (that.boundary) {
that.mapView = JSON.parse((that as any).boundary);
that.Mutil.drawPloygon(JSON.parse((that as any).boundary));
}
that.Mutil.mapSelectBind((evt: any) => {
if (evt.selected[0].getGeometryName == "Polygon") {
that.currSelectPolygon = evt.selected[0];
}
});
});
}
}
</script>
<style lang="scss">
#mapcnt .el-dialog {
width: 90% !important;
}
.el-cascader {
width: 100%;
}
.lt .el-input {
width: 180px;
margin-right: 15px;
display: inline-block;
}
.mapContainer {
width: 100%;
height: 450px;
position: relative;
margin-top: 10px;
overflow: hidden;
}
.el-vue-amap-container {
width: 100%;
height: 100%;
}
.search-box {
position: absolute !important;
top: 10px;
left: 10px;
}
#searchbar input {
padding: 5px;
border: 1px solid royalblue;
border-radius: 5px;
min-width: 150px;
}
</style>
<template>
<div class="mapwrap">
<el-dialog
title="拾取坐标"
:visible.sync="dialogTableVisible"
:show-close="false"
:close-on-click-modal="false"
id="mapcnt"
>
<el-row class="lt">
经纬度:
<el-input
placeholder="经度"
v-model.number="lnglat.lng"
type="number"
></el-input>
<el-input
placeholder="纬度"
v-model.number="lnglat.lat"
type="number"
></el-input>
<el-button type="primary" size="small" @click="confirmFun"
>确定</el-button
>
<el-button size="small" @click="$emit('dialogcancelFun')"
>取消</el-button
>
</el-row>
<el-row>
<div id="mapContainer">
<Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
</div>
</el-row>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import { toLonLat } from "ol/proj";
@Component({
components: {
Search,
},
})
export default class Mapdialog extends Vue {
@Provide() MAP: any;
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Prop(Number) slat!: Number;
@Prop(Number) slng!: Number;
@Prop(Boolean) dialogTableVisible!: Boolean;
@Provide() zoom: Number = 12;
@Provide() lnglat: any = {
lng: 0,
lat: 0,
};
mapClick() {
let that = this;
that.MAP.on("click", function (evt: any) {
let lnglat = toLonLat(evt.coordinate);
that.Mutil.removeSearchm("pickLngLat");
that.Mutil.addMarkerToMap(
"pickLngLat",
"",
require("@/assets/mark/pk.png"),
lnglat,
0.5
);
that.lnglat.lng = Number(lnglat[0].toPrecision(10));
that.lnglat.lat = Number(lnglat[1].toPrecision(10));
});
}
confirmFun() {
this.$emit("dialogcancelFun");
this.$emit("confirm", {
lng: this.lnglat.lng,
lat: this.lnglat.lat,
});
}
cancel() {}
mounted() {
let that = this;
that.$nextTick(() => {
that.Mutil = new Mutil("mapContainer");
that.MAP = that.Mutil.MAP;
that.mapLoadDone = true;
if (typeof that.slng == "number" && that.slng != 0) {
that.lnglat.lng = that.slng;
that.lnglat.lat = that.slat;
that.Mutil.addMarkerToMap(
"pickLngLat",
"",
require("@/assets/mark/pk.png"),
[that.slng, that.slat],
0.5
);
that.Mutil.setViewF({
center: [that.slng, that.slat],
zoom: 16,
});
}
that.mapClick();
});
}
}
</script>
<style lang="scss">
#mapcnt .el-dialog {
width: 90% !important;
}
.el-cascader {
width: 100%;
}
.lt .el-input {
width: 180px;
margin-right: 15px;
display: inline-block;
}
#mapContainer {
width: 100%;
height: 450px;
position: relative;
margin-top: 10px;
overflow: hidden;
}
.el-vue-amap-container {
width: 100%;
height: 100%;
}
.search-box {
position: absolute !important;
top: 10px;
left: 10px;
}
#searchbar input {
padding: 5px;
border: 1px solid royalblue;
border-radius: 5px;
min-width: 150px;
}
</style>
<template>
<div>
<div class="toolsboxbar pointer" @click="toolBoxShow = true">
<i class="el-icon-news"></i>态势标绘
</div>
<transition name="fade" mode="out-in">
<div class="toolsbox" v-if="toolBoxShow">
<h3>
标绘工具
<span class="fr pointer">
<i class="el-icon-close" @click="toolBoxShow = false"></i>
</span>
</h3>
<ul class="toolBar">
<li @click="toggleTool('drawMarker')" :class="{'cl': tabAct == 'drawMarker'}">
<i class="iconfont icon-hongqi-svg"></i>标记
</li>
<li @click="toggleTool('drawPolyline')" :class="{'cl': tabAct == 'drawPolyline'}">
<i class="iconfont icon-zhexian"></i>线段
</li>
<li @click="toggleTool('drawCircle')" :class="{'cl': tabAct == 'drawCircle'}">
<i class="iconfont icon-yuanxing"></i>圆形
</li>
<li @click="toggleTool('drawPolygon')" :class="{'cl': tabAct == 'drawPolygon'}">
<i class="iconfont icon-duobianxing"></i>多边形
</li>
<li @click="toggleTool('drawRule')" :class="{'cl': tabAct == 'drawRule'}">
<i class="iconfont icon-ceju"></i>测距
</li>
<li @click="toggleTool('drawMeasureArea')" :class="{'cl': tabAct == 'drawMeasureArea'}">
<i class="iconfont icon-cemianji"></i>面积
</li>
<li class="bjtx" @click="editOverlays()">编辑图形</li>
<li class="bjtx" @click="endEditOverlays()">关闭编辑</li>
<li class="bjtx" @click="delOverlays()">删除图形</li>
<li class="bjtx" @click="endOverlays()">结束绘制</li>
<li class="bjtx" @click="delAllOverlays()">清除所有</li>
</ul>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
@Component({
components: {},
})
export default class mouseTool extends Vue {
@Prop(Object) MAP!:Object;
@Prop() toolobj!:any;
@Prop(Object) mouseTool!:Object;
@Provide() editorArr: any = [];
@Provide() tabAct: any = "";
@Provide() toolBoxShow: boolean = false;
toggleTool(wd: any) {
let that = this;
that.tabAct = wd;
that.toolobj[wd]();
}
getAllDrawLays() {
let that = this,
laysArr = that.MAP.getAllOverlays(),
CircleArr: any = [],
MarkerArr: any = [],
PolylineArr: any = [],
PolygonArr: any = [];
laysArr.forEach((ele: any) => {
if (ele.CLASS_NAME == "AMap.Circle") CircleArr.push(ele);
if (ele.CLASS_NAME == "AMap.Polygon") PolygonArr.push(ele);
if (ele.CLASS_NAME == "AMap.Polyline") PolylineArr.push(ele);
if (ele.CLASS_NAME == "AMap.Marker" && ele.getzIndex() == 9999) {
MarkerArr.push(ele);
}
});
let allDrawLays = [
...CircleArr,
...MarkerArr,
...PolylineArr,
...PolygonArr,
];
return {
allDrawLays,
CircleArr,
MarkerArr,
PolylineArr,
PolygonArr,
};
}
editOverlays() {
let that = this,
layobj = that.getAllDrawLays(),
polyArr = [...layobj.PolylineArr, ...layobj.PolylineArr],
type = that.tabAct.substring(4);
switch (type) {
case "Circle":
if (layobj.CircleArr.length > 0)
layobj.CircleArr.forEach((ele: any) => {
let editor = new AMap.CircleEditor(that.MAP, ele);
editor.open();
that.editorArr.push(editor);
});
break;
case "Polyline":
if (layobj.PolylineArr.length > 0)
layobj.PolylineArr.forEach((ele: any) => {
let editor = new AMap.PolyEditor(that.MAP, ele);
editor.open();
that.editorArr.push(editor);
});
break;
case "Polygon":
if (layobj.PolygonArr.length > 0)
layobj.PolygonArr.forEach((ele: any) => {
let editor = new AMap.PolyEditor(that.MAP, ele);
editor.open();
that.editorArr.push(editor);
});
break;
}
}
alertFun(len: number, type: string, isedit: boolean) {
let stype = "",
html = "";
switch (type) {
case "Circle":
stype = "圆形";
break;
case "Polyline":
stype = "线段";
break;
case "Polygon":
stype = "多边形";
break;
}
for (let i = 0; i < len; i++) {
let lena = i + 1;
if (isedit)
html += `<input name="in" type="radio" onClick="window.clickRadioLays(${lena})"/>第${lena}${stype}`;
else
html += `<input name="in" type="radio" onClick="window.delRadioLays(${lena})"/>第${lena}${stype}`;
}
this.$alert(html, "选择", {
closeOnClickModal: true,
showConfirmButton: false,
dangerouslyUseHTMLString: true,
});
}
endEditOverlays() {
let that = this;
if (that.editorArr.length > 0) {
that.editorArr.forEach((ele: any) => {
ele.close();
});
}
}
delAllOverlays() {
let that = this;
that.mouseTool.close(true);
that.tabAct = "";
}
endOverlays() {
let that = this;
that.mouseTool.close(false);
that.tabAct = "";
}
delOverlays() {
let that = this,
layobj: any = that.getAllDrawLays(),
html = "",
type = that.tabAct.substring(4),
len = layobj[type + "Arr"] ? layobj[type + "Arr"].length : "";
(window as any).delRadioLays = function (num: any) {
that.MAP.remove(layobj[type + "Arr"][num - 1]);
};
if (len > 0) that.alertFun(len, type, false);
}
created() {
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.toolsboxbar {
position: absolute;
right: 85px;
top: 12px;
z-index: 2;
border: 1px solid blue;
background: white;
color: blue;
padding: 3px 5px;
font-size: medium;
border-radius: 3px;
box-shadow: 1px 1px 3px 1px #a09e9e;
}
.toolsbox {
width: 155px;
position: absolute;
right: 80px;
top: 12px;
z-index: 2;
background: #fff;
h3 {
text-align: left;
margin: 0;
line-height: 1.8;
background: #000;
color: white;
padding: 0 5px;
}
}
.toolBar {
overflow: hidden;
display: flex;
margin: 0;
padding: 0;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px;
box-sizing: border-box;
li {
display: inline-block;
border: 1px solid #333;
padding: 2px;
border-radius: 3px;
cursor: pointer;
min-width: 60px;
text-align: center;
margin: 2px 0;
&.cl {
background: #0000ff;
color: white;
}
&.bjtx {
&:hover {
background: #08785c;
color: white;
}
}
.clr {
background: #08785c;
color: white;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="qxdialogVisible"
:title="'权限分配_' + roleName"
:show-close="false"
:close-on-click-modal="false"
>
<el-row :gutter="10">
<el-col :span="12">
<h4>菜单权限</h4>
<el-tree
:data="menuData"
show-checkbox
default-expand-all
ref="menuTree"
node-key="resourceId"
:props="Props"
:default-checked-keys="menuCheckedArr"
@check-change="menucheckchange"
></el-tree>
</el-col>
<el-col :span="12">
<h4>API权限</h4>
<el-tree
:data="apiData"
show-checkbox
default-expand-all
ref="apiTree"
:props="PropsB"
node-key="resourceId"
:default-checked-keys="apiCheckedArr"
@check-change="apicheckchange"
></el-tree>
</el-col>
</el-row>
<el-alert v-show="alertshow" title="请选择权限" show-icon type="warning" :closable="false"></el-alert>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun()">确定</el-button>
<el-button @click="$emit('QXdialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
@Component({
components: {}
})
export default class quan extends Vue {
@Prop(Boolean) qxdialogVisible!: Boolean;
@Prop(String) roleID!: String;
@Prop(String) roleName!: String;
//tree
@Provide() menuData: any = [];
@Provide() Props: Object = {
label: "menuName",
children: "childList"
};
@Provide() PropsB: Object = {
label: "resourceName",
children: "childList"
};
@Provide() apiData: any = [];
@Provide() menuCheckedArr: any = []; //默认选中节点
@Provide() apiCheckedArr: any = []; //默认选中节点
@Provide() menuTreeArr: any = []; //tree1选中节点
@Provide() apiTreeArr: any = []; //tree2选中节点
@Provide() allArr: any = [];//所有选中节点
@Provide() alertshow: Boolean = false;
@Watch("allArr") change(newVal: any) {
if (newVal.length == 0) this.alertshow = true;
else this.alertshow = false;
}
/*getMData(type: String) {
let that = this;
(this as any).$axios
.get(`/resource/getResourcesList/${type}`)
.then((res: any) => {
if (type == "MENU") {
that.menuData = res;
} else if (type == "REST-API") {
that.apiData = res;
}
});
}*/
getTreeData(type: String) {
let that = this;
(this as any).$axios
.get(`/role/getRoleResourcesByRoleId/${that.roleID}?resourceType=${type}`)
.then((res: any) => {
if( res.code != 0 ) return;
if (type == "MENU") {
that.menuData = res.data;
that.menuCheckedArr = that.getCheckedArr(res.data);
that.$nextTick(() => {
that.menuTreeArr = (that as any).$refs.menuTree.getCheckedNodes();
});
} else if (type == "REST-API") {
that.apiData = res.data;
that.apiCheckedArr = that.getCheckedArr(res.data);
that.$nextTick(() => {
that.apiTreeArr = (that as any).$refs.apiTree.getCheckedNodes();
});
}
});
}
getCheckedArr(list: any) {
let arr: any = [];
list.forEach((ele: any) => {
if (ele.selected == "true") {
arr.push(ele.resourceId);
}
if (ele.childList.length > 0) {
ele.childList.forEach((sele: any) => {
if (sele.selected == "true") {
arr.push(sele.resourceId);
}
});
}
});
return arr;
}
confirmFun() {
let that = this,
param: any = [];
that.menucheckchange()
that.apicheckchange()
if (!that.alertshow) {
that.allArr.forEach((ele: any) => {
param.push({
resourceId: ele.resourceId,
roleId: that.roleID,
rid: ele.rid
});
});
that.$emit("confirm", param);
}
}
menucheckchange() {
let that = this;
that.menuTreeArr = (that as any).$refs.menuTree.getCheckedNodes();
that.allArr = [...that.menuTreeArr, ...that.apiTreeArr];
}
apicheckchange() {
let that = this;
that.apiTreeArr = (that as any).$refs.apiTree.getCheckedNodes();
that.allArr = [...that.menuTreeArr, ...that.apiTreeArr];
}
created() {
// this.getMData("REST-API");
// this.getMData("MENU");
let that = this;
that.getTreeData("REST-API");
that.getTreeData("MENU");
}
}
</script>
\ No newline at end of file
<template>
<div>
<div class="funBox">
<div class="funBox-item ser">
<input type="text" placeholder="输入地址" v-model="serVal" /><button @click="mapSearch()"></button>
<div class="serTip" v-if="tipsShow">
<div class="aimAdone">
<p>您可以尝试:</p>
<p>1、检查输入是否正确</p>
<p>2、输入其他关键字进行搜索</p>
</div>
</div>
<!-- 目标地点 -->
<div class="serTip" v-if="aimAdrsArr.length > 0">
<div v-for="(i, inde) in aimAdrsArr" :key="inde" class="aimAdone" @click="mapSetView(i.lonlat)">
<p>{{ inde + 1 + ". " + i.name }}</p>
<p class="grey">地址:{{ i.address }}</p>
</div>
</div>
<div class="serTip" v-if="serTipArr.length > 0">
<!-- 建议地点 -->
<ul>
<li v-for="(i, ind) in serTipArr" :key="ind" @click="toAimAdress(i.name)">
{{ i.name }}<span class="addressTxt">{{ i.address }}</span>
</li>
</ul>
</div>
</div>
<!-- <div
class="funBox-item btn"
v-for="(i, index) in mapStyleArr"
@click="changeMapStyle(index), (actInde = index)"
:key="index"
:class="{ atc: actInde == index }"
>
{{ i.word }}
</div> -->
</div>
</div>
</template>
<script>
import {
Component,
Vue,
Provide,
Watch
} from "vue-property-decorator";
import {
fromLonLat,
toLonLat
} from "ol/proj";
import {
Prop
} from "vue-property-decorator";
// import Mutil from "@/utils/mapUtil.js";
import axios from "axios";
@Component({
components: {},
})
export default class search extends Vue {
@Prop(Object) MAP;
@Prop(Object) Mutil;
@Provide() serVal = "";
@Provide() Mutil;
@Provide() mapStyleArr = [{
key: "gooleSatellite",
word: "谷歌卫星地图",
},
{
key: "amapSatellite",
word: "高德卫星地图",
},
{
key: "amapCity",
word: "高德城市地图",
},
// {
// key: "amapCity",
// word: "天地图",
// },
];
@Provide() serTipArr = [];
@Provide() aimAdrsArr = [];
@Provide() actInde = 0;
@Provide() tipsShow = false;
/*
调用高德api 搜索位置
*/
@Watch("serVal") change(newVal) {
if (newVal == "") {
this.Mutil.removeSearchm('searchM');
this.tipsShow = false;
this.serTipArr = [];
return;
}
this.searchFun("4", newVal);
}
searchFun(type, newVal) {
let that = this,
url = "http://api.tianditu.gov.cn/search";
that.serTipArr = [];
that.aimAdrsArr = [];
that.tipsShow = false;
axios
.get(url, {
params: {
type: "query",
postStr: {
// specifyAdminCode: "130100000000",
keyWord: newVal,
mapBound: "114.34193,37.92687,114.63753,38.16345",
level: "12",
queryType: type, //4:普通建议词搜索, 1:普通搜索,
start: "0",
count: 10,
},
tk: "c8df739f047ce17cfe41b63cbeae6997",
},
})
.then((res) => {
if (type == 4 && res.status == 200) {
if (res.data.suggests) {
that.tipsShow = false;
let {
suggests: tipsData
} = res.data;
that.serTipArr = tipsData;
} else {
that.serTipArr = [];
that.tipsShow = true;
}
}
if (type == 1 && res.status == 200) {
if (res.data.pois) {
that.tipsShow = false;
let {
pois: aimsData
} = res.data;
that.aimAdrsArr = aimsData;
that.Mutil.removeSearchm('searchM');
//标注到地图
that.aimAdrsArr.forEach((ele, inde) => {
let lnglat = ele.lonlat.split(" ");
that.Mutil.addMarkerToMap(
'searchM',
ele.name,
require("@/assets/mark/pick.png"),
[Number(lnglat[0]), Number(lnglat[1])],
0.5
);
if (inde == 0) {
that.MAP.getView().animate({
center: fromLonLat([Number(lnglat[0]), Number(lnglat[1])]),
zoom: 17,
duration: 1000,
});
}
});
} else {
that.aimAdrsArr = [];
that.tipsShow = true;
}
}
})
.catch((err) => {
that.$message.error(err);
});
}
mapSetView(lnglat) {
let that = this,
lonlat = lnglat.split(" ");
that.MAP.getView().animate({
center: fromLonLat([Number(lonlat[0]), Number(lonlat[1])]),
zoom: 17,
duration: 1000,
});
}
mapSearch() {
let that = this,
url = "https://restapi.amap.com/v3/place/text";
that.$axios
.get(
url +
`?key=a827e19b0efcc8bf58afb4f23de188d9&keywords=${that.serVal}?city='河北省'`
)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
}
toAimAdress(name) {
this.serTipArr = [];
this.searchFun("1", name);
}
changeMapStyle(inde) {
let that = this,
arr = [0, 1, 2, 3];
console.log(inde);
arr.forEach((ele) => {
if (ele != inde) that.MAP.getLayers().getArray()[ele].setVisible(false);
});
that.MAP.getLayers().getArray()[inde].setVisible(true);
}
created() {
}
}
</script>
<style>
.funBox {
position: absolute;
top: 10px;
left: 41px;
z-index: 2;
}
.funBox-item {
float: left;
background: #fff;
padding: 5px;
}
.funBox .ser {
width: 265px;
height: 45px;
box-sizing: border-box;
z-index: 2202;
border-radius: 2px;
position: relative;
}
.funBox .ser input {
position: absolute;
top: 12.5px;
box-sizing: border-box;
text-indent: 2px;
z-index: 2200;
border: none;
width: 219px;
height: 20px;
line-height: 20px;
padding: 0;
letter-spacing: 0.5px;
font-size: 14px;
}
.funBox .ser input:focus {
border: none;
outline: none;
}
.funBox button {
background: url("https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-black-search.png") no-repeat center;
background-size: 80%;
position: absolute;
right: 0;
top: 0;
z-index: 9308;
box-sizing: border-box;
width: 45px;
height: 45px;
outline: none;
border: none;
border-left: #eee 1px solid;
}
.funBox .btn {
line-height: 25px;
padding: 10px 8px;
border-right: #afc5ee 1px dashed;
font-size: 14px;
cursor: pointer;
}
.funBox .btn:last-child {
border: none;
}
.serTip {
overflow: hidden;
position: absolute;
top: 47px;
left: 0;
width: 100%;
height: auto;
z-index: 9;
background: #fff;
}
.serTip ul {
margin: 0;
padding: 0;
}
.serTip li {
line-height: 2;
list-style: none;
font-size: 14px;
color: black;
padding: 0 10px;
width: 100%;
overflow: hidden;
height: 2em;
cursor: pointer;
}
.serTip li:hover {
background: #eee;
}
.aimAdone {
padding: 0 10px;
cursor: pointer;
}
.aimAdone:hover {
background: burlywood;
}
.addressTxt {
margin-left: 10px;
margin-right: 5px;
color: #999;
font-size: 12px;
}
.grey {
font-size: 12px;
color: #999;
}
.atc {
color: blue;
}
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from './utils/http'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import dataV from '@jiaminghi/data-view'
// import VueAMap from 'vue-amap'
Vue.use(ElementUI)
Vue.use(dataV)
// Vue.use(VueAMap)
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout/Layout.vue'
import METHOD from '../utils/methods'
import store from '../store'
Vue.use(VueRouter)
const baseRouterMap = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
hidden: true,
component: () => import('@/views/Login/Login.vue')
},
{
path: '/register',
name: 'zhuce',
hidden: true,
component: () => import('@/views/Register.vue')
},
{
path: '/search',
name: 'chaxun',
hidden: true,
component: () => import('@/views/Search.vue')
},
{
path: '/404',
name: '404',
hidden: true,
component: () => import('@/views/404.vue')
},
{
path: '*', redirect: '/404', hidden: true,
},
{
path: '/homr',
name: 'homepage',
component: Layout,
redirect: '/Home',
meta: {
title: '首页',
icon: 'iconfont iconziyuan',
},
children: [
{
path: '/Home',
component: () => import('@/views/Home.vue')
}
]
},
/* 左侧菜单不显示的 */
{
path: '/personal',
name: 'gr',
component: Layout,
redirect: '/Personal',
meta: {
title: '个人中心',
},
children: [
{
path: '/Personal',
component: () => import('@/views/Layout/Personal.vue')
}
]
},
{
path: '/EnDetail',
name: 'gr',
component: Layout,
redirect: '/EnseListDetail',
meta: {
title: '企业详情',
},
children: [
{
path: '/EnseListDetail',
component: () => import('@/views/EnseList/EnseListDetail.vue')
}
]
},
];
export const defalutRouterMap = [
{
path: '/EnDetail',
name: 'gr',
component: Layout,
redirect: '/EnseListDetail',
isNotMenu: true,
meta: {
title: '企业详情',
},
children: [
{
path: '/EnseListDetail',
component: () => import('@/views/GIS/GIS_高德.vue')
}
]
},
{
path: '/tongji',
name: 'tjy',
component: Layout,
redirect: '/statistics',
meta: {
title: '政府统计页',
icon: 'iconfont icontongji3',
},
children: [
{
path: '/statistics',
name: 'tj',
meta: {
title: '政府统计页',
icon: '',
},
component: () => import('@/views/statistics/statistics.vue')
},
]
},
{
path: '/tongji',
name: 'qytjy',
component: Layout,
redirect: '/qystatistics',
meta: {
title: '企业统计页',
icon: 'iconfont icontongji3',
},
children: [
{
path: '/qystatistics',
name: 'qytj',
meta: {
title: '企业统计页',
icon: '',
},
component: () => import('@/views/qystatistics/qystatistics.vue')
},
]
},
{
path: '/Hazard',
name: 'weixian',
component: Layout,
redirect: '/HazardsListMg',
meta: {
title: '企业物品管理',
icon: 'iconfont iconhuo',
},
children: [
{
path: '/HazardsListMg',
name: 'wxy',
meta: {
title: '企业物品管理',
icon: '',
},
component: () => import('@/views/Hazards/HazardsListMg.vue')
},
]
},
{
path: '/Safe',
name: 'aq',
component: Layout,
redirect: '/SafetyDeviceMg',
meta: {
title: '企业安全设备',
icon: 'iconfont iconshexiangtou',
},
children: [
{
path: '/SafetyDeviceMg',
name: 'aqsb',
meta: {
title: '企业安全设备',
icon: '',
},
component: () => import('@/views/SafetyDevice/SafetyDeviceMg.vue')
},
]
},
{
path: '/enterprises',
name: 'qygl',
component: Layout,
redirect: '/EnterprisesMg',
meta: {
title: '企业管理',
icon: 'iconfont icontubiao_qiyeguanli-copy',
},
children: [
{
path: '/EnterprisesMg',
name: 'yqgls',
meta: {
title: '企业管理',
icon: '',
},
component: () => import('@/views/Enterprises/EnterprisesMg.vue')
},
]
},
{
path: '/gismap',
name: 'gis',
component: Layout,
redirect: '/GIS',
meta: {
title: '企业GIS',
icon: 'iconfont iconditu',
},
children: [
{
path: '/GIS',
name: 'qygs',
meta: {
title: '企业GIS',
icon: '',
},
component: () => import('@/views/GIS/GIS.vue')
},
]
},
{
path: '/plans',
name: 'yuan',
component: Layout,
redirect: '/PlansMg',
meta: {
title: '预案管理',
icon: 'iconfont iconicon_huabanfuben1',
},
children: [
{
path: '/PlansMg',
name: 'yua',
meta: {
title: '预案管理',
icon: '',
},
component: () => import('@/views/Plans/PlansMg.vue')
},
]
},
{
path: '/yjxx',
name: 'yujing',
component: Layout,
redirect: '/AlarmMg',
meta: {
title: '预警信息',
icon: 'iconfont iconbaojing',
},
children: [
{
path: '/AlarmMg',
name: 'yj',
meta: {
title: '预警信息',
icon: '',
},
component: () => import('@/views/Alarm/AlarmMg.vue')
},
]
},
{
path: '/qysMap',
name: 'qymap',
component: Layout,
redirect: '/qyMap',
meta: {
title: '企业分布',
icon: 'iconfont iconditu',
},
children: [
{
path: '/qyMap',
name: 'qyfb',
meta: {
title: '企业分布',
icon: '',
},
component: () => import('@/views/qyMap/qyMap.vue')
},
]
},
{
path: '/Enterprise',
name: 'Enterprise',
component: Layout,
redirect: '/EnseList',
meta: {
title: '一企一档',
icon: 'iconfont iconqiye',
},
children: [
{
path: '/EnseList',
name: 'EnseList',
meta: {
title: '企业列表',
icon: '',
},
component: () => import('@/views/EnseList/EnseList.vue')
},
]
},
{
path: '/System',
component: Layout,
redirect: '/UserMg',
meta: {
title: '系统设置',
icon: 'iconfont iconzidianguanli',
id: 6
},
children: [
{
path: '/SystemCode',
name: 'zidian',
meta: {
title: '字典管理',
icon: '',
},
component: () => import('@/views/SystemCode/SystemCode.vue')
},
{
path: '/UserMg',
name: 'UserMg',
meta: {
title: '用户管理',
icon: '',
id: 61
},
component: () => import('@/views/System/UserMg.vue')
},
{
path: '/RoleMg',
name: 'RoleMg',
meta: {
title: '角色管理',
icon: '',
id: 62
},
component: () => import('@/views/System/RoleMg.vue')
},
{
path: '/BranchMg',
name: 'BranchMg',
meta: {
title: '组织机构',
icon: '',
id: 63
},
component: () => import('@/views/System/BranchMg.vue')
},
{
path: '/MenuMg',
name: 'MenuMg',
meta: {
title: '菜单管理',
icon: '',
id: 64
},
component: () => import('@/views/System/MenuMg.vue')
},
{
path: '/APIMg',
name: 'APIMg',
meta: {
title: 'API管理',
icon: '',
id: 65
},
component: () => import('@/views/System/APIMg.vue')
},
]
},
]
// const router = new VueRouter({
// mode: 'history',
// base: process.env.BASE_URL,
// routes: defalutRouterMap
// });
export let asyncRouterMap = baseRouterMap;
export const createrouter = (routes: any) => new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: routes
});
const router = createrouter( getAsyncRouterMap() );
function getAsyncRouterMap() {
const isLogin = sessionStorage.getItem('token');
if (isLogin) {
return updateRouter()
} else {
return asyncRouterMap
}
}
// 获取本地存储路由
function updateRouter() {
let moudleArr = sessionStorage.getItem("moudleArr"), moudle;
if (moudleArr) {
moudle = JSON.parse(moudleArr);
moudle.forEach((ele: any) => {
ele.component = Layout;
if (ele.children.length > 0) {
ele.children.forEach((sele: any) => {
let vueurl =
(METHOD.componentUrl as any)[sele.path.replace("/", "")] +
sele.path;
sele.component = () => import(`@/views/${vueurl}.vue`);
});
}
});
(METHOD as any).titleArray = [...moudle];
store.dispatch('setMoudleArr', moudle)
return [...baseRouterMap, ...moudle]
}
}
//路由跳转前 验证登录
router.beforeEach((to: any, from: any, next: any) => {
if (to.path == '/register') {
if (from.path != '/search' && sessionStorage.getItem('enterCheckInfo')) {
sessionStorage.removeItem('enterCheckInfo')
}
}
const isLogin = sessionStorage.getItem('token') ? true : false;
let userInfo = sessionStorage.getItem("userInfo"),
token = sessionStorage.getItem("token"),
moudleArr = sessionStorage.getItem("moudleArr");
if (to.path == '/login') {
if (userInfo) sessionStorage.removeItem("userInfo");
if (token) sessionStorage.removeItem("token");
if (moudleArr) sessionStorage.removeItem("moudleArr");
next()
} else {
let istwoAllowPage = to.path == '/register' || to.path == '/search';
//访问其他页面先看是否有登录后存储数据 注册页查询页除外
(isLogin || istwoAllowPage) ? next() : next('/login')
}
})
export default router
\ No newline at end of file
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
declare module 'vue-amap';
import { ActionTree } from 'vuex'
const actions: ActionTree<any, any> = {
async setMoudleArr({state, commit} , moudleArr: any){
commit('SET_MOUDLEARR', moudleArr)
}
}
export default actions;
\ No newline at end of file
import { GetterTree } from 'vuex'
const getters: GetterTree<any, any> = {
moudleArr(state: any) : any {
return state.moudleArr
},
}
export default getters;
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex';
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
\ No newline at end of file
import { MutationTree } from 'vuex'
const mutations: MutationTree<any> = {
SET_MOUDLEARR(state: any, moudleArr:any) :void {
state.moudleArr = moudleArr;
}
}
export default mutations;
\ No newline at end of file
import { defalutRouterMap } from '../router'
const state:any = {
moudleArr: []//模块array
}
export default state;
\ No newline at end of file
import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
key: 'c9e461c3b9bb660739ab7d11bf766bac',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.MouseTool'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
\ No newline at end of file
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import { Message } from 'element-ui';
import router from '@/router'
/*
*http工具
*请求拦截器 负责将客户端标识token值存储并置放在头部提交给服务器
*响应拦截器 负责全局处理业务请求的网络或者业务错误
*/
//创建axios实例
const service = axios.create({
baseURL: "http://47.104.61.232:60018/danger/",
// baseURL:"http://192.168.1.104:60018/danger/",
timeout: 10000, //超时时间
headers: {
// 'Content-Type':'application/x-www-form-urlencoded'
}
})
//请求拦截
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// let token = sessionStorage.getItem('token');
// if (token) {//如果已经登录 请求时加上token
// config.headers.Authorization = token;
// }
// else{
// if(config.url != '/account/login/'){
// Message.error('未登录,即将返回登录页面!')
// router.push('/')
// }
// }
return config;
}, (err: any) => {
Promise.reject(err);
}
)
//响应拦截
service.interceptors.response.use(
(response: AxiosResponse) => {
if (response.headers.authorization) sessionStorage.setItem('token', response.headers.authorization);
if (response.data.code != 0) {
Message.error(response.data.msg)
}
return response.data;
},
(error) => {
if( error.response ){
Message.error( '错误状态码' + error.response.status)
}else{
Message.error('NetWork Error!')
}
return Promise.reject(error)
}
)
export default service;
/**
+------------------------------------------------------------------------------------+
+ iceEditor(富文本编辑器)
+------------------------------------------------------------------------------------+
+ iceEditor v1.1.4
* MIT License By www.iceui.net
+ 作者:ice
+ 官方:www.iceui.net
+ 时间:2020-04-22
+------------------------------------------------------------------------------------+
+ 版权声明:该版权完全归iceUI官方所有,可转载使用和学习,但请务必保留版权信息
+------------------------------------------------------------------------------------+
+ iceEditor是一款简约风格的富文本编辑器,体型十分娇小,无任何依赖,整个编辑器只有一个
+ 文件,功能却很不平凡!简约的唯美设计,简洁、极速、使用它的时候不需要引用jQuery、font
+ css……等文件,因为整个编辑器只是一个Js,支持上传图片、附件!支持添加音乐、视频!
+------------------------------------------------------------------------------------+
*/
"use strict"; var ice = ice || {}; ice.editor = function (a) { var b, c; return this.menu = ["backColor", "fontSize", "foreColor", "bold", "italic", "underline", "strikeThrough", "line", "justifyLeft", "justifyCenter", "justifyRight", "indent", "outdent", "line", "insertOrderedList", "insertUnorderedList", "line", "superscript", "subscript", "createLink", "unlink", "line", "hr", "table", "files", "music", "video", "insertImage", "removeFormat", "line", "code"], this.backColor = ["#ffffff", "#000000", "#eeece1", "#1f497d", "#4f81bd", "#c0504d", "#9bbb59", "#8064a2", "#4bacc6", "#f79646", "#f2f2f2", "#979797", "#ddd9c3", "#c6d9f0", "#dbe5f1", "#f2dcdb", "#ebf1dd", "#e5e0ec", "#dbeef3", "#fdeada", "#d8d8d8", "#595959", "#c4bd97", "#8db3e2", "#b8cce4", "#e5b9b7", "#d7e3bc", "#ccc1d9", "#b7dde8", "#fbd5b5", "#bfbfbf", "#3f3f3f", "#938953", "#548dd4", "#95b3d7", "#d99694", "#c3d69b", "#b2a2c7", "#92cddc", "#fac08f", "#a5a5a5", "#262626", "#494429", "#17365d", "#366092", "#953734", "#76923c", "#5f497a", "#31859b", "#e36c09", "#7f7f7f", "#0c0c0c", "#1d1b10", "#0f243e", "#244061", "#632423", "#4f6128", "#3f3151", "#205867", "#974806", "#c00000", "#ff0000", "#ffc000", "#ffff00", "#92d050", "#00b050", "#00b0f0", "#0070c0", "#002060", "#7030a0"], this.foreColor = this.backColor, this.width = "100%", this.height = "400px", this.code = 0, this.maxWindow = 1, this.disabled = 0, this.css = "", this.uploadUrl = 0, this.htmlTag = ["meta", "style", "script", "object", "form", "iframe"], this.formatTag = ["address", "caption", "dd", "div", "dl", "dt", "fieldset", "h1", "h2", "h3", "h4", "h5", "h6", "legend", "fieldset", "li", "noframes", "noscript", "ol", "ul", "p", "pre", "table", "tbody", "tfoot", "th", "thead", "tr"], this.getTime = "1" + String((new Date).getTime()).substr(4, 8), this.iframeId = "_iframe" + this.getTime, this.toolId = "_tool" + this.getTime, this.linkId = "_createLink" + this.getTime, this.musicId = "_music" + this.getTime, this.videoId = "_video" + this.getTime, this.imageId = "_image" + this.getTime, this.imgUploadId = "_imgUpload" + this.getTime, this.filesId = "_files" + this.getTime, this.filesUploadId = "_filesUpload" + this.getTime, this.tableId = "_table" + this.getTime, this.dragId = "_drag" + this.getTime, this.menuList = {}, b = this, this.editor = this.id(a), this.editor ? (this.textarea = 0, "TEXTAREA" !== this.editor.nodeName && "DIV" !== this.editor.nodeName ? console.log("暂不支持该标签-->" + this.editor.nodeName + " 推荐使用div") : ("TEXTAREA" == this.editor.nodeName ? (this.editor.style.display = "none", this.divId = "_div" + this.getTime, c = this.c("div"), c.className = "iceEditor", c.id = this.divId, this.insertAfter(c, this.editor), this.textarea = this.editor, this.editor = this.id(this.divId), this.value = this.textarea.value) : (this.editor.className = "iceEditor", this.value = this.editor.innerHTML, this.editor.innerHTML = ""), this.cssConfig = this.c("style"), this.cssConfig.type = "text/css", this.editor.appendChild(this.cssConfig), this.tool = this.c("div"), this.tool.id = this.toolId, this.tool.className = "iceEditor-tool iceEditor-noselect", this.editor.appendChild(this.tool), this.iframe = this.c("iframe"), this.iframe.id = this.iframeId, this.iframe.className = "iceEditor-noselect", this.iframe.frameBorder = 0, this.editor.appendChild(this.iframe), this.drag = this.c("div"), this.drag.id = this.dragId, this.drag.className = "iceEditor-drag iceEditor-noselect", this.drag.innerHTML = '<svg class="iceEditor-icon" aria-hidden="true"><use xlink:href="#icon-drag"></use></svg>', this.editor.appendChild(this.drag), this.disableds = this.c("div"), this.disableds.className = "iceEditor-disabled", this.editor.appendChild(this.disableds), this.w = this.iframe.contentWindow, this.d = this.iframe.contentDocument, this.d.open(), this.d.write('<html><head><style>body{font-family:"Microsoft YaHei";font-size:14px;color:#363636;margin:15px;word-wrap:break-word;word-break:break-all;}img{max-width:100%;}p{margin:0;margin-bottom:5px;}.iceEditor-code{font-family:Courier New;font-size:13px;line-height:20px;}table{margin:10px 0;}table td{padding:8px;line-height:1.42857143;border:1px solid #bdbdbd;}</style></head><body><p>' + this.value + "<br><p></body></html>"), this.d.close(), this.d.body.designMode = "On", this.d.body.contentEditable = !0, this.content = this.d.body, this.textarea && setInterval(function () { b.textarea.innerHTML = b.d.body.innerHTML }, 1e3), this.drag.onmousedown = function () { var a = event.clientY, c = b.iframe.clientHeight; document.onmousemove = function () { var d = event.clientY - a; c >= 100 ? (b.iframe.height = c + d + "px", b.height = c + d + "px") : (b.iframe.height = "100px", b.height = c + d + "px") }, document.onmouseup = function () { document.onmousemove = null, document.onmouseup = null } }, this.init(), this.create(), this.paste(), void 0)) : alert("请提供一个有效的id") }, ice.editor.prototype = { id: function (a) { return document.getElementById(a) }, c: function (a) { return document.createElement(a) }, init: function () { this.files = null, this.insertImage = null, this.element = this.d.body, this.range = this.d.createRange ? this.w.getSelection() : this.d.selection.createRange() }, insertAfter: function (a, b) { var c = b.parentNode; c.lastChild == b ? c.appendChild(a, b) : c.insertBefore(a, b.nextSibling) }, setHTML: function (a, b) { this.element.focus(); var c = this.range.getRangeAt(0); b || a.appendChild(c.extractContents()), c.deleteContents(), c.insertNode(this.w.document.createDocumentFragment().appendChild(a)), c.collapse(!1) }, setText: function (a, b) { var c, d, f, g, e; for (this.element.focus(), c = this.range.getRangeAt(0), c.deleteContents(), d = document.createElement("div"), b ? d.innerHTML = a : d.appendChild(document.createTextNode(a)), e = document.createDocumentFragment(); f = d.firstChild;)g = e.appendChild(f); c.insertNode(e), g && (c = c.cloneRange(), c.setStartAfter(g), c.collapse(!0), this.range.removeAllRanges(), this.range.addRange(c)) }, getSelectHTML: function () { var a = this.c("p"); return a.appendChild(this.range.getRangeAt(0).cloneContents()), a.innerHTML }, getSelectText: function () { return "false" == this.range.toString() || "" == this.range.toString() ? "" : this.range.toString() }, toText: function (a) { var c, b = this.c("div"); return null != b.textContent ? b.textContent = a : b.innerText = a, c = b.innerHTML, b = null, c }, toHTML: function (a) { var c, b = this.c("div"); return b.innerHTML = a, c = b.innerText || b.textContent, b = null, c }, inArray: function (a, b) { if ("string" == typeof a || "number" == typeof a) { for (var c in b) if (a === b[c]) return !0; return !1 } }, popup: function (a) { var b, c, d, e; return a = a || {}, b = a.width || "400", c = a.height || "200", d = a.title || "", e = a.content || "", '<div class="iceEditor-popup"><div class="iceEditor-popupBox"></div><div class="iceEditor-popupMain" style="width:' + b + "px;height:" + c + 'px;"><div class="iceEditor-popupTitle"><span>' + d + '</span><span class="iceEditor-popupClose">╳</span></div><div class="iceEditor-popupContent">' + e + "</div></div></div>" }, getCoords: function (a) { var b = a.getBoundingClientRect(), c = a.ownerDocument, d = c.body, e = c.documentElement, f = e.clientTop || d.clientTop || 0, g = e.clientLeft || d.clientLeft || 0, h = b.top - f, i = b.left - g; return { top: h, left: i } }, pd: function () { window.event ? window.event.cancelBubble = !0 : e.stopPropagation() }, filesUpload: function () { var _z = this, close = this.files.getElementsByClassName("iceEditor-popup")[0]; _z.id(_z.filesUploadId).onchange = function () { var iframe, form, input, t; return _z.uploadUrl ? (iframe = _z.c("iframe"), iframe.name = "fileUpload", iframe.style.display = "none", document.body.appendChild(iframe), form = _z.c("form"), form.method = "POST", form.enctype = "multipart/form-data", form.action = _z.uploadUrl, form.target = "fileUpload", iframe.appendChild(form), input = _z.c("input"), input.type = "file", input.name = "file[]", input.multiple = !0, form.appendChild(input), input.files = this.files, form.submit(), t = window.setInterval(function () { var files, f, p, a, data = iframe.contentDocument.body.innerHTML; if (console.log(data), "" != data) { if (window.clearInterval(t), document.body.removeChild(iframe), files = eval("(" + data + ")"), files && void 0 != files.length && files.length) for (f = 0; f < files.length; f++)files[f].error ? alert(files[f].error) : (p = _z.c("p"), a = _z.c("a"), a.href = files[f].url, a.className = "download", a.download = files[f].name, a.innerText = files[f].name, a.target = "_blank", p.appendChild(a), _z.setHTML(p, !0)); close.style.display = "none" } }, 50), void 0) : alert("请配置uploadUrl项") } }, imagesUpload: function () { var _z = this, close = _z.insertImage.getElementsByClassName("iceEditor-popup")[0], url = _z.insertImage.getElementsByClassName("iceEditor-insertImageUrl")[0], width = _z.insertImage.getElementsByClassName("iceEditor-inputWidth")[0], height = _z.insertImage.getElementsByClassName("iceEditor-inputHeight")[0], btn = _z.insertImage.getElementsByClassName("iceEditor-btn")[0]; btn.onclick = function () { var a = _z.c("img"); a.src = url.value, a.width = width.value, a.height = height.value, _z.setHTML(a), close.style.display = "none", _z.pd() }, _z.id(_z.imgUploadId).onchange = function () { var iframe, form, input, t; return _z.uploadUrl ? (iframe = _z.c("iframe"), iframe.name = "fileUpload", iframe.style.display = "none", document.body.appendChild(iframe), form = _z.c("form"), form.method = "POST", form.enctype = "multipart/form-data", form.action = _z.uploadUrl, form.target = "fileUpload", iframe.appendChild(form), input = _z.c("input"), input.type = "file", input.name = "file[]", input.multiple = !0, form.appendChild(input), input.files = this.files, form.submit(), t = window.setInterval(function () { var files, f, p, a, data = iframe.contentDocument.body.innerHTML; if (console.log(data), "" != data) { if (window.clearInterval(t), document.body.removeChild(iframe), files = eval("(" + data + ")"), files && void 0 != files.length && files.length) for (f = 0; f < files.length; f++)files[f].error ? alert(files[f].error) : (p = _z.c("p"), a = _z.c("img"), a.src = files[f].url, p.appendChild(a), _z.setHTML(p, !0)); close.style.display = "none" } }, 50), void 0) : alert("请配置uploadUrl项") } }, addVideo: function () { var a = this, b = a.video.getElementsByClassName("iceEditor-popup")[0], c = a.video.getElementsByClassName("iceEditor-videoUrl")[0], d = a.video.getElementsByClassName("iceEditor-inputWidth")[0], e = a.video.getElementsByClassName("iceEditor-inputHeight")[0], f = a.video.getElementsByClassName("iceEditor-btn")[0]; f.onclick = function () { var f, g, h, i, j; if (!c.value.length) return alert("视频地址不能为空"); for (f = a.video.getElementsByTagName("input"), g = 0; g < f.length; g++)f[g].checked && (type = Number(f[g].value)); if (1 === type) h = a.c("video"), h.src = c.value, h.width = d.value.length ? d.value : 510, h.height = e.value.length ? e.value : 498, h.controls = "controls"; else if (h = a.c("iframe"), h.width = d.value.length ? d.value : 510, h.height = e.value.length ? e.value : 498, h.setAttribute("frameborder", 0), h.setAttribute("allowfullscreen", !0), i = "抱歉,无法处理该链接!", 2 === type) { if (j = c.value.split("?"), !(j.length > 1)) return alert("b站" + i); if (j = j[0].split("video/"), !(j.length > 1 && j[1].length)) return alert("b站" + i); h.src = "https://player.bilibili.com/player.html?bvid=" + j[1] } else if (3 === type) { if (j = c.value.split(".html"), !(j.length > 1)) return alert("优酷:" + i); if (j = j[0].split("id_"), !(j.length > 1 && j[1].length)) return alert("优酷:" + i); h.src = "https://player.youku.com/embed/" + j[1] } a.setHTML(h, !0), b.style.display = "none", a.pd() } }, createMenu: function (a) { var d, b = this, c = this.c("li"); a.id && (c.id = a.id), a.css && (c.className = a.css), a.style && (this.css += a.style), (a.menu || a.icon) && (d = this.c("div"), d.className = "iceEditor-exec", a.menu ? d.innerHTML = a.menu : a.icon && (d.innerHTML = '<svg class="iceEditor-icon" aria-hidden="true"><use xlink:href="#icon-' + a.icon + '"></use></svg>'), a.data && d.setAttribute("data", a.data), c.appendChild(d)), a.dropdown && (d = this.c("div"), d.className = "iceEditor-menuDropdown", d.innerHTML = a.dropdown, c.appendChild(d)), a.popup && (c.innerHTML += this.popup(a.popup), c.popup = c.getElementsByClassName("iceEditor-popup")[0], c.onclick = function () { c.popup.style.display = "block", c.popup.getElementsByClassName("iceEditor-popupClose")[0].onclick = function () { c.popup.style.display = "none", b.pd() } }, c.close = function () { c.popup.style.display = "none", b.pd() }), a.success && a.success(c, b), a.click && (c.onclick = function () { a.click(this, b) }), this.menuList[a.name] = c }, plugin: function (a) { return void 0 == a.name ? console.log("plugin:menu参数不能为空") : this.inArray(a.name, this.menu) ? console.log("plugin:menu已经存在,请重新命名") : (this.menu.push(a.name), this.createMenu(a), void 0) } }, ice.editor.prototype.menuHTML = function () { var a, b; for (this.createMenu({ name: "fontSize", icon: "fontSize", dropdown: '<ul class="iceEditor-fontSize"><li><span class="iceEditor-exec" data="fontSize|1">1</span></li><li><span class="iceEditor-exec" data="fontSize|2">2</span></li><li><span class="iceEditor-exec" data="fontSize|3">3</span></li><li><span class="iceEditor-exec" data="fontSize|4">4</span></li><li><span class="iceEditor-exec" data="fontSize|5">5</span></li><li><span class="iceEditor-exec" data="fontSize|6">6</span></li><li><span class="iceEditor-exec" data="fontSize|7">7</span></li><li class="iceEditor-menuTitle">文字大小</li></ul>' }), a = '<ul class="iceEditor-backColor">', b = 0; b < this.backColor.length; b++)a += '<li><span class="iceEditor-exec" data="backColor|' + this.backColor[b] + '" style="background-color:' + this.backColor[b] + '"></span></li>'; for (a += '<li class="iceEditor-menuTitle">文字背景颜色</li></ul>', this.createMenu({ name: "backColor", icon: "backColor", dropdown: a }), a = '<ul class="iceEditor-backColor">', b = 0; b < this.foreColor.length; b++)a += '<li><span class="iceEditor-exec" data="foreColor|' + this.foreColor[b] + '" style="background-color:' + this.foreColor[b] + '"></span></li>'; a += '<li class="iceEditor-menuTitle">文字颜色</li></ul>', this.createMenu({ name: "foreColor", icon: "foreColor", dropdown: a }), this.createMenu({ name: "bold", data: "bold", icon: "bold" }), this.createMenu({ name: "italic", data: "italic", icon: "italic" }), this.createMenu({ name: "underline", data: "underline", icon: "underline" }), this.createMenu({ name: "strikeThrough", data: "strikeThrough", icon: "strike" }), this.createMenu({ name: "justifyLeft", data: "justifyLeft", icon: "alignleft" }), this.createMenu({ name: "justifyCenter", data: "justifyCenter", icon: "aligncenter" }), this.createMenu({ name: "justifyRight", data: "justifyRight", icon: "alignright" }), this.createMenu({ name: "indent", data: "indent", icon: "indent" }), this.createMenu({ name: "outdent", data: "outdent", icon: "outdent" }), this.createMenu({ name: "insertOrderedList", data: "insertOrderedList", icon: "orderedlist" }), this.createMenu({ name: "insertUnorderedList", data: "insertUnorderedList", icon: "unorderedlist" }), this.createMenu({ name: "subscript", data: "subscript", icon: "subscript" }), this.createMenu({ name: "superscript", data: "superscript", icon: "superscript" }), this.createMenu({ name: "unlink", data: "unlink", icon: "unlink" }), this.createMenu({ name: "hr", data: "insertHorizontalRule", icon: "min" }), this.createMenu({ name: "removeFormat", data: "removeFormat", icon: "remove" }), this.createMenu({ name: "selectAll", data: "selectAll", icon: "empty" }), this.createMenu({ name: "code", icon: "code", data: "code" }), this.createMenu({ name: "line", css: "line" }), this.createMenu({ name: "table", icon: "table", dropdown: '<ul class="iceEditor-tableMain" id="' + this.tableId + '"><li><div class="iceEditor-tableBox"><div class="iceEditor-tableBgOff"></div><div class="iceEditor-tableBgOn"></div><div class="iceEditor-tableNum">表格:1×1</div></div></li></ul>' }), this.createMenu({ name: "music", icon: "music", dropdown: '<ul class="iceEditor-createLink"><li><div>音乐连接:<input type="text" id="' + this.musicId + '" value="http://"/></div><a href="javascript:;" data="music" class="iceEditor-exec iceEditor-createLinkBtn">确定</a></li></ul>' }), this.createMenu({ name: "createLink", icon: "link", dropdown: '<ul class="iceEditor-createLink"><li><div>URL连接:<input type="text" id="' + this.linkId + '" value="http://"/></div><a href="javascript:;" data="createLink" class="iceEditor-exec iceEditor-createLinkBtn">确定</a></li></ul>' }), this.createMenu({ name: "files", icon: "files", id: this.filesId, popup: { width: 450, height: 250, title: "附件上传", content: '<div class="iceEditor-insertImage"><input type="file" class="iceEditor-uploadInput" id="' + this.filesUploadId + '" name="file[]" multiple/><div><svg class="iceEditor-icon iceEditor-uploadIcon" aria-hidden="true"><use xlink:href="#icon-files"></use></svg></div><label for="' + this.filesUploadId + '" class="iceEditor-uploadBtn">点击上传附件</label></div>' } }), this.createMenu({ name: "insertImage", icon: "pic", id: this.imageId, popup: { width: 450, height: 250, title: "图片上传", content: '<div class="iceEditor-insertImage"><div>URL:<input type="text" name="url" class="iceEditor-insertImageUrl" placeholder="网络图片地址" value=""/>宽:<input type="text" name="width" class="iceEditor-inputWidth" placeholder="px" value=""/>高:<input type="text" name="height" class="iceEditor-inputHeight" placeholder="px" value=""/><a href="javascript:;" class="iceEditor-btn">确定</a></div><input type="file" class="iceEditor-uploadInput" id="' + this.imgUploadId + '" name="file[]" accept="image/*" multiple/><div><svg class="iceEditor-icon iceEditor-uploadIcon" aria-hidden="true"><use xlink:href="#icon-pic"></use></svg></div><label for="' + this.imgUploadId + '" class="iceEditor-uploadBtn">点击上传图片</label></div>' } }), this.createMenu({ name: "video", icon: "video", id: this.videoId, popup: { width: 450, height: 170, title: "添加视频", content: '<div class="iceEditor-video"><div><label><input name="video" type="radio" checked value="1"/>自定义</label><label><input name="video" type="radio" value="2"/>B站</label><label><input name="video" type="radio" value="3"/>优酷</label></div><div>URL:<input type="text" name="url" class="iceEditor-videoUrl" placeholder="网络图片地址" value=""/></div><div>宽:<input type="text" name="width" class="iceEditor-inputWidth" placeholder="px" value=""/>高:<input type="text" name="height" class="iceEditor-inputHeight" placeholder="px" value=""/><a href="javascript:;" class="iceEditor-btn">确定</a></div></div>' } }), this.createMenu({ name: "max", icon: "max", data: "max", css: "iceEditor-maxWindow" }), this.createMenu({ name: "min", icon: "min", data: "min", css: "iceEditor-minWindow" }), this.createMenu({ name: "disabled", css: "iceEditor-disabledMask" }) }, ice.editor.prototype.menuFormat = function () { var b, c, d, e, f, a = this; for (this.menuHTML(), b = this.c("ul"), b.className = "iceEditor-menu", c = 0; c < this.menu.length; c++)b.appendChild(this.menuList[this.menu[c]]); this.maxWindow && (b.appendChild(this.menuList.max), b.appendChild(this.menuList.min)), b.appendChild(this.menuList.disabled), this.tool.innerHTML = "", this.tool.appendChild(b), this.inArray("createLink", this.menu) && (this.link = this.id(this.linkId)), this.inArray("music", this.menu) && (this.music = this.id(this.musicId)), this.inArray("video", this.menu) && (this.video = this.id(this.videoId), this.addVideo()), this.inArray("files", this.menu) && (this.files = this.id(this.filesId), this.filesUpload()), this.inArray("insertImage", this.menu) && (this.insertImage = this.id(this.imageId), this.imagesUpload()), this.inArray("table", this.menu) && (this.table = this.id(this.tableId), d = this.table.getElementsByClassName("iceEditor-tableBox")[0], e = this.table.getElementsByClassName("iceEditor-tableBgOn")[0], f = this.table.getElementsByClassName("iceEditor-tableNum")[0], d.onmouseover = function () { var c = a.getCoords(this), d = 1, g = 1; this.onmousemove = function (a) { var b = a || event, h = b.clientX - c.left - 5, i = b.clientY - c.top - 5; 180 >= h && 180 >= i && (d = Math.ceil(h / 18), g = Math.ceil(i / 18), e.style.width = 18 * d + "px", e.style.height = 18 * g + "px", f.innerHTML = "表格:" + d + "×" + g) }, this.onmousedown = function () { var c, e, f, h, b = a.c("table"); for (b.width = "100%", b.border = 1, b.style.border = "1px solid #bdbdbd", b.style.borderSpacing = 0, b.style.borderCollapse = "collapse", b.className = "table table-border", c = 0; g > c; c++)for (e = b.insertRow(), f = 0; d > f; f++)h = e.insertCell(), h.innerHTML = "<br/>"; a.setHTML(b, !0) }, this.onmouseout = function () { this.onmousemove = null, this.onmouseout = null } }), this.editor.style.width = this.width, this.iframe.width = this.width, this.iframe.height = this.height }, ice.editor.prototype.menuAction = function () { var c, a = this.tool.getElementsByClassName("iceEditor-exec"), b = this; for (c = 0; c < a.length; c++)a[c].e = this, a[c].attr = a[c].getAttribute("data"), a[c].attr && (a[c].onclick = function () { var a, c, d, e, f; switch (this.attr) { case "createLink": a = b.c("a"), a.href = b.link.value, b.setHTML(a); break; case "music": a = b.c("audio"), a.src = b.music.value, a.controls = "controls", b.setHTML(a, !0); break; case "code": c = b.tool.getElementsByClassName("iceEditor-disabledMask")[0], b.code ? (b.tool.className = "iceEditor-tool iceEditor-noselect", c.style.display = "none", this.className = "iceEditor-exec", b.code = 0, b.d.body.className = "", d = b.getHTML(), b.d.body.innerHTML = b.toHTML(d)) : (b.tool.className = "iceEditor-tool iceEditor-noselect", c.style.display = "block", this.className = "iceEditor-exec iceEditor-active", b.code = 1, b.d.body.className = "iceEditor-code", d = b.getHTML(), d = d.replace(/<\/p><p>/gim, "</p>\r\n<p>"), b.d.body.innerText = d); break; case "max": e = window.innerHeight, "number" != typeof e && ("CSS1Compat" == document.compatMode ? e = document.documentElement.clientHeight : webWidth = document.body.clientWidth), b.editor.style.position = "fixed", b.editor.style.zIndex = b.getTime, b.editor.style.width = "100%", b.editor.style.height = "100%", b.editor.style.top = 0, b.editor.style.left = 0, b.iframe.height = e - 35 - 20 + "px", this.parentNode.style.display = "none", b.tool.getElementsByClassName("iceEditor-minWindow")[0].style.display = "block"; break; case "min": b.editor.removeAttribute("style"), b.iframe.height = b.height, this.parentNode.style.display = "none", b.tool.getElementsByClassName("iceEditor-maxWindow")[0].style.display = "block"; break; default: f = this.attr.split("|"), f.length > 1 ? b.w.document.execCommand(f[0], !1, f[1]) : b.w.document.execCommand(f[0], !1, null) }return !1 }) }, ice.editor.prototype.paste = function () { var a = this; this.d.body.addEventListener("paste", function (b) { var c, d, e, f; if (b.preventDefault(), c = (window.clipboardData || b.clipboardData).getData("Text") || prompt("在这里输入文本"), d = c.split("\r\n"), 1 == d.length) return a.setText(c), void 0; for (e = 0; e < d.length; e++)d[e] && (f = a.c("p"), f.innerHTML = a.toText(d[e]), a.setHTML(f, !0)) }), this.d.body.addEventListener("keydown", function (a) { if (a.ctrlKey || a.metaKey) switch (a.keyCode) { case 66: case 98: case 73: case 105: case 85: case 117: a.preventDefault() } }) }, ice.editor.prototype.create = function () { this.cssConfig.styleSheet ? this.cssConfig.styleSheet.cssText = this.css : this.cssConfig.innerHTML = this.css, this.menuFormat(), this.menuAction(), this.disableds.style.display = this.disabled ? "block" : "none" }, ice.editor.prototype.getHTML = function () { return this.content.innerHTML }, ice.editor.prototype.getText = function () { return this.content.innerText }, ice.editor.prototype.setValue = function (a) { this.content.innerHTML = a }, ice.editor.prototype.addValue = function (a) { this.content.innerHTML += a }, ice.editor.css = '.iceEditor{color:#353535;font-family:"Microsoft YaHei";font-size:14px;background:#fff;position:relative;border:solid 1px #ccc}.iceEditor *{margin:0;padding:0;box-sizing:border-box}.iceEditor a{color:#606060;text-decoration:none;-webkit-tap-highlight-color:transparent}.iceEditor a:hover{color:#000}.iceEditor input{padding:3px;border:1px solid #B7B7B7;font-family:inherit;font-size:inherit;vertical-align:middle}.iceEditor-exec{cursor:pointer}.iceEditor-icon{width:16px;height:16px;fill:currentColor;overflow:hidden;vertical-align:middle;font-size:16px}.iceEditor-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.iceEditor-menuDropdown{min-width:35px;min-height:35px;transition:all .5s ease;top:80px;opacity:0;visibility:hidden;position:absolute;background:#fff;z-index:999;box-shadow:0 2px 9px 0 rgba(0,0,0,.2);border-bottom:2px solid #676767;border-top:1px solid #676767}.iceEditor-menuDropdown::before{content:"";display:block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #676767;position:absolute;top:-8px;left:9px}.iceEditor-menuTitle{width:100%!important;text-align:center;height:30px;line-height:30px;border-top:1px solid #efefef}.iceEditor-tool{width:100%;background:#eee;border-bottom:solid 1px #ccc;position:relative}.iceEditor-tool:after,.iceEditor-tool:before{display:table;content:" "}.iceEditor-tool:after{clear:both}.iceEditor-menu{width:100%;padding:0 10px;display:inline-block;float:left}.iceEditor-menu a{list-style:none;float:left;min-width:35px;height:35px;padding:0 5px;text-align:center;line-height:35px;cursor:pointer}.iceEditor-menu a:hover{background:#cdcdcd}.iceEditor-menu>li>div.iceEditor-exec{list-style:none;float:left;min-width:35px;height:35px;padding:0 5px;text-align:center;line-height:35px;cursor:pointer}.iceEditor-menu>li>div.iceEditor-exec:hover{background:#cdcdcd}.iceEditor-menu svg{fill:currentColor;overflow:hidden;vertical-align:middle;font-size:16px}.iceEditor-menu .iceEditor-active{background:#e0e0e0;position:relative;z-index:999}.iceEditor-menu .iceEditor-disabledMask{background:rgba(238,238,238,0.7);width:100%;height:100%;position:absolute;left:0;top:0;display:none}.iceEditor-menu li{display:inline-block;float:left}.iceEditor-menu li:hover .iceEditor-menuDropdown{top:44px;opacity:1;visibility:visible}.iceEditor-menu li.iceEditor-minWindow{display:none}.iceEditor-menu li.iceEditor-maxWindow,.iceEditor-menu li.iceEditor-minWindow{float:right}.iceEditor-menu li.iceEditor-maxWindow>div,.iceEditor-menu li.iceEditor-minWindow>div{position:relative;z-index:999}.iceEditor-menu li.iceEditor-maxWindow .iceEditor-icon,.iceEditor-menu li.iceEditor-minWindow .iceEditor-icon{color:#606060}.iceEditor-line{height:35px;border-right:1px solid #ccc;width:1px;margin:0 10px;vertical-align:middle}.iceEditor-uploadInput{display:none}.iceEditor-uploadBtn{float:none;width:auto;font-size:15px;background:#00b7ee;height:40px;line-height:40px;padding:0 30px;color:#fff;display:inline-block;margin:0 auto 15px auto;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.1)}.iceEditor-uploadBtn:hover{background:#009ccb}.iceEditor-uploadIcon{width:45px;height:45px;color:#bababa;margin:45px 20px 10px}.iceEditor-backColor{width:230px;padding:5px}.iceEditor-backColor span{width:20px;height:20px;padding:0;margin:1px;display:inline-block}.iceEditor-fontSize{width:280px}.iceEditor-fontSize li{width:40px;text-align:center}.iceEditor-fontSize span{width:40px;display:inline-block;padding:10px 0}.iceEditor-fontSize span:hover{background:#eee;color:#4CAF50}.iceEditor-createLink{width:350px}.iceEditor-createLink li{width:100%}.iceEditor-createLink a{width:100%}.iceEditor-createLink div{width:100%;height:50px;text-align:center;line-height:50px}.iceEditor-createLink input{width:230px}.iceEditor-popup .iceEditor-insertImage{text-align:center}.iceEditor-popup .iceEditor-insertImageUrl{width:140px;height:27px;outline:0;margin-right:15px}.iceEditor-popup .iceEditor-inputWidth{width:50px;height:27px;outline:0;margin-right:15px}.iceEditor-popup .iceEditor-inputHeight{width:50px;height:27px;outline:0}.iceEditor-popup .iceEditor-btn{width:auto;display:inline-block;float:none;color:#fff;height:27px;line-height:25px;padding:0 10px;background:#939393;vertical-align:middle;margin-left:5px;border:1px solid #7b7b7b}.iceEditor-popup .iceEditor-btn:hover{background:#7b7b7b!important;color:#fff}.iceEditor-tableBox{position:relative;width:190px;height:214px;padding:5px;overflow:hidden}.iceEditor-tableBgOn{position:absolute!important;top:5px;left:5px;z-index:4;width:18px;height:18px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat}.iceEditor-tableBgOff{width:180px;height:180px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat}.iceEditor-tableNum{height:30px;line-height:30px;text-align:center;color:#757575}.iceEditor-video{text-align:left}.iceEditor-video label{margin-right:20px;display:inline-block}.iceEditor-video input{margin-right:5px}.iceEditor-video div{height:27px;margin-bottom:10px}.iceEditor-popup .iceEditor-videoUrl{width:380px;height:27px;outline:0;margin-right:0}.iceEditor-content{width:100%;height:100%;padding:20px;position:relative}.iceEditor-content:focus{outline:0}.iceEditor-drag{color:#757575;background:#eee;text-align:center;height:12px;line-height:0;cursor:n-resize}.iceEditor-disabled{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(191,191,191,.79);z-index:99999;display:none}.iceEditor-popup{display:none}.iceEditor-popupMain{width:400px;height:200px;position:fixed;margin:auto;top:0;bottom:0;left:0;right:0;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.12);z-index:2;animation-name:iceEditorPopup;animation-duration:.5s}.iceEditor-popupBox{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.33);opacity:.5;filter:alpha(opacity=50);z-index:1}.iceEditor-popupTitle{width:100%;height:30px;line-height:30px;background:#2f2f2f;padding:0 10px;color:#fff}.iceEditor-popupTitle span{display:inline-block;vertical-align:middle}.iceEditor-popupTitle::before{content:"";display:inline-block;width:10px;height:10px;border-radius:10px;background:#c7f98c;vertical-align:middle;margin-right:8px}.iceEditor-popupClose{float:right;padding:0 10px;color:#fff;font-size:18px;cursor:pointer}.iceEditor-popupClose:hover{color:#8fe5ff}.iceEditor-popupContent{width:100%;padding:10px;color:#000;overflow:auto;float:left}.iceEditor-popupBtn{width:100%;border:0;color:#fff;background:#03A9F4;border-top:1px solid #efefef;padding:0 20px;margin:0;height:35px;text-align:center;line-height:35px;cursor:pointer;margin-top:20px;outline:0}.iceEditor-popupBtn:hover{color:#151515;background:#efefef}@keyframes iceEditorPopup{0%{top:-100px;opacity:0}to{top:0;opacity:1}}@media (max-width:768px){.iceEditor-menu .iceEditor-line{display:none}.iceEditor-popupMain{margin:0!important;width:90%!important;height:90%!important;top:5%!important;left:5%!important}@keyframes iceEditorPopup{0%{margin-top:-50px}to{margin-top:0}}}', ice.editor.svg = '<svg><symbol id="icon-music" viewBox="0 0 1024 1024"><path d="M899.904 454.976c-5.44-0.704-10.304-4.48-14.592-11.2-4.288-6.72-7.552-19.008-9.92-36.992-3.904-29.12-13.824-50.624-29.76-64.448-15.936-13.824-40.64-23.744-74.112-29.696-35.008-6.784-65.92-20.352-92.736-40.96-26.816-20.48-49.216-39.808-67.072-57.664C594.56 198.272 581.376 192.704 572.032 197.184S558.016 209.92 558.016 221.888L558.016 270.08l0 105.408c0 41.856-0.192 87.04-0.576 135.616s-0.576 94.464-0.576 137.792l0 114.368 0 63.872c0.768 17.92-2.112 37.952-8.768 59.904-6.592 22.08-19.072 42.816-37.312 62.272-18.304 19.456-42.56 36.032-72.896 49.92-30.336 13.824-68.096 21.824-113.216 24.128-45.888 2.24-87.296-5.632-124.288-23.552-36.928-17.92-65.536-40.576-85.76-67.776-20.224-27.328-30.144-57.216-29.76-89.664 0.384-32.512 14.976-62.976 43.776-91.328 28.8-28.416 59.904-48.192 93.376-59.392 33.408-11.2 65.728-17.408 96.832-18.496 31.104-1.152 58.944 0.896 83.456 6.144s42.56 10.112 54.272 14.592L456.576 376.512c0-88.192 0.384-187.584 1.152-298.176 0-21.696 5.824-39.424 17.536-53.248C486.848 11.328 502.4 3.264 521.856 1.024 538.176-1.216 551.616 1.92 562.112 10.56c10.496 8.576 21.184 20.544 32.064 35.84 10.88 15.36 24.32 32.704 40.256 52.096 15.936 19.456 37.504 38.528 64.768 57.152 23.36 17.216 43.776 29.504 61.248 36.992s33.856 14.4 49.024 20.736c15.168 6.336 30.144 14.016 44.928 22.976 14.784 8.96 31.104 23.552 49.024 43.712 17.856 19.392 28.8 39.616 32.704 60.544s4.096 40 0.576 57.152-9.152 31.168-16.896 42.048C911.936 450.688 905.344 455.744 899.904 454.976L899.904 454.976z"></path></symbol><symbol id="icon-dir" viewBox="0 0 1024 1024"><path d="M1024 325.008l0-72c0-35.344-28.656-64-64-64L448 189.008 448 131.008c0-35.344-28.656-64-64-64L64 67.008c-35.344 0-64 28.656-64 64l0 194L1024 325.008z"></path><path d="M0 373.008l0 520c0 35.344 28.656 64 64 64l896 0c35.344 0 64-28.656 64-64l0-520L0 373.008z"></path></symbol><symbol id="icon-aligncenter" viewBox="0 0 1024 1024"><path d="M0 64l1024 0 0 128-1024 0zM192 256l640 0 0 128-640 0zM192 640l640 0 0 128-640 0zM0 448l1024 0 0 128-1024 0zM0 832l1024 0 0 128-1024 0z"></path></symbol><symbol id="icon-alignleft" viewBox="0 0 1024 1024"><path d="M0 64l1024 0 0 128-1024 0zM0 256l640 0 0 128-640 0zM0 640l640 0 0 128-640 0zM0 448l1024 0 0 128-1024 0zM0 832l1024 0 0 128-1024 0z"></path></symbol><symbol id="icon-alignright" viewBox="0 0 1024 1024"><path d="M0 64l1024 0 0 128-1024 0zM384 256l640 0 0 128-640 0zM384 640l640 0 0 128-640 0zM0 448l1024 0 0 128-1024 0zM0 832l1024 0 0 128-1024 0z"></path></symbol><symbol id="icon-corner" viewBox="0 0 1024 1024"><path d="M768 256l64 0 0 64-64 0zM640 384l64 0 0 64-64 0zM640 512l64 0 0 64-64 0zM640 640l64 0 0 64-64 0zM512 512l64 0 0 64-64 0zM512 640l64 0 0 64-64 0zM384 640l64 0 0 64-64 0zM768 384l64 0 0 64-64 0zM768 512l64 0 0 64-64 0zM768 640l64 0 0 64-64 0zM768 768l64 0 0 64-64 0zM640 768l64 0 0 64-64 0zM512 768l64 0 0 64-64 0zM384 768l64 0 0 64-64 0zM256 768l64 0 0 64-64 0z"></path></symbol><symbol id="icon-help" viewBox="0 0 1024 1024"><path d="M448 704l128 0 0 128-128 0zM704 256c35.36 0 64 28.64 64 64l0 192-192 128-128 0 0-64 192-128 0-64-320 0 0-128 384 0zM512 96c-111.104 0-215.584 43.264-294.144 121.856s-121.856 183.04-121.856 294.144c0 111.104 43.264 215.584 121.856 294.144s183.04 121.856 294.144 121.856c111.104 0 215.584-43.264 294.144-121.856s121.856-183.04 121.856-294.144c0-111.104-43.264-215.584-121.856-294.144s-183.04-121.856-294.144-121.856zM512 0l0 0c282.784 0 512 229.216 512 512s-229.216 512-512 512c-282.784 0-512-229.216-512-512s229.216-512 512-512z"></path></symbol><symbol id="icon-indent" viewBox="0 0 1024 1024"><path d="M0 64l1024 0 0 128-1024 0zM384 256l640 0 0 128-640 0zM384 448l640 0 0 128-640 0zM384 640l640 0 0 128-640 0zM0 832l1024 0 0 128-1024 0zM0 704l0-384 256 192z"></path></symbol><symbol id="icon-link" viewBox="0 0 1025 1024"><path d="M320.032 704c17.6 17.6 47.264 16.736 65.952-1.952l316.128-316.128c18.656-18.656 19.552-48.352 1.952-65.952s-47.264-16.736-65.952 1.952l-316.128 316.128c-18.656 18.656-19.552 48.352-1.952 65.952zM476.928 675.104c4.576 9.056 6.976 19.168 6.976 29.696 0 17.6-6.752 34.048-19.008 46.304l-163.392 163.392c-12.256 12.256-28.704 18.976-46.304 18.976s-34.048-6.752-46.304-18.976l-99.392-99.392c-12.256-12.256-19.008-28.704-19.008-46.304s6.752-34.048 19.008-46.304l163.392-163.392c12.256-12.256 28.704-19.008 46.304-19.008 10.528 0 20.64 2.432 29.696 6.976l65.344-65.344c-27.872-21.408-61.44-32.16-95.04-32.16-40 0-79.968 15.168-110.304 45.504l-163.392 163.392c-60.672 60.672-60.672 159.936 0 220.608l99.392 99.392c30.336 30.336 70.304 45.504 110.304 45.504s79.968-15.168 110.304-45.504l163.392-163.392c55.808-55.808 60.224-144.288 13.344-205.344l-65.344 65.344zM978.528 144.896l-99.392-99.392c-30.336-30.336-70.304-45.504-110.304-45.504s-79.968 15.168-110.304 45.504l-163.392 163.392c-55.808 55.808-60.224 144.288-13.344 205.344l65.344-65.344c-4.544-9.056-6.976-19.168-6.976-29.696 0-17.6 6.752-34.048 18.976-46.304l163.392-163.392c12.256-12.256 28.704-19.008 46.304-19.008s34.048 6.752 46.304 19.008l99.392 99.392c12.256 12.256 18.976 28.704 18.976 46.304s-6.752 34.048-18.976 46.304l-163.392 163.392c-12.256 12.256-28.704 19.008-46.304 19.008-10.528 0-20.64-2.432-29.696-6.976l-65.344 65.344c27.872 21.408 61.44 32.16 95.04 32.16 40 0 79.968-15.168 110.304-45.504l163.392-163.392c60.672-60.672 60.672-159.936 0-220.608z"></path></symbol><symbol id="icon-orderedlist" viewBox="0 0 1024 1024"><path d="M384 832l640 0 0 128-640 0zM384 448l640 0 0 128-640 0zM384 64l640 0 0 128-640 0zM192 0l0 256-64 0 0-192-64 0 0-64zM128 526.016l0 50.016 128 0 0 64-192 0 0-146.016 128-60 0-50.016-128 0 0-64 192 0 0 146.016zM256 704l0 320-192 0 0-64 128 0 0-64-128 0 0-64 128 0 0-64-128 0 0-64z"></path></symbol><symbol id="icon-outdent" viewBox="0 0 1024 1024"><path d="M0 64l1024 0 0 128-1024 0zM384 256l640 0 0 128-640 0zM384 448l640 0 0 128-640 0zM384 640l640 0 0 128-640 0zM0 832l1024 0 0 128-1024 0zM256 320l0 384-256-192z"></path></symbol><symbol id="icon-symbol" viewBox="0 0 1024 1024"><path d="M704 896l256 0 64-128 0 256-384 0 0-214.208c131.104-56.48 224-197.152 224-361.792 0-214.432-157.6-382.272-352-382.272s-352 167.84-352 382.272c0 164.608 92.896 305.312 224 361.792l0 214.208-384 0 0-256 64 128 256 0 0-32.576c-187.616-66.464-320-227.392-320-415.424 0-247.424 229.216-448 512-448s512 200.576 512 448c0 188-132.384 348.96-320 415.424l0 32.576z"></path></symbol><symbol id="icon-strike" viewBox="0 0 1024 1024"><path d="M731.424 517.024c63.904 47.936 100.576 116.096 100.576 186.976s-36.672 139.04-100.576 186.976c-59.36 44.512-137.28 69.024-219.424 69.024s-160.064-24.512-219.424-69.024c-63.936-47.936-100.576-116.096-100.576-186.976l128 0c0 69.376 87.936 128 192 128s192-58.624 192-128c0-69.376-87.936-128-192-128-82.144 0-160.064-24.512-219.424-69.024-63.936-47.936-100.576-116.096-100.576-186.976s36.672-139.04 100.576-186.976c59.36-44.512 137.28-69.024 219.424-69.024s160.064 24.512 219.424 69.024c63.904 47.936 100.576 116.096 100.576 186.976l-128 0c0-69.376-87.936-128-192-128s-192 58.624-192 128c0 69.376 87.936 128 192 128 82.144 0 160.064 24.512 219.424 69.024zM0 512l1024 0 0 64-1024 0z"></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M0 64l0 896 1024 0 0-896-1024 0zM384 640l0-192 256 0 0 192-256 0zM640 704l0 192-256 0 0-192 256 0zM640 192l0 192-256 0 0-192 256 0zM320 192l0 192-256 0 0-192 256 0zM64 448l256 0 0 192-256 0 0-192zM704 448l256 0 0 192-256 0 0-192zM704 384l0-192 256 0 0 192-256 0zM64 704l256 0 0 192-256 0 0-192zM704 896l0-192 256 0 0 192-256 0z"></path></symbol><symbol id="icon-underline" viewBox="0 0 1024 1024"><path d="M704 64l128 0 0 416c0 159.072-143.264 288-320 288s-320-128.928-320-288l0-416 128 0 0 416c0 40.16 18.24 78.688 51.36 108.512 36.896 33.216 86.848 51.488 140.64 51.488s103.744-18.304 140.64-51.488c33.12-29.792 51.36-68.352 51.36-108.512l0-416zM192 832l640 0 0 128-640 0z"></path></symbol><symbol id="icon-unlink" viewBox="0 0 1025 1024"><path d="M476.928 675.104c4.576 9.056 6.976 19.168 6.976 29.696 0 17.6-6.752 34.048-19.008 46.304l-163.392 163.392c-12.256 12.256-28.704 18.976-46.304 18.976s-34.048-6.752-46.304-18.976l-99.392-99.392c-12.256-12.256-19.008-28.704-19.008-46.304s6.752-34.048 19.008-46.304l163.392-163.392c12.256-12.256 28.704-18.976 46.304-18.976 10.528 0 20.64 2.432 29.696 6.976l65.344-65.344c-27.872-21.408-61.44-32.16-95.04-32.16-40 0-79.968 15.168-110.304 45.504l-163.392 163.392c-60.672 60.672-60.672 159.936 0 220.608l99.392 99.392c30.336 30.336 70.304 45.504 110.304 45.504s79.968-15.168 110.304-45.504l163.392-163.392c55.808-55.808 60.224-144.288 13.344-205.344l-65.344 65.344zM978.528 144.896l-99.392-99.392c-30.336-30.336-70.304-45.504-110.304-45.504s-79.968 15.168-110.304 45.504l-163.392 163.392c-55.808 55.808-60.224 144.288-13.344 205.344l65.344-65.344c-4.544-9.056-6.976-19.168-6.976-29.696 0-17.6 6.752-34.048 18.976-46.304l163.392-163.392c12.256-12.256 28.704-19.008 46.304-19.008s34.048 6.752 46.304 19.008l99.392 99.392c12.256 12.256 18.976 28.704 18.976 46.304s-6.752 34.048-18.976 46.304l-163.392 163.392c-12.256 12.256-28.704 19.008-46.304 19.008-10.528 0-20.64-2.432-29.696-6.976l-65.344 65.344c27.872 21.408 61.44 32.16 95.04 32.16 40 0 79.968-15.168 110.304-45.504l163.392-163.392c60.672-60.672 60.672-159.936 0-220.608zM233.408 278.624l-192-192 45.248-45.248 192 192zM384.032 0l64 0 0 192-64 0zM0.032 384l192 0 0 64-192 0zM790.656 745.376l192 192-45.248 45.248-192-192zM576.032 832l64 0 0 192-64 0zM832.032 576l192 0 0 64-192 0z"></path></symbol><symbol id="icon-backColor" viewBox="0 0 1024 1024"><path d="M360.021333 512 677.1712 512 518.570667 87.893333Z"></path><path d="M168.618667 1024 868.573867 1024 709.034667 597.333333 328.106667 597.333333Z"></path><path d="M602.368 0 981.538133 1024 1024 1024 1024 0Z"></path><path d="M434.773333 0 0 0 0 1024 55.6544 1024Z"></path></symbol><symbol id="icon-code" viewBox="0 0 1024 1024"><path d="M0 64.003413 0 959.996587l1024 0L1024 64.003413 0 64.003413zM960.006827 896.003413l-896 0 0-640 896 0L960.006827 896.003413zM361.376427 726.621013c6.2464 6.253227 14.4384 9.3824 22.6176 9.3824 8.197973 0 16.384-3.129173 22.6304-9.3824 12.498773-12.499627 12.498773-32.7424 0-45.248l-105.3696-105.376427 105.3696-105.375573c12.498773-12.4928 12.498773-32.749227 0-45.248-12.499627-12.498773-32.7552-12.498773-45.248 0l-128 128c-12.498773 12.498773-12.498773 32.748373 0 45.253973L361.376427 726.621013zM617.3824 726.621013c6.240427 6.253227 14.431573 9.3824 22.624427 9.3824 8.1792 0 16.378027-3.129173 22.6304-9.3824l128-127.994027c12.4928-12.5056 12.4928-32.7552 0-45.253973l-128-128c-12.5184-12.498773-32.7552-12.498773-45.254827 0s-12.499627 32.7552 0 45.248l105.3696 105.375573-105.3696 105.376427C604.883627 693.878613 604.883627 714.12224 617.3824 726.621013z"></path></symbol><symbol id="icon-files" viewBox="0 0 1024 1024"><path d="M0 320l0 640 1024 0L1024 320 0 320zM768 192l-64 0L704 128l-64 0L640 64 0 64l0 192 768 0L768 192z"></path></symbol><symbol id="icon-list" viewBox="0 0 1024 1024"><path d="M700.352 704l0 256 256 0 0-256L700.352 704zM700.352 384l0 255.936 256 0L956.352 384 700.352 384zM700.352 64l0 256 256 0L956.352 64 700.352 64zM380.352 704l0 256 256 0 0-256L380.352 704zM380.352 384l0 255.936 256 0L636.352 384 380.352 384zM380.352 64l0 256 256 0L636.352 64 380.352 64zM60.352 704l0 256 256 0 0-256L60.352 704zM60.352 384l0 255.936 256 0L316.352 384 60.352 384zM60.352 64l0 256 256 0L316.352 64 60.352 64z"></path></symbol><symbol id="icon-save" viewBox="0 0 1029 1024"><path d="M512 638.976 319.488 638.976l0 258.048 192.512 0L512 638.976zM958.464 0 65.536 0C28.672 0 0 28.672 0 65.536l0 770.048L192.512 1024l770.048 0c36.864 0 65.536-28.672 65.536-65.536L1028.096 65.536C1024 28.672 995.328 0 958.464 0zM831.488 958.464 192.512 958.464l0-385.024 638.976 0L831.488 958.464zM897.024 512 126.976 512 126.976 65.536l770.048 0L897.024 512z"></path></symbol><symbol id="icon-min" viewBox="0 0 1024 1024"><path d="M64 448l896 0 0 128-896 0 0-128Z"></path></symbol><symbol id="icon-product" viewBox="0 0 1024 1024"><path d="M398.222222 455.111111 56.888889 455.111111C25.486222 455.111111 0 429.624889 0 398.222222L0 56.888889c0-31.402667 25.486222-56.888889 56.888889-56.888889l341.333333 0c31.402667 0 56.888889 25.486222 56.888889 56.888889l0 341.333333C455.111111 429.624889 429.624889 455.111111 398.222222 455.111111"></path><path d="M967.111111 398.222222l-341.333333 0L625.777778 56.888889l341.333333 0L967.111111 398.222222zM967.111111 0l-341.333333 0c-31.402667 0-56.888889 25.486222-56.888889 56.888889l0 341.333333c0 31.402667 25.486222 56.888889 56.888889 56.888889l341.333333 0c31.402667 0 56.888889-25.486222 56.888889-56.888889L1024 56.888889C1024 25.486222 998.513778 0 967.111111 0"></path><path d="M398.222222 1024 56.888889 1024c-31.402667 0-56.888889-25.486222-56.888889-56.888889l0-341.333333c0-31.402667 25.486222-56.888889 56.888889-56.888889l341.333333 0c31.402667 0 56.888889 25.486222 56.888889 56.888889l0 341.333333C455.111111 998.513778 429.624889 1024 398.222222 1024"></path><path d="M967.111111 1024l-341.333333 0c-31.402667 0-56.888889-25.486222-56.888889-56.888889l0-341.333333c0-31.402667 25.486222-56.888889 56.888889-56.888889l341.333333 0c31.402667 0 56.888889 25.486222 56.888889 56.888889l0 341.333333C1024 998.513778 998.513778 1024 967.111111 1024"></path></symbol><symbol id="icon-empty" viewBox="0 0 1024 1024"><path d="M704 64 960 320 704 320Z"></path><path d="M64 64 64 1024 960 1024 960 384 896 384 896 960 128 960 128 128 640 128 640 64Z"></path></symbol><symbol id="icon-video" viewBox="0 0 1110 1024"><path d="M1024 1024 85.333333 1024C38.186667 1024 0 985.813333 0 938.666667L0 85.333333C0 38.186667 38.186667 0 85.333333 0L1024 0C1071.146667 0 1109.333333 38.186667 1109.333333 85.333333L1109.333333 938.666667C1109.333333 985.813333 1071.146667 1024 1024 1024ZM426.666667 256 426.666667 768 810.666667 512 426.666667 256Z"></path></symbol><symbol id="icon-pic" viewBox="0 0 1024 1024"><path d="M972.797568 0 51.201152 0C22.92289 0 0.00128 22.92161 0.00128 51.199872l0 921.601536c0 28.275702 22.92161 51.199872 51.199872 51.199872l921.596416 0c28.278262 0 51.199872-22.92417 51.199872-51.199872L1023.99744 51.199872C1023.99744 22.92161 1001.07583 0 972.797568 0zM972.797568 460.798848c-245.08382-148.251923-486.398144 127.99392-486.398144 127.99392-226.657447-100.066368-377.973606 91.667239-435.198272 184.311091L51.201152 76.794048c0-14.138491 11.460805-25.599296 25.599296-25.599296l870.396544 0c14.138491 0 25.599296 11.460805 25.599296 25.599296L972.796288 460.798848zM281.599936 179.204032c-56.552685 0-102.399744 45.844499-102.399744 102.397184 0 56.552685 45.847059 102.397184 102.399744 102.397184 56.552685 0 102.399744-45.844499 102.399744-102.397184C383.99968 225.048531 338.152621 179.204032 281.599936 179.204032z"></path></symbol><symbol id="icon-bold" viewBox="0 0 1024 1024"><path d="M437.61370098 62C511.9653834 62 567.40408437 64.9750625 603.94711661 70.90862715 640.4890625 76.85875214 673.17788339 89.24432187 702.0298083 108.08085518 730.86442403 126.91739375 754.89939688 151.9958709 774.13365107 183.31421768 793.36791143 214.6491125 802.98557598 249.75173955 802.98557598 288.65416045 802.98557598 330.83897715 791.17091563 369.53030411 767.57620098 404.74675215 743.9814916 439.96320723 711.96875 466.38278545 671.57259893 483.989975 728.73557597 499.93216455 772.68088848 527.09577295 803.40853643 565.48078965 834.13617911 603.8658125 849.5 648.9925833 849.5 700.86213125 849.5 741.70481152 839.54483018 781.43093545 819.66803222 820.02602393 799.79122812 858.63766661 772.64627188 889.4706875 738.2342542 912.54371152 703.82115722 935.63329589 661.38053222 949.8132125 610.94483018 955.11658643 579.30420518 958.38242714 502.99134893 960.43651455 382.00733018 961.2446917L62 961.2446917 62 62 437.61370098 62ZM230.75 399.5L364.28739893 399.5C443.66832705 399.5 493.01498955 398.3985125 512.2878875 396.1765083 547.16913125 392.20600625 574.5923334 380.59226035 594.55516661 361.33526357 614.51916348 342.09506357 624.5 316.75190732 624.5 285.33825723 624.5 255.25445205 615.87928848 230.82024482 598.67503438 211.9998166 581.46961661 193.19729786 555.88043955 181.81078438 521.92491875 177.8234917 501.7251333 175.61939785 443.66832705 174.5 347.77191465 174.5L230.75 174.5 230.75 399.5ZM230.75 793.25L427.71935411 793.25C504.38265839 793.25 553.03467911 791.52986972 573.6366916 788.09058652 605.25887187 783.49415732 631.02137187 772.30843965 650.90483545 754.51688545 670.78830518 736.72532597 680.75 712.9074667 680.75 683.04772812 680.75 657.79902705 673.07580722 636.3704542 657.74677607 618.76201661 642.39838438 601.16818027 620.24677403 588.33928847 591.25201455 580.3035708 562.25726035 572.2678584 499.35403232 568.25 402.56169277 568.25L230.75 568.25 230.75 793.25Z"></path></symbol><symbol id="icon-max" viewBox="0 0 1024 1024"><path d="M64 128l0 128 0 576 64 0 768 0 64 0 0-64L960 256 960 128 64 128zM896 768 128 768 128 256l768 0L896 768z"></path></symbol><symbol id="icon-del" viewBox="0 0 1024 1024"><path d="M960 192l-192 0L768 64c0-35.328-28.672-64-64-64L320 0C284.672 0 256 28.672 256 64l0 128L64 192C28.672 192 0 220.672 0 256l128 0 0 704c0 35.328 28.672 64 64 64l640 0c35.328 0 64-28.672 64-64L896 256l128 0C1024 220.672 995.328 192 960 192zM320 64l384 0 0 128L320 192 320 64zM832 960 192 960 192 256l640 0L832 960z"></path><path d="M416 832C433.664 832 448 817.6 448 800l0-384C448 398.4 433.664 384 416 384S384 398.4 384 416l0 384C384 817.6 398.336 832 416 832z"></path><path d="M608 832c17.6 0 32-14.4 32-32l0-384C640 398.4 625.6 384 608 384S576 398.4 576 416l0 384C576 817.6 590.4 832 608 832z"></path></symbol><symbol id="icon-unorderedlist" viewBox="0 0 1024 1024"><path d="M0 0l256 0 0 256-256 0zM384 64l640 0 0 128-640 0zM0 384l256 0 0 256-256 0zM384 448l640 0 0 128-640 0zM0 768l256 0 0 256-256 0zM384 832l640 0 0 128-640 0z"></path></symbol><symbol id="icon-remove" viewBox="0 0 1024 1024"><path d="M921.6 512 880.64 512 972.8 972.8C972.8 1001.088 949.888 1024 921.6 1024L102.4 1024C74.112 1024 51.2 1001.088 51.2 972.8L143.36 512 102.4 512C74.112 512 51.2 489.088 51.2 460.8L51.2 409.6C51.2 381.312 74.112 358.4 102.4 358.4L409.6 358.4 409.6 102.4C409.6 45.8496 455.4496 0 512 0 568.5504 0 614.4 45.8496 614.4 102.4L614.4 358.4 921.6 358.4C949.888 358.4 972.8 381.312 972.8 409.6L972.8 460.8C972.8 489.088 949.888 512 921.6 512ZM102.4 972.8 257.6384 972.8C254.1056 967.5008 252.4416 960.9472 253.6192 954.1888L284.7488 726.5024C287.2064 712.6016 300.4672 703.2832 314.3936 705.7408 328.32 708.1984 337.6128 721.4848 335.1808 735.4112L304.0512 963.072C303.4112 966.6816 302.0032 969.9328 300.1088 972.8L921.6 972.8 819.2 512 204.8 512 102.4 972.8ZM563.2 102.4C563.2 74.112 540.288 51.2 512 51.2 483.712 51.2 460.8 74.112 460.8 102.4L460.8 358.4 563.2 358.4 563.2 102.4ZM921.6 409.6 102.4 409.6 102.4 460.8 921.6 460.8 921.6 409.6Z"></path></symbol><symbol id="icon-fontSize" viewBox="0 0 1024 1024"><path d="M321.536 515.008H512V387.968H4.032v126.976H194.56V896h126.976V515.008z m63.552-380.992h634.944v127.04H385.088V134.016z m253.888 127.04h126.976V896H638.976V261.056z"></path></symbol><symbol id="icon-quote" viewBox="0 0 1024 1024"><path d="M448 896v-256H204.8c-6.4-166.4 32-256 179.2-332.8V192C166.4 268.8 57.6 409.6 64 627.2V896h384z m512 0v-256h-243.2c-6.4-166.4 32-256 179.2-332.8V192c-217.6 76.8-326.4 217.6-320 435.2V896h384z"></path></symbol><symbol id="icon-font" viewBox="0 0 1024 1024"><path d="M22.755556 0v278.755556H56.888889c11.377778-73.955556 39.822222-136.533333 91.022222-176.355556C176.355556 73.955556 227.555556 56.888889 301.511111 56.888889h79.644445v790.755555c0 51.2-5.688889 85.333333-11.377778 96.711112-5.688889 17.066667-17.066667 28.444444-34.133334 34.133333-17.066667 11.377778-45.511111 17.066667-73.955555 17.066667H227.555556v28.444444h568.888888v-28.444444h-34.133333c-34.133333 0-56.888889-5.688889-73.955555-17.066667-17.066667-11.377778-28.444444-22.755556-34.133334-34.133333-5.688889-11.377778-11.377778-45.511111-11.377778-96.711112V56.888889h79.644445c51.2 0 85.333333 5.688889 108.088889 11.377778 34.133333 17.066667 62.577778 39.822222 85.333333 68.266666 22.755556 28.444444 39.822222 73.955556 56.888889 136.533334h28.444444V0H22.755556z"></path></symbol><symbol id="icon-lookup" viewBox="0 0 1024 1024"><path d="M960 448V128c0-38.4-25.6-64-64-64H192c-32 0-64 25.6-64 64v768c0 38.4 25.6 64 64 64h704c38.4 0 64-25.6 64-64v-192l-275.2-236.8c6.4-12.8 12.8-32 12.8-44.8 25.6-134.4-89.6-249.6-224-224-76.8 12.8-134.4 70.4-147.2 147.2-25.6 134.4 89.6 249.6 224 224 38.4-6.4 76.8-25.6 102.4-57.6l243.2 217.6v128c0 19.2-12.8 32-32 32h-640c-19.2 0-32-6.4-32-25.6v-704c0-19.2 12.8-32 32-32h640c19.2 0 32 12.8 32 32V448h64z m-416 57.6C448 531.2 364.8 448 390.4 352c12.8-44.8 44.8-83.2 89.6-89.6 96-25.6 179.2 57.6 153.6 153.6-6.4 44.8-44.8 83.2-89.6 89.6z" fill=""></path><path d="M320 640h256v64H320zM320 768h448v64H320z" fill=""></path></symbol><symbol id="icon-italic" viewBox="0 0 1024 1024"><path d="M670 195.6h205.4V64.7H350.5v130.9h191.9L347.2 828.4H148.6v130.9h524.9V828.4H474.9z"></path></symbol><symbol id="icon-format" viewBox="0 0 1024 1024"><path d="M64 64c0-35.328 29.184-64 64.128-64h639.68A64 64 0 0 1 832 64v192c0 35.328-29.184 64-64.128 64H128.192A64 64 0 0 1 64 256V64z m768 64h128v64h-128V128zM448 448h448v64H448V448z m448-256h64v320h-64V192zM448 512h64v64H448V512zM384 576h192v351.872a96 96 0 0 1-192 0V576z" fill=""></path></symbol><symbol id="icon-subscript" viewBox="0 0 1157 1024"><path d="M986.70404 871.981313v66.663206h170.666667v85.355481h-255.977853v-194.67428l170.666667-79.995847v-66.663206h-170.666667v-85.355481h255.977853v194.67428l-170.666667 79.995847zM864.0526 0h-181.297344L432.092742 250.662514 181.341639 0H0l341.333333 341.333333L0 682.666667h181.341639l250.751103-250.662514 250.662514 250.662514h181.297344l-341.333334-341.333334L864.0526 0z"></path></symbol><symbol id="icon-superscript" viewBox="0 0 1157 1024"><path d="M986.810657 274.676626v66.656707h170.648454v85.34244h-255.990893V231.987195l170.684878-79.988049V85.342439h-170.684878V0h255.990893v194.688578l-170.648454 79.988048z m-122.67748 66.656707h-181.357237l-250.672927 250.672927-250.745776-250.672927H0l341.333333 341.333334L0 1024h181.357237l250.745776-250.636503 250.672927 250.636503h181.357237l-341.369758-341.333333 341.369758-341.333334z"></path></symbol><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M192 256h640v64H192z m0 192h640v64H192z m0 192h640v64H192z"></path></symbol><symbol id="icon-foreColor" viewBox="0 0 1024 1024"><path d="M896.1024 869.4784L544.09216 0h-69.40672L170.68032 777.9328C131.54304 892.416 74.6496 955.392 0 966.8608V1024h373.43232v-57.1392h-69.40672c-49.84832 0-76.45184-22.9376-80.09728-68.83328 3.64544-42.00448 10.69056-72.4992 21.38112-91.5456l42.78272-114.23744h298.57792l69.40672 165.74464c3.3792 10.99776 5.50912 17.5104 6.47168 19.72224-0.4096-2.74432-0.77824-5.24288-1.26976-8.25344 1.90464 8.00768 2.29376 10.67008 1.26976 8.25344 2.7648 18.16576 4.23936 30.84288 4.23936 37.62176 3.39968 38.0928-23.22432 55.17312-80.09728 51.5072h-53.26848V1024H1024v-57.1392c-63.95904 0-106.72128-32.4608-127.8976-97.3824zM314.71616 614.4l117.18656-308.77696 122.88 308.77696H314.71616z"></path></symbol><symbol id="icon-tab" viewBox="0 0 1024 1024"><path d="M320 128H128v128h192V128z m384 0v128h192V128h-192zM128 320v576h768V320H128zM64 64h896v896H64V64z m320 64v128h256V128H384z"></path></symbol></svg>', function () {
var b, c, a = document.createElement("style"), d = document.body;
a.type = "text/css", a.styleSheet ? a.styleSheet.cssText = ice.editor.css : a.innerHTML = ice.editor.css, document.getElementsByTagName("head")[0].appendChild(a), b = document.createElement("div"), b.innerHTML = ice.editor.css + ice.editor.svg, ice.editor.svg = null, c = b.getElementsByTagName("svg")[0], c && (c.setAttribute("aria-hidden", "true"), c.style.position = "absolute", c.style.width = 0, c.style.height = 0, c.style.overflow = "hidden", d.firstChild ? d.firstChild.parentNode.insertBefore(c, d.firstChild) : d.appendChild(c))
}();
export default ice;
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
import "ol/ol.css";
import {
Map,
View
} from "ol";
import {
OverviewMap,
defaults
} from "ol/control";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import LayerGroup from "ol/layer/Group";
import { fromLonLat, toLonLat } from "ol/proj";
import Feature from "ol/Feature";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from 'ol/source';
import Point from "ol/geom/Point";
import Overlay from 'ol/Overlay';
import Select from 'ol/interaction/Select'
import Draw from 'ol/interaction/Draw';
import GeoJSON from 'ol/format/GeoJSON';
import Snap from 'ol/interaction/Snap';
import { toSize } from 'ol/size';
export default class Mutil {
constructor(divId, option = {}) {
this.divId = divId;
this.option = option;
this.MAP = this.initMap()
}
//初始化地图
initMap() {
/* 天地图 */
let MAP,tianSlA = new TileLayer({
className: "mapTypeC",
source: new XYZ({
// url:
// "http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
}),
visible: true,
name: "天地图矢量底图影像",
});
let tianSlB = new TileLayer({
className: "mapTypeC",
source: new XYZ({
url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
}),
visible: true,
name: "天地图标注",
});
let tianSlC = new TileLayer({
className: "mapTypeC",
source: new XYZ({
url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
}),
visible: true,
name: "天地图标注",
});
let that = this;
const ShiJiaZhuang = fromLonLat([114.514793, 38.042225]);
const BeiJing = fromLonLat([116.322056, 39.89491]);
const VIEW = new View({
center: ShiJiaZhuang,
zoom: 12,
maxZoom: 18,
});
/*
鹰眼
*/
const overiewControl = new OverviewMap({
className: "ol-overviewmap ol-custom-overviewmap",
layers: [tianSlC, tianSlB, tianSlA],
collapseLabel: "\u00BB",
label: "\u00AB",
collapsed: false,
});
MAP = new Map({
projection: "EPSG:4326",
controls: defaults().extend([overiewControl]),
target: that.divId,
layers: [],
view: VIEW,
});
MAP.setLayerGroup(
new LayerGroup({
id: 'mapGroup',
layers: [tianSlA, tianSlB, tianSlC],
})
);
MAP.on("pointermove", function (evt) {
MAP.getTargetElement().style.cursor = that.MAP.hasFeatureAtPixel(
evt.pixel
) ?
"pointer" :
"";
});
return MAP
}
//设置地图view
setViewF(option) {
let that = this, view = that.MAP.getView();
if (option.center) view.setCenter(fromLonLat(option.center));
if (option.zoom) view.setZoom(option.zoom);
}
/*标注到地图
* type为是标注类型 在设备标注中为标注类型- layClassName
* scale, id可以为空
*/
addMarkerToMap(type, name, imgageUrl, lnglat, scale, id) {
let that = this, feature = new Feature({
geometry: new Point(fromLonLat(lnglat)),
});
let style = new Style({
image: new Icon({
anchor: [.5, 1],
src: imgageUrl,
scale: scale ? scale : 1,
}),
text: new Text({
textAlign: "center", //位置
textBaseline: "bottom", //基准线
offsetY: -44,
font: "normal 14px 微软雅黑", //文字样式
text: name, //文本内容
placement: "point",
fill: new Fill({
color: "#efeb54",
}),
backgroundFill: new Fill({
color: "#5f636a",
}),
padding: [2, 2, 2, 2],
}),
});
let iconFeatureArr = [];
feature.setStyle(style);
if (id) feature.set('did', id);
iconFeatureArr.push(feature);
var vectorSource = new VectorSource({
features: iconFeatureArr,
});
var vectorLayer = new VectorLayer({
source: vectorSource,
});
vectorLayer.set('layClassName', type)
if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) {
vectorLayer.set('layClassMark', 'Maker');
if (id) vectorLayer.set('did', id);
}
that.MAP.addLayer(vectorLayer)
}
/*
*获取layer根据-layClassName 属性移除
*/
getLayerByClass( ClassName ){
let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == ClassName);
return formerLayer
}
/*
*移除某类型标注 根据-layClassName 属性移除
*/
removeSearchm(type) {
let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == type);
if (formerLayer) {
formerLayer.forEach((ele) => {
that.MAP.removeLayer(ele);
});
}
}
//隐藏显示某类型标注 type:Boolean 是否显示
visibleMarks(type, datatype) {
let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype);
if (formerLayer) {
formerLayer.forEach((ele) => {
ele.setVisible(type)
});
}
}
//增加标注弹窗
addPopup(popConHtml, id, longitude, latitude) {
let that = this;
let newDiv = document.createElement('div');
newDiv.setAttribute('id', `popup${id}`);
newDiv.setAttribute('class', `popup`);
newDiv.innerHTML = `<div class="pop-con"></div>${popConHtml}<div class="pop-close" id="pop-close${id}" data-id="${id}">×</div>`
let mapdiv = document.getElementById('mapbox');
mapdiv.appendChild(newDiv);
let hei = newDiv.offsetHeight, kuan = newDiv.offsetWidth;
let overlay = new Overlay({
id: id,
element: document.getElementById(`popup${id}`),
autoPan: true,
offset: [- (kuan / 2 + 10), -(hei + 50)],
position: fromLonLat([longitude, latitude]),
autoPanAnimation: {
duration: 250,
},
})
that.MAP.addOverlay(overlay);
document.getElementById(`pop-close${id}`).onclick = function () {
overlay.setPosition(undefined)
}
}
mapSelectBind(callbcak) {//地图绑定选中feature事件
let se = new Select({
style: null,
hitTolerance: 0,
multi: false,
});
se.on("select", function (evt) {
if (evt.selected.length > 0) {
callbcak( evt )
}
})
this.MAP.addInteraction(se)
}
/*
*绘制多边形 callbcak-drawend触发事件 mapView:Object
*/
drawPloygon(mapView, callbcak) {
let that = this;
let obj = {
type: 'Feature',
geometry: {
type: 'MultiPolygon',
coordinates: mapView ? mapView.polygoncoorArr : null
}
}
let source = mapView ? new VectorSource({ wrapX: false, features: new GeoJSON().readFeatures(obj) }) : new VectorSource({ wrapX: false });
let vector = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
}),
stroke: new Stroke({
color: '#ec0d0d',
width: 2
})
})
});
vector.set('layClassName', 'boundary')
//已有图形填充到地图
if (mapView) {
let view = that.MAP.getView();
view.setCenter(mapView.center);
view.setZoom(mapView.zoom);
that.MAP.addLayer(vector)
return
}
//绘制
let drawPoly = new Draw({
source: source,
type: 'Polygon'
}),
drawPoint = new Draw({
source: source,
type: 'Point',
style: new Style({
stroke: new Stroke({
color: '#08d527',
width: 2
})
})
});
that.MAP.addLayer(vector)
that.MAP.addInteraction(drawPoly)
drawPoly.on('drawend', function (evt) {
callbcak(evt.feature, evt.target)
that.MAP.removeInteraction(drawPoly);
})
}
}
export default {
// URL:'http://192.168.1.104:60018/danger',
URL:'http://127.0.0.1:60018/danger',
titleArray: [],
enterpriseId:'',
componentUrl: {
AlarmMg:'Alarm',
EnseList:'EnseList',
EnterprisesMg:'Enterprises',
GIS:'GIS',
HazardsListMg:'Hazards',
PlansMg:'Plans',
qyMap:'qyMap',
qystatistics:'qystatistics',
SafetyDeviceMg:'SafetyDevice',
statistics:'statistics',
SystemCode:'SystemCode',
APIMg: "System",
BranchMg: "System",
MenuMg: "System",
RoleMg: "System",
UserMg: "System",
},
deleteFun(that: any, url: any, callback: any) {
(that as any)
.$confirm("确定删除此条记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
(that as any).$axios
.get(url)
.then((res: any) => {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "删除成功!"
});
callback()
}
});
});
},
axiosPost(that: any, url: any,param:any, callback: any) {//post请求
(that as any).$axios.post(url, param).then((res:any) => {
callback(res)
})
},
axiosGet(that: any, url: any, callback: any) {//get请求
(that as any).$axios.get(url).then((res:any) => {
callback(res)
})
},
}
\ No newline at end of file
import PlottingLayer from './plot/PlottingLayer'
import TrackingLayer from './plot/TrackingLayer'
import PlotTypes from './plot/PlotTypes'
import FeatureOperatorEvent from './plot/events/FeatureOperatorEvent'
// import * as OL from 'ol'
export default {
PlottingLayer,
TrackingLayer,
PlotTypes,
FeatureOperatorEvent,
// OL
};
\ No newline at end of file
export default {
TWO_PI: Math.PI * 2,
HALF_PI: Math.PI / 2,
FITTING_COUNT: 100,
ZERO_TOLERANCE: 0.0001,
//--plotedit
HELPER_HIDDEN_DIV: 'p-helper-hidden-div',
HELPER_CONTROL_POINT_DIV: 'p-helper-control-point-div',
SE_DISABLED:'se_disabled'
}
\ No newline at end of file
import Observable from 'ol/Observable';
// import * as ol from '../ol.js';
import PlotFactory from './PlotFactory'
import { distance } from './utils/plot_util'
import Constants from './Constants'
import FeatureEvent from './events/FeatureEvent'
import DrawEvent from './events/DrawEvent'
import { connectEvent, disconnectEvent } from '../util/core'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Circle, Style} from 'ol/style';
import Feature from 'ol/Feature';
import DoubleClickZoom from 'ol/interaction/DoubleClickZoom';
class PlotDraw extends Observable {
/**
* @classdesc 图元进行编辑的绘制的基类。
* @author daiyujie
* @extends {Observable}
* @constructs
* @param {ol.Map} map 地图对象
*/
constructor(map) {
super();
this.points = null;
this.plot = null;
this.feature = null;
this.plotType = null;
this.mapViewport = null;
this.dblClickZoomInteraction = null;
var stroke = new Stroke({ color: '#FF0000', width: 2 });
var fill = new Fill({ color: 'rgba(0,255,0,0.4)' });
this.style = new Style({ fill: fill, stroke: stroke });
this.featureSource = new VectorSource();
this.drawOverlay = new VectorLayer({
source: this.featureSource,
// zIndex:999
});
this.drawOverlay.setStyle(this.style);
this.setMap(map);
}
/**
* @ignore
*/
setMap(map) {
this.map = map;
this.mapViewport = this.map.getViewport();
}
/**
* 激活绘制工具
* @param {PlotTypes} type 要绘制的图元类型
*/
activate(type) {
this.deactivate();
this.deactivateMapTools();
this._ls_mapfirstclick = connectEvent(this.map, "click", this.mapFirstClickHandler, this);
this.plotType = type;
this.drawOverlay.setMap(this.map)
// .addLayer();
}
/**
* 取消激活绘制工具
*/
deactivate() {
this.disconnectEventHandlers();
this.map.removeLayer(this.drawOverlay);
this.featureSource.clear();
this.points = [];
this.plot = null;
this.feature = null;
this.plotType = null;
this.activateMapTools();
}
/**
* 工具是否在绘制
* @return {Boolean} 是否在绘制
*/
isDrawing() {
return this.plotType != null;
}
/**
* @ignore
*/
mapFirstClickHandler(e) {
this.points.push(e.coordinate);
this.plot = PlotFactory.createPlot(this.plotType, this.points);
// this.plot = new LineString([[114.811935424807831,37.092847824096935],[120.811935424807831,45.092847824096935]])
this.feature = new Feature(this.plot);
this.featureSource.addFeature(this.feature);
disconnectEvent(this.map,"click", this._ls_mapfirstclick);
this._ls_mapfirstclick = null;
this.dispatchEvent(new DrawEvent(DrawEvent.ADD_CONTROL_POINT,{
freehand:this.plot.freehand,
current:this.plot.getPointCount(),
total:this.plot.fixPointCount,
position:e.coordinate
}));
//
if (this.plot.fixPointCount == this.plot.getPointCount()) {
this.mapDoubleClickHandler(e);
return;
}
//
this._ls_mapNextClick = connectEvent(this.map, 'click', this.mapNextClickHandler, this);
// this._ls_mapNextClick = this.map.on("click", (e) => {
// this.mapNextClickHandler(e)
// }).listener;
if (!this.plot.freehand) {
this._ls_dbclick = connectEvent(this.map, 'dblclick', this.mapDoubleClickHandler, this);
}
this._ls_pointmove = connectEvent(this.map, 'pointermove', this.mapMouseMoveHandler, this);
// goog.events.listen(this.mapViewport, P.Event.EventType.MOUSEMOVE,
// this.mapMouseMoveHandler, false, this);
}
/**
* @ignore
*/
mapMouseMoveHandler(e) {
var coordinate = e.coordinate;
if (distance(coordinate, this.points[this.points.length - 1]) < Constants.ZERO_TOLERANCE)
return;
if (!this.plot.freehand) {
var pnts = this.points.concat([coordinate]);
this.plot.setPoints(pnts);
} else {
this.points.push(coordinate);
this.plot.setPoints(this.points);
}
this.dispatchEvent(new DrawEvent(DrawEvent.ADDING_MOUSE_MOVE,{
freehand:this.plot.freehand,
current:this.plot.getPointCount(),
total:this.plot.fixPointCount,
position:e.coordinate
}));
}
/**
* @ignore
*/
mapNextClickHandler(e) {
if (!this.plot.freehand) {
if (distance(e.coordinate, this.points[this.points.length - 1]) < Constants.ZERO_TOLERANCE)
return;
}
this.points.push(e.coordinate);
this.plot.setPoints(this.points);
this.dispatchEvent(new DrawEvent(DrawEvent.ADD_CONTROL_POINT,{
freehand:this.plot.freehand,
current:this.plot.getPointCount(),
total:this.plot.fixPointCount,
position:e.coordinate
}));
if (this.plot.fixPointCount == this.plot.getPointCount()) {
this.mapDoubleClickHandler(e);
return;
}
if (this.plot && this.plot.freehand) {
this.mapDoubleClickHandler(e);
}
}
/**
* @ignore
*/
mapDoubleClickHandler(e) {
this.disconnectEventHandlers();
this.plot.finishDrawing();
e.preventDefault();
this.drawEnd();
}
/**
* @ignore
*/
disconnectEventHandlers() {
disconnectEvent(this.map, "click", this._ls_mapfirstclick);
disconnectEvent(this.map, "click", this._ls_mapNextClick);
disconnectEvent(this.map, 'pointermove', this._ls_pointmove);
disconnectEvent(this.map, "dblclick", this._ls_dbclick);
this._ls_mapfirstclick = null;
this._ls_mapNextClick = null;
this._ls_pointmove = null;
this._ls_dbclick = null;
}
/**
* @ignore
*/
drawEnd(feature) {
this.featureSource.removeFeature(this.feature);
this.activateMapTools();
this.disconnectEventHandlers();
this.map.removeOverlay(this.drawOverlay);
this.points = [];
this.plot = null;
this.plotType = null;
this.dispatchEvent(new FeatureEvent(FeatureEvent.DRAW_END, this.feature));
this.feature = null;
}
/**
* @ignore
*/
deactivateMapTools() {
var interactions = this.map.getInteractions();
var length = interactions.getLength();
for (var i = 0; i < length; i++) {
var item = interactions.item(i);
if (item instanceof DoubleClickZoom) {
this.dblClickZoomInteraction = item;
interactions.remove(item);
break;
}
}
}
/**
* @ignore
*/
activateMapTools() {
if (this.dblClickZoomInteraction != null) {
this.map.getInteractions().push(this.dblClickZoomInteraction);
this.dblClickZoomInteraction = null;
}
}
}
export default PlotDraw;
\ No newline at end of file
// import * as ol from 'ol';
import Observable from 'ol/Observable';
import Constants from './Constants'
import * as DomUtils from '../util/dom_util';
import FeatureEvent from './events/FeatureEvent'
import Feature from 'ol/Feature';
import { connectEvent, disconnectEvent } from '../util/core'
import Overlay from 'ol/Overlay';
import DragPan from 'ol/interaction/DragPan';
class PlotEdit extends Observable {
/**
* @classdesc 图元进行编辑的基类。用来创建控制点,绑定控制点事件,对feature的数据进行处理
* @author daiyujie
* @extends {Observable}
* @constructs
* @param {Map} map 地图对象
*/
constructor(map) {
if (!map) {
return;
}
super();
this.activePlot = null;
this.startPoint = null;
this.ghostControlPoints = null;
this.controlPoints = null;
this.map = map;
this.mapViewport = this.map.getViewport();
this.mouseOver = false;
this.elementTable = {};
this.activeControlPointId = null;
this.mapDragPan = null;
//--listener
this._ls_pointermove = null;
this._ls_pointdrag = null;
this._ls_pointerdown = null;
this._ls_pointup = null;
//--这个比较特殊。绑定在map.mapBrowserEventHandler_上
this._is_controlpoint_pointermove = null;
}
initHelperDom() {
if (!this.map || !this.activePlot) {
return;
}
var parent = this.getMapParentElement();
if (!parent) {
return;
}
var hiddenDiv = DomUtils.createHidden('div', parent, Constants.HELPER_HIDDEN_DIV);
var cPnts = this.getControlPoints();
for (var i = 0; i < cPnts.length; i++) {
var id = Constants.HELPER_CONTROL_POINT_DIV + '-' + i;
DomUtils.create('div', Constants.HELPER_CONTROL_POINT_DIV, hiddenDiv, id);
this.elementTable[id] = i;
}
};
getMapParentElement() {
var mapElement = this.map.getTargetElement();
if (!mapElement) {
return;
}
return mapElement.parentNode;
};
destroyHelperDom() {
//
if (this.controlPoints) {
for (var i = 0; i < this.controlPoints.length; i++) {
this.map.removeOverlay(this.controlPoints[i]);
var element = DomUtils.get(Constants.HELPER_CONTROL_POINT_DIV + '-' + i);
if (element) {
DomUtils.removeListener(element, 'mousedown', this.controlPointMouseDownHandler, this);
// DomUtils.removeListener(element, 'mousemove', this.controlPointMouseMoveHandler2, this);
}
}
this.controlPoints = null;
}
//
var parent = this.getMapParentElement();
var hiddenDiv = DomUtils.get(Constants.HELPER_HIDDEN_DIV);
if (hiddenDiv && parent) {
DomUtils.remove(hiddenDiv, parent);
}
};
initControlPoints() {
if (!this.map) {
return;
}
this.controlPoints = [];
var cPnts = this.getControlPoints();
for (var i = 0; i < cPnts.length; i++) {
var id = Constants.HELPER_CONTROL_POINT_DIV + '-' + i;
var element = DomUtils.get(id);
var pnt = new Overlay({
id: id,
position: cPnts[i],
positioning: 'center-center',
element: element,
});
this.controlPoints.push(pnt);
this.map.addOverlay(pnt);
// debugger;
DomUtils.addListener(element, 'mousedown', this.controlPointMouseDownHandler, this);
//--mobile
DomUtils.addListener(element, 'touchstart', this.controlPointMouseDownHandler, this);
}
//--fixdyj 赋值
this._is_controlpoint_pointermove = (e) => {
this.controlPointMouseMoveHandler(e);
}
//--fix dyj 在地图上无论怎么绑都无法触发。
//--因为被map屏蔽了
this.map.mapBrowserEventHandler_.addEventListener('pointermove', this._is_controlpoint_pointermove);
};
controlPointMouseDownHandler(e) {
//--fix dyj屏蔽移动端上下滑动事件
e.preventDefault();
var id = e.target.id;
this.activeControlPointId = id;
DomUtils.addListener(e.target, 'mouseup', this.controlPointMouseUpHandler, this);
DomUtils.addListener(e.target, 'touchend', this.controlPointMouseUpHandler, this);
};
controlPointMouseMoveHandler(e) {
var coordinate = e.coordinate;
if (this.activeControlPointId) {
var plot = this.activePlot.getGeometry();
var index = this.elementTable[this.activeControlPointId];
plot.updatePoint(coordinate, index);
var overlay = this.map.getOverlayById(this.activeControlPointId);
overlay.setPosition(coordinate);
}
};
controlPointMouseUpHandler(e) {
this.activeControlPointId = null;
DomUtils.removeListener(e.target, 'mouseup', this.controlPointMouseUpHandler, this);
DomUtils.removeListener(e.target, 'touchend', this.controlPointMouseUpHandler, this);
};
activate(plot) {
if (!plot || !(plot instanceof Feature) || plot == this.activePlot) {
return;
}
var geom = plot.getGeometry();
if (!geom.isPlot || !geom.isPlot()) {
return;
}
this.deactivate();
this.activePlot = plot;
//--fix dyj 开始既绑定feature的拖动事件
this._ls_pointermove = connectEvent(this.map,"pointermove", this.plotMouseOverOutHandler,this);
//--fix dyj 开始既绑定feature的拖动事件
this._ls_pointerdown = connectEvent(this.map,'pointerdown',this.plotMouseDownHandler,this);
this.initHelperDom();
//
this.initControlPoints();
//--FIX dyj 这一贞无法拿到控制点元素的offsetWidth 和 offsetHeight。
//--overLay刷新逻辑对于center-center布局有问题;
//--故强制刷新一帧
this.map.render();
this.dispatchEvent(new FeatureEvent(FeatureEvent.ACTIVATE, this.activePlot));
};
getControlPoints() {
if (!this.activePlot) {
return [];
}
var geom = this.activePlot.getGeometry();
return geom.getPoints();
};
/**
* @ignore
* pc端移动到feature上改变指针样式
*/
plotMouseOverOutHandler(e) {
var feature = this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
return feature;
});
if (feature && feature == this.activePlot) {
if (!this.mouseOver) {
this.mouseOver = true;
this.map.getViewport().style.cursor = 'move';
}
} else {
if (this.mouseOver) {
this.mouseOver = false;
this.map.getViewport().style.cursor = 'default';
}
}
};
plotMouseDownHandler(e) {
var feature = this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
return feature;
});
if (!feature || feature != this.activePlot)
return;
//--fix dyj 屏蔽浏览器上下滑动事件
e.preventDefault();
this.ghostControlPoints = this.getControlPoints();
this.startPoint = e.coordinate;
this.disableMapDragPan();
this._ls_pointup = connectEvent(this.map,'pointerup', this.plotMouseUpHandler,this);
this._ls_pointdrag = connectEvent(this.map,'pointerdrag', this.plotMouseMoveHandler,this);
};
plotMouseMoveHandler(e) {
e.stopPropagation();
e.preventDefault();
var point = e.coordinate;
var dx = point[0] - this.startPoint[0];
var dy = point[1] - this.startPoint[1];
var newPoints = [];
for (var i = 0; i < this.ghostControlPoints.length; i++) {
var p = this.ghostControlPoints[i];
var coordinate = [p[0] + dx, p[1] + dy];
newPoints.push(coordinate);
var id = Constants.HELPER_CONTROL_POINT_DIV + '-' + i;
var overlay = this.map.getOverlayById(id);
overlay.setPosition(coordinate);
overlay.setPositioning('center-center');
}
var plot = this.activePlot.getGeometry();
plot.setPoints(newPoints);
};
plotMouseUpHandler(e) {
this.enableMapDragPan();
disconnectEvent(this.map,'pointerup', this._ls_pointup);
disconnectEvent(this.map,'pointerdrag', this._ls_pointdrag);
this._ls_pointup = null;
this._ls_pointdrag = null;
};
disconnectEventHandlers() {
disconnectEvent(this.map,'pointermove', this._ls_pointermove);
disconnectEvent(this.map,'pointerdown', this._ls_pointerdown);
disconnectEvent(this.map,'pointerup', this._ls_pointup);
disconnectEvent(this.map,'pointerdrag', this._ls_pointdrag);
this._ls_pointermove = null;
this._ls_pointerdown = null;
this._ls_pointup = null;
this._ls_pointdrag = null;
//--fix dyj;这个事件解绑比较特殊,必须判定。不然会移除所有的监听器。干坏map
if(this._is_controlpoint_pointermove)
{
this.map.mapBrowserEventHandler_.removeEventListener('pointermove', this._is_controlpoint_pointermove);
this._is_controlpoint_pointermove = null;
}
};
deactivate() {
let temp_plot = null;
if (this.activePlot) {
temp_plot = this.activePlot;
}
this.activePlot = null;
this.mouseOver = false;
this.destroyHelperDom();
this.disconnectEventHandlers();
this.elementTable = {};
this.activeControlPointId = null;
this.startPoint = null;
if (temp_plot)
this.dispatchEvent(new FeatureEvent(FeatureEvent.DEACTIVATE, temp_plot));
};
disableMapDragPan() {
var interactions = this.map.getInteractions();
var length = interactions.getLength();
for (var i = 0; i < length; i++) {
var item = interactions.item(i);
if (item instanceof DragPan) {
this.mapDragPan = item;
item.setActive(false);
break;
}
}
};
enableMapDragPan() {
if (this.mapDragPan != null) {
this.mapDragPan.setActive(true);
this.mapDragPan = null;
}
};
}
export default PlotEdit;
\ No newline at end of file
import PlotTypes from './PlotTypes'
import Marker from './plots/Marker'
import Polyline from './plots/Polyline'
import Polygon from './plots/Polygon'
import Circle from './plots/Circle'
import Ellipse from './plots/Ellipse'
import Rectangle from './plots/Rectangle'
import AttackArrow from './plots/AttackArrow'
import ClosedCurve from './plots/ClosedCurve'
import Curve from './plots/Curve'
import DoubleArrow from './plots/DoubleArrow'
import FineArrow from './plots/FineArrow'
import AssaultDirection from './plots/AssaultDirection'
import FreehandLine from './plots/FreehandLine'
import FreehandPolygon from './plots/FreehandPolygon'
import GatheringPlace from './plots/GatheringPlace'
import Lune from './plots/Lune'
import Sector from './plots/Sector'
import SquadCombat from './plots/SquadCombat'
import StraightArrow from './plots/StraightArrow'
import TailedAttackArrow from './plots/TailedAttackArrow'
import TailedSquadCombat from './plots/TailedSquadCombat'
import Arc from './plots/Arc'
/**
* @classdesc 创建图元的基类
* @author daiyujie
*/
class PlotFactory {
/**
* @static
* @param {PlotTypes} type
* @param {ol.Coordinate} points
*/
static createPlot(type, points) {
switch (type) {
case PlotTypes.MARKER:
return new Marker(points);
case PlotTypes.POLYLINE:
return new Polyline(points);
case PlotTypes.POLYGON:
return new Polygon(points);
case PlotTypes.CIRCLE:
return new Circle(points);
case PlotTypes.ELLIPSE:
return new Ellipse(points);
case PlotTypes.RECTANGLE:
return new Rectangle(points);
case PlotTypes.ARC:
return new Arc(points);
case PlotTypes.ATTACK_ARROW:
return new AttackArrow(points);
case PlotTypes.CLOSED_CURVE:
return new ClosedCurve(points);
case PlotTypes.CURVE:
return new Curve(points);
case PlotTypes.DOUBLE_ARROW:
return new DoubleArrow(points);
case PlotTypes.FINE_ARROW:
return new FineArrow(points);
case PlotTypes.ASSAULT_DIRECTION:
return new AssaultDirection(points);
case PlotTypes.FREEHAND_LINE:
return new FreehandLine(points);
case PlotTypes.FREEHAND_POLYGON:
return new FreehandPolygon(points);
case PlotTypes.GATHERING_PLACE:
return new GatheringPlace(points);
case PlotTypes.LUNE:
return new Lune(points);
case PlotTypes.SECTOR:
return new Sector(points);
case PlotTypes.SQUAD_COMBAT:
return new SquadCombat(points);
case PlotTypes.STRAIGHT_ARROW:
return new StraightArrow(points);
case PlotTypes.TAILED_ATTACK_ARROW:
return new TailedAttackArrow(points);
case PlotTypes.TAILED_SQUAD_COMBAT:
return new TailedSquadCombat(points);
}
return null;
}
}
export default PlotFactory
\ No newline at end of file
/**
* @enum
*/
const PlotTypes = {
MARKER: 'marker',
POLYLINE: 'polyline',
POLYGON: 'polygon',
CIRCLE:'circle',
ELLIPSE:'ellipse',
RECTANGLE:'rectangle',
ARC:'arc',
ATTACK_ARROW:'attack_arrow',
CLOSED_CURVE:"closed_curve",
CURVE:'curve',
DOUBLE_ARROW:'double_arrow',
FINE_ARROW:'fine_arrow',
ASSAULT_DIRECTION:'assault_direction',
FREEHAND_LINE:'freehand_line',
FREEHAND_POLYGON:'freehand_polygon',
GATHERING_PLACE:'gathering_place',
LUNE:'lune',
SECTOR: 'sector',
SQUAD_COMBAT: 'squad_combat',
STRAIGHT_ARROW:'straight_arrow',
TAILED_ATTACK_ARROW:'tailed_attack_arrow',
TAILED_SQUAD_COMBAT:'tailed_squad_combat'
}
export default PlotTypes;
\ No newline at end of file
import Feature from 'ol/Feature'
import Overlay from 'ol/Overlay'
import Observable from 'ol/Observable'
import PlotDraw from './PlotDraw'
import PlotEdit from './PlotEdit'
import FeatureEvent from './events/FeatureEvent'
import FeatureOperatorEvent from './events/FeatureOperatorEvent'
import DrawEvent from './events/DrawEvent'
import FeatureOperator from './core/FeatureOperator'
import PlotFactory from './PlotFactory'
import Constants from './Constants'
import { combineOpts, deepcopy } from '../util/core'
import * as ArrTools from '../util/array'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
// import Ajax from '../util/seieajax';
class PlottingLayer extends Observable {
/**
* @classdesc 标绘主图层封装。后续可以有多个对象。目前就中心而言应该就一个对象
* 与SEIE标绘服务进行对接,加载标绘服务,编辑标绘图元,保存标绘属性。是暴露出的唯一一个类。
* @author daiyujie
* @extends {Observable}
* @constructs
* @param {ol.Map} map 地图对象
* @param {Object} opts 初始化选项
* @example <caption>加载标绘,绘制标绘,保存标绘</caption>
* //创建TrackingLay的工作可以由SEOL完成。逻辑也可在SEOL中封装
* const plottingLayer = new PlottingLayer(map);
* //--从服务器加载标绘
* plottingLayer.loadFromService('1735');
* //--绘制标绘
* plottingLayer.addFeature('polygon');
* //--监听绘制事件,从中取到FeatureOperator对象。进行一些操作
* plottingLayer.on('activate_feature', function (e) {
* window.fo = e.feature_operator;
* //--TODO
* })
* plottingLayer.on('deactivate_feature', function (e) {
* window.fo = null;
* //--TODO
* })
* //--设置选中图元样式
* fo.setStyle({"fill":{"color":"rgba(0,255,0,0.4)"},"stroke":{"color":"#FF0000","width":2}})
* //--设置属性
* fo.setAttribute('hellow','i am free');
* //--其余操作参考FeatureOperator类
*
* //--设置层级等关联操作通过PlottingLayer对象完成
* //--上移图元
* plottingLayer.moveDown(fo);
* //--其余操作参照api
* //--保存所有图元至服务器
* plottingLayer.saveToService('1735');
*/
constructor(map, opts) {
super();
/**
* map对象
* @type {ol.Map}
*/
this.map = map;
/**
* 默认配置
* @ignore
* @type {Object}
*/
this.defaults = {
}
/**
* 合并配置
* @ignore
* @type {Object}
*/
this.opts = {};
/**
* 当前图层的所有图元操作对象
* @type {Array<FeatureOperator>}
*/
this.feature_operators = [];
/**
* 主显示图层
* @type {Layer.SourceLayer}
*/
this.showLayer = null;
/**
* 编辑工具类对象
* @type {PlotEdit}
*/
this.plotEdit = null;
/**
* 绘制工具类对象
* @type {PlotDraw}
*/
this.plotDraw = null;
/**
* 绘制提示图层
* @type {ol.Overlay}
*/
this.help_overlay = null;
/**
* 绘制提示图层元素。用以设置提示内容
* @type {Element}
*/
this.help_overlay_ele = null;
/**
* map绑定的事件钩子
* @ignore
* @type {Function}
*/
this._ls_mapclick = null;
//--合并地图选项
combineOpts(this.opts, this.defaults, opts)
//--创建layer
this.showLayer = this._createShowLayer();
//--创建编辑对象
this.plotEdit = new PlotEdit(map);
//--创建绘制对象
this.plotDraw = new PlotDraw(map);
//--绑定地图事件
this._bindListener();
}
/**
* @ignore
* 绑定地图事件
*/
_bindListener() {
this.plotDraw.on(FeatureEvent.DRAW_END, (e) => {
this._onDrawEnd(e)
})
//--试用移动端手势点击
this.plotDraw.on(DrawEvent.ADD_CONTROL_POINT, (e) => {
if (!this.help_overlay) {
this._createHelpOverlay();
}
this._setHelpOverlayState(e.drawstate);
})
//--试用pc端
this.plotDraw.on(DrawEvent.ADDING_MOUSE_MOVE, (e) => {
if (!this.help_overlay) {
this._createHelpOverlay();
}
this._setHelpOverlayState(e.drawstate);
})
this.plotEdit.on(FeatureEvent.ACTIVATE, (e) => {
this.dispatchEvent(new FeatureOperatorEvent(FeatureOperatorEvent.ACTIVATE, this._getFeatureOperator(e.feature, this.showLayer)));
})
this.plotEdit.on(FeatureEvent.DEACTIVATE, (e) => {
this.dispatchEvent(new FeatureOperatorEvent(FeatureOperatorEvent.DEACTIVATE, this._getFeatureOperator(e.feature, this.showLayer)));
})
this._ls_mapclick = this.map.on('click', (e) => {
if (!this.plotDraw || this.plotDraw.isDrawing()) {
return;
}
const feature = this.map.forEachFeatureAtPixel(e.pixel, (feature, layer) => {
return feature;
});
if (feature && !feature.get(Constants.SE_DISABLED)) {
// 开始编辑
this.plotEdit.activate(feature);
} else {
// 结束编辑
this.plotEdit.deactivate();
}
}).listener
}
/**
* @ignore
* 移除地图绑定事件
*/
_unbindListener() {
this.plotDraw.un([DrawEvent.ADD_CONTROL_POINT, DrawEvent.ADDING_MOUSE_MOVE, FeatureEvent.DRAW_END])
this.plotEdit.un([FeatureEvent.ACTIVATE, FeatureEvent.DEACTIVATE])
if (this._ls_mapclick) {
this.map.un('click', this._ls_mapclick)
this._ls_mapclick = null;
}
}
/**
* @ignore
* 创建绘制提示图层
*/
_createHelpOverlay() {
if (this.help_overlay_ele) {
this.help_overlay_ele.parentNode.removeChild(this.help_overlay_ele);
}
this.help_overlay_ele = document.createElement('div');
this.help_overlay_ele.className = 'tooltip hidden se-tooltip';
this.help_overlay = new Overlay({
element: this.help_overlay_ele,
offset: [15, 0],
positioning: 'center-left'
});
this.map.addOverlay(this.help_overlay);
}
/**
* @ignore
* 移除绘制提示图层
*/
_removeHelpOverlay() {
if (this.help_overlay_ele) {
this.help_overlay_ele.parentNode.removeChild(this.help_overlay_ele);
this.help_overlay_ele = null;
}
if (this.help_overlay) {
this.map.removeOverlay(this.help_overlay);
this.help_overlay = null;
}
}
/**
* @ignore
* 创建layer
*/
_createShowLayer() {
const showlayer = new VectorLayer({
source: new VectorSource()
});
// showlayer.setStyle(drawStyle);
showlayer.setMap(this.map);
return showlayer
}
/**
* @ignore
*/
_onDrawEnd(event) {
const feature = event.feature;
this._removeHelpOverlay();
this._addFeature(feature);
// 开始编辑
this.plotEdit.activate(feature);
}
_setHelpOverlayState(drawstate) {
if (!this.help_overlay_ele)
return;
const freehandmsg = '当前随意绘制。单击结束';
const msg1 = !drawstate.total ? '当前图元控制点无限制,' : `图元共${drawstate.total}个控制点,`
const msg2 = `当前是第${drawstate.current}个,`;
const msg3 = !drawstate.total ? '双击结束绘制' : '点击继续绘制。';
this.help_overlay_ele.innerHTML = drawstate.freehand ? freehandmsg : msg1 + msg2 + msg3;
this.help_overlay.setPosition(drawstate.position)
}
/**
* @ignore
* 添加图元
*/
_addFeature(feature, zindex) {
const fo = this._getFeatureOperator(feature, this.showLayer, zindex || this.feature_operators.length + 1);
this.feature_operators.push(fo)
return fo;
}
/**
* @ignore
* 按照zindex排序图元操作对象数组
*/
_sortByZindex() {
this.feature_operators.sort((a, b) => {
return a.feature.getStyle().zIndex - b.feature.getStyle().zIndex;
})
}
/**
* @ignore
* 获取某个人图元操作对象位置
*/
_getFeatureOperatorIndex(feature_operator) {
for (let i = 0; i < this.feature_operators.length; i++) {
if (feature_operator.guid == this.feature_operators[i].guid) {
return i;
}
}
}
/**
* @ignore
* 重新计算图元index
*/
_resetZIndex() {
this.feature_operators.map((f, i) => {
const style = f.feature.getStyle().clone();
style.setZIndex(i + 1);
f.feature.setStyle(style);
})
}
/**
* @ignore
* 获取已有图元操作对象或者新建一个
*/
_getFeatureOperator(feature, vectorlayer, zindex) {
for (let i = 0; i < this.feature_operators.length; i++) {
const fo = this.feature_operators[i];
if (fo.feature == feature)
return fo;
}
return new FeatureOperator(feature, vectorlayer, zindex);
}
/**
* @param {Number} service_id 需要加载的标绘服务id
* @param {Function} callback 加载成功的回调
* @param {Function} error 加载失败的回调
* 从服务器加载一个标绘服务
*/
loadFromService(service_id, callback, error) {
if (!service_id) {
error();
return;
}
//--清除所有图元
// this.clearFeatures();
// Ajax.getPlottingService(service_id, null, (res_service) => {
// const query_params = {
// service_id: service_id,
// projection: res_service.projection
// }
// Ajax.queryPlottingData(query_params, (res) => {
// if (!res.item_list || !res.item_list.length)
// return;
// res.item_list.map((item) => {
// if (!item.config.cresda_flag) {
// console.error('不支持非中心sdk标绘(openlayer)之外的标绘图元。')
// return undefined;
// }
// const plot = PlotFactory.createPlot(item.plotting_type, item.geo_data.coordinates);
// const feature = new Feature(plot);
// const fo = this._addFeature(feature, item.config.z_index);
// fo.attrs = deepcopy(item.ext_attr);
// fo.setStyle(item.style);
// })
// if (callback && typeof callback == 'function')
// callback();
// }, error)
// }, (e) => {
// console.error('加载标绘服务失败!')
// error();
// })
}
/**
* @param {Number} service_id 需要保存的标绘服务id
* @param {Function} callback 保存成功的回调
* @param {Function} error 保存失败的回调
* 保存标绘服务到服务器
*/
saveToService(service_id, callback, error) {
if (!service_id) {
error();
return;
}
// Ajax.clearPlottingServiceData(service_id, () => {
// const promises = [];
// this.feature_operators.map((fo) => {
// const d = fo.serialize();
// d.service_id = service_id;
// promises.push(new Promise((resove, reject) => {
// Ajax.createPlottingData(d, (r) => {
// resove();
// }, () => {
// reject('保存图元' + fo.getName() + '失败!')
// })
// }))
// })
// Promise.all(promises).then(() => {
// if (callback && typeof callback == 'function')
// callback(service_id);
// }).catch(e => {
// if (error && typeof error == 'function')
// error(e);
// })
// })
}
/**
* @param {Number} type 类型
* 添加一个标绘绘制图元
*/
addFeature(type) {
this.plotDraw.activate(type);
}
/**
* @param {FeatureOperator} feature_operator 对象
* 移除一个图元操作对象
*/
removeFeature(feature_operator) {
this.showLayer.getSource().removeFeature(feature_operator.feature);
this.plotEdit.deactivate();
const curIndex = this._getFeatureOperatorIndex(feature_operator);
feature_operator.destory();
this.feature_operators.splice(curIndex, 1);
this._sortByZindex();
this._resetZIndex();
}
/**
* 清空图元
*/
clearFeatures(callback) {
this.plotEdit.deactivate();
this.feature_operators.map((fo) => {
this.showLayer.getSource().removeFeature(fo.feature);
fo.destory();
}, this)
this.feature_operators.splice(0, this.feature_operators.length);
return this;
}
/**
* @param {FeatureOperator} feature_operator 对象
* 上移一个图元
*/
moveUp(feature_operator) {
this._sortByZindex();
const curIndex = this._getFeatureOperatorIndex(feature_operator);
ArrTools.moveUp(this.feature_operators, curIndex);
this._resetZIndex();
}
/**
* @param {FeatureOperator} feature_operator 对象
* 下移一个图元
*/
moveDown(feature_operator) {
this._sortByZindex();
const curIndex = this._getFeatureOperatorIndex(feature_operator);
ArrTools.moveDown(this.feature_operators, curIndex);
this._resetZIndex();
}
/**
* @param {FeatureOperator} feature_operator 对象
* 置顶一个图元
*/
setToTop(feature_operator) {
this._sortByZindex();
const curIndex = this._getFeatureOperatorIndex(feature_operator);
ArrTools.moveToTop(this.feature_operators, curIndex);
this._resetZIndex();
}
/**
* @param {FeatureOperator} feature_operator 对象
* 置底一个图元
*/
setToBottom(feature_operator) {
this._sortByZindex();
const curIndex = this._getFeatureOperatorIndex(feature_operator);
ArrTools.moveToBottom(this.feature_operators, curIndex);
this._resetZIndex();
}
destory() {
//--清空图元
this.clearFeatures();
//--移除map
this.showLayer.setMap(null);
this.showLayer = null;
//--解绑事件
this._unbindListener();
//--移除编辑工具对象
this.plotEdit.deactivate();
this.plotEdit = null;
//--移除绘制工具对象
this.plotDraw.deactivate();
this.plotEdit = null;
//--移除帮助overlay
this.map.removeOverlay(this.help_overlay);
this.help_overlay = null;
this.help_overlay_ele = null;
this.map = null;
}
}
export default PlottingLayer;
\ No newline at end of file
import PlottingLayer from './PlottingLayer'
import Feature from 'ol/Feature'
import PlotFactory from './PlotFactory'
import PlotTypes from './PlotTypes'
import Constants from './Constants'
import ol from 'ol';
class TrackingLayer extends PlottingLayer {
/**
* @classdesc 用来做轨迹图层的图层类。包含对轨迹的一些列操作。目前一个图层只能支持一条轨迹。后续可以提供拓展
* @author daiyujie
* @constructs
* @extends {PlottingLayer}
* @param {ol.Map} map 地图对象
* @param {Object} opts 初始化选项
* @example <caption>创建轨迹图层,进行轨迹记录</caption>
* //创建TrackingLay的工作可以由SEOL完成。逻辑也可在SEOL中封装
* const trackingLayer = new TrackingLayer(map);
* //加载轨迹标绘
* trackingLayer.loadFromService('1735');
* //加载完之后,可以在这个图层进行标绘操作。也可以不进行,随业务逻辑控制
* trackingLayer.addFeature('polygon')
* //切换轨迹标绘
* trackingLayer.loadFromService('1738');
* //绘制一个轨迹(新建对象之后,不要调用loadFromService,直接调用绘制逻辑)
* //--开始轨迹
* trackingLayer.beginTrack(30,120);
* //--更新轨迹
* trackingLayer.updateTrack(31,121);
* //--结束轨迹
* trackingLayer.endTrack();
* //--保存到服务器
* trackingLayer.saveToService('1735');
* //--销毁对象
* trackingLayer.destory();
*/
constructor(map, opts) {
super(map, opts);
this.isTracking = false;
this.track_coordinates = [];
}
/**
* 创建标注点
* @ignore
* @param {Number} lat
* @param {Number} lng
* @param {Boolean} isBegin 是否是开始标注
*/
_createMarkers(lat, lng, isBegin) {
const plot = PlotFactory.createPlot(PlotTypes.MARKER, [[lng, lat]]);
const feature = new Feature(plot);
feature.set(Constants.SE_DISABLED, true, true);
const fo = this._addFeature(feature, 1);
fo.attrs = {};
fo.setStyle({
"image": {
"icon": {
"src": isBegin ? "./images/marker-begin.png" : './images/marker-current.png',
"anchor": [0.5, 1],
}
}
});
return fo;
}
/**
* 创建标绘线
* @ignore
* @param {Array<Array<Number>>} coordinates
*/
_createLine(coordinates) {
const plot = PlotFactory.createPlot(PlotTypes.POLYLINE, coordinates);
const feature = new Feature(plot);
feature.set(Constants.SE_DISABLED, true, true);
const fo = this._addFeature(feature, 1);
fo.attrs = {};
return fo;
}
/**
* 开始轨迹记录
* @param {Number} lat
* @param {Number} lng
*/
beginTrack(lat, lng) {
if (this.isTracking)
return;
this.isTracking = true;
this.fo_begin_points = this._createMarkers(lat, lng, true);
this.track_coordinates.push([lng, lat]);
}
/**
* 更新记录点
* @param {Number} lat
* @param {Number} lng
*/
updateTrack(lat, lng) {
this.track_coordinates.push([lng, lat]);
if (this.track_coordinates.length < 2)
return;
if (!this.fo_end_points)
this.fo_end_points = this._createMarkers(lat, lng);
this.fo_end_points.setCoordinates([[lng, lat]]);
if (!this.fo_polyline) {
this.fo_polyline = this._createLine(this.track_coordinates);
}
this.fo_polyline.setCoordinates(this.track_coordinates);
}
/**
* 结束轨迹记录
* @param {Number} lat
* @param {Number} lng
*/
endTrack() {
this.isTracking = false;
}
/**
* 设置轨迹图层的属性
* @param {String} key
* @param {Object} value
*/
setAttribute(key, value) {
if (!this.fo_polyline)
return
this.fo_polyline.setAttribute(key, value);
return true;
}
/**
* 获取轨迹属性
* @param {String} key
*/
getAttribute(key) {
if (!this.fo_polyline)
return null;
return this.fo_polyline.getAttribute(key)
}
/**
* @override
*/
destory() {
super.destory();
this.isTracking = false;
this.track_coordinates = [];
}
}
export default TrackingLayer;
\ No newline at end of file
import { guid } from '../../util/core'
import StyleFactory from '../style/StyleFactory'
import Constants from '../Constants'
class FeatureOperator{
/**
* @classdesc 标绘图元操作类
* 提供对标绘图元的封装操作.所有的地图点击事件的回调函数中均有该对象,可以通过该对象实现图元的基本操作
* @constructs
* @author daiyujie
* @param {ol.Feature} feature 图元
* @param {ol.layer.SourceLayer} layer 放置的layer
* @param {number} zindex 当前图元的zindex
*/
constructor(feature, layer, zindex) {
/**
* 名称
* @type {String}
*/
this.name = "未命名";
/**
* feature对象
* @type {ol.Feature}
*/
this.feature = feature;
/**
* 图层对象
* @type {ol.layer.SourceLayer}
*/
this.layer = layer;
/**
* 是否被销毁
* @type {Boolean}
*/
this.isDestoryed = false;
/**
* 唯一区分值
* @type {String}
*/
this.guid = guid(true);
/**
* 属性列表
* @type {Object}
*/
this.attrs = {};
//--初始化样式
this._initStyle(zindex)
//--添加到图层
this._addToLayer();
}
/**
* @ignore
* 初始化样式
*/
_initStyle(zindex) {
const ft_style = StyleFactory.createFTStyle(this.getType());
const style = ft_style.parse();
style.setZIndex(zindex);
this.feature.setStyle(style);
this.ft_style = ft_style;
}
/**
* @ignore
*/
_addToLayer() {
this.layer.getSource().addFeature(this.feature);
}
/**
* 设置图元样式。不同图元提供不同的属性设置。可以通过getStyle获取图元默认样式
* @param {JSON} json_style
*/
setStyle(json_style) {
if (!json_style)
return;
const zIndex = this.getZIndex();
this.ft_style.setStyle(json_style)
const style = this.ft_style.parse();
style.setZIndex(zIndex);
this.feature.setStyle(style);
}
/**
* 获取图元当前样式
* @return {JSON} json_style
*/
getStyle() {
return this.ft_style.serialize();
}
/**
* 获取图元当前ZIndex
* @return {Number} zindex
*/
getZIndex() {
return this.feature.getStyle().getZIndex();
}
/**
* 获取图元类型。点,线,面等。
* @return {String} 类型
*/
getType() {
return this.feature.values_.geometry.type;
}
/**
* 设置图元的名称
* @param {String} str_name 名称
*/
setName(str_name) {
this.name = str_name;
}
/**
* 设置图元的名称
* @return {String} 名称
*/
getName() {
return this.name
}
/**
* 设置图元不可被点击
* @return {String} 名称
*/
disable() {
this.feature.set(Constants.SE_DISABLED, true);
}
/**
* 设置图元可以被点击
* @return {String} 名称
*/
enable() {
this.feature.set(Constants.SE_DISABLED, false);
}
/**
* 获取图元自定义属性
* @param {String} key
* @return {Object} value
*/
getAttribute(key) {
return this.attrs[key];
}
/**
* 设置图元属性。相同的属性键值会被覆盖
* @param {String} key
* @param {Object} value
*/
setAttribute(key, value) {
this.attrs[key] = value;
}
/**
* 删除图元属性
* @param {String} key
* @return {Boolean} 是否操作成功
*/
removeAttribute(key) {
if (this.attrs[key]) {
delete this.attrs[key];
return true;
}
return false;
}
/**
* 迭代自定义属性
* @param {Function} fn 回调函数
* @param {Object} scope 回调函数this值 可选
*/
iteratorAttribute(fn, scope) {
for (let sKey in this.attrs) {
if (fn && typeof fn == 'function')
fn.call(scope, sKey)
}
}
/**
* 更新对象的控制点
*/
setCoordinates(coordinates) {
const plot = this.feature.values_.geometry;
if (plot)
plot.setPoints(coordinates)
}
/**
* 销毁对象
*/
destory() {
this.isDestoryed = true;
this.feature = null;
this.layer = null;
this.attrs = {};
this.ft_style.destory();
}
/**
* 序列化
*/
serialize() {
const plot = this.feature.values_.geometry;
if (!plot)
return {}
return {
config: {
cresda_flag: true,
z_index: this.getZIndex(),
disabled:!!this.feature.get(Constants.SE_DISABLED)
},
name: this.getName(),
ext_attr: this.attrs,
plotting_type: plot.type,
geo_type: plot.geo_type,
geo_data: {
coordinates: plot.getPoints(),
type: plot.geo_type
},
style: this.getStyle()
}
}
}
export default FeatureOperator;
\ No newline at end of file
import Event from 'ol/events/Event'
class DrawEvent extends Event {
/**
* @classdesc 传递Feature的Event
* 用来传递feature
* @constructs
* @extends {ol.Event}
* @author daiyujie
* @param {String} type 事件类型
* @param {ol.Feature} feature 图元
*/
constructor(type, drawstate) {
super(type);
this.drawstate = drawstate;
}
}
/**
* 添加控制点时触发
* @static
*/
DrawEvent.ADD_CONTROL_POINT = 'add_control_point';
/**
* 绘制过程中的鼠标移动事件
* @static
*/
DrawEvent.ADDING_MOUSE_MOVE = 'adding_mouse_move';
export default DrawEvent
\ No newline at end of file
import Event from 'ol/events/Event'
class FeatureEvent extends Event {
/**
* @classdesc 传递Feature的Event
* 用来传递feature
* @constructs
* @extends {ol.Event}
* @author daiyujie
* @param {String} type 事件类型
* @param {ol.Feature} feature 图元
*/
constructor(type, feature) {
super(type);
this.feature = feature;
}
}
/**
* 当图元被激活时触发
* @static
*/
FeatureEvent.ACTIVATE = 'activate_feature';
/**
* 当图元被取消激活时触发
* @static
*/
FeatureEvent.DEACTIVATE = 'deactivate_feature';
/**
* 当绘制结束时触发
* @static
*/
FeatureEvent.DRAW_END = 'draw_end';
/**
* 绘制开始时触发
* @static
*/
FeatureEvent.DRAW_START = 'draw_start'
export default FeatureEvent
\ No newline at end of file
import Event from 'ol/events/Event'
class FeatureOperatorEvent extends Event {
/**
* @classdesc 传递FeatureOperator的Event
* 用来传递feature
* @constructs
* @extends {ol.Event}
* @author daiyujie
* @param {String} type 事件类型
* @param {FeatureOperator} feature 图元操作类
*/
constructor(type, feature_operator) {
super(type);
this.feature_operator = feature_operator;
}
}
/**
* 图元被激活时触发
* @static
*/
FeatureOperatorEvent.ACTIVATE = 'activate_feature';
/**
* 图元被取消激活时触发
* @static
*/
FeatureOperatorEvent.DEACTIVATE = 'deactivate_feature';
export default FeatureOperatorEvent
\ No newline at end of file
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import LineString from 'ol/geom/LineString'
import * as PlotUtils from '../utils/plot_util'
import mix from '../../util/mixin'
//--fix dyj 目前mix函数只支持简单对象的拷贝,Plot必须放在复杂对象前面
export default class Arc extends mix(Plot, LineString) {
constructor(points) {
super(points);
this.type = PlotTypes.ARC;
this.fixPointCount = 3;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
if (count == 2) {
this.setCoordinates(this.points);
} else {
var pnt1 = this.points[0];
var pnt2 = this.points[1];
var pnt3 = this.points[2];
var center = PlotUtils.getCircleCenterOfThreePoints(pnt1, pnt2, pnt3);
var radius = PlotUtils.distance(pnt1, center);
var angle1 = PlotUtils.getAzimuth(pnt1, center);
var angle2 = PlotUtils.getAzimuth(pnt2, center);
if (PlotUtils.isClockWise(pnt1, pnt2, pnt3)) {
var startAngle = angle2;
var endAngle = angle1;
}
else {
startAngle = angle1;
endAngle = angle2;
}
this.setCoordinates(PlotUtils.getArcPoints(center, radius, startAngle, endAngle));
}
}
}
import PlotTypes from '../PlotTypes'
import FineArrow from './FineArrow'
export default class AssaultDirection extends FineArrow {
constructor(points) {
super(points);
this.type = PlotTypes.ASSAULT_DIRECTION;
this.tailWidthFactor = 0.2;
this.neckWidthFactor = 0.25;
this.headWidthFactor = 0.3;
this.headAngle = Math.PI / 4;
this.neckAngle = Math.PI * 0.17741;
this.setPoints(points);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class AttackArrow extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.ATTACK_ARROW;
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
this.neckWidthFactor = 0.15;
this.headTailFactor = 0.8;
this.setPoints(points);
}
generate() {
if (this.getPointCount() < 2) {
return;
}
if (this.getPointCount() == 2) {
this.setCoordinates([this.points]);
return;
}
var pnts = this.getPoints();
// 计算箭尾
var tailLeft = pnts[0];
var tailRight = pnts[1];
if (PlotUtils.isClockWise(pnts[0], pnts[1], pnts[2])) {
tailLeft = pnts[1];
tailRight = pnts[0];
}
var midTail = PlotUtils.mid(tailLeft, tailRight);
var bonePnts = [midTail].concat(pnts.slice(2));
// 计算箭头
var headPnts = this.getArrowHeadPoints(bonePnts, tailLeft, tailRight);
var neckLeft = headPnts[0];
var neckRight = headPnts[4];
var tailWidthFactor = PlotUtils.distance(tailLeft, tailRight) / PlotUtils.getBaseLength(bonePnts);
// 计算箭身
var bodyPnts = this.getArrowBodyPoints(bonePnts, neckLeft, neckRight, tailWidthFactor);
// 整合
var count = bodyPnts.length;
var leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2));
leftPnts.push(neckLeft);
var rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count));
rightPnts.push(neckRight);
leftPnts = PlotUtils.getQBSplinePoints(leftPnts);
rightPnts = PlotUtils.getQBSplinePoints(rightPnts);
this.setCoordinates([leftPnts.concat(headPnts, rightPnts.reverse())]);
}
getArrowHeadPoints(points, tailLeft, tailRight) {
var len = PlotUtils.getBaseLength(points);
var headHeight = len * this.headHeightFactor;
var headPnt = points[points.length - 1];
len = PlotUtils.distance(headPnt, points[points.length - 2]);
var tailWidth = PlotUtils.distance(tailLeft, tailRight);
if (headHeight > tailWidth * this.headTailFactor) {
headHeight = tailWidth * this.headTailFactor;
}
var headWidth = headHeight * this.headWidthFactor;
var neckWidth = headHeight * this.neckWidthFactor;
headHeight = headHeight > len ? len : headHeight;
var neckHeight = headHeight * this.neckHeightFactor;
var headEndPnt = PlotUtils.getThirdPoint(points[points.length - 2], headPnt, 0, headHeight, true);
var neckEndPnt = PlotUtils.getThirdPoint(points[points.length - 2], headPnt, 0, neckHeight, true);
var headLeft = PlotUtils.getThirdPoint(headPnt, headEndPnt, Constants.HALF_PI, headWidth, false);
var headRight = PlotUtils.getThirdPoint(headPnt, headEndPnt, Constants.HALF_PI, headWidth, true);
var neckLeft = PlotUtils.getThirdPoint(headPnt, neckEndPnt, Constants.HALF_PI, neckWidth, false);
var neckRight = PlotUtils.getThirdPoint(headPnt, neckEndPnt, Constants.HALF_PI, neckWidth, true);
return [neckLeft, headLeft, headPnt, headRight, neckRight];
}
getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
var allLen = PlotUtils.wholeDistance(points);
var len = PlotUtils.getBaseLength(points);
var tailWidth = len * tailWidthFactor;
var neckWidth = PlotUtils.distance(neckLeft, neckRight);
var widthDif = (tailWidth - neckWidth) / 2;
var tempLen = 0, leftBodyPnts = [], rightBodyPnts = [];
for (var i = 1; i < points.length - 1; i++) {
var angle = PlotUtils.getAngleOfThreePoints(points[i - 1], points[i], points[i + 1]) / 2;
tempLen += PlotUtils.distance(points[i - 1], points[i]);
var w = (tailWidth / 2 - tempLen / allLen * widthDif) / Math.sin(angle);
var left = PlotUtils.getThirdPoint(points[i - 1], points[i], Math.PI - angle, w, true);
var right = PlotUtils.getThirdPoint(points[i - 1], points[i], angle, w, false);
leftBodyPnts.push(left);
rightBodyPnts.push(right);
}
return leftBodyPnts.concat(rightBodyPnts);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import Polygon from 'ol/geom/Polygon'
import {distance} from '../utils/plot_util'
import Constants from '../Constants'
import mix from '../../util/mixin'
export default class Circle extends mix(Plot,Polygon){
constructor(points) {
super(points);
this.type = PlotTypes.CIRCLE;
this.fixPointCount = 2;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
var center = this.points[0];
var radius = distance(center, this.points[1]);
this.setCoordinates([this.generatePoints(center, radius)]);
}
generatePoints(center, radius) {
var x, y, angle, points = [];
for (var i = 0; i <= Constants.FITTING_COUNT; i++) {
angle = Math.PI * 2 * i / Constants.FITTING_COUNT;
x = center[0] + radius * Math.cos(angle);
y = center[1] + radius * Math.sin(angle);
points.push([x, y]);
}
return points;
};
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class ClosedCurve extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.CLOSED_CURVE;
this.t = 0.3;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
if (count == 2) {
this.setCoordinates([this.points]);
}
else {
var pnts = this.getPoints();
pnts.push(pnts[0], pnts[1]);
var normals = [];
for (var i = 0; i < pnts.length - 2; i++) {
var normalPoints = PlotUtils.getBisectorNormals(this.t, pnts[i], pnts[i + 1], pnts[i + 2]);
normals = normals.concat(normalPoints);
}
var count = normals.length;
normals = [normals[count - 1]].concat(normals.slice(0, count - 1));
var pList = [];
for (i = 0; i < pnts.length - 2; i++) {
var pnt1 = pnts[i];
var pnt2 = pnts[i + 1];
pList.push(pnt1);
for (var t = 0; t <= Constants.FITTING_COUNT; t++) {
var pnt = PlotUtils.getCubicValue(t / Constants.FITTING_COUNT, pnt1, normals[i * 2], normals[i * 2 + 1], pnt2);
pList.push(pnt);
}
pList.push(pnt2);
}
this.setCoordinates([pList]);
}
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import LineString from 'ol/geom/LineString'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
export default class Curve extends mix(Plot, LineString) {
constructor(points) {
super(points);
this.type = PlotTypes.CURVE;
this.t = 0.3;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
if (count == 2) {
this.setCoordinates(this.points);
} else {
this.setCoordinates(PlotUtils.getCurvePoints(this.t, this.points));
}
}
}
\ No newline at end of file
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class DoubleArrow extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.DOUBLE_ARROW;
this.headHeightFactor = 0.25;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
this.neckWidthFactor = 0.15;
this.connPoint = null;
this.tempPoint4 = null;
this.fixPointCount = 4;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
if (count == 2) {
this.setCoordinates([this.points]);
return;
}
var pnt1 = this.points[0];
var pnt2 = this.points[1];
var pnt3 = this.points[2];
var count = this.getPointCount();
if (count == 3)
this.tempPoint4 = this.getTempPoint4(pnt1, pnt2, pnt3);
else
this.tempPoint4 = this.points[3];
if (count == 3 || count == 4)
this.connPoint = PlotUtils.mid(pnt1, pnt2);
else
this.connPoint = this.points[4];
var leftArrowPnts, rightArrowPnts;
if (PlotUtils.isClockWise(pnt1, pnt2, pnt3)) {
leftArrowPnts = this.getArrowPoints(pnt1, this.connPoint, this.tempPoint4, false);
rightArrowPnts = this.getArrowPoints(this.connPoint, pnt2, pnt3, true);
} else {
leftArrowPnts = this.getArrowPoints(pnt2, this.connPoint, pnt3, false);
rightArrowPnts = this.getArrowPoints(this.connPoint, pnt1, this.tempPoint4, true);
}
var m = leftArrowPnts.length;
var t = (m - 5) / 2;
var llBodyPnts = leftArrowPnts.slice(0, t);
var lArrowPnts = leftArrowPnts.slice(t, t + 5);
var lrBodyPnts = leftArrowPnts.slice(t + 5, m);
var rlBodyPnts = rightArrowPnts.slice(0, t);
var rArrowPnts = rightArrowPnts.slice(t, t + 5);
var rrBodyPnts = rightArrowPnts.slice(t + 5, m);
rlBodyPnts = PlotUtils.getBezierPoints(rlBodyPnts);
var bodyPnts = PlotUtils.getBezierPoints(rrBodyPnts.concat(llBodyPnts.slice(1)));
lrBodyPnts = PlotUtils.getBezierPoints(lrBodyPnts);
var pnts = rlBodyPnts.concat(rArrowPnts, bodyPnts, lArrowPnts, lrBodyPnts);
this.setCoordinates([pnts]);
}
getArrowPoints(pnt1, pnt2, pnt3, clockWise) {
var midPnt = PlotUtils.mid(pnt1, pnt2);
var len = PlotUtils.distance(midPnt, pnt3);
var midPnt1 = PlotUtils.getThirdPoint(pnt3, midPnt, 0, len * 0.3, true);
var midPnt2 = PlotUtils.getThirdPoint(pnt3, midPnt, 0, len * 0.5, true);
//var midPnt3=PlotUtils.getThirdPoint(pnt3, midPnt, 0, len * 0.7, true);
midPnt1 = PlotUtils.getThirdPoint(midPnt, midPnt1, Constants.HALF_PI, len / 5, clockWise);
midPnt2 = PlotUtils.getThirdPoint(midPnt, midPnt2, Constants.HALF_PI, len / 4, clockWise);
//midPnt3=PlotUtils.getThirdPoint(midPnt, midPnt3, Constants.HALF_PI, len / 5, clockWise);
var points = [midPnt, midPnt1, midPnt2, pnt3];
// 计算箭头部分
var arrowPnts = this.getArrowHeadPoints(points, this.headHeightFactor, this.headWidthFactor, this.neckHeightFactor, this.neckWidthFactor);
var neckLeftPoint = arrowPnts[0];
var neckRightPoint = arrowPnts[4];
// 计算箭身部分
var tailWidthFactor = PlotUtils.distance(pnt1, pnt2) / PlotUtils.getBaseLength(points) / 2;
var bodyPnts = this.getArrowBodyPoints(points, neckLeftPoint, neckRightPoint, tailWidthFactor);
var n = bodyPnts.length;
var lPoints = bodyPnts.slice(0, n / 2);
var rPoints = bodyPnts.slice(n / 2, n);
lPoints.push(neckLeftPoint);
rPoints.push(neckRightPoint);
lPoints = lPoints.reverse();
lPoints.push(pnt2);
rPoints = rPoints.reverse();
rPoints.push(pnt1);
return lPoints.reverse().concat(arrowPnts, rPoints);
};
finishDrawing() {
if (this.getPointCount() == 3 && this.tempPoint4 != null)
this.points.push(this.tempPoint4);
if (this.connPoint != null)
this.points.push(this.connPoint);
};
getArrowHeadPoints(points, tailLeft, tailRight) {
var len = PlotUtils.getBaseLength(points);
var headHeight = len * this.headHeightFactor;
var headPnt = points[points.length - 1];
var tailWidth = PlotUtils.distance(tailLeft, tailRight);
var headWidth = headHeight * this.headWidthFactor;
var neckWidth = headHeight * this.neckWidthFactor;
var neckHeight = headHeight * this.neckHeightFactor;
var headEndPnt = PlotUtils.getThirdPoint(points[points.length - 2], headPnt, 0, headHeight, true);
var neckEndPnt = PlotUtils.getThirdPoint(points[points.length - 2], headPnt, 0, neckHeight, true);
var headLeft = PlotUtils.getThirdPoint(headPnt, headEndPnt, Constants.HALF_PI, headWidth, false);
var headRight = PlotUtils.getThirdPoint(headPnt, headEndPnt, Constants.HALF_PI, headWidth, true);
var neckLeft = PlotUtils.getThirdPoint(headPnt, neckEndPnt, Constants.HALF_PI, neckWidth, false);
var neckRight = PlotUtils.getThirdPoint(headPnt, neckEndPnt, Constants.HALF_PI, neckWidth, true);
return [neckLeft, headLeft, headPnt, headRight, neckRight];
};
getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
var allLen = PlotUtils.wholeDistance(points);
var len = PlotUtils.getBaseLength(points);
var tailWidth = len * tailWidthFactor;
var neckWidth = PlotUtils.distance(neckLeft, neckRight);
var widthDif = (tailWidth - neckWidth) / 2;
var tempLen = 0, leftBodyPnts = [], rightBodyPnts = [];
for (var i = 1; i < points.length - 1; i++) {
var angle = PlotUtils.getAngleOfThreePoints(points[i - 1], points[i], points[i + 1]) / 2;
tempLen += PlotUtils.distance(points[i - 1], points[i]);
var w = (tailWidth / 2 - tempLen / allLen * widthDif) / Math.sin(angle);
var left = PlotUtils.getThirdPoint(points[i - 1], points[i], Math.PI - angle, w, true);
var right = PlotUtils.getThirdPoint(points[i - 1], points[i], angle, w, false);
leftBodyPnts.push(left);
rightBodyPnts.push(right);
}
return leftBodyPnts.concat(rightBodyPnts);
};
getTempPoint4(linePnt1, linePnt2, point) {
var midPnt = PlotUtils.mid(linePnt1, linePnt2);
var len = PlotUtils.distance(midPnt, point);
var angle = PlotUtils.getAngleOfThreePoints(linePnt1, midPnt, point);
var symPnt, distance1, distance2, mid;
if (angle < Constants.HALF_PI) {
distance1 = len * Math.sin(angle);
distance2 = len * Math.cos(angle);
mid = PlotUtils.getThirdPoint(linePnt1, midPnt, Constants.HALF_PI, distance1, false);
symPnt = PlotUtils.getThirdPoint(midPnt, mid, Constants.HALF_PI, distance2, true);
}
else if (angle >= Constants.HALF_PI && angle < Math.PI) {
distance1 = len * Math.sin(Math.PI - angle);
distance2 = len * Math.cos(Math.PI - angle);
mid = PlotUtils.getThirdPoint(linePnt1, midPnt, Constants.HALF_PI, distance1, false);
symPnt = PlotUtils.getThirdPoint(midPnt, mid, Constants.HALF_PI, distance2, false);
}
else if (angle >= Math.PI && angle < Math.PI * 1.5) {
distance1 = len * Math.sin(angle - Math.PI);
distance2 = len * Math.cos(angle - Math.PI);
mid = PlotUtils.getThirdPoint(linePnt1, midPnt, Constants.HALF_PI, distance1, true);
symPnt = PlotUtils.getThirdPoint(midPnt, mid, Constants.HALF_PI, distance2, true);
}
else {
distance1 = len * Math.sin(Math.PI * 2 - angle);
distance2 = len * Math.cos(Math.PI * 2 - angle);
mid = PlotUtils.getThirdPoint(linePnt1, midPnt, Constants.HALF_PI, distance1, true);
symPnt = PlotUtils.getThirdPoint(midPnt, mid, Constants.HALF_PI, distance2, false);
}
return symPnt;
};
}
// 计算对称点
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import Constants from '../Constants'
import * as PlotUtils from '../utils/plot_util'
export default class Ellipse extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.ELLIPSE;
this.fixPointCount = 2;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
var pnt1 = this.points[0];
var pnt2 = this.points[1];
var center = PlotUtils.mid(pnt1, pnt2);
var majorRadius = Math.abs((pnt1[0] - pnt2[0]) / 2);
var minorRadius = Math.abs((pnt1[1] - pnt2[1]) / 2);
this.setCoordinates([this.generatePoints(center, majorRadius, minorRadius)]);
}
generatePoints(center, majorRadius, minorRadius) {
var x, y, angle, points = [];
for (var i = 0; i <= Constants.FITTING_COUNT; i++) {
angle = Math.PI * 2 * i / Constants.FITTING_COUNT;
x = center[0] + majorRadius * Math.cos(angle);
y = center[1] + minorRadius * Math.sin(angle);
points.push([x, y]);
}
return points;
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class FineArrow extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.FINE_ARROW;
this.tailWidthFactor = 0.15;
this.neckWidthFactor = 0.2;
this.headWidthFactor = 0.25;
this.headAngle = Math.PI / 8.5;
this.neckAngle = Math.PI / 13;
this.fixPointCount = 2;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
var pnts = this.getPoints();
var pnt1 = pnts[0];
var pnt2 = pnts[1];
var len = PlotUtils.getBaseLength(pnts);
var tailWidth = len * this.tailWidthFactor;
var neckWidth = len * this.neckWidthFactor;
var headWidth = len * this.headWidthFactor;
var tailLeft = PlotUtils.getThirdPoint(pnt2, pnt1, Constants.HALF_PI, tailWidth, true);
var tailRight = PlotUtils.getThirdPoint(pnt2, pnt1, Constants.HALF_PI, tailWidth, false);
var headLeft = PlotUtils.getThirdPoint(pnt1, pnt2, this.headAngle, headWidth, false);
var headRight = PlotUtils.getThirdPoint(pnt1, pnt2, this.headAngle, headWidth, true);
var neckLeft = PlotUtils.getThirdPoint(pnt1, pnt2, this.neckAngle, neckWidth, false);
var neckRight = PlotUtils.getThirdPoint(pnt1, pnt2, this.neckAngle, neckWidth, true);
var pList = [tailLeft, neckLeft, headLeft, pnt2, headRight, neckRight, tailRight];
this.setCoordinates([pList]);
}
}
\ No newline at end of file
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import LineString from 'ol/geom/LineString'
import mix from '../../util/mixin'
export default class FreehandLine extends mix(Plot, LineString) {
constructor(points) {
super(points);
this.type = PlotTypes.FREEHAND_LINE;
this.freehand = true;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
this.setCoordinates(this.points);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
export default class FreehandPolygon extends mix(Plot,PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.FREEHAND_POLYGON;
this.freehand = true;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if(count < 2) {
return;
}
this.setCoordinates([this.points]);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class GatheringPlace extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.GATHERING_PLACE;
this.t = 0.4;
this.fixPointCount = 3;
this.setPoints(points);
}
generate() {
var pnts = this.getPoints();
if (pnts.length < 2) {
return;
}
if (this.getPointCount() == 2) {
var mid = PlotUtils.mid(pnts[0], pnts[1]);
var d = PlotUtils.distance(pnts[0], mid) / 0.9;
var pnt = PlotUtils.getThirdPoint(pnts[0], mid, Constants.HALF_PI, d, true);
pnts = [pnts[0], pnt, pnts[1]];
}
var mid = PlotUtils.mid(pnts[0], pnts[2]);
pnts.push(mid, pnts[0], pnts[1]);
var normals = [];
for (var i = 0; i < pnts.length - 2; i++) {
var pnt1 = pnts[i];
var pnt2 = pnts[i + 1];
var pnt3 = pnts[i + 2];
var normalPoints = PlotUtils.getBisectorNormals(this.t, pnt1, pnt2, pnt3);
normals = normals.concat(normalPoints);
}
var count = normals.length;
normals = [normals[count - 1]].concat(normals.slice(0, count - 1));
var pList = [];
for (i = 0; i < pnts.length - 2; i++) {
pnt1 = pnts[i];
pnt2 = pnts[i + 1];
pList.push(pnt1);
for (var t = 0; t <= Constants.FITTING_COUNT; t++) {
var pnt = PlotUtils.getCubicValue(t / Constants.FITTING_COUNT, pnt1, normals[i * 2], normals[i * 2 + 1], pnt2);
pList.push(pnt);
}
pList.push(pnt2);
}
this.setCoordinates([pList]);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class Lune extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.LUNE;
this.fixPointCount = 3;
this.setPoints(points);
}
generate() {
if (this.getPointCount() < 2) {
return;
}
var pnts = this.getPoints();
if (this.getPointCount() == 2) {
var mid = PlotUtils.mid(pnts[0], pnts[1]);
var d = PlotUtils.distance(pnts[0], mid);
var pnt = PlotUtils.getThirdPoint(pnts[0], mid, Constants.HALF_PI, d);
pnts.push(pnt);
}
var pnt1 = pnts[0];
var pnt2 = pnts[1];
var pnt3 = pnts[2];
var center = PlotUtils.getCircleCenterOfThreePoints(pnt1, pnt2, pnt3);
var radius = PlotUtils.distance(pnt1, center);
var angle1 = PlotUtils.getAzimuth(pnt1, center);
var angle2 = PlotUtils.getAzimuth(pnt2, center);
if (PlotUtils.isClockWise(pnt1, pnt2, pnt3)) {
var startAngle = angle2;
var endAngle = angle1;
}
else {
startAngle = angle1;
endAngle = angle2;
}
var pnts = PlotUtils.getArcPoints(center, radius, startAngle, endAngle);
pnts.push(pnts[0]);
this.setCoordinates([pnts]);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import Point from 'ol/geom/Point'
import mix from '../../util/mixin'
export default class Marker extends mix(Plot,Point) {
constructor(points) {
super(points);
this.type = PlotTypes.MARKER;
this.fixPointCount = 1;
this.setPoints(points);
}
generate() {
var pnt = this.points[0];
this.setCoordinates(pnt);
}
}
class Plot {
/**
* @classdesc 所有图元的基类,用来实现绘制图元。
* @constructs
* @author daiyujie
* @param {ol.Coordinate} points 图元的点集
*/
constructor(points) {
this.setPoints(points);
this.geo_type ='RootTest';
}
/**
* 是否为图元
*/
isPlot() {
return true;
}
/**
* 设置点集
* @param {ol.Coordinate} points 图元的点集
*/
setPoints(value) {
this.points = value ? value : [];
if (this.points.length >= 1)
this.generate();
}
/**
* 获取当前图元的点集
* @return {ol.Coordinate} 图元的点集
*/
getPoints() {
return this.points.slice(0);
}
/**
* 获取当前图元的点集数量
* @return {Number} 图元的点集的数量
*/
getPointCount() {
return this.points.length;
}
/**
* 更新某个索引的点
* @param {ol.Coordinate} point 点
* @param {index} index 位置
*/
updatePoint(point, index) {
if (index >= 0 && index < this.points.length) {
this.points[index] = point;
this.generate();
}
}
/**
* 更新最后一个点
* @param {ol.Coordinate} point
*/
updateLastPoint(point) {
this.updatePoint(point, this.points.length - 1);
}
/**
* @override
* 图元绘制逻辑.各个图元用来覆盖
*/
generate() {
//--TODO
}
/**
* @override
* 图元结束绘制回调
*/
finishDrawing() {
//--TODO
}
}
export default Plot;
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
export default class Polygon extends mix(Plot,PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.POLYGON;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
this.setCoordinates([this.points]);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import LineString from 'ol/geom/LineString'
import mix from '../../util/mixin'
//--fix dyj 目前mix函数只支持简单对象的拷贝,Plot必须放在复杂对象前面
export default class Polyline extends mix(Plot, LineString) {
constructor(points) {
super(points);
this.type = PlotTypes.POLYLINE;
this.geo_type ='LineString';
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
this.setCoordinates(this.points);
}
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
export default class Rectangle extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.RECTANGLE;
this.fixPointCount = 2;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
} else {
var pnt1 = this.points[0];
var pnt2 = this.points[1];
var xmin = Math.min(pnt1[0], pnt2[0]);
var xmax = Math.max(pnt1[0], pnt2[0]);
var ymin = Math.min(pnt1[1], pnt2[1]);
var ymax = Math.max(pnt1[1], pnt2[1]);
var tl = [xmin, ymax];
var tr = [xmax, ymax];
var br = [xmax, ymin];
var bl = [xmin, ymin];
this.setCoordinates([[tl, tr, br, bl]]);
}
}
}
\ No newline at end of file
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import PolygonOL from 'ol/geom/Polygon'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
// import Constants from '../constants'
export default class Sector extends mix(Plot, PolygonOL) {
constructor(points) {
super(points);
this.type = PlotTypes.SECTOR;
this.fixPointCount = 3;
this.setPoints(points);
}
generate() {
if (this.getPointCount() < 2)
return;
if (this.getPointCount() == 2)
this.setCoordinates([this.points]);
else {
var pnts = this.getPoints();
var center = pnts[0];
var pnt2 = pnts[1];
var pnt3 = pnts[2];
var radius = PlotUtils.distance(pnt2, center);
var startAngle = PlotUtils.getAzimuth(pnt2, center);
var endAngle = PlotUtils.getAzimuth(pnt3, center);
var pList = PlotUtils.getArcPoints(center, radius, startAngle, endAngle);
pList.push(center, pList[0]);
this.setCoordinates([pList]);
}
}
}
import PlotTypes from '../PlotTypes'
import AttackArrow from './AttackArrow'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class SquadCombat extends AttackArrow {
constructor(points) {
super(points);
this.type = PlotTypes.SQUAD_COMBAT;
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
this.neckWidthFactor = 0.15;
this.tailWidthFactor = 0.1;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
var pnts = this.getPoints();
var tailPnts = this.getTailPoints(pnts);
var headPnts = this.getArrowHeadPoints(pnts, tailPnts[0], tailPnts[1]);
var neckLeft = headPnts[0];
var neckRight = headPnts[4];
var bodyPnts = this.getArrowBodyPoints(pnts, neckLeft, neckRight, this.tailWidthFactor);
var count = bodyPnts.length;
var leftPnts = [tailPnts[0]].concat(bodyPnts.slice(0, count / 2));
leftPnts.push(neckLeft);
var rightPnts = [tailPnts[1]].concat(bodyPnts.slice(count / 2, count));
rightPnts.push(neckRight);
leftPnts = PlotUtils.getQBSplinePoints(leftPnts);
rightPnts = PlotUtils.getQBSplinePoints(rightPnts);
this.setCoordinates([leftPnts.concat(headPnts, rightPnts.reverse())]);
}
getTailPoints(points) {
var allLen = PlotUtils.getBaseLength(points);
var tailWidth = allLen * this.tailWidthFactor;
var tailLeft = PlotUtils.getThirdPoint(points[1], points[0], Constants.HALF_PI, tailWidth, false);
var tailRight = PlotUtils.getThirdPoint(points[1], points[0], Constants.HALF_PI, tailWidth, true);
return [tailLeft, tailRight];
};
}
import Plot from './Plot'
import PlotTypes from '../PlotTypes'
import LineString from 'ol/geom/LineString'
import mix from '../../util/mixin'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
//--fix dyj 目前mix函数只支持简单对象的拷贝,Plot必须放在复杂对象前面
export default class StraightArrow extends mix(Plot, LineString) {
constructor(points) {
super(points);
this.type = PlotTypes.STRAIGHT_ARROW;
this.fixPointCount = 2;
this.maxArrowLength = 3000000;
this.arrowLengthScale = 5;
this.setPoints(points);
}
generate() {
if (this.getPointCount() < 2) {
return;
}
var pnts = this.getPoints();
var pnt1 = pnts[0];
var pnt2 = pnts[1];
var distance = PlotUtils.distance(pnt1, pnt2);
var len = distance / this.arrowLengthScale;
len = len > this.maxArrowLength ? this.maxArrowLength : len;
var leftPnt = PlotUtils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
var rightPnt = PlotUtils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
this.setCoordinates([pnt1, pnt2, leftPnt, pnt2, rightPnt]);
}
}
import PlotTypes from '../PlotTypes'
import AttackArrow from './AttackArrow'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class TailedAttackArrow extends AttackArrow {
constructor(points) {
super(points);
this.type = PlotTypes.TAILED_ATTACK_ARROW;
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
this.neckWidthFactor = 0.15;
this.tailWidthFactor = 0.1;
this.headTailFactor = 0.8;
this.swallowTailFactor = 1;
this.swallowTailPnt = null;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
if (this.getPointCount() == 2) {
this.setCoordinates([this.points]);
return;
}
var pnts = this.getPoints();
var tailLeft = pnts[0];
var tailRight = pnts[1];
if (PlotUtils.isClockWise(pnts[0], pnts[1], pnts[2])) {
tailLeft = pnts[1];
tailRight = pnts[0];
}
var midTail = PlotUtils.mid(tailLeft, tailRight);
var bonePnts = [midTail].concat(pnts.slice(2));
var headPnts = this.getArrowHeadPoints(bonePnts, tailLeft, tailRight);
var neckLeft = headPnts[0];
var neckRight = headPnts[4];
var tailWidth = PlotUtils.distance(tailLeft, tailRight);
var allLen = PlotUtils.getBaseLength(bonePnts);
var len = allLen * this.tailWidthFactor * this.swallowTailFactor;
this.swallowTailPnt = PlotUtils.getThirdPoint(bonePnts[1], bonePnts[0], 0, len, true);
var factor = tailWidth / allLen;
var bodyPnts = this.getArrowBodyPoints(bonePnts, neckLeft, neckRight, factor);
var count = bodyPnts.length;
var leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2));
leftPnts.push(neckLeft);
var rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count));
rightPnts.push(neckRight);
leftPnts = PlotUtils.getQBSplinePoints(leftPnts);
rightPnts = PlotUtils.getQBSplinePoints(rightPnts);
this.setCoordinates([leftPnts.concat(headPnts, rightPnts.reverse(), [this.swallowTailPnt, leftPnts[0]])]);
}
}
import PlotTypes from '../PlotTypes'
import AttackArrow from './AttackArrow'
import * as PlotUtils from '../utils/plot_util'
import Constants from '../Constants'
export default class TailedSquadCombat extends AttackArrow {
constructor(points) {
super(points);
this.type = PlotTypes.TAILED_SQUAD_COMBAT;
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
this.neckWidthFactor = 0.15;
this.tailWidthFactor = 0.1;
this.swallowTailFactor = 1;
this.swallowTailPnt = null;
this.setPoints(points);
}
generate() {
var count = this.getPointCount();
if (count < 2) {
return;
}
var pnts = this.getPoints();
var tailPnts = this.getTailPoints(pnts);
var headPnts = this.getArrowHeadPoints(pnts, tailPnts[0], tailPnts[2]);
var neckLeft = headPnts[0];
var neckRight = headPnts[4];
var bodyPnts = this.getArrowBodyPoints(pnts, neckLeft, neckRight, this.tailWidthFactor);
var count = bodyPnts.length;
var leftPnts = [tailPnts[0]].concat(bodyPnts.slice(0, count / 2));
leftPnts.push(neckLeft);
var rightPnts = [tailPnts[2]].concat(bodyPnts.slice(count / 2, count));
rightPnts.push(neckRight);
leftPnts = PlotUtils.getQBSplinePoints(leftPnts);
rightPnts = PlotUtils.getQBSplinePoints(rightPnts);
this.setCoordinates([leftPnts.concat(headPnts, rightPnts.reverse(), [tailPnts[1], leftPnts[0]])]);
}
getTailPoints(points) {
var allLen = PlotUtils.getBaseLength(points);
var tailWidth = allLen * this.tailWidthFactor;
var tailLeft = PlotUtils.getThirdPoint(points[1], points[0], Constants.HALF_PI, tailWidth, false);
var tailRight = PlotUtils.getThirdPoint(points[1], points[0], Constants.HALF_PI, tailWidth, true);
var len = tailWidth * this.swallowTailFactor;
var swallowTailPnt = PlotUtils.getThirdPoint(points[1], points[0], 0, len, true);
return [tailLeft, swallowTailPnt, tailRight];
};
}
import FTStyle from "./Style";
import Style from 'ol/style/Style'
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill'
import Icon from 'ol/style/Icon'
class MarkerStyle extends FTStyle {
/**
* @class MarkerStyle
* @classdesc 点类样式
* @extends {FTStyle}
* @author daiyujie
* @constructs
*/
constructor() {
super();
this._style = {
image: {
//--ol.Image 的全部属性
icon: {
src: '//vdata.amap.com/icons/b18/1/2.png',
offset: [0, 0],
opacity: 1,
scale: 1,
anchor: [0.5, 0.5],
offset: [0, 0],
scale: 1
}
}
}
}
parse() {
let image = null;
if (this._style.image) {
if (this._style.image.icon) {
image = new Icon(this._style.image.icon)
}
}
return new Style({
image: image
});
}
}
export default MarkerStyle
\ No newline at end of file
import FTStyle from "./Style";
import Style from 'ol/style/Style'
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill'
class PolyLineStyle extends FTStyle {
/**
* @classdesc 折线类样式
* @author daiyujie
* @extends {FTStyle}
* @constructs
*/
constructor() {
super();
this._style = {
//--Style.Stroke所有选项
stroke: {
color: '#FF0000',
width: 3,
lineDash: [10, 10, 10]
}
}
}
parse() {
let stroke = null;
if (this._style.stroke) {
stroke = new Stroke(this._style.stroke)
}
return new Style({
stroke: stroke
});
}
}
export default PolyLineStyle
\ No newline at end of file
import FTStyle from "./Style";
import Style from 'ol/style/Style'
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill'
class PolygonStyle extends FTStyle {
/**
* @classdesc 多边形类样式
* @author daiyujie
* @extends {FTStyle}
* @constructs
*/
constructor() {
super();
this._style = {
fill: { color: 'rgba(0,255,0,0.4)' },
stroke: {
color: '#FF0000',
width: 2
}
}
}
parse() {
let fill, stroke = null;
if (this._style.fill) {
fill = new Fill(this._style.fill)
}
if (this._style.stroke) {
stroke = new Stroke(this._style.stroke)
}
return new Style({
fill: fill,
stroke: stroke
});
}
}
export default PolygonStyle
\ No newline at end of file
import {deepcopy} from '../../util/core'
class FTStyle {
/**
* @classdesc 样式基类对象
* @author daiyujie
* @constructs
*/
constructor() {
this._style = {};
this.isDestoryed = false;
}
/**
* 将json类型的样式,转换为ol.style
* @return {ol.Style}
*/
parse() {
return new Style();
}
/**
* 序列化样式
* @return {JSON}
*/
serialize() {
return deepcopy(this._style);
}
/**
* 设置样式
* @param {JSON} json_style
*/
setStyle(json_style) {
this._style = json_style;
}
/**
* 销毁对象
*/
destory() {
this._style = {};
this.isDestoryed = true;
}
}
export default FTStyle;
\ No newline at end of file
import MarkerStyle from './MarkerStyle'
import PloylineStyle from './PloyLineStyle'
import PloygonStyle from './PloygonStyle'
import PlotTypes from './../PlotTypes'
/**
* @classdesc 样式工厂。根据图元类型生成样式对象
* @author daiyujie
*/
class StyleFactory {
/**
* @param {PlotTypes} type 类型
* @static
*/
static createFTStyle(type) {
switch (type) {
case PlotTypes.MARKER:
return new MarkerStyle();
case PlotTypes.POLYLINE:
return new PloylineStyle();
case PlotTypes.POLYGON:
return new PloygonStyle();
}
return new PloygonStyle();
}
}
export default StyleFactory
\ No newline at end of file
import Constants from '../Constants'
export function distance(pnt1, pnt2) {
return Math.sqrt(Math.pow((pnt1[0] - pnt2[0]), 2) + Math.pow((pnt1[1] - pnt2[1]), 2));
};
export function wholeDistance(points) {
var n_distance = 0;
for (var i = 0; i < points.length - 1; i++)
n_distance += distance(points[i], points[i + 1]);
return n_distance;
};
export function getBaseLength(points) {
return Math.pow(wholeDistance(points), 0.99);
//return wholeDistance(points);
};
export function mid(pnt1, pnt2) {
return [(pnt1[0] + pnt2[0]) / 2, (pnt1[1] + pnt2[1]) / 2];
};
export function getCircleCenterOfThreePoints(pnt1, pnt2, pnt3) {
var pntA = [(pnt1[0] + pnt2[0]) / 2, (pnt1[1] + pnt2[1]) / 2];
var pntB = [pntA[0] - pnt1[1] + pnt2[1], pntA[1] + pnt1[0] - pnt2[0]];
var pntC = [(pnt1[0] + pnt3[0]) / 2, (pnt1[1] + pnt3[1]) / 2];
var pntD = [pntC[0] - pnt1[1] + pnt3[1], pntC[1] + pnt1[0] - pnt3[0]];
return getIntersectPoint(pntA, pntB, pntC, pntD);
};
export function getIntersectPoint(pntA, pntB, pntC, pntD) {
if (pntA[1] == pntB[1]) {
var f = (pntD[0] - pntC[0]) / (pntD[1] - pntC[1]);
var x = f * (pntA[1] - pntC[1]) + pntC[0];
var y = pntA[1];
return [x, y];
}
if (pntC[1] == pntD[1]) {
var e = (pntB[0] - pntA[0]) / (pntB[1] - pntA[1]);
x = e * (pntC[1] - pntA[1]) + pntA[0];
y = pntC[1];
return [x, y];
}
e = (pntB[0] - pntA[0]) / (pntB[1] - pntA[1]);
f = (pntD[0] - pntC[0]) / (pntD[1] - pntC[1]);
y = (e * pntA[1] - pntA[0] - f * pntC[1] + pntC[0]) / (e - f);
x = e * y - e * pntA[1] + pntA[0];
return [x, y];
};
export function getAzimuth(startPnt, endPnt) {
var azimuth;
var angle = Math.asin(Math.abs(endPnt[1] - startPnt[1]) / distance(startPnt, endPnt));
if (endPnt[1] >= startPnt[1] && endPnt[0] >= startPnt[0])
azimuth = angle + Math.PI;
else if (endPnt[1] >= startPnt[1] && endPnt[0] < startPnt[0])
azimuth = Constants.TWO_PI - angle;
else if (endPnt[1] < startPnt[1] && endPnt[0] < startPnt[0])
azimuth = angle;
else if (endPnt[1] < startPnt[1] && endPnt[0] >= startPnt[0])
azimuth = Math.PI - angle;
return azimuth;
};
export function getAngleOfThreePoints(pntA, pntB, pntC) {
var angle = getAzimuth(pntB, pntA) - getAzimuth(pntB, pntC);
return (angle < 0 ? angle + Constants.TWO_PI : angle);
};
export function isClockWise(pnt1, pnt2, pnt3) {
return ((pnt3[1] - pnt1[1]) * (pnt2[0] - pnt1[0]) > (pnt2[1] - pnt1[1]) * (pnt3[0] - pnt1[0]));
};
export function getPointOnLine(t, startPnt, endPnt) {
var x = startPnt[0] + (t * (endPnt[0] - startPnt[0]));
var y = startPnt[1] + (t * (endPnt[1] - startPnt[1]));
return [x, y];
};
export function getCubicValue(t, startPnt, cPnt1, cPnt2, endPnt) {
t = Math.max(Math.min(t, 1), 0);
var tp = 1 - t;
var t2 = t * t;
var t3 = t2 * t;
var tp2 = tp * tp;
var tp3 = tp2 * tp;
var x = (tp3 * startPnt[0]) + (3 * tp2 * t * cPnt1[0]) + (3 * tp * t2 * cPnt2[0]) + (t3 * endPnt[0]);
var y = (tp3 * startPnt[1]) + (3 * tp2 * t * cPnt1[1]) + (3 * tp * t2 * cPnt2[1]) + (t3 * endPnt[1]);
return [x, y];
};
export function getThirdPoint(startPnt, endPnt, angle, distance, clockWise) {
var azimuth = getAzimuth(startPnt, endPnt);
var alpha = clockWise ? azimuth + angle : azimuth - angle;
var dx = distance * Math.cos(alpha);
var dy = distance * Math.sin(alpha);
return [endPnt[0] + dx, endPnt[1] + dy];
};
export function getArcPoints(center, radius, startAngle, endAngle) {
var x, y, pnts = [];
var angleDiff = endAngle - startAngle;
angleDiff = angleDiff < 0 ? angleDiff + Constants.TWO_PI : angleDiff;
for (var i = 0; i <= Constants.FITTING_COUNT; i++) {
var angle = startAngle + angleDiff * i / Constants.FITTING_COUNT;
x = center[0] + radius * Math.cos(angle);
y = center[1] + radius * Math.sin(angle);
pnts.push([x, y]);
}
return pnts;
};
export function getBisectorNormals(t, pnt1, pnt2, pnt3) {
var normal = getNormal(pnt1, pnt2, pnt3);
var dist = Math.sqrt(normal[0] * normal[0] + normal[1] * normal[1]);
var uX = normal[0] / dist;
var uY = normal[1] / dist;
var d1 = distance(pnt1, pnt2);
var d2 = distance(pnt2, pnt3);
if (dist > Constants.ZERO_TOLERANCE) {
if (isClockWise(pnt1, pnt2, pnt3)) {
var dt = t * d1;
var x = pnt2[0] - dt * uY;
var y = pnt2[1] + dt * uX;
var bisectorNormalRight = [x, y];
dt = t * d2;
x = pnt2[0] + dt * uY;
y = pnt2[1] - dt * uX;
var bisectorNormalLeft = [x, y];
}
else {
dt = t * d1;
x = pnt2[0] + dt * uY;
y = pnt2[1] - dt * uX;
bisectorNormalRight = [x, y];
dt = t * d2;
x = pnt2[0] - dt * uY;
y = pnt2[1] + dt * uX;
bisectorNormalLeft = [x, y];
}
}
else {
x = pnt2[0] + t * (pnt1[0] - pnt2[0]);
y = pnt2[1] + t * (pnt1[1] - pnt2[1]);
bisectorNormalRight = [x, y];
x = pnt2[0] + t * (pnt3[0] - pnt2[0]);
y = pnt2[1] + t * (pnt3[1] - pnt2[1]);
bisectorNormalLeft = [x, y];
}
return [bisectorNormalRight, bisectorNormalLeft];
};
export function getNormal(pnt1, pnt2, pnt3) {
var dX1 = pnt1[0] - pnt2[0];
var dY1 = pnt1[1] - pnt2[1];
var d1 = Math.sqrt(dX1 * dX1 + dY1 * dY1);
dX1 /= d1;
dY1 /= d1;
var dX2 = pnt3[0] - pnt2[0];
var dY2 = pnt3[1] - pnt2[1];
var d2 = Math.sqrt(dX2 * dX2 + dY2 * dY2);
dX2 /= d2;
dY2 /= d2;
var uX = dX1 + dX2;
var uY = dY1 + dY2;
return [uX, uY];
};
export function getCurvePoints(t, controlPoints) {
var leftControl = getLeftMostControlPoint(controlPoints);
var normals = [leftControl];
for (var i = 0; i < controlPoints.length - 2; i++) {
var pnt1 = controlPoints[i];
var pnt2 = controlPoints[i + 1];
var pnt3 = controlPoints[i + 2];
var normalPoints = getBisectorNormals(t, pnt1, pnt2, pnt3);
normals = normals.concat(normalPoints);
}
var rightControl = getRightMostControlPoint(controlPoints);
normals.push(rightControl);
var points = [];
for (i = 0; i < controlPoints.length - 1; i++) {
pnt1 = controlPoints[i];
pnt2 = controlPoints[i + 1];
points.push(pnt1);
for (var t = 0; t < Constants.FITTING_COUNT; t++) {
var pnt = getCubicValue(t / Constants.FITTING_COUNT, pnt1, normals[i * 2], normals[i * 2 + 1], pnt2);
points.push(pnt);
}
points.push(pnt2);
}
return points;
};
export function getLeftMostControlPoint(controlPoints) {
var pnt1 = controlPoints[0];
var pnt2 = controlPoints[1];
var pnt3 = controlPoints[2];
var pnts = getBisectorNormals(0, pnt1, pnt2, pnt3);
var normalRight = pnts[0];
var normal = getNormal(pnt1, pnt2, pnt3);
var dist = Math.sqrt(normal[0] * normal[0] + normal[1] * normal[1]);
if (dist > Constants.ZERO_TOLERANCE) {
var arr_mid = mid(pnt1, pnt2);
var pX = pnt1[0] - arr_mid[0];
var pY = pnt1[1] - arr_mid[1];
var d1 = distance(pnt1, pnt2);
// normal at midpoint
var n = 2.0 / d1;
var nX = -n * pY;
var nY = n * pX;
// upper triangle of symmetric transform matrix
var a11 = nX * nX - nY * nY
var a12 = 2 * nX * nY;
var a22 = nY * nY - nX * nX;
var dX = normalRight[0] - arr_mid[0];
var dY = normalRight[1] - arr_mid[1];
// coordinates of reflected vector
var controlX = arr_mid[0] + a11 * dX + a12 * dY;
var controlY = arr_mid[1] + a12 * dX + a22 * dY;
}
else {
controlX = pnt1[0] + t * (pnt2[0] - pnt1[0]);
controlY = pnt1[1] + t * (pnt2[1] - pnt1[1]);
}
return [controlX, controlY];
};
export function getRightMostControlPoint(controlPoints) {
var count = controlPoints.length;
var pnt1 = controlPoints[count - 3];
var pnt2 = controlPoints[count - 2];
var pnt3 = controlPoints[count - 1];
var pnts = getBisectorNormals(0, pnt1, pnt2, pnt3);
var normalLeft = pnts[1];
var normal = getNormal(pnt1, pnt2, pnt3);
var dist = Math.sqrt(normal[0] * normal[0] + normal[1] * normal[1]);
if (dist > Constants.ZERO_TOLERANCE) {
var arr_mid = mid(pnt2, pnt3);
var pX = pnt3[0] - arr_mid[0];
var pY = pnt3[1] - arr_mid[1];
var d1 = distance(pnt2, pnt3);
// normal at midpoint
var n = 2.0 / d1;
var nX = -n * pY;
var nY = n * pX;
// upper triangle of symmetric transform matrix
var a11 = nX * nX - nY * nY
var a12 = 2 * nX * nY;
var a22 = nY * nY - nX * nX;
var dX = normalLeft[0] - arr_mid[0];
var dY = normalLeft[1] - arr_mid[1];
// coordinates of reflected vector
var controlX = arr_mid[0] + a11 * dX + a12 * dY;
var controlY = arr_mid[1] + a12 * dX + a22 * dY;
}
else {
controlX = pnt3[0] + t * (pnt2[0] - pnt3[0]);
controlY = pnt3[1] + t * (pnt2[1] - pnt3[1]);
}
return [controlX, controlY];
};
export function getBezierPoints(points) {
if (points.length <= 2)
return points;
var bezierPoints = [];
var n = points.length - 1;
for (var t = 0; t <= 1; t += 0.01) {
var x = 0;
var y = 0;
for (var index = 0; index <= n; index++) {
var factor = getBinomialFactor(n, index);
var a = Math.pow(t, index);
var b = Math.pow((1 - t), (n - index));
x += factor * a * b * points[index][0];
y += factor * a * b * points[index][1];
}
bezierPoints.push([x, y]);
}
bezierPoints.push(points[n]);
return bezierPoints;
};
export function getBinomialFactor(n, index) {
return getFactorial(n) / (getFactorial(index) * getFactorial(n - index));
};
export function getFactorial(n) {
if (n <= 1)
return 1;
if (n == 2)
return 2;
if (n == 3)
return 6;
if (n == 4)
return 24;
if (n == 5)
return 120;
var result = 1;
for (var i = 1; i <= n; i++)
result *= i;
return result;
};
export function getQBSplinePoints(points) {
if (points.length <= 2)
return points;
var n = 2;
var bSplinePoints = [];
var m = points.length - n - 1;
bSplinePoints.push(points[0]);
for (var i = 0; i <= m; i++) {
for (var t = 0; t <= 1; t += 0.05) {
var x = 0;
var y = 0;
for (var k = 0; k <= n; k++) {
var factor = getQuadricBSplineFactor(k, t);
x += factor * points[i + k][0];
y += factor * points[i + k][1];
}
bSplinePoints.push([x, y]);
}
}
bSplinePoints.push(points[points.length - 1]);
return bSplinePoints;
};
export function getQuadricBSplineFactor(k, t) {
if (k == 0)
return Math.pow(t - 1, 2) / 2;
if (k == 1)
return (-2 * Math.pow(t, 2) + 2 * t + 1) / 2;
if (k == 2)
return Math.pow(t, 2) / 2;
return 0;
};
\ No newline at end of file
export function swap(arr, index1, index2) {
if (index1 >= arr.length || index2 >= arr.length)
return null;
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
}
export function moveUp(arr, $index) {
if ($index == arr.length - 1) {
return;
}
swap(arr, $index, $index + 1);
}
export function moveDown(arr, $index) {
if ($index == 0) {
return;
}
swap(arr, $index, $index - 1);
}
export function moveToTop(arr, $index) {
if ($index == arr.length - 1) {
return;
}
swap(arr, $index, arr.length - 1);
}
export function moveToBottom(arr, $index) {
if ($index == 0) {
return;
}
swap(arr, $index, 0);
}
/*eslint-disable*/
export function guid(isShort) {
const s = (isShort ? 'yxxxxxxyxx' : 'xxxxxxxx-xxxx-yxxx-yxxx-xxxxxxxxxxxx').replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
return s.toLowerCase();
}
let _stampId = 0;
export function trim(str) {
return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
};
export function stamp(obj) {
var key = '_p_id_';
obj[key] = obj[key] || _stampId++;
return obj[key];
};
export function combineOpts(dest) {
var i, j, len, src;
for (j = 1, len = arguments.length; j < len; j++) {
src = arguments[j];
for (i in src) {
dest[i] = src[i];
}
}
return dest;
}
//--简单对象的拷贝。不支持function 等
export function deepcopy(object) {
return JSON.parse(JSON.stringify(object));
}
//--fix dyj 为了绑定事件的时候,不支持传递scope.
export function connectEvent(target, event_name, fn, scope) {
if (!target.on || typeof target.on != 'function')
return;
if (!fn || !event_name)
return;
const $fn = (e) => {
fn.call(scope || null, e);
}
target.on(event_name, $fn);
return $fn;
}
//--fix dyj 为了避免解绑定事件的时候,fn传递空导致解绑所有类型的事件封装
export function disconnectEvent(target, event_name, fn) {
if (!target.un || typeof target.un != 'function')
return;
if (!fn || !event_name)
return;
target.un(event_name, fn);
}
\ No newline at end of file
import {stamp,trim} from './core'
export function create(tagName, className, parent, id) {
var element = document.createElement(tagName);
element.className = className || '';
if (id) {
element.id = id;
}
if (parent) {
parent.appendChild(element);
}
return element;
};
export function createHidden(tagName, parent, id) {
var element = document.createElement(tagName);
element.style.display = 'none';
if (id) {
element.id = id;
}
if (parent) {
parent.appendChild(element);
}
return element;
};
export function remove(element, parent) {
if (parent && element) {
parent.removeChild(element);
}
};
export function get(id) {
return document.getElementById(id);
};
export function getStyle(element, name) {
var value = element.style[name];
return value === 'auto' ? null : value;
};
export function hasClass(element, name) {
return (element.className.length > 0) &&
new RegExp('(^|\\s)' + name + '(\\s|$)').test(element.className);
};
export function addClass(element, name) {
if (this.hasClass(element, name)) {
return;
}
if (element.className) {
element.className += ' ';
}
element.className += name;
};
export function removeClass(element, name) {
element.className = trim((' ' + element.className + ' ').replace(' ' + name + ' ', ' '));
};
export function getDomEventKey(type, fn, context) {
return '_p_dom_event_' + type + '_' + stamp(fn) + (context ? '_' + stamp(context) : '');
};
export function addListener(element, type, fn, context) {
var self = this,
eventKey = getDomEventKey(type, fn, context),
handler = element[eventKey];
if (handler) {
return self;
}
handler = function (e) {
return fn.call(context || element, e);
};
if ('addEventListener' in element) {
element.addEventListener(type, handler, false);
} else if ('attachEvent' in element) {
element.attachEvent('on' + type, handler);
}
element[eventKey] = handler;
return self;
};
export function removeListener(element, type, fn, context) {
var self = this,
eventKey = getDomEventKey(type, fn, context),
handler = element[eventKey];
if (!handler) {
return self;
}
if ('removeEventListener' in element) {
element.removeEventListener(type, handler, false);
} else if ('detachEvent' in element) {
element.detachEvent('on' + type, handler);
}
element[eventKey] = null;
return self;
};
\ No newline at end of file
//--fix dyj 多继承。目前还有缺陷
function mix(...mixins) {
class Mix {
constructor(...ags) {
for (let mixin of mixins) {
copyProperties(this, new mixin(ags)); // 拷贝实例属性
}
}
}
for (let mixin of mixins) {
copyProperties(Mix, mixin); // 拷贝静态属性
copyProperties(Mix.prototype, mixin.prototype,true); // 拷贝原型属性
}
return Mix;
}
function copyProperties(target, source,deep) {
for (var key of Reflect.ownKeys(source)) {
if (key !== 'constructor'
&& key !== 'prototype'
&& key !== 'name'
&& key !== 'length'//--fix ie不支持拷贝函数对象的length属性
) {
let desc = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, desc);
}
}
if (deep && source.__proto__ && target.__proto__) {
target.__proto__ = source.__proto__;
// for (let key2 of Reflect.ownKeys(source.__proto__)) {
// let desc = Object.getOwnPropertyDescriptor(source.__proto__, key2);
// Object.defineProperty(target.__proto__, key2, desc);
// copyProperties(target.__proto__,source.__proto__);
// }
}
}
export default mix;
\ No newline at end of file
$theme-color: #4980b5;
$theme-color-success: #31a592;
$theme-color-danger: #ca4d4d;
$theme-color-warning: #f1af58;
#app {
.el-button--primary {
background-color: $theme-color;
border-color: $theme-color;
}
.el-button--primary.is-plain {
&:hover {
background: $theme-color;
color: white;
}
border-color: $theme-color;
background: lighten($theme-color, 48%);
color: $theme-color;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $theme-color;
}
.el-button--danger {
background-color: $theme-color-danger;
border-color: $theme-color-danger;
color: white;
}
.el-button--danger.is-plain {
&:hover {
background: $theme-color-danger;
color: white;
}
border-color: $theme-color-danger;
background: lighten($theme-color-danger, 40%);
color: $theme-color-danger;
}
.el-button--success {
background-color: $theme-color-success;
border-color: $theme-color-success;
color: white;
}
.el-button--success.is-plain {
&:hover {
background: $theme-color-success;
color: white;
}
border-color: $theme-color-success;
background: lighten($theme-color-success, 50%);
color: $theme-color-success;
}
$curColr: $theme-color;
.el-step__head:hover {
cursor: pointer;
color: $curColr;
border-color: $curColr;
}
.el-step.active {
.el-step__head {
color: $curColr;
border-color: $curColr;
}
.el-step__title.is-wait,
.el-step__description.is-wait {
color: $curColr;
}
}
}
.su {
color: $theme-color-success;
border-color: $theme-color-success;
}
.wr {
color: $theme-color-warning;
border-color: $theme-color-warning;
}
.dg {
color: $theme-color-danger;
border-color: $theme-color-danger;
}
.sd {
color: #909399;
border-color: #909399;
}
.mi {
color: #d34108;
border-color: #d34108;
}
.jinColor {
color: red;
}
.sd.qiCr {
color: rgb(48, 180, 107);
}
.sd.qiCr:hover {
border-color: rgb(48, 180, 107);
}
.huiColr {
color: gray;
}
/* 主题颜色 end*/
.pomentWrap {
.el-row--flex.is-justify-space-around {
height: calc(100vh - 110px);
}
.el-table {
height: calc(100% - 120px);
}
}
.icon {
width: 1em;
height: 1em;
vertical-align: text-top !important;
fill: currentColor;
overflow: hidden;
}
.el-menu-item-group__title {
display: none;
}
.TaletName {
color: $theme-color;
margin: 0;
text-align: center;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #ddeafa;
}
.dbtn {
display: inline-block;
padding: 2px 5px;
// color: $theme-color;
cursor: pointer;
border-radius: 3px;
border-style: solid;
border-width: 0;
}
.dbtn:hover {
border-width: 1px;
}
.el-menu-item.is-active {
}
/* 上传样式 */
.uploader {
.el-upload {
width: 100px;
height: 100px;
background: #edf1f6;
border: 1px dashed #416e9b;
cursor: pointer;
overflow: hidden;
text-align: center;
line-height: 100px;
i {
font-size: 1.5rem;
color: #416e9b;
}
}
}
.noneTip {
text-align: center;
color: #2090e1;
img {
vertical-align: middle;
}
}
.formBoxK {
.tit {
height: 40px;
line-height: 40px;
background: #31a592;
color: #fff;
text-align: center;
}
overflow: hidden;
border: 1px solid #31a592;
.el-form {
padding: 20px;
}
}
.enterDetail {
border: 1px solid #31a592;
padding: 10px;
border-radius: 3px;
overflow: hidden;
h3 {
text-align: center;
margin: 10px;
}
.enterDetail-item {
display: inline-block;
max-width: 100%;
min-width: 50%;
line-height: 2;
width: auto;
color: #000;
.itit {
color: #919090;
}
}
.el-cascader {
width: auto;
.el-cascader .el-input .el-input__inner {
border: none;
}
.el-input.is-disabled .el-input__inner {
background: none;
border: none;
color: #000;
}
.el-input__suffix {
display: none;
}
}
}
main > div .el-table {
min-height: calc(100% - 180px);
max-height: calc(100% - 120px);
height: auto;
}
.flexBox {
display: flex;
overflow: hidden;
height: 100%;
width: 100%;
align-content: space-between;
.flexBox-item:nth-child(1) {
width: 30%;
}
.flexBox-item:nth-child(2) {
width: 70%;
}
.flexBox-item {
height: 100%;
}
}
.enterDetail {
.el-checkbox__label {
font-size: 16px;
}
.el-checkbox__inner {
width: 16px;
height: 16px;
}
}
/* 地图信息窗体 */
.popup{
width: 500px;
height: auto;
background: #fff;
padding: 10px;
position: relative;
border: 1px solid #030303;
border-radius: 5px;
}
.popup:after, .popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popup:after {
border-top-color: white;
border-width: 10px;
left: 260px;
}
.popup:before {
border-top-color: #030303;
border-width: 11px;
left: 260px;
}
.pop-close{
position: absolute;
left: auto;
right: 10px;
top: 5px;
font-size: 2em;
cursor: pointer;
}
.windowDg {
width: 100%;
height: auto;
overflow: hidden;
padding: 0 10px;
font-family: "黑体", Arial, Helvetica, sans-serif;
h3 {
text-align: center;
font-size: 1.1em;
margin: 5px 0;
}
p {
margin: 0;
line-height: 2;
color: #188678;
border-bottom: 1px #dadada dashed;
width: 50%;
display: inline-block;
span {
display: inline-block;
color: #333;
}
}
.wxyWrap {
clear: both;
display: flex;
justify-content: space-between;
margin-top: 10px;
.itm {
display: inline-block;
padding: 2px 7px;
border: 1px solid #8696b2;
background: #4980b5;
color: #fff;
border-radius: 8px;
text-align: center;
&:nth-child(1){
background: #f5726c;
}
&:nth-child(2){
background: #ef4d4d;
}
&:nth-child(3){
background: #de3131;
}
&:nth-child(4){
background: #c51414;
}
&:nth-child(5){
background: #960303;
}
}
}
}
.deadtime {
padding-right: 5px;
color: #4980b5;
}
.tagBox {
overflow: hidden;
padding-bottom: 10px;
> div {
display: inline-block;
margin-right: 15px;
}
.tagi {
color: #fff;
background: #0089ff;
border: 1px solid #848080;
padding: 10px;
border-radius: 6px;
cursor: pointer;
&.active {
box-shadow: 1px 3px 5px 1px #0c2941;
}
}
.ing {
background: #ea5454;
}
.done {
background: #399e18;
}
}
.mark {
padding: 2px 5px;
color: #fff;
border-radius: 6px;
display: inline-block;
&.none {
background: #ea5454;
}
&.handle {
background: #bb54ea;
}
&.auto {
background: #399e18;
}
}
<template>
<div class="wrapper error">
<div class="cent mainc">
<img src="@/assets/404.jpg" alt width="400" /><br>
<el-button plain class="primary" @click="$router.go(-1)">返回上一页</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.mainc {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.mainc img,.mainc button{display:inline;}
.error {
background: #ffffff;
height: 100%;
width: 100%;
}
</style>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {}
})
export default class Error extends Vue {}
</script>
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<div class="tagBox">
<div class="deadtime">最后更新时间:{{alarmNumObj.statisticsTime}}</div>
<div :class="['tagi', {active:tabIndex == null}]" @click="taggle(null)">
当前预警总数:
<dv-digital-flop :config="config" />
</div>
<div :class="['tagi','done', {active:tabIndex == 1}]" @click="taggle('1')">
已处理预警数:
<dv-digital-flop :config="config2" />
</div>
<div :class="['tagi', 'ing',{active:tabIndex == 0}]" @click="taggle('0')">
处理中预警数:
<dv-digital-flop :config="config3" />
</div>
</div>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="unitName" label="企业名称"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息">
<template slot-scope="scope">
<font class="dg">{{scope.row.alarmInfo}}</font>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间"></el-table-column>
<el-table-column prop="handleTime" label="消除时间"></el-table-column>
<el-table-column prop="hand_result" label="处理结果"></el-table-column>
<el-table-column prop="handleType" label="消除类型">
<template slot-scope="scope">
<font v-if="scope.row.handleType == 0">
<span class="mark none">未处理</span>
</font>
<font v-if="scope.row.handleType == 1">
<span class="mark auto">自动消警</span>
</font>
<font v-if="scope.row.handleType == 2">
<span class="mark handle">手动消警</span>
</font>
</template>
</el-table-column>
<el-table-column prop="category" label="设备类型"></el-table-column>
<el-table-column prop="contacts" label="联系人"></el-table-column>
<el-table-column prop="phone" label="联系电话"></el-table-column>
<el-table-column prop="deviceName" label="设备名称"></el-table-column>
<el-table-column prop="dangerGrade" label="预警等级"></el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
<el-button
type="warning"
size="small"
@click="handle(scope.row)"
v-if="scope.row.handleType == 0"
>
<i class="el-icon-bell"></i>手动消警
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class EnterprisesMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { alarmStatus: "" };
@Provide() tabIndex: any = null;
@Provide() loading: Boolean = false;
@Provide() enterpriseId:string = '';
@Provide() alarmNumObj:any = {};
@Provide() config: any = {
number: [100],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
@Provide() config2: any = {
number: [100],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
@Provide() config3: any = {
number: [100],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
getTableData() {
let that = this,
param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(that, `/alarmInfo/getAlarmInfoList`, param, function(
res: any
) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
});
}
getNumsData() {
let that = this;
METHOD.axiosGet(that, `/alarmInfo/getAlarmNum?enterpriseId=${that.enterpriseId}`, function(res: any) {
if (res.code == 0) {
let datas = res.data;
that.alarmNumObj = res.data;
that.$nextTick(() => {
that.config = {
number: [datas.alarmTotal],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
that.config2 = {
number: [datas.alarmDone],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
that.config3 = {
number: [datas.alarmIng],
style: {
fontSize: 18,
fill: "#ffffff"
},
content: "{nt}个"
};
});
}
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
taggle(status: string) {
this.searchData.alarmStatus = status;
this.getTableData();
this.tabIndex = status;
}
handle(row: any) {
let that = this;
(that as any)
.$confirm("确定手动消警吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
METHOD.axiosGet(that, `/alarmInfo/handleAlarmInfo/${row.id}`, function(
res: any
) {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "操作成功!"
});
that.getTableData();
}
});
});
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.getTableData();
this.getNumsData();
}
mounted() {}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
.dv-digital-flop {
display: inline-block;
width: 5em;
height: 30px;
}
</style>
\ No newline at end of file
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item>
<el-input v-model="searchData.unitName" placeholder="请输入企业名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.userName" placeholder="请输入用户名查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.orgCode" placeholder="请输入组织机构代码查询"></el-input>
</el-form-item>
<el-form-item>
<City @changeFun="changeFun" :valueqv="cityval"></City>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="unitName" label="企业名称"></el-table-column>
<el-table-column prop="legalPerson" label="企业法人"></el-table-column>
<el-table-column prop="orgCode" label="组织机构代码"></el-table-column>
<el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
<el-table-column prop="userName" label="管理员名称"></el-table-column>
<el-table-column prop="account" label="管理员账号"></el-table-column>
<el-table-column prop="status" label="账号状态">
<template slot-scope="scope">
<font v-if="scope.row.accountStatus === '0'" class="colorM">
<i class="iconfont iconzhengchang"></i> 正常
</font>
<font v-else-if="scope.row.accountStatus == 2" class="colorP">
<i class="iconfont iconsuoding"></i> 已锁定
</font>
<font v-else-if="scope.row.accountStatus == 1" class="colorR">
<i class="iconfont iconicon_huabanfuben"></i> 已删除
</font>
<font v-else-if="scope.row.accountStatus == 3" class="colorP">
<i class="iconfont iconshenhe"></i> 审核中
</font>
<font v-else-if="scope.row.accountStatus == 4" class="colorR">
<i class="iconfont iconweitongguo"></i> 审核未通过
</font>
</template>
</el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
<el-button type="success" size="small" @click="checkDetal(scope.row)">
<i class="el-icon-view"></i>查看详细
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
@Component({
components: { City }
})
export default class EnterprisesMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
@Provide() cityval: any = [];
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() formData: any = { dataType: "", enterpriseId: "" };
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({accountStatus:'0'}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = { unitName: "" };
this.getTableData();
this.cityval = [];
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
checkDetal(row: any) {
this.$router.push({path: '/EnDetail', query:{enterpriseId: row.enterpriseId} })
}
/*选择城市*/
changeFun(v: any) {
this.searchData.provinceId = v[0];
this.searchData.cityId = v[1];
this.searchData.countyId = v[2];
}
created() {
this.getTableData();
}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
</style>
\ No newline at end of file
<template>
<div class="wrapper enseDetail">
<div class="flexBox">
<div class="flexBox-item">
<div class="enterDetail">
<h3>*企业注册信息*</h3>
<div class="enterDetail-item">
<span class="itit">单位名称必填:</span>
{{ editForm.unitName }}
</div>
<div class="enterDetail-item">
<span class="itit">统一社会信用代码:</span>
{{ editForm.orgCode }}
</div>
<div class="enterDetail-item">
<span class="itit">法定代表人:</span>
{{ editForm.legalPerson }}
</div>
<div class="enterDetail-item">
<span class="itit">法人邮箱:</span>
{{ editForm.legalPersonEmail }}
</div>
<div class="enterDetail-item">
<span class="itit">所属区域:</span>
<City :valueqv="cityval" :disabled="true"></City>
</div>
<div class="enterDetail-item">
<span class="itit">所属街道:</span>
{{ editForm.streetName }}
</div>
<div class="enterDetail-item">
<span class="itit">单位注册地址:</span>
{{ editForm.regAddress }}
</div>
<div class="enterDetail-item">
<span class="itit">生产经营地址:</span>
{{ editForm.runAddress }}
</div>
<div class="enterDetail-item">
<span class="itit">法人手机:</span>
{{ editForm.legalPersonPhone }}
</div>
<div class="enterDetail-item">
<span class="itit">营业执照:</span>
<span class="dbtn sd qiCr" v-if="editForm.viewOrgFilePath" @click="checkFile(editForm.viewOrgFilePath)">
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">授权书:</span>
<span class="dbtn sd qiCr" v-if="editForm.viewAuthorizeFile" @click="checkFile(editForm.viewAuthorizeFile)">
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">管理员姓名:</span>
{{ editForm.userName }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员身份证:</span>
{{ editForm.idCard }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员Email:</span>
{{ editForm.email }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员手机:</span>
{{ editForm.mobliePhone }}
</div>
<h3>
<span class="dbtn dg fr" @click="$router.go(-1)">
<i class="el-icon-d-arrow-left"></i> 返回上一页
</span>
</h3>
</div>
</div>
<div class="flexBox-item">
<el-row>
<el-checkbox @change="handleCheckAllChange" :indeterminate="isIndeterminate" v-model="checkAll">全选</el-checkbox>
<el-checkbox-group v-model="checkList" @change="CheckChange">
<el-checkbox label="1">
企业辅料
<img src="@/assets/mark/mark05.png" width="25" />
</el-checkbox>
<el-checkbox label="2">
生产设备
<img src="@/assets/mark/mark03.png" width="25" />
</el-checkbox>
<el-checkbox label="3">
企业产品
<img src="@/assets/mark/mark01.png" width="25" />
</el-checkbox>
<el-checkbox label="4">
应急物资
<img src="@/assets/mark/mark02.png" width="25" />
</el-checkbox>
<el-checkbox label="5">
监控设备
<img src="@/assets/mark/markjk.png" width="25" />
</el-checkbox>
<el-checkbox label="6">
传感设备
<img src="@/assets/mark/markcgq.png" width="25" />
</el-checkbox>
</el-checkbox-group>
</el-row>
<div id="mapbox">
<Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
<DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide,
Prop,
Watch
} from "vue-property-decorator";
import {
State,
Getter,
Mutation,
Action
} from "vuex-class";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
@Component({
components: {
City,
DrawTool,
Search,
},
})
export default class EnseListDetail extends Vue {
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
@Provide() enterpriseId: string = "";
@Provide() cityval: any = [];
@Provide() editForm: any = {};
@Provide() checkList: any = ["1", "2", "3", "4", "5", "6"];
@Provide() checkListOpt: any = ["1", "2", "3", "4", "5", "6"];
@Provide() isIndeterminate: boolean = false;
@Provide() checkAll: boolean = true;
/* 地图 */
@Provide() mapOption = {
plugin: [{
pName: "MapType",
defaultType: 1,
},
{
pName: "ToolBar",
},
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() markers: any = [];
@Provide() deviceDataArr: any = [];
@Provide() goodsDataArr: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() currentWindow: any = "";
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
/*获取物品*/
getMapDataA() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`, {
page: 1,
size: 10000,
},
(res: any) => {
if (res.code == 0) {
resolve(res.data.pageData);
}
}
);
});
}
/*获取安全设备*/
getMapDataB() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`, {
page: 1,
size: 10000,
},
(res: any) => {
if (res.code == 0) {
let mapData = res.data.pageData;
resolve(res.data.pageData);
}
}
);
});
}
addMarksToMap() {
let that = this;
Promise.all([that.getMapDataA(), that.getMapDataB()]).then(
(iter) => {
let res1: any = iter[0];
let res2: any = iter[1];
let mapData = [...res1, ...res2]
that.mapData = [...res1, ...res2];
if (mapData.length > 0) {
let latSum = 0;
let lngSum = 0;
mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let mapcenter = [lngSum / mapData.length, latSum / mapData.length];
that.Mutil.setViewF({
center: mapcenter,
});
} else {
that.$message.warning("没有设备及物品信息!");
}
}
);
}
addMark(obj: any, index: any) {
let icon,
that = this;
switch (obj.dataType) {
case "3":
icon = require("@/assets/mark/mark01.png");
break;
case "4":
icon = require("@/assets/mark/mark02.png");
break;
case "2":
icon = require("@/assets/mark/mark03.png");
break;
case "1":
icon = require("@/assets/mark/mark05.png");
break;
case "5":
icon = require("@/assets/mark/markjk.png");
break;
case "6":
icon = require("@/assets/mark/markcgq.png");
break;
}
that.Mutil.addMarkerToMap(
obj.dataType,
obj.goodsName,
icon,
[obj.longitude, obj.latitude],
0.5,
obj.id
);
}
getDetail() {
let that = this;
METHOD.axiosGet(
that,
`/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.editForm = res.data;
if (that.editForm.provinceId) {
that.cityval = [
that.editForm.provinceId,
that.editForm.cityId,
that.editForm.countyId,
];
}
that.$nextTick(() => {
console.log(that.editForm.boundary)
if (that.editForm.boundary) {
that.Mutil.drawPloygon(JSON.parse(that.editForm.boundary));
}
});
}
}
);
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
/*radio group*/
CheckChange(val: any) {
let that = this;
that.checkListOpt.forEach((ele: any) => {
if (val.indexOf(ele) == -1) that.Mutil.visibleMarks(false, ele);
else that.Mutil.visibleMarks(true, ele);
});
let len = that.checkListOpt.length;
that.checkAll = val.length == len;
that.isIndeterminate = val.length > 0 && val.length < len;
}
handleCheckAllChange(val: any) {
let that = this;
that.checkList = val ? [...that.checkListOpt] : [];
that.isIndeterminate = false;
that.checkListOpt.forEach((ele: any) => {
if (val) that.Mutil.visibleMarks(true, ele);
else that.Mutil.visibleMarks(false, ele);
});
}
creatWindowHtml(obj: any) {
console.log(obj);
let htmlA =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>名称:</span>${obj.goodsName}</p>` +
`<p><span>编号:</span>${obj.number}</p>` +
`<p><span>介绍:</span>${obj.goodsInfo}</p>` +
`<p><span>物品类型:</span>${obj.category}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>联系电话:</span>${obj.phone}</p>` +
`<p><span>库存数量:</span>${obj.stockNum}</p>` +
`<p><span>类型:</span>${obj.category}</p>` +
`<p><span>仓库编号:</span>${obj.warehouseNum}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在厂区位置:</span>${obj.factoryLocation}</p></div>`;
let htmlB =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>设备名称:</span>${obj.deviceName}</p>` +
`<p><span>设备编号:</span>${obj.deviceNumber}</p>` +
`<p><span>设备短号:</span>${obj.shortNum}</p>` +
`<p><span>设备介绍:</span>${obj.deviceInfo}</p>` +
`<p><span>设备IP:</span>${obj.deviceIp}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在位置:</span>${obj.factoryLocation}</p></div>`;
let html = obj.dataType == 5 || obj.dataType == 6 ? htmlB : htmlA;
return html;
}
getPopcon(id: any) {
let that = this,
aimArr = that.mapData.filter((ele: any) => ele.id == id);
let htmlcon = that.creatWindowHtml(aimArr[0]);
that.Mutil.addPopup(htmlcon, id, aimArr[0].longitude, aimArr[0].latitude);
}
created() {
(this as any).enterpriseId = this.$route.query.enterpriseId;
this.getDetail();
this.addMarksToMap();
}
mounted() {
let that = this;
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
})
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#mapbox {
width: 100%;
position: relative;
}
@media screen and (min-width: 1500px) {
#mapbox {
height: calc(100% - 46px);
}
}
@media screen and (max-width: 1500px) {
#mapbox {
height: calc(100% - 80px);
}
}
.enterDetail {
.el-row {
height: 100%;
}
}
main>div {
padding: 10px;
box-sizing: border-box;
}
.flexBox .flexBox-item:nth-child(2) {
padding-left: 10px;
border-left: 1px solid #eeeeee;
}
</style><style lang="scss" scoped>
.enterDetail {
border: none;
}
.enterDetail .enterDetail-item {
width: 100%;
}
</style>
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item>
<el-input v-model="searchData.unitName" placeholder="请输入企业名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.userName" placeholder="请输入用户名查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.orgCode" placeholder="请输入组织机构代码查询"></el-input>
</el-form-item>
<el-form-item>
<City @changeFun="changeFun" :valueqv="cityval"></City>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="unitName" label="企业名称"></el-table-column>
<el-table-column prop="legalPerson" label="企业法人"></el-table-column>
<el-table-column prop="orgCode" label="组织机构代码"></el-table-column>
<el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
<el-table-column prop="userName" label="管理员名称"></el-table-column>
<el-table-column prop="account" label="管理员账号"></el-table-column>
<el-table-column prop="status" label="账号状态">
<template slot-scope="scope">
<font v-if="scope.row.accountStatus === '0'" class="colorM">
<i class="iconfont iconzhengchang"></i> 正常
</font>
<font v-else-if="scope.row.accountStatus == 2" class="colorP">
<i class="iconfont iconsuoding"></i> 已锁定
</font>
<font v-else-if="scope.row.accountStatus == 1" class="colorR">
<i class="iconfont iconicon_huabanfuben"></i> 已删除
</font>
<font v-else-if="scope.row.accountStatus == 3" class="colorP">
<i class="iconfont iconshenhe"></i> 审核中
</font>
<font v-else-if="scope.row.accountStatus == 4" class="colorR">
<i class="iconfont iconweitongguo"></i> 审核未通过
</font>
</template>
</el-table-column>
<el-table-column label="操作" width="320" align="center">
<template slot-scope="scope">
<el-button type="success" size="small" @click="verrifyFun(scope.row)">
<i class="el-icon-key"></i>审核/查看
</el-button>
<el-button type="warning" size="small" @click="resetPw(scope.row)" v-if="scope.row.accountStatus != 1">
<i class="el-icon-star-off"></i>重置密码
</el-button>
<el-button type="danger" size="small" @click="setLock(scope.row)" v-if="scope.row.accountStatus != 1">
<i class="el-icon-lock"></i>注销
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
<EnterprisesMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editFormA="formData"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></EnterprisesMgEdit>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import EnterprisesMgEdit from "./EnterprisesMgEdit.vue";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
@Component({
components: { EnterprisesMgEdit, City }
})
export default class EnterprisesMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
@Provide() cityval: any = [];
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() formData: any = { dataType: "", enterpriseId: "" };
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = { unitName: "" };
this.getTableData();
this.cityval = [];
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
verrifyFun(row: any) {
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
setLock(row: any) {
let that = this;
that
.$confirm(`确定锁定企业 ${row.unitName} 吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
METHOD.axiosPost(
that,
`/enterpriseInfo/cancelEnterpriseInfoById/${row.enterpriseId}`,
{ remarks: "" },
function(res: any) {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "注销成功!"
});
that.getTableData();
}
}
);
});
}
/*选择城市*/
changeFun(v: any) {
this.searchData.provinceId = v[0];
this.searchData.cityId = v[1];
this.searchData.countyId = v[2];
}
resetPw(row: any) {
let that = this;
(that as any)
.$confirm("确定重置用户 "+ row.userName +" 的密码 为 66668888 吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
METHOD.axiosGet(that, `/user/resetUserPwd/${row.userId}`, function(
res: any
) {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "重置成功!"
});
}
});
});
}
created() {
this.getTableData();
}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
@media screen and (max-width: 1350px) {
main > div .el-table {
height: calc(100% - 180px);
}
}
</style>
\ No newline at end of file
<template>
<div class="wrapper editwrap">
<el-dialog :visible.sync="dialogVisible" title="企业审核" :show-close="false" :close-on-click-modal="false">
<div class="enterDetail">
<h3>*企业注册信息*</h3>
<div class="enterDetail-item">
<span class="itit">单位名称必填:</span>
{{editForm.unitName}}
</div>
<div class="enterDetail-item">
<span class="itit">统一社会信用代码:</span>
{{editForm.orgCode}}
</div>
<div class="enterDetail-item">
<span class="itit">法定代表人:</span>
{{editForm.legalPerson}}
</div>
<div class="enterDetail-item">
<span class="itit">法人邮箱:</span>
{{editForm.legalPersonEmail}}
</div>
<div class="enterDetail-item">
<span class="itit">所属区域:</span>
<City :valueqv="cityval" :disabled="true"></City>
</div>
<div class="enterDetail-item">
<span class="itit">所属街道:</span>
{{editForm.streetName}}
</div>
<div class="enterDetail-item">
<span class="itit">单位注册地址:</span>
{{editForm.regAddress}}
</div>
<div class="enterDetail-item">
<span class="itit">生产经营地址:</span>
{{editForm.runAddress}}
</div>
<div class="enterDetail-item">
<span class="itit">法人手机:</span>
{{editForm.legalPersonPhone}}
</div>
<div class="enterDetail-item">
<span class="itit">营业执照:</span>
<span class="dbtn sd qiCr" v-if="editForm.viewOrgFilePath" @click="checkFile(editForm.viewOrgFilePath)">
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">授权书:</span>
<span class="dbtn sd qiCr" v-if="editForm.viewAuthorizeFile" @click="checkFile(editForm.viewAuthorizeFile)">
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">管理员姓名:</span>
{{editForm.userName}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员身份证:</span>
{{editForm.idCard}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员Email:</span>
{{editForm.email}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员手机:</span>
{{editForm.mobliePhone}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员账号:</span>
{{editForm.account}}
</div>
</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px" v-if="editFormA.accountStatus != 1">
<el-form-item label="企业账号状态" prop="accountStatus">
<el-radio-group v-model="editForm.accountStatus" @change="radioChange">
<el-radio :label="'0'">审核通过</el-radio>
<el-radio :label="'4'">审核不通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model.number="editForm.remarks"></el-input>
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-row>
<el-col :span="16">
<el-input v-model.number="editForm.longitude"></el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="editForm.latitude"></el-input>
</el-form-item>
<el-form-item label="绘制厂区边界">
<el-button type="primary" plain @click="MapdialogBFun">绘制</el-button> <span :class="editForm.boundary ? 'colorM' : 'colorR'">{{editForm.boundary ? '已绘制' : '未绘制'}}</span>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')" v-if="editFormA.accountStatus != 1">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
<Mapdialog v-if="loadmap" :dialogTableVisible="dialogTableVisible" @dialogcancelFun="dialogcancelFun" :slat="editForm.latitude" :slng="editForm.longitude" @confirm="qrFun" />
<DrawBounds v-if="loadmapB" :boundary="editForm.boundary" :dialogTableVisible="dialogTableVisibleB" @dialogcancelFunB="dialogcancelFunB" @drawconfirm="qrDrawFun" />
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide,
Prop,
Watch
} from "vue-property-decorator";
import {
State,
Getter,
Mutation,
Action
} from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import DrawBounds from "@/components/drawbounds.vue";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
@Component({
components: {
Mapdialog,
City,
DrawBounds
}
})
export default class EnterprisesMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editFormA!: {
enterpriseId: String;
};
@Provide() editForm: any = {};
@Provide() qvvalue: any = []; //区域值
@Provide() signsArr: any = []; //图例list
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
accountStatus: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}],
remarks: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}]
};
@Provide() loadmap: Boolean = false;
@Provide() cityval: any = [];
@Provide() loadmapB: Boolean = false;
@Provide() dialogTableVisibleB: Boolean = false;
MapdialogBFun() {
this.loadmapB = true;
this.dialogTableVisibleB = true;
}
dialogcancelFunB() {
this.dialogTableVisibleB = false;
this.loadmapB = false;
}
//确认边界绘制
qrDrawFun(mapview: any) {
this.editForm.boundary = mapview;
}
qrFun(v: any) {
//确认选择经纬度
this.editForm.longitude = v.lng;
this.editForm.latitude = v.lat;
}
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
}
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,
params = that.editForm;
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/enterpriseInfo/updateEnterpriseCheckStatusById/${that.editForm.enterpriseId}`, {
accountStatus: that.editForm.accountStatus,
latitude: that.editForm.latitude,
longitude: that.editForm.longitude,
remarks: that.editForm.remarks,
boundary: that.editForm.boundary
},
function (res: any) {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
getDetail() {
let that = this;
METHOD.axiosGet(
that,
`/enterpriseInfo/queryEnterpriseInfoById/${that.editFormA.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.editForm = res.data;
if (that.editForm.provinceId) {
that.cityval = [
that.editForm.provinceId,
that.editForm.cityId,
that.editForm.countyId
];
}
}
}
);
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
radioChange(v: any) {
if (v == 0) {
this.rules = {
accountStatus: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}],
longitude: [{
required: true,
trigger: "blur,change",
message: "该项为必填项!"
}],
latitude: [{
required: true,
trigger: "blur,change",
message: "该项为必填项!"
}],
}
}
if (v == 4) {
this.rules = {
accountStatus: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}],
remarks: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}]
}
}
}
created() {
this.getDetail();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="wrapper enseDetail gis">
<div class="flexBox">
<div class="flexBox-item">
<div class="enterDetail">
<h3>*企业注册信息*</h3>
<div class="enterDetail-item">
<span class="itit">单位名称必填:</span>
{{ editForm.unitName }}
</div>
<div class="enterDetail-item">
<span class="itit">统一社会信用代码:</span>
{{ editForm.orgCode }}
</div>
<div class="enterDetail-item">
<span class="itit">法定代表人:</span>
{{ editForm.legalPerson }}
</div>
<div class="enterDetail-item">
<span class="itit">法人邮箱:</span>
{{ editForm.legalPersonEmail }}
</div>
<div class="enterDetail-item">
<span class="itit">所属区域:</span>
<City :valueqv="cityval" :disabled="true"></City>
</div>
<div class="enterDetail-item">
<span class="itit">所属街道:</span>
{{ editForm.streetName }}
</div>
<div class="enterDetail-item">
<span class="itit">单位注册地址:</span>
{{ editForm.regAddress }}
</div>
<div class="enterDetail-item">
<span class="itit">生产经营地址:</span>
{{ editForm.runAddress }}
</div>
<div class="enterDetail-item">
<span class="itit">法人手机:</span>
{{ editForm.legalPersonPhone }}
</div>
<div class="enterDetail-item">
<span class="itit">营业执照:</span>
<span
class="dbtn sd qiCr"
v-if="editForm.viewOrgFilePath"
@click="checkFile(editForm.viewOrgFilePath)"
>
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">授权书:</span>
<span
class="dbtn sd qiCr"
v-if="editForm.viewAuthorizeFile"
@click="checkFile(editForm.viewAuthorizeFile)"
>
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">管理员姓名:</span>
{{ editForm.userName }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员身份证:</span>
{{ editForm.idCard }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员Email:</span>
{{ editForm.email }}
</div>
<div class="enterDetail-item">
<span class="itit">管理员手机:</span>
{{ editForm.mobliePhone }}
</div>
<!-- <h3>
<span class="dbtn dg fr" @click="$router.push('/EnseList')">
<i class="el-icon-d-arrow-left"></i> 返回企业列表
</span>
</h3>-->
</div>
<div class="chartsBox">
<dv-charts :option="chartOption"></dv-charts>
</div>
</div>
<div class="flexBox-item">
<el-row>
<el-checkbox
@change="handleCheckAllChange"
:indeterminate="isIndeterminate"
v-model="checkAll"
>全选</el-checkbox
>
<el-checkbox-group v-model="checkList" @change="CheckChange">
<el-checkbox label="1">
企业辅料
<img src="@/assets/mark/mark05.png" width="25" />
</el-checkbox>
<el-checkbox label="2">
生产设备
<img src="@/assets/mark/mark03.png" width="25" />
</el-checkbox>
<el-checkbox label="3">
企业产品
<img src="@/assets/mark/mark01.png" width="25" />
</el-checkbox>
<el-checkbox label="4">
应急物资
<img src="@/assets/mark/mark02.png" width="25" />
</el-checkbox>
<el-checkbox label="5">
监控设备
<img src="@/assets/mark/markjk.png" width="25" />
</el-checkbox>
<el-checkbox label="6">
传感设备
<img src="@/assets/mark/markcgq.png" width="25" />
</el-checkbox>
</el-checkbox-group>
</el-row>
<div id="mapbox">
<Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
<DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import { Select } from "element-ui";
@Component({
components: {
City,
DrawTool,
Search,
},
})
export default class EnseListDetail extends Vue {
@Provide() enterpriseId: string = "";
@Provide() cityval: any = [];
@Provide() editForm: any = {};
@Provide() checkList: any = ["1", "2", "3", "4", "5", "6"];
@Provide() checkListOpt: any = ["1", "2", "3", "4", "5", "6"];
@Provide() isIndeterminate: boolean = false;
@Provide() checkAll: boolean = true;
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() MAP: any;
@Provide() toolobj: any;
@Provide() toolVisble: boolean = false;
@Provide() chartOption: any = {};
/* 获取各类型设备数量 */
getStatiData() {
let that = this;
that.$nextTick(() => {
that.chartOption = {
title: {
text: "设备数量柱状图",
},
xAxis: {
name: "",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
name: "数量",
data: "value",
},
series: [
{
data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
type: "bar",
label: {
show: true,
position: "top",
offset: [0, -10],
style: {
fill: "#000",
fontSize: 12
},
},
},
],
};
});
return;
METHOD.axiosGet(
that,
`/dataStatistics/enterpriseDataStatistics/${METHOD.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
}
}
);
}
/*获取物品*/
getMapDataA() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`,
{
page: 1,
size: 10000,
},
(res: any) => {
if (res.code == 0) {
resolve(res.data.pageData);
}
}
);
});
}
/*获取安全设备*/
getMapDataB() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`,
{
page: 1,
size: 10000,
},
(res: any) => {
if (res.code == 0) {
let mapData = res.data.pageData;
resolve(res.data.pageData);
}
}
);
});
}
/*获取企业详情*/
getDetail() {
let that = this;
METHOD.axiosGet(
that,
`/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.editForm = res.data;
if (that.editForm.provinceId) {
that.cityval = [
that.editForm.provinceId,
that.editForm.cityId,
that.editForm.countyId,
];
}
that.$nextTick(() => {
if (that.editForm.boundary) {
that.Mutil.drawPloygon(JSON.parse(that.editForm.boundary));
}
});
}
}
);
}
addMarksToMap() {
let that = this;
Promise.all([that.getMapDataA(), that.getMapDataB()]).then((iter) => {
let res1: any = iter[0];
let res2: any = iter[1];
let mapData = [...res1, ...res2];
that.mapData = [...res1, ...res2];
if (mapData.length > 0) {
let latSum = 0;
let lngSum = 0;
mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let mapcenter = [lngSum / mapData.length, latSum / mapData.length];
that.Mutil.setViewF({
center: mapcenter,
});
} else {
that.$message.warning("没有设备及物品信息!");
}
});
}
addMark(obj: any, index: any) {
let icon,
that = this;
switch (obj.dataType) {
case "3":
icon = require("@/assets/mark/mark01.png");
break;
case "4":
icon = require("@/assets/mark/mark02.png");
break;
case "2":
icon = require("@/assets/mark/mark03.png");
break;
case "1":
icon = require("@/assets/mark/mark05.png");
break;
case "5":
icon = require("@/assets/mark/markjk.png");
break;
case "6":
icon = require("@/assets/mark/markcgq.png");
break;
}
that.Mutil.addMarkerToMap(
obj.dataType,
obj.goodsName,
icon,
[obj.longitude, obj.latitude],
0.5,
obj.id
);
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
/*radio group*/
CheckChange(val: any) {
let that = this;
that.checkListOpt.forEach((ele: any) => {
if (val.indexOf(ele) == -1) that.Mutil.visibleMarks(false, ele);
else that.Mutil.visibleMarks(true, ele);
});
let len = that.checkListOpt.length;
that.checkAll = val.length == len;
that.isIndeterminate = val.length > 0 && val.length < len;
}
handleCheckAllChange(val: any) {
let that = this;
that.checkList = val ? [...that.checkListOpt] : [];
that.isIndeterminate = false;
that.checkListOpt.forEach((ele: any) => {
if (val) that.Mutil.visibleMarks(true, ele);
else that.Mutil.visibleMarks(false, ele);
});
}
creatWindowHtml(obj: any) {
let htmlA =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>名称:</span>${obj.goodsName}</p>` +
`<p><span>编号:</span>${obj.number}</p>` +
`<p><span>介绍:</span>${obj.goodsInfo}</p>` +
`<p><span>物品类型:</span>${obj.category}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>联系电话:</span>${obj.phone}</p>` +
`<p><span>库存数量:</span>${obj.stockNum}</p>` +
`<p><span>类型:</span>${obj.category}</p>` +
`<p><span>仓库编号:</span>${obj.warehouseNum}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在厂区位置:</span>${obj.factoryLocation}</p></div>`;
let htmlB =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>设备名称:</span>${obj.deviceName}</p>` +
`<p><span>设备编号:</span>${obj.deviceNumber}</p>` +
`<p><span>设备短号:</span>${obj.shortNum}</p>` +
`<p><span>设备介绍:</span>${obj.deviceInfo}</p>` +
`<p><span>设备IP:</span>${obj.deviceIp}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在位置:</span>${obj.factoryLocation}</p></div>`;
let html = obj.dataType == 5 || obj.dataType == 6 ? htmlB : htmlA;
return html;
}
getPopcon(id: any) {
let that = this,
aimArr = that.mapData.filter((ele: any) => ele.id == id);
let htmlcon = that.creatWindowHtml(aimArr[0]);
that.Mutil.addPopup(htmlcon, id, aimArr[0].longitude, aimArr[0].latitude);
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.getDetail();
this.addMarksToMap();
this.getStatiData();
}
mounted() {
let that = this;
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
let id = evt.selected[0].get("did");
if (id) that.getPopcon(id);
});
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#mapbox {
width: 100%;
position: relative;
}
@media screen and (min-width: 1500px) {
#mapbox {
height: calc(100% - 46px);
}
}
@media screen and (max-width: 1500px) {
#mapbox {
height: calc(100% - 80px);
}
}
.enterDetail {
.el-row {
height: 100%;
}
}
main > div {
padding: 10px;
box-sizing: border-box;
}
.flexBox .flexBox-item:nth-child(2) {
padding-left: 10px;
border-left: 1px solid #eeeeee;
}
.gis {
.el-tabs--border-card > .el-tabs__content {
padding: 5px;
}
.el-tabs__item {
padding: 0 10px;
}
}
</style>
<style lang="scss" scoped>
.enterDetail {
border: none;
height: 500px;
overflow-y: auto;
}
.enterDetail .enterDetail-item {
width: 100%;
}
.chartsBox {
height: calc(100% - 500px);
}
</style>
<template>
<div class="wrapper enseDetail gis">
<div class="flexBox">
<div class="flexBox-item">
<div class="enterDetail">
<h3>*企业注册信息-高德*</h3>
<div class="enterDetail-item">
<span class="itit">单位名称必填:</span>
{{editForm.unitName}}
</div>
<div class="enterDetail-item">
<span class="itit">统一社会信用代码:</span>
{{editForm.orgCode}}
</div>
<div class="enterDetail-item">
<span class="itit">法定代表人:</span>
{{editForm.legalPerson}}
</div>
<div class="enterDetail-item">
<span class="itit">法人邮箱:</span>
{{editForm.legalPersonEmail}}
</div>
<div class="enterDetail-item">
<span class="itit">所属区域:</span>
<City :valueqv="cityval" :disabled="true"></City>
</div>
<div class="enterDetail-item">
<span class="itit">所属街道:</span>
{{editForm.streetName}}
</div>
<div class="enterDetail-item">
<span class="itit">单位注册地址:</span>
{{editForm.regAddress}}
</div>
<div class="enterDetail-item">
<span class="itit">生产经营地址:</span>
{{editForm.runAddress}}
</div>
<div class="enterDetail-item">
<span class="itit">法人手机:</span>
{{editForm.legalPersonPhone}}
</div>
<div class="enterDetail-item">
<span class="itit">营业执照:</span>
<span
class="dbtn sd qiCr"
v-if="editForm.viewOrgFilePath"
@click="checkFile(editForm.viewOrgFilePath)"
>
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">授权书:</span>
<span
class="dbtn sd qiCr"
v-if="editForm.viewAuthorizeFile"
@click="checkFile(editForm.viewAuthorizeFile)"
>
<i class="el-icon el-icon-view"></i>查看
</span>
</div>
<div class="enterDetail-item">
<span class="itit">管理员姓名:</span>
{{editForm.userName}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员身份证:</span>
{{editForm.idCard}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员Email:</span>
{{editForm.email}}
</div>
<div class="enterDetail-item">
<span class="itit">管理员手机:</span>
{{editForm.mobliePhone}}
</div>
<!-- <h3>
<span class="dbtn dg fr" @click="$router.push('/EnseList')">
<i class="el-icon-d-arrow-left"></i> 返回企业列表
</span>
</h3>-->
</div>
</div>
<div class="flexBox-item">
<el-row>
<el-checkbox
@change="handleCheckAllChange"
:indeterminate="isIndeterminate"
v-model="checkAll"
>全选</el-checkbox>
<el-checkbox-group v-model="checkList" @change="CheckChange">
<el-checkbox label="1">
企业辅料
<img src="@/assets/mark/mark05.png" width="20" />
</el-checkbox>
<el-checkbox label="2">
生产设备
<img src="@/assets/mark/mark03.png" width="20" />
</el-checkbox>
<el-checkbox label="3">
企业产品
<img src="@/assets/mark/mark01.png" width="20" />
</el-checkbox>
<el-checkbox label="4">
应急物资
<img src="@/assets/mark/mark02.png" width="20" />
</el-checkbox>
<el-checkbox label="5">
监控设备
<img src="@/assets/mark/markjk.png" width="25" />
</el-checkbox>
<el-checkbox label="6">
传感设备
<img src="@/assets/mark/markcgq.png" width="25" />
</el-checkbox>
</el-checkbox-group>
</el-row>
<div id="mapbox">
<MouseTool v-if="toolVisble" :MAP="MAP" :toolobj="toolobj" :mouseTool="mouseTool"></MouseTool>
<el-amap
ref="map"
vid="amap"
:plugin="mapOption.plugin"
:center="mapOption.center"
:events="mapOption.events"
:zoom="mapOption.zoom"
:amap-manager="amapManager"
>
<template v-if="markers.length > 0">
<el-amap-marker
v-for="(marker, index) in markers"
:key="index"
:content="marker.content"
:position="marker.position"
:events="marker.events"
:label="marker.label"
:visible="marker.visible"
:offset="marker.offset"
></el-amap-marker>
</template>
<el-amap-info-window
v-if="currentWindow"
:position="currentWindow.position"
:content="currentWindow.content"
:visible="currentWindow.visible"
:events="currentWindow.events"
:close-when-click-map="true"
></el-amap-info-window>
</el-amap>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
import MouseTool from "@/components/mouseTool.vue";
import "@/utils/VamapLoad.ts";
import VueAMap, { AMapManager } from "vue-amap";
@Component({
components: { City, MouseTool },
})
export default class EnseListDetail extends Vue {
@Provide() enterpriseId: string = "";
@Provide() cityval: any = [];
@Provide() editForm: any = {};
@Provide() checkList: any = ["1", "2", "3", "4", "5", "6"];
@Provide() checkListOpt: any = ["1", "2", "3", "4", "5", "6"];
@Provide() isIndeterminate: boolean = false;
@Provide() checkAll: boolean = true;
/* 地图 */
@Provide() mapOption: any = {
plugin: [
{
pName: "MapType",
defaultType: 1,
},
{
pName: "ToolBar",
},
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() markers: any = [];
@Provide() deviceDataArr: any = [];
@Provide() goodsDataArr: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() currentWindow: any = "";
@Provide() amapManager: any = new VueAMap.AMapManager();
@Provide() MAP: any;
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
/*获取物品*/
getMapDataA() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`,
{ page: 1, size: 10000 },
(res: any) => {
if (res.code == 0) {
resolve(res.data.pageData);
}
}
);
});
}
/*获取安全设备*/
getMapDataB() {
let that = this;
return new Promise((resolve, reject) => {
METHOD.axiosPost(
that,
`/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`,
{ page: 1, size: 10000 },
(res: any) => {
if (res.code == 0) {
let mapData = res.data.pageData;
resolve(res.data.pageData);
}
}
);
});
}
addMarksToMap() {
let that = this;
Promise.all([that.getMapDataA(), that.getMapDataB()]).then(
([res1, res2]) => {
let mapData = [...res1, ...res2];
if (mapData.length > 0) {
let latSum = 0;
let lngSum = 0;
mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
that.mapOption.center = [
lngSum / mapData.length,
latSum / mapData.length,
];
} else {
that.$message.warning("没有设备及物品信息!");
}
}
);
}
addMark(obj: any, index: any) {
let icon,
that = this;
switch (obj.dataType) {
case "3":
icon = require("@/assets/mark/mark01.png");
break;
case "4":
icon = require("@/assets/mark/mark02.png");
break;
case "2":
icon = require("@/assets/mark/mark03.png");
break;
case "1":
icon = require("@/assets/mark/mark05.png");
break;
case "5":
icon = require("@/assets/mark/markjk.png");
break;
case "6":
icon = require("@/assets/mark/markcgq.png");
break;
}
let markoption = {
vid: obj.dataType,
position: [obj.longitude, obj.latitude],
content: ` <img src="${icon}" width="25">`,
label: { content: obj.goodsName || obj.deviceName, offset: [28, -7] },
offset: [-13, -37],
events: {
click: () => {
that.windowsArr.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.markers.push(markoption);
let htmlA =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>名称:</span>${obj.goodsName}</p>` +
`<p><span>编号:</span>${obj.number}</p>` +
`<p><span>介绍:</span>${obj.goodsInfo}</p>` +
`<p><span>物品类型:</span>${obj.category}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>联系电话:</span>${obj.phone}</p>` +
`<p><span>库存数量:</span>${obj.stockNum}</p>` +
`<p><span>类型:</span>${obj.category}</p>` +
`<p><span>仓库编号:</span>${obj.warehouseNum}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在厂区位置:</span>${obj.factoryLocation}</p></div>`;
let htmlB =
`<div class="windowDg"><h3>详细信息</h3>` +
`<p><span>设备名称:</span>${obj.deviceName}</p>` +
`<p><span>设备编号:</span>${obj.deviceNumber}</p>` +
`<p><span>设备短号:</span>${obj.shortNum}</p>` +
`<p><span>设备介绍:</span>${obj.deviceInfo}</p>` +
`<p><span>设备IP:</span>${obj.deviceIp}</p>` +
`<p><span>是否是重大危险源:</span>${
obj.isBigDanger == 1 ? "是" : "否"
}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
`<p><span>所在位置:</span>${obj.factoryLocation}</p></div>`;
let html = obj.dataType == 5 || obj.dataType == 6 ? htmlB : htmlA;
let window = {
position: [obj.longitude, obj.latitude],
content: html,
visible: false,
};
that.windowsArr.push(window);
}
getDetail() {
let that = this;
METHOD.axiosGet(
that,
`/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.editForm = res.data;
if (that.editForm.provinceId) {
that.cityval = [
that.editForm.provinceId,
that.editForm.cityId,
that.editForm.countyId,
];
}
that.$nextTick(() => {
that.mapOption.center = [
that.editForm.longitude,
that.editForm.latitude,
];
});
}
}
);
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
/*radio group*/
CheckChange(val: any) {
let that = this;
that.markers.forEach((ele: any, inde: any) => {
if (val.indexOf(ele.vid) > -1) {
ele.visible = true;
} else {
ele.visible = false;
}
});
let len = that.checkListOpt.length;
that.checkAll = val.length == len;
that.isIndeterminate = val.length > 0 && val.length < len;
}
handleCheckAllChange(val: any) {
let that = this;
that.checkList = val ? [...that.checkListOpt] : [];
that.isIndeterminate = false;
that.markers.forEach((ele: any, inde: any) => {
if (val) {
ele.visible = true;
} else {
ele.visible = false;
}
});
}
initMap() {
let that = this;
that.mapOption.events = {
init(map: any) {
that.MAP = map;
let iconFlag = require("@/assets/flag.png");
that.mouseTool = new AMap.MouseTool(map);
let mouseTool = that.mouseTool;
that.toolobj = {
drawMarker: function () {
//标记
mouseTool.marker({
id: "flag",
icon: new AMap.Icon({
size: [128, 128],
image: iconFlag,
imageSize: [60, 60],
}),
zIndex: 9999,
});
},
drawPolyline() {
//线段
mouseTool.polyline({
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeStyle: "solid",
});
},
drawCircle() {
//圆形
mouseTool.circle({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 4,
fillColor: "#1791fc",
fillOpacity: 0.4,
strokeStyle: "solid",
});
},
drawPolygon() {
//多边形
mouseTool.polygon({
strokeColor: "#0dec66",
strokeOpacity: 1,
strokeWeight: 4,
strokeOpacity: 1,
fillColor: "#ee6a38",
fillOpacity: 0.3,
strokeStyle: "solid",
});
},
drawRule() {
//测距
let qiicon = require("@/assets/qi.png"),
jingicon = require("@/assets/jing.png"),
zhongicon = require("@/assets/zhong.png");
mouseTool.rule({
startMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(50, 50),
image: qiicon,
}),
offset: new AMap.Pixel(-25, -50),
},
endMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(40, 40),
image: zhongicon,
}),
offset: new AMap.Pixel(-20, -40),
},
midMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(40, 40),
image: jingicon,
}),
offset: new AMap.Pixel(-20, -40),
},
lineOptions: {
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 3,
},
});
},
drawMeasureArea() {
//面积
mouseTool.measureArea({
strokeColor: "#80d8ff",
fillColor: "#80d8ff",
fillOpacity: 0.5,
});
},
};
that.toolVisble = true;
},
};
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.initMap();
this.getDetail();
this.addMarksToMap();
}
mounted() {}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#mapbox {
width: 100%;
position: relative;
}
@media screen and (min-width: 1500px) {
#mapbox {
height: calc(100% - 46px);
}
}
@media screen and (max-width: 1500px) {
#mapbox {
height: calc(100% - 80px);
}
}
.enterDetail {
.el-row {
height: 100%;
}
}
main > div {
padding: 10px;
box-sizing: border-box;
}
.flexBox .flexBox-item:nth-child(2) {
padding-left: 10px;
border-left: 1px solid #eeeeee;
}
.gis {
.el-tabs--border-card > .el-tabs__content {
padding: 5px;
}
.el-tabs__item {
padding: 0 10px;
}
}
</style>
<style lang="scss" scoped>
.enterDetail {
border: none;
}
.enterDetail .enterDetail-item {
width: 100%;
}
</style>
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label="类型">
<el-select v-model="searchData.dataType" placeholder="请选择..." @change="selectChange">
<el-option label="企业辅料" value="1"></el-option>
<el-option label="生产设备" value="2"></el-option>
<el-option label="企业产品" value="3"></el-option>
<el-option label="应急物资" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="searchData.goodsName" placeholder="请输入..."></el-input>
</el-form-item>
<el-form-item label="危险等级">
<el-select v-model="searchData.dangerGrade" placeholder="请选择...">
<el-option label="一级" value="g1"></el-option>
<el-option label="二级" value="g2"></el-option>
<el-option label="三级" value="g3"></el-option>
<el-option label="四级" value="g4"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="goodsName" label="名称"></el-table-column>
<el-table-column label="类型">
<template slot-scope="scope">
<font v-if="scope.row.dataType == 1">企业辅料</font>
<font v-if="scope.row.dataType == 2">生产设备</font>
<font v-if="scope.row.dataType == 3">企业产品</font>
<font v-if="scope.row.dataType == 4">应急物资</font>
</template>
</el-table-column>
<el-table-column prop="number" label="编号"></el-table-column>
<el-table-column prop="goodsName" label="所在厂区位置"></el-table-column>
<el-table-column prop="stockNum" label="库存数量"></el-table-column>
<el-table-column prop="dangerGrade" label="危险等级">
<template slot-scope="scope">
<font v-if="scope.row.dangerGrade == 'g1'">一级</font>
<font v-if="scope.row.dangerGrade == 'g2'">二级</font>
<font v-if="scope.row.dangerGrade == 'g3'">三级</font>
<font v-if="scope.row.dangerGrade == 'g4'">四级</font>
<font v-if="scope.row.isBigDanger == 1" class="jinColor">重大危险源</font>
</template>
</el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small">编辑</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="total,sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE.page" :page-size="PAGE.size"></el-pagination>
<HazardsListMgEdit :dialogVisible="dialogVisible" :editForm="formData" :title="dialogTit" @dialogFun="closeDialog" @refreshTableData="getTableData" :levelArr="levelArr" :key="zjKey"></HazardsListMgEdit>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import HazardsListMgEdit from "./HazardsListMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
components: {
HazardsListMgEdit
}
})
export default class EnseList extends Vue {
@Provide() tableData: Object = {
pageData: [],
total: 0
};
@Provide() PAGE: any = {
page: 1,
size: 10
};
@Provide() searchData: any = {
dangerGrade: "",
goodsName: "",
dataType: ""
};
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: any = {
dataType: '',
enterpriseId: ''
};
@Provide() zjKey: any = 0;
@Provide() enterpriseId: string = "";
@Provide() levelArr: any = [];
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`,
param,
function (res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = {
page: 1,
size: 10
};
this.getTableData();
}
resetFun() {
this.PAGE = {
page: 1,
size: 10
};
this.searchData = {
dangerGrade: "",
goodsName: "",
dataType: ""
};
this.getTableData();
}
addFun() {
this.zjKey++;
this.dialogVisible = true;
this.formData.dataType = this.searchData.dataType;
this.formData.enterpriseId = this.enterpriseId;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
this,
`/enterpriseGoods/deleteEnterpriseGoodsById/${row.id}`,
function () {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
getDagerLevel() {
let that = this;
METHOD.axiosGet(
that,
`/systemConfig/getSystemCodeByParentId/6ac39587109749d1a23338bd72654087
`,
function (res: any) {
if (res.code == 0) {
that.levelArr = res.data;
}
})
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.getTableData();
this.getDagerLevel();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="dataType">
<el-select v-model="editForm.dataType" placeholder="请选择">
<el-option label="企业辅料" value="1"></el-option>
<el-option label="生产设备" value="2"></el-option>
<el-option label="企业产品" value="3"></el-option>
<el-option label="应急物资" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="goodsName">
<el-input v-model="editForm.goodsName"></el-input>
</el-form-item>
<el-form-item label="编号" prop="number">
<el-input v-model="editForm.number"></el-input>
</el-form-item>
<el-form-item label="介绍" prop="goodsInfo">
<el-input type="textarea" v-model="editForm.goodsInfo"></el-input>
</el-form-item>
<el-form-item label="物品类型" prop="category">
<el-input v-model="editForm.category"></el-input>
</el-form-item>
<el-form-item label="否是重大危险源" prop="isBigDanger">
<el-radio-group v-model="editForm.isBigDanger">
<el-radio :label="'0'"></el-radio>
<el-radio :label="'1'"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="联系人" prop="contacts">
<el-input v-model="editForm.contacts"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
<el-form-item label="库存数量" prop="stockNum">
<el-input type="number" v-model.number="editForm.stockNum"></el-input>
</el-form-item>
<el-form-item label="危险等级" prop="dangerGrade" v-if="editForm.isBigDanger == 0">
<el-select v-model="editForm.dangerGrade" placeholder="请选择">
<el-option
v-for="item in levelArr"
:key="item.code"
:label="item.name"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所在厂区位置" prop="factoryLocation">
<el-input v-model="editForm.factoryLocation"></el-input>
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-row>
<el-col :span="16">
<el-input v-model="editForm.longitude"></el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="editForm.latitude"></el-input>
</el-form-item>
<el-form-item label="仓库编号" prop="warehouseNum">
<el-input v-model="editForm.warehouseNum"></el-input>
</el-form-item>
<el-form-item label="入库时间" prop="addTime">
<el-date-picker
v-model="editForm.addTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
<el-form-item label="出库时间" prop="outTime">
<el-date-picker
v-model="editForm.outTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
:slat="editForm.latitude"
:slng="editForm.longitude"
@confirm="qrFun"
/>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";
@Component({
components: { Mapdialog },
})
export default class EnseListEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop({
type: Array,
default() {
return [];
},
})
public levelArr: any;
@Prop(Object) editForm!: {
goodsName: String;
longitude: Number;
latitude: Number;
dataType: String;
enterpriseId: String;
};
@Prop(String) title!: String;
@Provide() qvvalue: any = []; //区域值
@Provide() signsArr: any = []; //图例list
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
goodsName: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
dataType: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
isBigDanger: [
{ required: true, trigger: "blur", message: "该项为必填项!" },
],
dangerGrade: [
{ required: true, trigger: "blur", message: "该项为必填项!" },
],
factoryLocation: [
{ required: true, trigger: "blur", message: "该项为必填项!" },
],
longitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
latitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
@Provide() loadmap: Boolean = false;
qrFun(v: any) {
//确认选择经纬度
this.editForm.longitude = v.lng;
this.editForm.latitude = v.lat;
}
MapdialogFun() {
this.loadmap = false;
this.$nextTick(() => {
this.loadmap = true;
});
this.dialogTableVisible = true;
}
dialogcancelFun() {
this.dialogTableVisible = false;
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,
params = that.editForm;
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/enterpriseGoods/addOrEditEnterpriseGoods`,
params,
function (res: any) {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success",
});
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
created() {}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="home">
<div class="txt">
<h1>欢迎访问危化品企业监管平台!</h1>
<p>
<em>Wellcom to The Hazardous Chemicals Supervision System.</em>
</p>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "@/utils/public.scss";
.home {
width: 100%;
height: 100%;
background: url("../assets/diqiu.png") no-repeat center,
linear-gradient(-45deg, #86dcf1, #456a9f);
.txt {
position: relative;
top: 30vh;
text-align: center;
color: honeydew;
}
h1 {
font-size: 2.4rem;
padding: 10px;
margin: 0;
font-family: "黑体", Arial, Helvetica, sans-serif;
}
p {
font-size: 20px;
margin: 10px 0;
}
}
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
export default class Home extends Vue {
@Getter("moudleArr") getModuleArr: any;
created() {
console.log(this.getModuleArr);
console.log('asd')
}
}
</script>
<template>
<div class="wrapper" id="content">
<el-container>
<!-- 左侧菜单 -->
<el-aside :class="[{'zk' : !iszk},{'notzk' : iszk}]">
<slot name="left"></slot>
</el-aside>
<el-container>
<!-- 面包屑 -->
<el-header height="40px">
<el-breadcrumb separator="/">
<span class="fl flex" @click="toggleNavWi()">
<i class="el-icon-menu"></i>
</span>
<el-breadcrumb-item>
<i class="fa fa-bars"></i> 危化品企业监管平台
</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in breadcrumnItems" :key="index">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</el-header>
<!-- 主要内容 -->
<el-main>
<slot name="maincon"></slot>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
@Component({
components: {},
})
export default class Content extends Vue {
@Provide() breadcrumnItems: any = [];
@Provide() iszk: boolean = true;
@Watch("$route") handleRouteChange(router: any): any {
this.inintBreadcrum(router);
} //监听当前路由变化的时候返回数据
inintBreadcrum(router: any) {
let arr = [];
if (router.matched) {
let thatAlink = router.matched[1];
if (thatAlink.meta.title == undefined) {
arr.push({
name: thatAlink.parent.meta.title,
path: thatAlink.parent.path,
});
} else {
arr.push({
name: thatAlink.parent.meta.title,
path: thatAlink.parent.path,
});
arr.push({ name: thatAlink.meta.title, path: thatAlink.path });
}
}
this.breadcrumnItems = arr;
}
toggleNavWi() {
this.iszk = !this.iszk;
}
created() {
this.inintBreadcrum(this.$route);
}
}
</script>
<style lang="scss" scoped>
#content,
.maincon {
width: 100%;
height: 100%;
overflow: hidden;
}
.el-aside {
background: #414d58;
}
.el-header {
background: #ffffff;
line-height: 40px;
}
.el-header > div {
height: 100%;
line-height: 40px;
}
.el-main {
background: #f3f3f3;
width: 100%;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
.el-container {
height: 100%;
}
.el-menu {
border: none;
}
.zk {
width: 200px !important;
}
.notzk {
width: 0px !important;
}
</style>
<style lang="scss">
span.flex {
cursor: pointer;
padding-right: 5px;
.el-icon-menu {
color: #0aa288;
font-size: 20px;
}
}
</style>
<template>
<div class="wrapper" id="Header">
<div class="logo fl">
<img src="@/assets/logo2.png" alt />
&nbsp;
危化品企业监管平台-
<span class="tileTip">{{Tiletxt}}</span>
</div>
<div class="haeder_r fr">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link un">
<span>{{unitName}}&nbsp;&nbsp;{{userData.account}}</span>
<img :src="require('@/assets/avatar4.png')" alt width="40" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="personal">个人中心</el-dropdown-item>
<el-dropdown-item command="logoff" divided>注销登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {},
})
export default class Header extends Vue {
@Provide() userData: any = {};
@Provide() Tiletxt: string = "";
@Provide() enterpriseId: string = "";
@Provide() unitName: string = "";
handleCommand(command: String) {
switch (command) {
case "personal":
this.$router.push("/personal");
break;
case "logoff":
sessionStorage.removeItem("userInfo");
sessionStorage.removeItem("token");
this.$router.push("/");
}
}
getDetail() {
let that = this;
METHOD.axiosGet(
that,
`/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.unitName = res.data.unitName;
}
}
);
}
created() {
let usd = sessionStorage.getItem("userInfo");
if (usd) {
this.userData = JSON.parse(usd);
if (this.userData.accountType == 2) {
METHOD.enterpriseId = JSON.parse(usd).deptId;
this.enterpriseId = JSON.parse(usd).deptId;
this.Tiletxt = "企业端";
this.getDetail();
} else {
METHOD.enterpriseId = "";
this.Tiletxt = "政府端";
}
}
}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
#Header {
width: 100%;
height: 50px;
overflow: hidden;
background-color: $theme-color;
padding: 0 10px;
color: #e9f2ff;
> div {
height: 100%;
overflow: hidden;
}
.logo {
font-size: 1.5rem;
font-family: "黑体", Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: 700;
display: flex;
align-items: center;
img {
height: 40px;
vertical-align: middle;
}
}
.haeder_r {
font-size: 1.2em;
color: #ffffff;
i {
font-size: 1.5em;
}
padding-right: 20px;
}
.el-dropdown {
color: #ffffff;
padding-top: 5px;
}
.un img {
vertical-align: middle;
}
}
.tileTip {
display: inline-block;
background: #c50ae7;
border-radius: 5px;
padding: 4px 5px;
}
</style>
<template>
<div class="wrapper" id="layout">
<!-- 头部 -->
<Header />
<Content>
<Navbar slot="left"/>
<router-view slot="maincon"></router-view>
</Content>
</div>
</template>
<style lang="scss" scoped>
#layout {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import Header from './Header.vue'
import Navbar from './Navbar.vue'
import Content from './Content.vue'
@Component({
components: {
Header,Navbar,Content
},
})
export default class Layout extends Vue {}
</script>
\ No newline at end of file
<template>
<div class="wrapper" id="navbar">
<el-scrollbar class="el-scrollbar">
<el-menu :default-active="$router.currentRoute.path" class="el-menu-vertical-demo" router>
<!-- router属性 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
<template v-for="(item,bindex) in currentRouterArr">
<div :key="bindex">
<el-menu-item :index="item.redirect" :data-id="item.path" v-if="item.meta.selected == 'true' && item.children.length == 1">
<span slot="title">
<i :class="item.meta.icon"></i>
{{item.meta.title}}
</span>
</el-menu-item>
<!-- 多个子导航 -->
<el-submenu :index="item.path" v-if="item.children && item.children.length > 1" >
<span slot="title">
<i :class="item.meta.icon"></i>
{{item.meta.title}}
</span>
<el-menu-item-group>
<el-menu-item
:index="sitem.path"
v-for="(sitem,sindex) in item.children"
:key="sindex"
>
<i :class="sitem.meta.icon"></i>
{{sitem.meta.title}}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</div>
</template>
</el-menu>
</el-scrollbar>
</div>
</template>
<script lang="ts">
import { State, Getter, Mutation, Action } from "vuex-class";
import { Component, Vue, Provide , Watch} from "vue-property-decorator";
import Layout from "@/views/Layout/index.vue";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class Navbar extends Vue {
@Getter("moudleArr") getModuleArr: any;
@Provide() currentRouterArr:any = [];
@Watch("$route") handleRouteChange(router:any): any {
this.renderNavBar()
}
renderNavBar(){
let that = this;
that.currentRouterArr = that.getModuleArr;
}
created() {
let that = this;
that.renderNavBar();
}
}
</script>
<style lang="scss" scoped>
#navbar {
$bgColor:#5f5f61;
$txtColor:#c9c9c9;
width: 200px;
height: 100%;
overflow: hidden;
.el-menu-item {
&:hover {
background: #9fd0ff;
color: $bgColor;
i {
color: $bgColor;
}
}
background: #414d58;
color: $txtColor;
i {
color: $txtColor;
}
}
.el-menu-item.is-active {
background: #9fd0ff;
color: $bgColor;
i {
color: $bgColor;
}
}
.el-submenu {
background: #414d58;
.el-submenu__title {
&:hover {
background: #9fd0ff;
color: $bgColor;
i {
color: $bgColor;
}
}
color: $txtColor;
i {
color: $txtColor;
}
}
.el-menu-item-group__title {
display: none;
}
.el-menu-item.is-active {
background: #1f272e;
color: $txtColor;
}
}
}
</style>
<style lang="scss">
.el-submenu__title{
color: #c9c9c9 !important;
}
.el-menu-item-group__title{
display:none
}
</style>
\ No newline at end of file
<template>
<div class="personal">
<el-row>
<el-col class="topBar">
<div class="formBoxK">
<div class="tit">
<i class="el-icon el-icon-edit"></i>
修改密码
</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="7em">
<el-form-item label="登录账号" prop="account">
<el-input disabled v-model="editForm.account"></el-input>
</el-form-item>
<el-form-item label="原始密码" prop="baccountPwd">
<el-input type="password" v-model="editForm.baccountPwd"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="accountPwd">
<el-input type="password" v-model="editForm.accountPwd"></el-input>
</el-form-item>
<el-form-item label="新密码确认" prop="qrmm">
<el-input type="password" v-model="editForm.qrmm"></el-input>
</el-form-item>
<div class="cent">
<el-button type="success" @click="confirmFun()">确定修改</el-button>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<style lang="scss" scoped>
.formBoxK {
max-width: 700px;
margin: 0 auto;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class Personal extends Vue {
@Provide() editForm: any = {
baccountPwd: "",
accountPwd: "",
qrmm: ""
};
@Provide() rules: any = {
baccountPwd: [
{ required: true, message: "此项为必填项!", trigger: "change" }
],
accountPwd: [
{ required: true, validator: this.validatePassA, trigger: "change" }
],
qrmm: [{ required: true, validator: this.validatePassB, trigger: "change" }]
};
@Provide() uid: string = "";
validatePassA(rule: any, value: any, callback: any) {
if (value == "") {
callback(new Error("请输入原始密码"));
} else if (value == this.editForm.baccountPwd) {
callback(new Error("新密码与原密码不能一致"));
} else {
callback();
}
}
validatePassB(rule: any, value: any, callback: any) {
if (value == "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.editForm.accountPwd) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
}
confirmFun() {
let that = this;
(that as any).$refs["editForm"].validate((valid: Boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/user/modifyPassword/${that.uid}`,
{
oldPassword: that.editForm.baccountPwd,
newPassword: that.editForm.accountPwd
},
function(res: any) {
if (res.code == 0) {
that.$message.success('修改密码成功,即将跳转到登录页!')
that.$router.push('/')
}
}
);
}
});
}
created() {
let usd = sessionStorage.getItem("userInfo");
if (usd) {
this.editForm.account = JSON.parse(usd).account;
this.uid = JSON.parse(usd).uid;
}
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
\ No newline at end of file
<template>
<div id="login">
<div class="loginWrap">
<div class="form">
<el-row>
<el-col :span="24" class="form-tit cent">
<img src="@/assets/logo1.png" alt width="100px" />
<h1>危化品企业监管平台</h1>
<p>
<em>The Hazardous Chemicals Supervision System</em>
<br />
</p>
</el-col>
<div class="contianer">
<el-form class="form-con" :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input placeholder="请输入用户名" name="username" id="username" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="请输入密码" type="password" name="password" id="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button class="loginbtn" @click="handleSubmit()" :loading="isLoging">登录</el-button>
<!-- 注释:native.prevent 取消默认事件 -->
</el-form-item>
<p>
<!-- <el-checkbox label="7天自动登陆" v-model="ruleForm.autoLogin"></el-checkbox> -->
<el-button type="text" class="fl" @click="$router.push('/register')">还没有企业账号?点击注册</el-button>
<el-button type="text" class="fr" @click="$router.push('/search')">查询注册信息</el-button>
</p>
</el-form>
</div>
</el-row>
</div>
<div class="bckg">
<img src="@/assets/bg.jpeg" alt />
</div>
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import {
Message
} from "element-ui";
import {
State,
Getter,
Mutation,
Action
} from "vuex-class";
import Layout from "@/views/Layout/Layout.vue";
import {
mapActions
} from "vuex";
import METHOD from "@/utils/methods";
import {
createrouter,
asyncRouterMap
} from "../../router";
import routers from "@/router";
@Component({
components: {},
})
export default class Login extends Vue {
@Action("setMoudleArr") setMoudleArr: any;
@Provide() isLoging: Boolean = false;
@Provide() ruleForm: {
username: String;
password: String;
autoLogin: Boolean;
} = {
username: "",
password: "",
autoLogin: true,
};
@Provide() rules = {
username: [{
required: true,
message: "请输入用户名",
trigger: "blur"
}],
password: [{
required: true,
message: "请输入密码",
trigger: "blur"
}],
};
addDouter(rolelist: any) {
let that = this;
var deArr: any = [];
let obj: any = {};
if (rolelist.length == 0) {
that.$message.error("该用户未分配角色!");
return;
}
rolelist.forEach((ele: any) => {
let isSelected = ele.children.some((el: any) => el.selected == "true");
var obj = {
path: ele.path,
component: Layout,
redirect: "",
meta: {
title: ele.title,
icon: ele.icon,
selected: isSelected ? "true" : ele.selected,
level: ele.level,
},
children: [],
};
obj.path = ele.path;
let childarr: any = ele.children;
if (childarr.length > 0) {
childarr.forEach((sele: any) => {
let vueurl =
(METHOD.componentUrl as any)[sele.path.replace("/", "")] +
sele.path;
let sobj: any = {
name: sele.name,
path: sele.path,
component: () => import(`@/views/${vueurl}.vue`),
meta: {
title: sele.title,
icon: sele.icon,
selected: sele.selected,
level: sele.level,
},
};
if (sele.code) sobj.meta.listId = sele.code;
if (sele.selected == "true") {
obj.children.push(sobj);
}
});
}
if (obj.children.length > 0) obj.redirect = (obj.children[0] as any).path;
deArr.push(obj);
});
let arr = deArr.find((ele: any) => ele.meta.selected == 'true');
(that.$router as any).matcher = (createrouter(
asyncRouterMap
) as any).matcher; //重置router
that.$router.addRoutes(deArr);
that.setMoudleArr(deArr);
sessionStorage.setItem("moudleArr", JSON.stringify(deArr));
that.$router.push(arr.path)
}
handleSubmit(): void {
let that = this;
(that.$refs["ruleForm"] as any).validate((valid: any) => {
if (valid) {
// let today = new Date(),timestamp = today.getTime();
that.isLoging = true;
(that as any).$axios
.post("/account/login", {
account: that.ruleForm.username,
password: that.ruleForm.password,
methodName: "auth",
timestamp: "",
})
.then((res: any) => {
that.isLoging = false;
if (res.code == 0) {
sessionStorage.setItem(
"userInfo",
JSON.stringify(res.data.userInfo)
);
sessionStorage.setItem("token", JSON.stringify(res.data.token));
//登陆成功跳转页面
that.addDouter(res.data.userInfo.roleMenuList);
}
})
.catch(() => {
that.isLoging = false;
});
} else {
return false;
}
});
}
created() {
let usd = sessionStorage.getItem("userInfo");
if (usd) {
sessionStorage.removeItem("userInfo");
sessionStorage.removeItem("token");
}
let that = this;
document.onkeydown = function (e) {
let key = (window.event as any).keyCode;
if (key == 13) {
that.handleSubmit();
}
};
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#login {
width: 100%;
height: 100%;
overflow: hidden;
}
.loginWrap {
display: flex;
align-items: center;
-webkit-lign-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
.bckg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
img {
width: 100%;
height: 100vh;
filter: blur(20px);
-webkit-filter: blur(4px);
}
}
.form {
background: rgba(0, 0, 0, 0.5);
width: 350px;
height: auto;
padding: 40px 30px;
-webkit-box-shadow: 0 0 11px 2px #ffffff;
box-shadow: 0 0 11px 2px #ffffff;
border-radius: 3px;
position: relative;
z-index: 1;
}
.el-row {
margin-bottom: 20px;
}
.form-tit {
margin-bottom: 20px;
}
h1 {
margin-bottom: 5px;
color: #eee;
font-family: "黑体";
}
p {
color: rgb(136, 139, 136);
margin: 0;
}
.loginbtn {
background: $theme-color;
color: #ffffff;
font-size: 1.2em;
width: 100%;
border: none;
}
}
#username,
#password,
#email {
height: 45px;
line-height: 45px;
background-position: 10px center;
background-repeat: no-repeat;
padding-left: 40px;
background-color: transparent;
color: #fff;
}
#username {
background-image: url("../../assets/u22.png");
}
#password {
background-image: url("../../assets/u24.png");
}
#email {
background-image: url("../../assets/u23.png");
background-size: 24px;
}
</style>
<template>
<div id="login">
<div class="loginWrap">
<div class="form">
<el-row>
<el-col :span="24" class="form-tit cent">
<h1>用户登录</h1>
<p>欢迎登陆!</p>
</el-col>
<div class="contianer">
<el-form
class="form-con"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
>
<el-form-item prop="username">
<el-input
placeholder="请输入用户名"
name="username"
id="username"
v-model="ruleForm.username"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
placeholder="请输入密码"
type="password"
name="password"
id="password"
v-model="ruleForm.password"
></el-input>
</el-form-item>
<el-form-item>
<el-button
class="loginbtn"
@click="handleSubmit()"
:loading="isLoging"
>立即登录</el-button
>
<!-- 注释:native.prevent 取消默认事件 -->
</el-form-item>
</el-form>
<div class="btm">
<el-button
type="text"
class="fl"
@click="$router.push('/register')"
>还没有企业账号?点击注册</el-button
>
<el-button type="text" class="fr" @click="$router.push('/search')"
>查询注册信息</el-button
>
</div>
</div>
</el-row>
</div>
<!--<div class="bckg">
<img src="@/assets/login-bg.jpg" alt />
</div>-->
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { Message } from "element-ui";
import { State, Getter, Mutation, Action } from "vuex-class";
import Layout from "@/views/Layout/Layout.vue";
import { mapActions } from "vuex";
import METHOD from "@/utils/methods";
import { createrouter, asyncRouterMap } from "../../router";
import routers from "@/router";
@Component({
components: {},
})
export default class Login extends Vue {
@Action("setMoudleArr") setMoudleArr: any;
@Provide() isLoging: Boolean = false;
@Provide() ruleForm: {
username: String;
password: String;
autoLogin: Boolean;
} = {
username: "",
password: "",
autoLogin: true,
};
@Provide() rules = {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur",
},
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
],
};
addDouter(rolelist: any) {
let that = this;
var deArr: any = [];
let obj: any = {};
if (rolelist.length == 0) {
that.$message.error("该用户未分配角色!");
return;
}
rolelist.forEach((ele: any) => {
let isSelected = ele.children.some((el: any) => el.selected == "true");
var obj = {
path: ele.path,
component: Layout,
redirect: "",
meta: {
title: ele.title,
icon: ele.icon,
selected: isSelected ? "true" : ele.selected,
level: ele.level,
},
children: [],
};
obj.path = ele.path;
let childarr: any = ele.children;
if (childarr.length > 0) {
childarr.forEach((sele: any) => {
let vueurl =
(METHOD.componentUrl as any)[sele.path.replace("/", "")] +
sele.path;
let sobj: any = {
name: sele.name,
path: sele.path,
component: () => import(`@/views/${vueurl}.vue`),
meta: {
title: sele.title,
icon: sele.icon,
selected: sele.selected,
level: sele.level,
},
};
if (sele.code) sobj.meta.listId = sele.code;
if (sele.selected == "true") {
obj.children.push(sobj);
}
});
}
if (obj.children.length > 0) obj.redirect = (obj.children[0] as any).path;
deArr.push(obj);
});
let arr = deArr.find((ele: any) => ele.meta.selected == "true");
(that.$router as any).matcher = (createrouter(
asyncRouterMap
) as any).matcher; //重置router
that.$router.addRoutes(deArr);
that.setMoudleArr(deArr);
sessionStorage.setItem("moudleArr", JSON.stringify(deArr));
that.$router.push(arr.path);
}
handleSubmit(): void {
let that = this;
(that.$refs["ruleForm"] as any).validate((valid: any) => {
if (valid) {
// let today = new Date(),timestamp = today.getTime();
that.isLoging = true;
(that as any).$axios
.post("/account/login", {
account: that.ruleForm.username,
password: that.ruleForm.password,
methodName: "auth",
timestamp: "",
})
.then((res: any) => {
that.isLoging = false;
if (res.code == 0) {
sessionStorage.setItem(
"userInfo",
JSON.stringify(res.data.userInfo)
);
sessionStorage.setItem("token", JSON.stringify(res.data.token));
//登陆成功跳转页面
that.addDouter(res.data.userInfo.roleMenuList);
}
})
.catch(() => {
that.isLoging = false;
});
} else {
return false;
}
});
}
created() {
let usd = sessionStorage.getItem("userInfo");
if (usd) {
sessionStorage.removeItem("userInfo");
sessionStorage.removeItem("token");
}
let that = this;
document.onkeydown = function (e) {
let key = (window.event as any).keyCode;
if (key == 13) {
that.handleSubmit();
}
};
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#login {
width: 100%;
height: 100%;
overflow: hidden;
background: url("~@/assets/login-bg.jpg") center no-repeat;
background-size: cover;
}
.loginWrap {
display: flex;
align-items: center;
-webkit-lign-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
.bckg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
img {
width: 100%;
height: 100vh;
// filter: blur(20px);
// -webkit-filter: blur(4px);
}
}
.form {
background: url("~@/assets/log-mid.png");
width: 712px;
height: 524px;
position: relative;
z-index: 1;
}
.el-row {
margin-bottom: 20px;
}
.form-tit {
margin-bottom: 20px;
}
.form-con{
width: 320px;
margin: 0 auto;
overflow: hidden;
.el-form-item{
height: 55px;
line-height: 55px;
margin-bottom: 30px;
}
.el-form-item:nth-child(3){
padding-top: 20px;
}
.el-form-item__content{
line-height: 55px;
}
}
h1 {
margin-bottom: 20px;
line-height: 55px;
color: #ffffff;
font-size: 24px;
font-family: "微软雅黑";
font-style: normal;
}
p {
color: #ffb21e;
font-size: 24px;
font-family: "微软雅黑";
}
.loginbtn {
background-image: linear-gradient(to top, #ffb320, #ffe86a);
color: #994908;
font-size: 18px;
width: 100%;
height: 55px;
border: none;
}
}
#username,
#password,
#email {
height: 55px;
line-height: 20px;
padding: 15px 20px;
line-height: 45px;
background-position: 10px center;
background-repeat: no-repeat;
background-color: #ffffff;
border: 1px solid #2e719c;
padding-left: 40px;
}
#username {
background-image: url("../../assets/icon_09.jpg");
}
#password {
background-image: url("../../assets/icon_16.jpg");
}
#email {
background-image: url("../../assets/u23.png");
background-size: 24px;
}
.btm{
width: 80%;
margin: 0 auto;
}
</style>
<template>
<div class="camerasMg">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.planTitle" placeholder="请输预案标题查询"></el-input>
</el-form-item>
<el-form-item label>
<el-select v-model="searchData.planLevel" placeholder="请输预案等级">
<el-option label="Ⅰ级" value="Ⅰ"></el-option>
<el-option label="Ⅱ级" value="Ⅱ"></el-option>
<el-option label="Ⅲ级" value="Ⅲ"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr" v-if="qyvisble">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 添加预案
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="false">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="planTitle" label="预案标题"></el-table-column>
<el-table-column prop="planLevel" label="预案等级">
<template slot-scope="scope">
<font>{{scope.row.planLevel + '级'}}</font>
</template>
</el-table-column>
<el-table-column prop="planType" label="预案分类"></el-table-column>
<el-table-column prop="isReported" label="是否上报" v-if="qyvisble">
<template slot-scope="scope">
<font v-if="scope.row.isReported == 0" class="colorM">
已上报
</font>
<font v-else-if="scope.row.isReported != 0" class="colorR">
未上报
</font>
</template>
</el-table-column>
<el-table-column prop="sourceFile" label="预案文件">
<template slot-scope="scope">
<span
class="dbtn sd qiCr"
@click="checkFile(scope.row.sourceFile)"
v-if="scope.row.sourceFile != ''"
>
<i class="el-icon el-icon-view"></i>查看/下载
</span>
<!-- <a
class="dbtn sd qiCr"
:href="fileUrl(scope.row.sourceFile)"
:download="fileUrl(scope.row.sourceFile)"
v-if="scope.row.sourceFile != ''"
>
<i class="el-icon el-icon-download"></i>下载 -->
</a>
</template>
</el-table-column>
<!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small" v-if="qyvisble">
<i class="el-icon-edit-outline"></i> 编辑
</el-button>
<el-button type="primary" plain @click="editFun(scope.row)" size="small" v-if="!qyvisble">
查看详情
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" v-if="qyvisble">
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
<PlansMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></PlansMgEdit>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import PlansMgEdit from "./PlansMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
components: { PlansMgEdit }
})
export default class CamerasMg extends Vue {
@Provide() enterpriseId: String = "";
@Provide() signId: String = "";
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增预案";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
@Provide() qyvisble: boolean = true;//政府端隐藏项
getTableData() {
let that = this,
param = Object.assign({enterpriseId: that.enterpriseId, isReported: that.enterpriseId ? '' : 0 }, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/planInfo/selectPlanInfoList`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = {};
this.getTableData();
}
addFun() {
this.zjKey++;
this.dialogVisible = true;
}
editFun(row: any) {
this.dialogTit = "编辑预案";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
that,
`/planInfo/deletePlanInfoById/${row.id}`,
function() {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
checkFile(url: any) {
window.open(METHOD.URL + url,'_blank')
}
fileUrl(url: any){
url = METHOD.URL + url;
}
created() {
this.enterpriseId = METHOD.enterpriseId;
if( this.enterpriseId ){
this.qyvisble = true;
}else{
this.qyvisble = false;
}
this.getTableData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
\ No newline at end of file
<template>
<div class="wrapper editwrap w100">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<div v-if="qyvisble">
<el-row :gutter="20">
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案基本信息</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="预案标题" prop="planTitle">
<el-input v-model="editForm.planTitle"></el-input>
</el-form-item>
<el-form-item label="预案分类" prop="planType">
<el-input v-model="editForm.planType"></el-input>
</el-form-item>
<el-form-item label="预案等级" prop="planLevel">
<el-radio-group v-model="editForm.planLevel">
<el-radio label="Ⅰ">Ⅰ级</el-radio>
<el-radio label="Ⅱ">Ⅱ级</el-radio>
<el-radio label="Ⅲ">Ⅲ级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否上报" prop="isReported">
<el-radio-group v-model="editForm.isReported">
<el-radio label="'0'">上报</el-radio>
<el-radio label="'1'">未上报</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="预案源文件">
<el-upload
ref="uploaderB"
class="uploader"
:limit="1"
:action="actionUrl"
:on-success="(a,b,c) => onSuccess(a,b,c,'sourceFile')"
:on-error="onError"
:on-remove="handleRemove"
:before-remove="(a,b,c) => beforeRemove(a,b,c,'sourceFile')"
:on-exceed="onExceed"
:multiple="false"
list-type="picture"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
<!-- <div v-if="fileList.length > 0">
<a v-for="(i,ind) in fileList" :key="ind" :href="i.url" target="_blank">{{i.name}}</a>&nbsp;&nbsp;&nbsp;<i class="btn el-icon-delete" @click="deleteList"></i>
</div>-->
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案内容</div>
<textarea id="editorA" v-model="editForm.planContents"></textarea>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">提交预案</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消编辑</el-button>
</span>
</div>
<div v-else>
<el-row :gutter="20">
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案基本信息</div>
<el-form ref="editForm" :model="editForm" label-width="100px">
<el-form-item label="所属公司:">
<font>{{editForm.enterpriseName}}</font>
</el-form-item>
<el-form-item label="预案标题:">
<font>{{editForm.planTitle}}</font>
</el-form-item>
<el-form-item label="预案分类:">
<font>{{editForm.planType}}</font>
</el-form-item>
<el-form-item label="预案等级:">
<font>{{editForm.planLevel + '级'}}</font>
</el-form-item>
<el-form-item label="是否上报:">
<font>{{editForm.isReported == 0 ? '已上报' : '未上报'}}</font>
</el-form-item>
<el-form-item label="预案源文件:">
<span
class="dbtn sd qiCr"
@click="checkFile(editForm.sourceFile)"
v-if="editForm.sourceFile != ''"
>
<i class="el-icon el-icon-view"></i>
{{editForm.fileOriginalName}}
</span>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案内容</div>
<div v-html="editForm.planContents"></div>
<font v-if="editForm.planContents == ''">暂无内容~</font>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer fr">
<el-button @click="$emit('dialogFun')" size="small">取消查看</el-button>
</span>
</div>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import ice from "@/utils/iceEditor-min.js";
@Component({
components: { City },
})
export default class PlansMgEdit extends Vue {
//上传
@Provide() actionUrl: any = "";
@Provide() sourceFile: any = [];
@Provide() fileList: any = [];
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(String) title!: String;
@Prop(Object) editForm!:{
id: String;
enterpriseId: String;
sourceFile: String;
planContents: String;
planType: String;
planLevel: String;
planTitle: String;
fileOriginalName: String;
};
@Provide() enterpriseId: String = "";
@Provide() editorA: any;
@Provide() qyvisble: boolean = true;
@Provide() rules: any = {
planLevel: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planTitle: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planType: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
@Watch("sourceFile") change(val: any) {
if (val.length > 0) {
this.editForm.sourceFile = val[0].response.data.viewPath;
this.editForm.fileOriginalName = val[0].response.data.originalName;
} else {
this.editForm.sourceFile = "";
this.editForm.fileOriginalName = "";
}
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this;
that.editForm.planContents = that.editorA.getHTML();
that.editForm.enterpriseId = that.enterpriseId;
(that as any).$refs[formName].validate((valid: boolean) => {
if (that.editorA.getText() == false && that.editForm.sourceFile == "") {
that.$message.error("没有预案内容!");
return;
}
if (valid) {
METHOD.axiosPost(
that,
`/planInfo/addOrEditPlanInfo`,
that.editForm,
function (res: any) {
if (res.code == 0) {
(that as any).$message({
message: "操作成功!",
type: "success",
});
(that as any).$emit("dialogFun");
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
/*
上传
*/
onSuccess(res: any, file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onError(err: any, file: any, fileList: any) {
this.$message.error("上传失败!");
}
handleRemove(file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onExceed(file: any, fileList: any) {
this.$message.warning("只允许上传一个文件,如需更改请先删除!");
}
beforeRemove(file: any, fileList: any) {
let that = this,
param;
param = file.response
? file.response.data.savePath.replace(/\\/g, "%")
: file.url.replace(/\\/g, "%").slice(9);
METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
res: any
) {
if (res.code == 0) that.$message.success("删除成功");
else return false;
});
}
//创建编辑器
creatEditor() {
this.editorA = new ice.editor("editorA");
this.editorA.menu = [
"fontSize",
"foreColor",
"bold",
"italic",
"underline",
"strikeThrough",
"line",
"justifyLeft",
"justifyCenter",
"justifyRight",
"line",
"table",
"insertImage",
"insertOrderedList",
"insertUnorderedList",
"indent",
];
this.editorA.height = "200px";
this.editorA.create();
}
deleteList() {
this.fileList = [];
this.editForm.sourceFile = "";
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
created() {
let that = this;
that.enterpriseId = METHOD.enterpriseId;
if (that.enterpriseId) {
that.qyvisble = true;
that.$nextTick(() => {
that.creatEditor();
})
} else {
that.qyvisble = false;
}
if (that.editForm.id && that.enterpriseId) {
that.$nextTick(() => {
//编辑
if (that.editForm.planContents) {
that.editorA.setValue(that.editForm.planContents);
}
if (that.editForm.fileOriginalName) {
that.fileList.push({
name: that.editForm.fileOriginalName,
url: that.editForm.sourceFile,
});
}
});
}
that.actionUrl = METHOD.URL + "/file/uploadFile";
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.w100 .el-dialog {
width: 80%;
.flcolum {
> div {
border-radius: 3px;
}
}
.yatit {
background: #4273bd;
color: #ffffff;
line-height: 2;
height: 2em;
text-align: center;
margin-bottom: 10px;
border-radius: 2px;
}
.el-transfer-panel {
width: calc((100% - 116px) / 2);
}
.el-transfer__buttons {
width: 56px;
}
.el-transfer__button {
margin-left: 0;
display: block;
}
}
</style>
\ No newline at end of file
<template>
<div class="register">
<div class="registerCon">
<el-row>
<el-col :span="8" class="title">
<div class="titcon">
<img src="../assets/logo1.png" alt width="100px" />
<h1>欢迎访问危化品企业监管平台!</h1>
<h2>Wellcom to The Hazardous Chemicals Supervision System.</h2>
</div>
</el-col>
<el-col :span="16" class="pageCon">
<h3>企业注册</h3>
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="第一步 登记企业注册信息" icon="el-icon-edit"></el-step>
<el-step title="第二步 授权企业管理员" icon="el-icon-edit"></el-step>
</el-steps>
<div class="registerForm">
<el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="10em" v-show="stepActive == 0">
<el-form-item label="单位名称" prop="unitName">
<el-input v-model="registerForm.unitName"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码" prop="orgCode">
<el-input v-model="registerForm.orgCode" placeholder="请填写正确格式的代码" @blur="blurFun('orgCode')"></el-input>
<span class="colorM" v-show="checkRule.orgCode == 'pass'">
<i class="el-icon el-icon-success"></i> 验证通过!
</span>
<span class="colorR" v-show="checkRule.orgCode && checkRule.orgCode != 'pass'">
<i class="el-icon el-icon-error"></i>
{{checkRule.orgTxt}}
</span>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="法人代表姓名" prop="legalPerson">
<el-input v-model="registerForm.legalPerson" placeholder="请填写中文姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人邮箱" prop="legalPersonEmail">
<el-input v-model="registerForm.legalPersonEmail"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所在区域" prop="a">
<City @changeFun="changeFun" :valueqv="cityval"></City>
</el-form-item>
<el-form-item label="所属街道" prop="streetName">
<el-input v-model="registerForm.streetName"></el-input>
</el-form-item>
<el-form-item label="单位注册地址" prop="regAddress">
<el-input v-model="registerForm.regAddress"></el-input>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="生产经营地址" prop="runAddress">
<el-input v-model="registerForm.runAddress"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人手机" prop="legalPersonPhone">
<el-input v-model="registerForm.legalPersonPhone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="单位营业执照" prop="orgFilePath">
<el-upload ref="uploaderA" class="uploader" :limit="1" :action="actionUrl" :on-success="(a,b,c) => onSuccess(a,b,c,'orgFileList')" :on-error="onError" :on-remove="handleRemove" :before-remove="(a,b,c) => beforeRemove(a,b,c,'orgFileList')" :on-exceed="onExceed" :multiple="false" list-type="picture" :file-list="fileList">
<i class="el-icon-plus"></i>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="授权书上传" prop="authorizeFile">
<el-upload ref="uploaderB" class="uploader" :limit="1" :action="actionUrl" :on-success="(a,b,c) => onSuccess(a,b,c,'cerFileList')" :on-error="onError" :on-remove="handleRemove" :before-remove="(a,b,c) => beforeRemove(a,b,c,'cerFileList')" :on-exceed="onExceed" :multiple="false" list-type="picture" :file-list="fileListTwo">
<i class="el-icon-plus"></i>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="cent">
<el-button type="primary" @click="nextStep">下一步</el-button>
<el-button @click="restForm">重置表单</el-button>
<el-button @click="$router.push('/login')">返回登录页</el-button>
</el-form-item>
</el-form>
<!-- 第二步 表单 -->
<el-form ref="registerFormTwo" :model="registerFormTwo" :rules="rulesTwo" label-width="9em" v-show="stepActive == 1">
<el-row>
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="registerFormTwo.idCard" placeholder="请填写正确格式的身份证号"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="userName">
<el-input v-model="registerFormTwo.userName" placeholder="请填写中文姓名"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号" prop="mobliePhone">
<el-input v-model="registerFormTwo.mobliePhone"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="登录账号" prop="account">
<el-input v-model="registerFormTwo.account" @blur="blurFun('account')"></el-input>
<span class="colorM" v-show="checkRule.account == 'pass'">
<i class="el-icon el-icon-success"></i> 验证通过!
</span>
<span class="colorR" v-show="checkRule.account && checkRule.account != 'pass'">
<i class="el-icon el-icon-error"></i>
{{checkRule.accountTxt}}
</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="登录密码" prop="accountPwd">
<el-input type="password" v-model="registerFormTwo.accountPwd"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="登录密码确认" prop="qrmm">
<el-input type="password" v-model="registerFormTwo.qrmm"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="registerFormTwo.email"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="cent">
<el-button @click="preStep">上一步</el-button>
<el-button type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
<div class="bckg">
<img src="../assets/bg.jpeg" alt />
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide,
Watch
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
@Component({
components: {
City
},
})
export default class Register extends Vue {
@Provide() stepActive = 0;
@Provide() uploaderA = "uploaderA";
@Provide() registerForm: any = {
unitName: "",
orgCode: "",
legalPerson: "",
legalPersonEmail: "",
streetName: "",
regAddress: "",
runAddress: "",
legalPersonPhone: "",
orgFilePath: "",
authorizeFile: "",
};
@Provide() rules: any = {
unitName: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
}],
legalPersonEmail: [{
type: "email",
message: "请填写正确的邮箱格式!",
trigger: "blur"
}, ],
orgCode: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
},
{
pattern: /[0-9A-Z]{18}/,
message: "填写正确的组织机构代码"
},
],
legalPerson: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
},
{
pattern: /^[\u4e00-\u9fa5]+$/,
message: "填写中文姓名"
},
],
};
@Provide() fileList: any = [];
@Provide() fileListTwo: any = [];
@Provide() registerFormTwo: any = {
idCard: "",
userName: "",
mobliePhone: "",
account: "",
accountPwd: "",
email: "",
};
@Provide() rulesTwo: any = {
email: [{
type: "email",
message: "请填写正确的邮箱格式!",
trigger: "blur"
}, ],
qrmm: [{
required: true,
validator: this.validatePass,
trigger: "change"
}],
account: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
}],
userName: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
}],
accountPwd: [{
required: true,
message: "此项为必填项!",
trigger: "blur",
}, ],
idCard: [{
required: true,
message: "此项为必填项!",
trigger: "blur"
},
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: "填写正确格式的身份证号",
},
],
};
@Provide() qrmm: string = "";
@Provide() checkRule: any = {
orgCode: "",
orgTxt: "",
account: "",
accountTxt: "",
};
@Provide() actionUrl: any = "";
@Provide() cerFileList: any = [];
@Provide() orgFileList: any = [];
@Provide() cityval: any = [];
@Watch("orgFileList") changeto(newVal: any) {
if (newVal.length > 0) {
this.registerForm.orgFilePath = newVal[0].response.data.savePath;
this.registerForm.orgFileName = newVal[0].response.data.originalName;
} else {
this.registerForm.orgFilePath = "";
this.registerForm.orgFileName = "";
}
}
@Watch("cerFileList") changetoB(newVal: any) {
if (newVal.length > 0) {
this.registerForm.authorizeFile = newVal[0].response.data.savePath;
this.registerForm.authorizeFileOriginalName =
newVal[0].response.data.originalName;
} else {
this.registerForm.authorizeFile = "";
this.registerForm.authorizeFileOriginalName = "";
}
}
validatePass(rule: any, value: any, callback: any) {
if (value == "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.registerFormTwo.accountPwd) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
}
blurFun(value: any) {
let that = this;
if (value == "orgCode") that.checkOrgCode();
if (value == "account") that.checkOrgAccount();
}
checkOrgCode() {
let that = this,
pattern = /[0-9A-Z]{8}-[0-9A-Z]/;
if (pattern.test(that.registerForm.orgCode)) {
METHOD.axiosGet(
that,
`/reg/checkOrgCode/${that.registerForm.orgCode}`,
function (res: any) {
if (res.code == 0) that.checkRule.orgCode = "pass";
else {
that.checkRule.orgCode = "notpass";
that.checkRule.orgTxt = res.msg;
}
}
);
}
}
checkOrgAccount() {
let that = this;
if (that.registerFormTwo.account) {
METHOD.axiosGet(
that,
`/reg/checkUserAccount/${that.registerFormTwo.account}`,
function (res: any) {
if (res.code == 0) that.checkRule.account = "pass";
else {
that.checkRule.account = "notpass";
that.checkRule.accountTxt = res.msg;
}
}
);
}
}
nextStep() {
let that = this;
(that as any).$refs["registerForm"].validate((valid: Boolean) => {
if (valid) {
that.stepActive++;
}
});
}
restForm() {
let that = this;
that.registerForm = {};
that.fileList = [];
that.fileListTwo = [];
that.checkRule.orgCode = "";
that.cityval = [];
}
preStep() {
let that = this;
that.stepActive--;
}
submit() {
let that = this;
(that as any).$refs["registerFormTwo"].validate((valid: Boolean) => {
if (valid) {
let param = Object.assign(that.registerForm, that.registerFormTwo);
METHOD.axiosPost(that, `/reg/enterpriseReg`, param, function (
res: any
) {
if (res.code == 0) {
that.$message({
type: "success",
message: "企业注册成功!即将转到登录页。",
duration: 5000,
onClose() {
that.$router.push("/");
},
});
}
});
}
});
}
/*
上传
*/
onSuccess(res: any, file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onError(err: any, file: any, fileList: any) {
this.$message.error("上传失败!");
}
handleRemove(file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onExceed(file: any, fileList: any) {
this.$message.warning("只允许上传一个文件,如需更改请先删除!");
}
beforeRemove(file: any, fileList: any) {
let that = this,
param = file.response.data.savePath.replace(/\\/g, "%");
return that.$confirm(`确定移除 ${file.name}?`).then(() => {
METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
res: any
) {
if (res.code == 0) that.$message.success("删除成功");
else return false;
});
});
}
/*选择城市*/
changeFun(v: any) {
this.registerForm.provinceId = v[0];
this.registerForm.cityId = v[1];
this.registerForm.countyId = v[2];
}
created() {
this.actionUrl = METHOD.URL + "/file/uploadFile";
let sessionData = sessionStorage.getItem("enterCheckInfo");
if (sessionData) {
let formData = JSON.parse(sessionData);
for (let key in formData) {
if (this.registerForm[key] != undefined) {
this.registerForm[key] = formData[key];
}
if (this.registerFormTwo[key] != undefined) {
this.registerFormTwo[key] = formData[key];
}
}
if (formData.provinceId) {
this.cityval = [
formData.provinceId,
formData.cityId,
formData.countyId,
];
}
if (formData.orgFilePath) {
this.fileList.push({
name: formData.orgFileName,
url: formData.orgFilePath,
});
}
if (formData.authorizeFile) {
this.fileListTwo.push({
name: formData.authorizeFileOriginalName,
url: formData.authorizeFile,
});
}
}
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.registerCon {
width: 90%;
margin: 0 auto;
height: 80vh;
position: relative;
top: 10vh;
box-sizing: content-box;
position: relative;
z-index: 1;
.el-row {
width: 100%;
height: 100%;
overflow: hidden;
.el-col {
height: 100%;
overflow: hidden;
}
}
.title {
background: $theme-color;
opacity: 0.8;
padding: 0 10px;
color: white;
text-align: center;
display: flex;
align-items: center;
h1 {
font-weight: normal;
font-family: "黑体";
}
h2 {
font-weight: normal;
font-family: Helvetica, sans-serif;
}
}
.pageCon {
background: white;
h3 {
font-size: 1rem;
text-align: center;
font-weight: normal;
margin: 10px;
}
}
}
.registerForm {
padding: 20px;
margin: auto;
box-sizing: border-box;
height: calc(100% - 47px);
overflow: auto;
}
.bckg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
img {
width: 100%;
height: 100vh;
filter: blur(20px);
-webkit-filter: blur(4px);
}
}
</style>
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label="设备类型">
<el-select v-model="searchData.dataType">
<el-option label="监控设备" value="5"></el-option>
<el-option label="传感器" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备名称">
<el-input v-model="searchData.deviceName" placeholder="请输入..."></el-input>
</el-form-item>
<el-form-item label="设备号">
<el-input v-model="searchData.deviceNumber" placeholder="请输入..."></el-input>
</el-form-item>
<el-form-item label="设备短号">
<el-input v-model="searchData.shortNum" placeholder="请输入..."></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="deviceName" label="设备名称"></el-table-column>
<el-table-column prop="deviceName" label="设备类型">
<template slot-scope="scope">
<font>{{ scope.row.dataType == 5 ? '监控设备' : '传感器'}}</font>
</template>
</el-table-column>
<el-table-column prop="deviceIp" label="设备IP"></el-table-column>
<el-table-column prop="deviceNumber" label="设备编号"></el-table-column>
<el-table-column prop="shortNum" label="设备短号"></el-table-column>
<el-table-column prop="goodsName" label="所在厂区位置"></el-table-column>
<el-table-column prop="stockNum" label="库存数量"></el-table-column>
<el-table-column prop="dangerGrade" label="危险等级"></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small">编辑</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="total,sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE.page" :page-size="PAGE.size"></el-pagination>
<SafetyDeviceMgEdit :dialogVisible="dialogVisible" :editForm="formData" :title="dialogTit" @dialogFun="closeDialog" @refreshTableData="getTableData" :key="zjKey"></SafetyDeviceMgEdit>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import SafetyDeviceMgEdit from "./SafetyDeviceMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
components: {
SafetyDeviceMgEdit
}
})
export default class SafetyDeviceMg extends Vue {
@Provide() tableData: Object = {
pageData: [],
total: 0
};
@Provide() PAGE: any = {
page: 1,
size: 10
};
@Provide() searchData: any = {
deviceName: "",
deviceNumber: "",
shortNum: "",
dataType: '',
};
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: any = {
dataType: "",
enterpriseId: ""
};
@Provide() zjKey: any = 0;
@Provide() enterpriseId: string = "";
@Provide() dataType: string = "";
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`,
param,
function (res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = {
page: 1,
size: 10
};
this.getTableData();
}
resetFun() {
this.PAGE = {
page: 1,
size: 10
};
this.searchData = {
deviceName: "",
deviceNumber: "",
shortNum: "",
dataType: ''
};
this.getTableData();
}
addFun() {
this.zjKey++;
this.dialogVisible = true;
this.formData.dataType = this.searchData.dataType;
this.formData.enterpriseId = this.enterpriseId;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
this,
`/safetyDeviceInfo/deleteSafetyDeviceInfoById/${row.id}`,
function () {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.getTableData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="设备类型" prop="dataType">
<el-select v-model="editForm.dataType">
<el-option label="监控设备" value="5"></el-option>
<el-option label="传感器" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="editForm.deviceName"></el-input>
</el-form-item>
<el-form-item label="设备编号" prop="deviceNumber">
<el-input v-model="editForm.deviceNumber"></el-input>
</el-form-item>
<el-form-item label="设备短号" prop="shortNum">
<el-input v-model="editForm.shortNum"></el-input>
</el-form-item>
<el-form-item label="设备介绍" prop="deviceInfo">
<el-input type="textarea" v-model="editForm.deviceInfo"></el-input>
</el-form-item>
<el-form-item label="设备IP" prop="deviceIp">
<el-input v-model="editForm.deviceIp"></el-input>
</el-form-item>
<el-form-item label="设备登录名" prop="deviceLoginName">
<el-input v-model="editForm.deviceLoginName"></el-input>
</el-form-item>
<el-form-item label="设备登录端口" prop="deviceLoginPort">
<el-input v-model="editForm.deviceLoginPort"></el-input>
</el-form-item>
<el-form-item label="设备登录密码" prop="deviceLoginPwd">
<el-input v-model="editForm.deviceLoginPwd"></el-input>
</el-form-item>
<el-form-item label="所在厂区位置" prop="factoryLocation">
<el-input v-model="editForm.factoryLocation"></el-input>
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-row>
<el-col :span="16">
<el-input v-model="editForm.longitude"></el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="editForm.latitude"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
<el-form-item label="物品类型" prop="category">
<el-input v-model="editForm.category"></el-input>
</el-form-item>
<el-form-item label="否是重大危险源" prop="isBigDanger">
<el-radio-group v-model="editForm.isBigDanger">
<el-radio :label="'0'"></el-radio>
<el-radio :label="'1'"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="危险等级" prop="dangerGrade">
<el-select v-model="editForm.dangerGrade" placeholder="请选择">
<el-option value="一级"></el-option>
<el-option value="二级"></el-option>
<el-option value="三级"></el-option>
<el-option value="四级"></el-option>
</el-select>
</el-form-item>
<el-form-item label="联系人" prop="contacts">
<el-input v-model="editForm.contacts"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
:slat="editForm.latitude"
:slng="editForm.longitude"
@confirm="qrFun"
/>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";
@Component({
components: { Mapdialog }
})
export default class SafetyDeviceMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editForm!: {
deviceName: String;
longitude: Number;
latitude: Number;
dataType: String;
enterpriseId: String;
};
@Prop(String) title!: String;
@Provide() qvvalue: any = []; //区域值
@Provide() signsArr: any = []; //图例list
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
deviceName: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
dataType: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
isBigDanger: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
dangerGrade: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
factoryLocation: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
longitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
latitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }]
};
@Provide() loadmap: Boolean = false;
@Provide() enterpriseId: string = "dbe0c3268a3c4911913f35a2fdcd0e3e";
qrFun(v: any) {
//确认选择经纬度
this.editForm.longitude = v.lng;
this.editForm.latitude = v.lat;
}
MapdialogFun() {
this.loadmap = false;
this.$nextTick(() => {
this.loadmap = true;
});
this.dialogTableVisible = true;
}
dialogcancelFun() {
this.dialogTableVisible = false;
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,
params = that.editForm;
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/safetyDeviceInfo/addOrEditSafetyDeviceInfo/${that.enterpriseId}`,
params,
function(res: any) {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
created() {
this.enterpriseId = METHOD.enterpriseId;
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="register">
<div class="registerCon">
<el-row>
<el-col :span="8" class="title">
<div class="titcon">
<img src="../assets/logo1.png" alt width="100px" />
<h1>欢迎访问危化品企业监管平台!</h1>
<h2>Wellcom to The Hazardous Chemicals Supervision System.</h2>
</div>
</el-col>
<el-col :span="16" class="pageCon">
<div class="serForm">
<h3>查询企业注册信息</h3>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.orgCode" placeholder="请输入组织机构代码查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
</el-form-item>
<div class="tips">
<font v-if="status === '0'" class="colorM">
<i class="iconfont iconzhengchang"></i> 正常
</font>
<font v-else-if="status == 2" class="colorP">
<i class="iconfont iconsuoding"></i> 已锁定
</font>
<font v-else-if="status == 1" class="colorR">
<i class="iconfont iconicon_huabanfuben"></i> 已删除
</font>
<font v-else-if="status == 3" class="colorP">
<i class="iconfont iconshenhe"></i> 审核中
</font>
<font v-else-if="status == 4" class="colorR">
<i class="iconfont iconweitongguo"></i> 审核未通过<br /><em class="remark">审核备注信息:{{tipMark}}</em><br><a class="alink" @click="$router.push('/register')"> 重新注册 </a>
</font>
<div class="colorR" v-else>{{tiptxt}}</div>
<a class="alink" @click="$router.push('/login')"> 返回登录页 </a>
<br />
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
<div class="bckg">
<img src="../assets/bg.jpeg" alt />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class Register extends Vue {
@Provide() searchData: any = { orgCode: "" };
@Provide() status: string = "";
@Provide() tiptxt: string = "";
@Provide() tipMark: string = "";
searchFun() {
let that = this;
if (that.searchData.orgCode) {
METHOD.axiosGet(
that,
`/reg/queryRegCheckStatus/${that.searchData.orgCode}`,
function(res: any) {
/**
* 审核状态,0.正常 1.删除 2.锁定 3.审核中 4审核未通过
*/
if (res.code == 0 && res.data) {
that.status = res.data.accountStatus;
if( res.data.accountStatus == 4 ){
sessionStorage.setItem('enterCheckInfo', JSON.stringify(res.data) )
}
that.tipMark = res.data.remarks;
} else {
that.status = "";
that.tiptxt = res.msg;
}
}
);
} else {
that.$message.warning("请填写组织机构代码");
}
}
created() {}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.registerCon {
width: 90%;
margin: 0 auto;
height: 80vh;
position: relative;
top: 10vh;
box-sizing: content-box;
position: relative;
z-index: 1;
.el-row {
width: 100%;
height: 100%;
overflow: hidden;
.el-col {
height: 100%;
overflow: hidden;
}
}
.title {
background: $theme-color;
opacity: 0.8;
padding: 0 10px;
color: white;
text-align: center;
display: flex;
align-items: center;
h1 {
font-weight: normal;
font-family: "黑体";
}
h2 {
font-weight: normal;
font-family: Helvetica, sans-serif;
}
}
.pageCon {
background: white;
h3 {
font-size: 1rem;
text-align: center;
font-weight: normal;
margin: 10px;
}
}
}
.bckg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
img {
width: 100%;
height: 100vh;
filter: blur(20px);
-webkit-filter: blur(4px);
}
}
.serForm {
padding: 15px;
.el-form-item:nth-child(1) {
width: calc(100% - 110px);
.el-form-item__content {
width: 100%;
}
.el-input {
width: 100%;
}
}
}
.tips {
text-align: center;
padding: 20px 0;
font-size: 2em;
.remark{
font-size: 16px;
color: gray;
font-style: normal;
}
.alink{
font-size: 16px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
}
</style>
<template>
<div class="pomentWrap">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.resourceName" placeholder="请输名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table
:data="tableData"
border
style="width:100%;"
v-loading="loading"
:default-expand-all="true"
>
<el-table-column type="expand" class="sonTd">
<template slot-scope="props">
<el-table
v-if="props.row.childList.length > 0"
:data="props.row.childList"
border
style="width:100%;"
class="sonTable"
:show-header="false"
>
<el-table-column prop="resourceName" label="名称"></el-table-column>
<el-table-column prop="url" label="接口路径"></el-table-column>
<el-table-column prop="method" label="访问方式"></el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain>
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain>
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="resourceName" label="名称"></el-table-column>
<el-table-column prop="url" label="接口路径"></el-table-column>
<el-table-column prop="method" label="访问方式"></el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain>
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain>
<i class="el-icon-delete"></i> 删除
</el-button>
<el-button type="primary" @click="addFun(1,scope.row)" size="small" plain>
<i class="el-icon-circle-plus-outline"></i> 添加
</el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>-->
<APIMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></APIMgEdit>
</div>
</template>
<style lang="scss">
.pomentWrap .sonTable table tr {
background: #f3fafc;
&:nth-child(1) td {
border-top: 0;
}
&:last-child td {
border-bottom: 0;
}
}
.pomentWrap .el-table__expanded-cell {
padding: 0 0 0 47px !important;
}
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import APIMgEdit from "./APIMgEdit.vue";
import METHOD from '@/utils/methods'
@Component({
components: { APIMgEdit }
})
export default class APIMg extends Vue {
@Provide() tableData: any = [];
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { resourceName: "" };
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: any = {};
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
(this as any).$axios
.get(
`/resource/getResourcesList/REST-API?resourceName=${param.resourceName}&page=${param.page}&size=${param.size}`
)
.then((res: any) => {
that.loading = false;
if( res.code == 0 ) that.tableData = res.data;
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData.resourceName = "";
this.getTableData();
}
addFun(w: number, row: any) {
let that = this;
if (w == 1) {
//增加子级
that.formData.parentId = row.id;
that.formData.levels = row.levels + 1;
} else {
//增加顶级
that.formData.parentId = 0;
that.formData.levels = 0;
}
that.dialogTit = "新增";
that.zjKey++;
that.dialogVisible = true;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
that,
`/resource/delResourcesById/${row.id}`,
function() {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
created() {
this.getTableData();
}
}
</script>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="名称" prop="resourceName">
<el-input v-model="editForm.resourceName"></el-input>
</el-form-item>
<el-form-item label="代码" prop="code">
<el-input v-model="editForm.code"></el-input>
</el-form-item>
<el-form-item label="接口路径" prop="url">
<el-input v-model="editForm.url"></el-input>
</el-form-item>
<el-form-item label="访问方式" prop="method">
<el-radio-group v-model="editForm.method">
<el-radio label="GET"></el-radio>
<el-radio label="POST"></el-radio>
<el-radio label="PUT"></el-radio>
<el-radio label="DELETE"></el-radio>
<el-radio label="PATCH"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="editForm.description" type="textarea"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="editForm.sort" type="number"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
components: { }
})
export default class APIMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editForm!: {
resourceName:string;
code:string;
icon:string;
};
@Prop(String) title!: String;
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
resourceName: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
url: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
method: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,params = Object.assign({resourceType:'REST-API'}, that.editForm);
// console.log(params)
// return
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
(that as any).$axios
.post(`/resource/addOrEditResourcesInfo`,params )
.then((res: any) => {
if( res.code == 0 ){
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
});
} else {
return false;
}
});
}
created() {
}
}
</script>
<template>
<div class="pomentWrap">
<el-row :gutter="5" type="flex" justify="space-around">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4">
<div class="topBar">
<el-tree
:data="treeData"
:props="treeProps"
ref="Tree"
node-key="id"
:highlight-current="true"
default-expand-all
@node-click="nodeClick"
>
<template slot-scope="{node, data}">
<span>
<svg class="icon" aria-hidden="true">
<use :xlink:href="'#' + iconArrClass[data.level]" />
</svg>
{{node.label}}
</span>
</template>
</el-tree>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="20" :lg="18" :xl="20">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.deptName" placeholder="请输名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" v-loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="fullName" label="名称"></el-table-column>
<el-table-column prop="shortName" label="简称"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column label="操作" width="190" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain><i class="el-icon-edit"></i> 编辑</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain><i class="el-icon-delete"></i> 删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
</el-col>
</el-row>
<BranchMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:checkedObj="treecheckedObj"
:dialoTitle="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData('refresh')"
:key="zjKey"
></BranchMgEdit>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import BranchMgEdit from "./BranchMgEdit.vue";
import METHOD from "@/utils/methods"
@Component({
components: { BranchMgEdit }
})
export default class BranchMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { deptName: "" };
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
/*
树 icon:icon-bumenguanli1 icon-bumenqun icon-bumen1 icon-bumen3
*/
@Provide() iconArrClass:any = ['icon-bumenguanli1','icon-bumenqun','icon-bumen1','icon-bumen3','icon-bumen2'];
@Provide() treeData: any = [
{
id: 0,
fullName: "组织机构",
level: 0,
icon: "icon-yh",
parentIds:'',
childList: []
}
];
@Provide() treeProps: Object = {
children: "childList",
label: "fullName"
};
@Provide() treecheckedObj:any = {};
// @Watch('getCurrentKey') fromChange(obj: any):any{
// console.log('改变')
// }
getTableData(word:any = null) {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
(this as any).$axios
.get(`/dept/getSysDeptList?deptId=${that.treecheckedObj.id}&deptName=${param.deptName}&page=${param.page}&size=${param.size}`)
.then((res: any) => {
that.loading = false;
if( res.code == 0 ) that.tableData = res.data;
if(word === 'refresh'){
that.getTreeData()
}
});
}
getTreeData() {
let that = this;
(this as any).$axios
.get(`/dept/getDeptInfoTree`)
.then((res: any) => {
if( res.code == 0 ) that.treeData[0].childList = res.data;
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData.fullName = "";
this.getTableData();
}
addFun() {
this.dialogTit = "新增";
this.zjKey++;
this.dialogVisible = true;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this;
METHOD.deleteFun(that, `/dept/delDeptInfoById/${row.id}`, function() {
that.getTableData('refresh');
});
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
this.dialogVisible = false;
this.formData = {};
}
nodeClick(data :any, node:any , target: any){
let that = this;
that.treecheckedObj = node.data;
that.resetFun()
}
created() {
let that = this;
that.getTreeData();
that.$nextTick(() => {
(that as any).$refs.Tree.setCurrentKey(0)
that.treecheckedObj = (that as any).$refs.Tree.getCurrentNode(0)//设置选中节点
that.getTableData();
});
}
}
</script>
<style lang="scss" scped>
@import '@/utils/public.scss';
</style>
\ No newline at end of file
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="dialoTitle"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="上级部门">
<el-input disabled v-model="checkedObj.fullName"></el-input>
</el-form-item>
<el-form-item label="部门全称" prop="fullName">
<el-input v-model="editForm.fullName"></el-input>
</el-form-item>
<el-form-item label="部门简称" prop="shortName">
<el-input v-model="editForm.shortName"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="editForm.description" type="textarea"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="editForm.sort" type="number"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
components: { }
})
export default class BranchMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible !: Boolean;
@Prop(Object) editForm !: {
parentIds:number;
};
@Prop(String) dialoTitle !: String;
@Prop(Object) checkedObj !: {
id: string;
level: string;
parentIds:string;
};//选中节点
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
fullName: [{ required: true, trigger: "blur", message: "该项为必填项!" }]
};
@Provide() loadmap:Boolean = false;
dialogcancelFun(){
this.dialogTableVisible = false;
}
/**
* parentIds格式'[0],[1],[2]'
*/
confirmFun(formName: string) {
let that = this,params:any = Object.assign({},that.editForm);
let ids = that.checkedObj.parentIds;
if(that.dialoTitle == '新增'){
if(ids == ''){
params.parentIds = '[0]';
}else{
params.parentIds = ids + ',' + '['+ Number(that.checkedObj.id) + ']'
}
console.log(params.parentIds)
params.parentId = Number(that.checkedObj.id);
params.level = String( Number(that.checkedObj.level) + 1);
}
// console.log(params)
// return
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
(that as any).$axios
.post(`/dept/addOrEditDeptInfo`,params )
.then((res: any) => {
if( res.code == 0 ){
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
});
} else {
return false;
}
});
}
created() {
let that = this;
console.log(that.editForm)
}
}
</script>
<template>
<div class="pomentWrap">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.menuName" placeholder="请输名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table
:data="tableData"
border
style="width:100%;"
v-loading="loading"
:default-expand-all="true"
>
<el-table-column type="expand" class="sonTd">
<template slot-scope="props">
<el-table
v-if="props.row.childList.length > 0"
:data="props.row.childList"
border
style="width:100%;"
class="sonTable"
:show-header="false"
>
<el-table-column prop="menuName" label="菜单名称"></el-table-column>
<el-table-column prop="icon" label="菜单图标"></el-table-column>
<el-table-column prop="resourceName" label="组件名称"></el-table-column>
<el-table-column prop="url" label="菜单路径"></el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain>
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain>
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="menuName" label="菜单名称"></el-table-column>
<el-table-column prop="icon" label="菜单图标"></el-table-column>
<el-table-column prop="resourceName" label="组件名称"></el-table-column>
<el-table-column prop="url" label="菜单路径"></el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain>
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain>
<i class="el-icon-delete"></i> 删除
</el-button>
<el-button type="primary" @click="addFun(1,scope.row)" size="small" plain>
<i class="el-icon-circle-plus-outline"></i> 添加
</el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>-->
<MenuMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></MenuMgEdit>
</div>
</template>
<style lang="scss">
.pomentWrap .sonTable table tr {
background: #f3fafc;
&:nth-child(1) td {
border-top: 0;
}
&:last-child td {
border-bottom: 0;
}
}
.pomentWrap .el-table__expanded-cell {
padding: 0 0 0 47px !important;
}
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import MenuMgEdit from "./MenuMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
components: { MenuMgEdit }
})
export default class MenuMg extends Vue {
@Provide() tableData: any = [];
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { menuName: "" };
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: any = {};
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
(this as any).$axios
.get(
`/resource/getResourcesList/MENU?menuName=${param.menuName}&page=${param.page}&size=${param.size}`
)
.then((res: any) => {
that.loading = false;
if( res.code == 0 ) that.tableData = res.data;
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData.menuName = "";
this.getTableData();
}
addFun(w: number, row: any) {
let that = this;
if (w == 1) {
//增加子级
that.formData.parentId = row.id;
that.formData.level = row.level + 1;
} else {
//增加顶级
that.formData.parentId = 0;
that.formData.level = 0;
}
that.dialogTit = "新增";
that.zjKey++;
that.dialogVisible = true;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(that, `/resource/delResourcesById/${row.id}`, function() {
that.getTableData();
});
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
created() {
this.getTableData();
}
}
</script>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model="editForm.menuName"></el-input>
</el-form-item>
<el-form-item label="组件名称" prop="resourceName">
<el-input v-model="editForm.resourceName"></el-input>
</el-form-item>
<el-form-item label="菜单代码" prop="code">
<el-input v-model="editForm.code"></el-input>
</el-form-item>
<el-form-item label="菜单图标" prop="icon">
<el-input v-model="editForm.icon"></el-input>
</el-form-item>
<el-form-item label="菜单路径" prop="url">
<el-input v-model="editForm.url"></el-input>
</el-form-item>
<el-form-item label="路由重定向" prop="redirect">
<el-input v-model="editForm.redirect"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="editForm.description" type="textarea"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="editForm.sort" type="number"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
components: { }
})
export default class MenuMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editForm!: {
resourceName:string;
code:string;
icon:string;
};
@Prop(String) title!: String;
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
menuName: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
url: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,params = Object.assign({resourceType:'MENU'}, that.editForm);
// console.log(params)
// return
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
(that as any).$axios
.post(`/resource/addOrEditResourcesInfo`,params )
.then((res: any) => {
if( res.code == 0 ){
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
});
} else {
return false;
}
});
}
created() {
}
}
</script>
<template>
<div class="pomentWrap">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.roleName" placeholder="请输名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table
:data="tableData.pageData"
stripe
border
style="width:100%;"
v-loading="loading"
>
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="roleName" label="角色名称"></el-table-column>
<el-table-column prop="roleCode" label="角色代码"></el-table-column>
<el-table-column prop="roleStatus" label="角色状态">
<template slot-scope="scope">
<font :class="{'jinColor': scope.row.roleStatus == '1'}">{{scope.row.roleStatus == '1' ? '禁用' : '启用'}}</font>
</template>
</el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-button type="success" @click="editFun(scope.row)" size="small" plain><i class="el-icon-edit"></i> 编辑</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small" plain><i class="el-icon-delete"></i> 删除</el-button>
<el-button type="warning" @click="quanFun(scope.row)" size="small" plain><i class="el-icon-setting"></i> 权限</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
<RoleMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></RoleMgEdit>
<Quan
v-if="qxdialogVisible"
:qxdialogVisible="qxdialogVisible"
:roleID="roleID"
:roleName="roleName"
@QXdialogFun="qxcloseDialog"
@confirm="qxconfirm"
></Quan>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import RoleMgEdit from "./RoleMgEdit.vue";
import Quan from "@/components/quan.vue";
import METHOD from '@/utils/methods'
@Component({
components: { RoleMgEdit, Quan }
})
export default class RoleMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { roleName: "" };
@Provide() loading: boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
@Provide() qxdialogVisible: Boolean = false;
@Provide() roleID: String = '';
@Provide() roleName: String = '';
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.loading = true;
(this as any).$axios
.get(`/role/getRoleList?roleName=${param.roleName}&page=${param.page}&size=${param.size}`)
.then((res: any) => {
that.loading = false;
if( res.code == 0 ) that.tableData = res.data;
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData.roleName = "";
this.getTableData();
}
addFun() {
this.zjKey++;
this.dialogVisible = true;
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(that, `/role/delRoleInfoById/${row.id}`,function(){
that.getTableData();
} )
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
this.dialogVisible = false;
this.formData = {};
}
quanFun(row: any){
let that = this;
that.qxdialogVisible = true;
that.roleID = row.id;
that.roleName = row.roleName;
}
cahngeQuan(param: any) {
let that = this;
(this as any).$axios
.post(`role/addOrEditRoleResources`, param)
.then((res: any) => {
if( res.code == 0 ){
(that as any).$message({
type: "success",
message: "操作成功!"
})
that.qxcloseDialog()
}
});
}
qxcloseDialog() {
this.qxdialogVisible = false;
}
qxconfirm(cs:any){
this.cahngeQuan(cs)
}
created() {
this.getTableData();
}
}
</script>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="editForm.roleName"></el-input>
</el-form-item>
<el-form-item label="角色代码" prop="roleCode">
<el-input v-model="editForm.roleCode"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="editForm.description"></el-input>
</el-form-item>
<el-form-item label="角色状态" prop="roleStatus">
<el-switch
v-model="editForm.roleStatus"
active-value="1"
active-text="已禁用"
inactive-value="0"
inactive-text="已启用"
active-color='#c74343'
></el-switch>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="editForm.sort" type="number"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
components: { }
})
export default class RoleMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editForm!: {
roleStatus:string;
};
@Prop(String) title!: String;
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
roleName: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
roleCode: [{ required: true, trigger: "blur", message: "该项为必填项!" }]
};
@Provide() loadmap:Boolean = false;
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,params = Object.assign({}, that.editForm);
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
(that as any).$axios
.post(`/role/addOrEditRoleInfo`,params )
.then((res: any) => {
if( res.code == 0 ){
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
});
} else {
return false;
}
});
}
created() {
}
}
</script>
<template>
<div class="pomentWrap">
<el-row :gutter="5" type="flex" justify="space-around">
<el-col :xs="12" :sm="12" :md="6" :lg="4" :xl="4">
<div class="topBar">
<el-tree
:data="treeData"
:props="treeProps"
ref="Tree"
node-key="id"
:highlight-current="true"
:default-expanded-keys="[0]"
:default-checked-keys="[]"
@node-click="nodeClick"
>
<template slot-scope="{node, data}">
<span>
<svg class="icon" aria-hidden="true">
<use :xlink:href="'#' + iconArrClass[data.level]" />
</svg>
{{node.label}}
</span>
</template>
</el-tree>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="18" :lg="20" :xl="20">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.userName" placeholder="请输用户名"></el-input>
</el-form-item>
<el-form-item label>
<el-input v-model="searchData.account" placeholder="请输账户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row v-if="treecheckedObj.fullName != undefined && treecheckedObj.id != 0">
<h4 align="center" class="TaletName">{{treecheckedObj.fullName}}</h4>
</el-row>
<el-table :data="tableData.pageData" border style="width:100%;" v-loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="userName" label="用户名"></el-table-column>
<el-table-column prop="account" label="登录账号"></el-table-column>
<el-table-column prop="sex" label="性别">
<template slot-scope="scope">
<font v-if="scope.row.sex == 1"></font>
<font v-if="scope.row.sex == 2"></font>
</template>
</el-table-column>
<el-table-column prop="mobliePhone" label="手机"></el-table-column>
<el-table-column prop="accountStatus" label="账号状态" align="center">
<template slot-scope="scope">
<span
class="dbtn sd qiCr"
@click="setLock(scope.row,'unlock')"
v-if="scope.row.accountStatus == 0"
>
<i class="el-icon-unlock"></i>正常
</span>
<span
class="dbtn sd"
@click="setLock(scope.row,'lock')"
v-if="scope.row.accountStatus == 2"
>
<i class="el-icon-lock"></i>已锁定
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<span class="dbtn" @click="editFun(scope.row)">
<i class="el-icon-edit"></i>修改
</span>
<span class="dbtn dg" @click="delFun(scope.row)">
<i class="el-icon-delete"></i>删除
</span>
<span class="dbtn wr" @click="setRole(scope.row)">
<i class="el-icon-setting"></i>角色
</span>
<span class="dbtn su" @click="setPw(scope.row)">
<i class="el-icon-key"></i>密码
</span>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
</el-col>
</el-row>
<el-dialog
:visible.sync="jsdialogVisible"
title="用户分配角色"
:show-close="false"
:close-on-click-modal="false"
v-if="jsdialogVisible"
>
<el-row>
<el-radio-group v-model="userRole.roleId" v-if="roleData.length > 0">
<el-radio
v-for="(item, index) in roleData"
:key="index"
:label="item.id"
border
>{{ item.roleName }}</el-radio>
</el-radio-group>
<div class="noneTip" v-else><img src="@/assets/404.png" width="50">暂无可用角色!</div>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="danger" round size="small" @click="deluserRole" class="fl">删除用户角色</el-button>
<el-button type="primary" size="small" @click="roleConfirm()" v-if="roleData.length > 0">确定</el-button>
<el-button @click="jsdialogVisible = false" size="small">取消</el-button>
</span>
</el-dialog>
<UserMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editForm="formData"
:checkedObj="treecheckedObj"
:dialoTitle="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData('refresh')"
:key="zjKey"
></UserMgEdit>
</div>
</template>
<style lang="scss" scped>
@import '@/utils/public.scss';
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import UserMgEdit from "./UserMgEdit.vue";
import METHOD from "@/utils/methods"
@Component({
components: { UserMgEdit }
})
export default class UserMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = { account: "", userName: "" };
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
@Provide() jsdialogVisible: Boolean = false;
@Provide() roleData: any = [];
@Provide() userRole: any = {
roleId: ""
};
/*
树 icon:icon-bumenguanli1 icon-bumenqun icon-bumen1 icon-bumen3
*/
@Provide() iconArrClass: any = [
"icon-bumenguanli1",
"icon-bumenqun",
"icon-bumen1",
"icon-bumen3",
"icon-bumen2"
];
@Provide() treeData: any = [
{
id: 0,
fullName: "组织机构",
level: 0,
icon: "icon-yh",
parentIds: "",
childList: []
}
];
@Provide() treeProps: Object = {
children: "childList",
label: "fullName"
};
@Provide() treecheckedObj: any = {};
getTableData() {
let that = this,
param = Object.assign(
{
accountType: '1',
deptId:
that.treecheckedObj.id == 0 ? "" : that.treecheckedObj.id || ""
},
that.PAGE,
that.searchData
);
that.loading = true;
(this as any).$axios.post(`/user/getUserList`, param).then((res: any) => {
that.loading = false;
if( res.code == 0 ) that.tableData = res.data;
});
}
getRoleData() {
let that = this;
(this as any).$axios.get(`/role/getAllRoles`).then((res: any) => {
if( res.code == 0 ) that.roleData = res.data;
});
}
getTreeData() {
let that = this;
(this as any).$axios.get(`/dept/getDeptInfoTree`).then((res: any) => {
if( res.code == 0 ){
that.treeData[0].childList = res.data;
}
});
}
getuserRoleData(uid: string) {
let that = this;
(that as any).$axios
.get(`/user/getUserRolesByUid/${uid}`)
.then((res: any) => {
if( res.code == 0 ) that.userRole.roleId = res.roleId;
else that.userRole.roleId = "";
that.jsdialogVisible = true;
});
}
setRole(row: any) {
let that = this;
that.userRole.userId = row.uid;
that.getuserRoleData(row.uid);
}
deluserRole(){
let that = this;
(that as any).$axios
.get(`/user/deleteUserRolesByRid/${that.userRole.roleId}`)
.then((res: any) => {
if( res.code == 0 ){
(that as any).$message.success("操作成功!");
that.userRole.userId = '';
that.jsdialogVisible = false
}
});
}
roleConfirm() {
let that = this;
(that as any).$axios
.post(`/user/addOrEditUserRolesInfo`, that.userRole)
.then((res: any) => {
if( res.code == 0 ){
(that as any).$message.success("操作成功!");
that.jsdialogVisible = false;
}
});
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = { account: "", userName: "" };
this.getTableData();
}
addFun() {
this.dialogTit = "新增";
this.zjKey++;
if (this.treecheckedObj.id == 0 || this.treecheckedObj.id == undefined) {
(this as any).$message({
message: "请选择所属部门",
type: "warning"
});
} else {
this.dialogVisible = true;
}
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this;
METHOD.deleteFun(
that,
`/dept/delDeptInfoById/${row.id}`,
function() {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
this.dialogVisible = false;
this.formData = {};
}
nodeClick(data: any, node: any, target: any) {
let that = this;
that.treecheckedObj = node.data;
that.getTableData();
}
setLock(row: any, word: any) {
let that = this,
url =
word == "lock"
? "/user/unLockSysUserByUid/"
: "/user/lockSysUserByUid/";
(that as any)
.$confirm(
`确定${word == "lock" ? "解锁" : "锁定"}账号 ${row.account} 吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
(that as any).$axios.get(url + row.uid).then((res: any) => {
if( res.code == 0 ){
(that as any).$message.success("操作成功");
that.getTableData()
}
});
});
}
setPw(row: any) {
let that = this;
(that as any)
.$confirm(`确定重置账号 ${row.account} 的密码为66668888吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
(that as any).$axios
.get(`/user/resetUserPwd/${row.uid}`)
.then((res: any) => {
if( res.code == 0 ) (that as any).$message.success("操作成功");
});
});
}
created() {
let that = this;
that.getTreeData();
that.getTableData();
that.getRoleData();
}
}
</script>
<template>
<div class="wrapper editwrap">
<el-dialog :visible.sync="dialogVisible" :title="dialoTitle" :show-close="false" :close-on-click-modal="false">
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="所属部门" prop="fullName">
<el-input disabled v-model="checkedObj.fullName"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input v-model="editForm.userName"></el-input>
</el-form-item>
<el-form-item label="登录帐号" prop="account">
<el-input v-model="editForm.account" @blur="checkOrgAccount()"></el-input>
<span class="colorM" v-show="checkRule.account == 'pass'">
<i class="el-icon el-icon-success"></i> 验证通过!
</span>
<span class="colorR" v-show="checkRule.account && checkRule.account != 'pass'">
<i class="el-icon el-icon-error"></i>
{{checkRule.accountTxt}}
</span>
</el-form-item>
<el-form-item label="默认密码" prop="accountPwd" v-if="dialoTitle == '新增'">
<el-input v-model="editForm.accountPwd" disabled></el-input>
</el-form-item>
<el-form-item label="微信ID" prop="openId">
<el-input v-model="editForm.openId"></el-input>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<el-select v-model="editForm.avatar" placeholder="请选择">
<el-option label="IT男孩" value="1"></el-option>
<el-option label="白领青年" value="2"></el-option>
<el-option label="可爱女孩" value="3"></el-option>
<el-option label="黄发男孩" value="4"></el-option>
<el-option label="红发女人" value="5"></el-option>
</el-select>
&nbsp;<img :src="require(`@/assets/avatar${editForm.avatar || '1'}.png`)" alt="" height="40" style="vertical-align: bottom;">
</el-form-item>
<el-form-item label="微信昵称" prop="wxNickName">
<el-input v-model="editForm.wxNickName"></el-input>
</el-form-item>
<el-form-item label="生日" prop="birthday">
<el-date-picker type="date" v-model="editForm.birthday" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="editForm.sex">
<el-radio label="1"></el-radio>
<el-radio label="2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="editForm.age" type="number"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobliePhone">
<el-input v-model="editForm.mobliePhone"></el-input>
</el-form-item>
<el-form-item label="座机" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
<!-- <el-form-item label="帐号状态" prop="accountStatus">
<el-radio-group v-model="editForm.accountStatus">
<el-radio label="0">正常</el-radio>
<el-radio label="1">删除</el-radio>
<el-radio label="2">锁定</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="备注" prop="remarks">
<el-input v-model="editForm.remarks"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')" v-if="checkRule.account == 'pass'">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import {
Component,
Vue,
Provide,
Prop,
Watch
} from "vue-property-decorator";
import {
State,
Getter,
Mutation,
Action
} from "vuex-class";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class UserMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(Object) editForm!: {
parentIds: number;
account: string
accountPwd: string
};
@Prop(String) dialoTitle!: String;
@Prop(Object) checkedObj!: {
id: string;
level: string;
parentIds: string;
}; //选中节点
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
account: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}],
// accountPwd: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
userName: [{
required: true,
trigger: "blur",
message: "该项为必填项!"
}],
email: [{
type: 'email',
message: '请输入正确的邮箱',
trigger: 'change'
}],
mobliePhone: [{
message: '请输入正确的手机号',
pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
}, ],
phone: [{
pattern: /^[0-9]+$/,
message: '请输入正确的座机号'
}],
};
@Provide() loadmap: Boolean = false;
@Provide() checkRule: any = {
account: "",
accountTxt: ""
};
dialogcancelFun() {
this.dialogTableVisible = false;
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,
params: any = Object.assign({}, that.editForm);
let ids = that.checkedObj.parentIds;
if (that.dialoTitle == '新增') {
params.deptId = Number(that.checkedObj.id)
}
// console.log(params)
// return
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
(that as any).$axios
.post(`/user/addorEditUserInfo`, params)
.then((res: any) => {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
});
} else {
return false;
}
});
}
checkOrgAccount() {
let that = this;
if (that.editForm.account) {
METHOD.axiosGet(
that,
`/reg/checkUserAccount/${that.editForm.account}`,
function (res: any) {
if (res.code == 0) that.checkRule.account = "pass";
else {
that.checkRule.account = "notpass";
that.checkRule.accountTxt = res.msg;
}
}
);
}
}
created() {
let that = this;
that.editForm.accountPwd = '66668888'
}
}
</script>
<template>
<div class="pomentWrap">
<el-row :gutter="5" type="flex" justify="space-around">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4">
<el-row class="topBar">
<el-col>
<el-form :inline="true">
<el-form-item>
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增子级
</el-button>
</el-form-item>
<el-form-item>
<el-button plain type="danger" @click="delFun()">
<i class="el-icon-delete"></i> 删除
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-tree
:data="treeData"
:props="treeProps"
ref="Tree"
node-key="id"
:highlight-current="true"
default-expand-all
@node-click="nodeClick"
>
<template slot-scope="{node, data}">
<span>
<svg class="icon" aria-hidden="true">
<use :xlink:href="'#' + iconArrClass[Number(data.type) - 1]" />
</svg>
{{node.label}}
</span>
</template>
</el-tree>
</el-col>
<el-col :xs="12" :sm="12" :md="20" :lg="18" :xl="20" class="topBar">
<div class="formBoxK">
<div class="tit">
<i class="el-icon el-icon-edit"></i>
字典{{title}}
</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="5em">
<el-form-item label="字典码" prop="type">
<el-radio-group v-model="editForm.type">
<el-radio :label="'1'">目录节点</el-radio>
<el-radio :label="'2'">数据字典值</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="代码" prop="code">
<el-input v-model="editForm.code"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="editForm.description" type="textarea"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="editForm.remarks" type="textarea"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="editForm.sort" type="number"></el-input>
</el-form-item>
<div class="cent">
<el-button type="success" @click="confirmFun('editForm')" v-if="title != ''">确定{{title}}</el-button>
<el-button @click="cancelAdd()" v-if="title == '新增'">取消新增</el-button>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {}
})
export default class SystemCode extends Vue {
//编辑
@Provide() editForm: any = {};
@Provide() rules: any = {
name: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
code: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
type: [{ required: true, trigger: "blur", message: "该项为必填项!" }]
};
@Provide() title: string = "";
/*
*/
@Provide() iconArrClass: any = ["icon-bumenqun", "icon-bumen1"];
@Provide() treeData: any = [];
@Provide() treeProps: Object = {
children: "childList",
label: "name"
};
@Provide() treeCheckedObj: any = { id: "" };
getTreeData() {
let that = this;
METHOD.axiosGet(that, `/systemConfig/getSystemCodeTree`, function(
res: any
) {
if (res.code == 0) {
let arr = [];
arr.push(res.data);
that.treeData = [...arr];
}
});
}
addFun() {
let that = this;
if (!that.treeCheckedObj.id) {
that.$message.warning("请选择父级节点!");
return;
}
if (that.treeCheckedObj.type == 2) {
that.$message.warning("类型“数据字典值”下面无法新增子级!");
return;
}
that.title = "新增";
that.editForm = {};
that.editForm.parentId = that.treeCheckedObj.id;
}
delFun() {
let that = this;
if (!that.treeCheckedObj.id) {
that.$message.warning("请选择要删除的节点!");
return;
}
if ( that.treeCheckedObj.id == 0 ) {
that.$message.warning("顶级节点不可删除!");
return;
}
METHOD.deleteFun(
that,
`/systemConfig/delSystemCodeById/${that.treeCheckedObj.id}`,
function() {
that.getTreeData();
that.initPage();
}
);
}
nodeClick(data: any, node: any, target: any) {
let that = this;
that.treeCheckedObj = node.data;
that.editForm = Object.assign({}, that.treeCheckedObj);
that.title = "编辑";
}
confirmFun(formName: any) {
let that = this,
param = Object.assign({}, that.editForm);
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/systemConfig/addOrEditSystemCode`,
param,
function(res: any) {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.getTreeData(); //刷新树
that.initPage();
}
}
);
} else {
return false;
}
});
}
initPage() {//页面初始状态
let that = this;
that.editForm = {};
that.title = "";
that.treeCheckedObj = [];
}
cancelAdd() {
this.title = "编辑";
this.editForm = Object.assign({}, this.treeCheckedObj);
}
created() {
let that = this;
that.getTreeData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
\ No newline at end of file
<template>
<div class="gis">
<div id="mapbox">
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</div>
</dv-border-box-10>
</div>
<!-- <div class="markBox">
<ul>
<li><img width="10px" src="@/assets/mark/markqy.png" /> 企业图例</li>
</ul>
</div> -->
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import {
Icon
} from "element-ui";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
@Component({
components: {
DrawTool,
Search
},
})
export default class GIS extends Vue {
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
@Provide() mapOption = {
plugin: [{
pName: "MapType",
defaultType: 1,
},
{
pName: "ToolBar",
},
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() searchData: any = {
type: "0",
};
/* 地图 */
@Provide() markers: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() currentWindow: any = "";
// @Provide() searchOption: any = {
// city: "石家庄",
// citylimit: true,
// };
@Provide() markersB: any = [];
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
getMapData() {
let that = this;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`, {
page: 1,
size: 1000,
accountStatus: "0"
},
function (res: any) {
if (res.code == 0 && res.data.pageData.length > 0) {
that.mapData = res.data.pageData;
let latSum = 0;
let lngSum = 0;
that.mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let center = [
lngSum / that.mapData.length,
latSum / that.mapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
);
}
getWindowInfo(enterpriseId: string) {
let that = this;
(window as any).checkDetail = function (param: string) {
that.$router.push({
path: "/EnDetail",
query: {
enterpriseId: param
}
});
};
METHOD.axiosGet(
that,
`/enterpriseInfo/getMapEnterpriseInfoById/${enterpriseId}`,
function (res: any) {
if (res.code == 0) {
let obj = res.data.enterpriseInfo,
zdnum = res.data.bigDangerNum,
wxnum = res.data.dangerNum,
html =
`<div class="windowDg"><h3>企业详细信息</h3>` +
`<p><span>企业名称:</span>${obj.unitName}</p>` +
`<p><span>统一社会信用代码:</span>${obj.orgCode}</p>` +
`<p><span>企业法人:</span>${obj.legalPerson}</p>` +
`<p><span>注册地址:</span>${obj.regAddress}</p>` +
`<p><span>法人邮箱:</span>${obj.legalPersonEmail}</p>` +
`<p><span>经营地址:</span>${obj.runAddress}</p>` +
`<p><span>法人手机:</span>${obj.legalPersonPhone}</p>` +
`<p><span>管理员姓名:</span>${obj.userName}</p>` +
`<p><span>管理员手机:</span>${obj.mobliePhone}</p>` +
`<p><span>管理员邮箱:</span>${obj.email}</p>` +
`<div class="wxyWrap">` +
`<span class="itm">${wxnum[0].gradeName}<br><b>${wxnum[0].num}个</b></span>` +
`<span class="itm">${wxnum[1].gradeName}<br><b>${wxnum[1].num}个</b></span>` +
`<span class="itm">${wxnum[2].gradeName}<br><b>${wxnum[2].num}个</b></span>` +
`<span class="itm">${wxnum[3].gradeName}<br><b>${wxnum[3].num}个</b></span>` +
`<span class="itm">重大危险源<br>${zdnum}个</span>` +
`</div>` +
`<div class="cent margT10"><button class="el-button el-button--small" onclick="checkDetail('${obj.enterpriseId}')">查看企业详情</button></div>` +
`</div>`;
that.Mutil.addPopup(html, obj.enterpriseId, obj.longitude, obj.latitude)
}
}
);
}
addMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/markqy.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'qiye',
obj.unitName,
icon,
[obj.longitude, obj.latitude],
0.4,
obj.enterpriseId
);
}
change(v: any) {
let that = this;
that.mapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers[index].visible = true;
} else {
that.markers[index].visible = false;
}
});
}
/* 搜索 */
onSearchResult(pois: any) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach((poi: any) => {
let {
lng,
lat
} = poi;
lngSum += lng;
latSum += lat;
this.markersB.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
this.mapOption.center = [center.lng, center.lat];
}
}
getPopcon(qyid: any) {
let that = this;
that.getWindowInfo(qyid);
}
created() {
this.getMapData();
}
mounted() {
let that = this;
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
})
this.getStatiData()
}
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res: any) {
if (res.code == 0) {
that.tjNumberObj = res.data;
let obj = res.data,
arr: any = [];
arr.push({
name: "预警处理中",
value: Number(obj.alarmingNum),
});
arr.push({
name: "预警已处理",
value: Number(obj.handleAlarmNum),
});
console.log(that.tjNumberObj,"tttttttttt");
// that.$nextTick(() => {
// that.$set(that.config, "data", arr);
// });
}
}
);
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#mapbox {
width: 100%;
height: 100%;
position: relative;
}
.gis {
position: relative;
overflow: hidden;
}
.markBox {
width: 100%;
overflow: hidden;
position: absolute;
text-align: center;
// bottom: 20px;
left: 4px;
// background: rgba(255, 255, 255, 0.7);
// border: #c1c1c1 1px solid;
z-index: 9;
ul {
display: block;
padding: 10px;
margin: 0;
border-radius: 3px;
.ul-div{
li {
float: left;
padding: 5px;
display: block;
overflow: hidden;
margin: 2px 0;
color:#0000FF;
font-size: 20px;
img {
width: 25px;
vertical-align: middle;
}
}
}
}
}
.show-box {
position: absolute !important;
z-index: 9;
// background: rgba(204, 204, 204, 0.7);
top: 4px;
right: 2px;
}
.search-box {
position: absolute !important;
top: 14px;
left: 80px;
}
</style>
<template>
<div class="tongji">
<dv-border-box-8>
<div class="center-cmp">
<div class="cc-header">
<dv-decoration-1 style="width:200px;height:50px;" />
<div style="text-align: center; padding-top: 10px;">
企业端数据统计汇总
<br />
<small>统计时间:{{tjNumberObj.statisticsTime}}</small>
</div>
<dv-decoration-1 style="width:200px;height:50px;" />
</div>
<div class="cc-details">
<div class="deItem ce">
<div>危险源总数</div>
<div class="card" v-for="(i, index) in jktotalArr" :key="index">{{i}}</div>
</div>
</div>
<div class="cc-main-container">
<div class="ccmc-left">
<div class="station-info">
预警处理中数量
<span>{{tjNumberObj.alarmingNum}}</span>
</div>
<div class="station-info">
预警已处理数量
<span>{{tjNumberObj.handleAlarmNum}}</span>
</div>
</div>
<dv-active-ring-chart class="ccmc-middle" :config="config" v-if="config.data.length > 0"/>
<div class="ccmc-right">
<div class="station-info">
<span>{{tjNumberObj.alarmTotal}}</span>预警总数
</div>
<div class="station-info">
<span>{{tjNumberObj.cameraNum}}</span>视频监控数量
</div>
</div>
<div class="label-tag" v-if="config.data.length > 0">
<div class="label-item" v-for="(item, inde) in config.data" :key="inde">
{{ item.name }}
<div :style="`background-color: ${config.color[inde]};`"></div>
</div>
</div>
</div>
</div>
</dv-border-box-8>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {},
})
export default class statistics extends Vue {
@Provide() config: any = {
data: [
],
color: ["#469f4b", "#ffc530"], //"#fff", "#ffc530", "#469f4b"
lineWidth: 30,
radius: "55%",
activeRadius: "60%",
};
@Provide() labelConfig: any = {
data: ["企业预警处理中数量", "企业预警已处理数量"],
};
@Provide() tjNumberObj: any = {};
@Provide() jktotalArr: any = [];
getStatiData() {
let that = this;
METHOD.axiosGet(
that,
`/dataStatistics/enterpriseDataStatistics/${METHOD.enterpriseId}`,
function (res: any) {
if (res.code == 0) {
that.tjNumberObj = res.data;
let obj = res.data,
arr: any = [];
arr.push({
name: "预警处理中",
value: obj.alarmingNum,
});
arr.push({
name: "预警已处理",
value: obj.handleAlarmNum,
});
let ar = obj.dangerNum.toString().split("");
that.jktotalArr = [...ar];
that.$nextTick(() => {
that.$set(that.config, "data", arr);
});
}
}
);
}
created() {
this.getStatiData();
}
}
</script>
<style lang="scss">
.tongji {
background: #011250;
color: #ffffff;
}
.center-cmp {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
.cc-header {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30px;
.dv-decoration-1 svg{
left: auto;
right: auto;
}
small {
font-size: 14px;
}
}
.cc-details {
height: 120px;
display: flex;
justify-content: space-around;
font-size: 32px;
align-items: center;
.deItem{
&.lr{
font-size: 20px;
text-align: center;
b{
color:#ffff00;
}
}
&.ce{
> div{
display: inline-block;
line-height: 70px;
}
}
}
.card {
background-color: rgba(4, 49, 128, 0.6);
color: #08e5ff;
height: 70px;
width: 70px;
font-size: 45px;
font-weight: bold;
line-height: 70px;
text-align: center;
margin: 10px;
}
}
.cc-main-container {
position: relative;
flex: 1;
display: flex;
.ccmc-middle {
width: 50%;
height: 90%;
.active-ring-name {
font-size: 20px !important;
}
}
.ccmc-left,
.ccmc-right {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 24px;
span {
font-size: 40px;
font-weight: bold;
}
.station-info {
height: 80px;
display: flex;
align-items: center;
}
}
.ccmc-left {
align-items: flex-end;
span {
margin-left: 20px;
}
}
.ccmc-right {
align-items: flex-start;
span {
margin-right: 20px;
}
}
}
.label-tag {
position: absolute;
width: 500px;
height: 30px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
}
.label-tag {
display: flex;
justify-content: center;
align-items: center;
.label-item {
margin: 5px;
font-size: 15px;
display: flex;
align-items: center;
> div {
width: 12px;
height: 12px;
margin-left: 5px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="tongji">
<dv-border-box-8>
<div class="center-cmp">
<div class="cc-header">
<dv-decoration-1 style="width:200px;height:50px;" />
<div style="text-align: center; padding-top: 10px;">
政府端数据统计汇总
<br />
<small>统计时间:{{tjNumberObj.statisticsTime}}</small>
</div>
<dv-decoration-1 style="width:200px;height:50px;" />
</div>
<div class="cc-details">
<div class="deItem lr">
<div class="txt">注册企业总数</div>
<b>{{tjNumberObj.enterpriseRegNum}}</b>
</div>
<div class="deItem ce">
<div>危险源总数</div>
<div class="card" v-for="(i, index) in jktotalArr" :key="index">{{i}}</div>
</div>
<div class="deItem lr">
<div class="txt">待审核企业数</div>
<b>{{tjNumberObj.enterpriseCheckIngNum}}</b>
</div>
</div>
<div class="cc-main-container">
<div class="ccmc-left">
<div class="station-info">
预警处理中数量
<span>{{tjNumberObj.alarmingNum}}</span>
</div>
<div class="station-info">
预警已处理数量
<span>{{tjNumberObj.handleAlarmNum}}</span>
</div>
</div>
<dv-active-ring-chart class="ccmc-middle" :config="config" v-if="config.data.length > 0"/>
<div class="ccmc-right">
<div class="station-info">
<span>{{tjNumberObj.alarmTotal}}</span>预警总数
</div>
<div class="station-info">
<span>{{tjNumberObj.cameraNum}}</span>视频监控数量
</div>
</div>
<div class="label-tag" v-if="config.data.length > 0">
<div class="label-item" v-for="(item, inde) in config.data" :key="inde">
{{ item.name }}
<div :style="`background-color: ${config.color[inde]};`"></div>
</div>
</div>
</div>
</div>
</dv-border-box-8>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: {},
})
export default class statistics extends Vue {
@Provide() config: any = {
data: [],
color: ["#00baff", "#3de7c9"], //"#fff", "#ffc530", "#469f4b"
lineWidth: 30,
radius: "55%",
activeRadius: "60%",
};
@Provide() labelConfig: any = {
data: ["企业预警处理中数量", "企业预警已处理数量"],
};
@Provide() tjNumberObj: any = {};
@Provide() jktotalArr: any = [];
@Provide() key:number = 0;
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res: any) {
if (res.code == 0) {
that.tjNumberObj = res.data;
let obj = res.data,
arr: any = [];
arr.push({
name: "预警处理中",
value: Number(obj.alarmingNum),
});
arr.push({
name: "预警已处理",
value: Number(obj.handleAlarmNum),
});
let ar = obj.dangerNum.toString().split("");
that.jktotalArr = [...ar];
console.log(that.jktotalArr);
that.$nextTick(() => {
that.$set(that.config, "data", arr);
});
}
}
);
}
created() {
this.getStatiData();
}
}
</script>
<style lang="scss">
.tongji {
background: #011250;
color: #ffffff;
}
.center-cmp {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
.cc-header {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30px;
.dv-decoration-1 svg {
left: auto;
right: auto;
}
small {
font-size: 14px;
}
}
.cc-details {
height: 120px;
display: flex;
justify-content: space-around;
font-size: 32px;
align-items: center;
.deItem {
&.lr {
font-size: 20px;
text-align: center;
b {
color: #ffff00;
}
}
&.ce {
> div {
display: inline-block;
line-height: 70px;
}
}
}
.card {
background-color: rgba(4, 49, 128, 0.6);
color: #08e5ff;
height: 70px;
width: 70px;
font-size: 45px;
font-weight: bold;
line-height: 70px;
text-align: center;
margin: 10px;
}
}
.cc-main-container {
position: relative;
flex: 1;
display: flex;
.ccmc-middle {
width: 50%;
height: 90%;
.active-ring-name {
font-size: 20px !important;
}
}
.ccmc-left,
.ccmc-right {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 24px;
span {
font-size: 40px;
font-weight: bold;
}
.station-info {
height: 80px;
display: flex;
align-items: center;
}
}
.ccmc-left {
align-items: flex-end;
span {
margin-left: 20px;
}
}
.ccmc-right {
align-items: flex-start;
span {
margin-right: 20px;
}
}
}
.label-tag {
position: absolute;
width: 500px;
height: 30px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
}
.label-tag {
display: flex;
justify-content: center;
align-items: center;
.label-item {
margin: 5px;
font-size: 15px;
display: flex;
align-items: center;
> div {
width: 12px;
height: 12px;
margin-left: 5px;
}
}
}
</style>
\ No newline at end of file
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.js",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"//, "src/utils/mapUtil.js", "src/utils/iceEditor-min.js"
],
"exclude": [
"node_modules"
]
}
module.exports = {
configureWebpack: {
externals: {
},
},
}
\ No newline at end of file
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