Commit a298ff55 authored by yaqizhang's avatar yaqizhang

Merge branch 'master' of ssh://111.61.77.35:15/lizhichao/whp-xl into master

parents f3d5a835 a4fb5136
...@@ -12218,6 +12218,11 @@ ...@@ -12218,6 +12218,11 @@
"vue-demi": "^0.7.4" "vue-demi": "^0.7.4"
} }
}, },
"vue-ellipse-progress": {
"version": "1.3.0",
"resolved": "https://registry.nlark.com/vue-ellipse-progress/download/vue-ellipse-progress-1.3.0.tgz",
"integrity": "sha1-2UJs6s9XUVC+IjhD2BZQp8s5Iis="
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"vue-amap": "^0.5.10", "vue-amap": "^0.5.10",
"vue-class-component": "^7.2.2", "vue-class-component": "^7.2.2",
"vue-echarts": "^6.0.0-rc.5", "vue-echarts": "^6.0.0-rc.5",
"vue-ellipse-progress": "^1.3.0",
"vue-property-decorator": "^8.3.0", "vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
"vuex": "^3.1.2", "vuex": "^3.1.2",
......
import "ol/ol.css"; import "ol/ol.css";
import { import {
Map, Map,
View View
} from "ol"; } from "ol";
import { import {
OverviewMap, OverviewMap,
defaults defaults
} from "ol/control"; } from "ol/control";
import TileLayer from "ol/layer/Tile"; import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ"; import XYZ from "ol/source/XYZ";
...@@ -29,299 +29,321 @@ import { toSize } from 'ol/size'; ...@@ -29,299 +29,321 @@ import { toSize } from 'ol/size';
import axios from "axios"; import axios from "axios";
export default class Mutil { export default class Mutil {
constructor(divId, option = {}) { constructor(divId, option = {}) {
this.divId = divId; this.divId = divId;
this.option = option; this.option = option;
this.MAP = this.initMap() this.MAP = this.initMap()
} }
//初始化地图 //初始化地图
initMap() { initMap() {
/* 天地图 */ /* 天地图 */
let MAP,tianSlA = new TileLayer({ let MAP,tianSlA = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
// url: // 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", // "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", //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6" url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6"
}), }),
visible: true, visible: true,
name: "天地图矢量底图影像", name: "天地图矢量底图影像",
}); });
let tianSlB = new TileLayer({ let tianSlB = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
}), }),
visible: false, visible: false,
name: "天地图标注(不含路网)", name: "天地图标注(不含路网)",
}); });
let tianSlC = new TileLayer({ let tianSlC = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}", url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
}), }),
visible: true, visible: true,
name: "天地图标注", name: "天地图标注",
}); });
let that = this; let that = this;
const ShiJiaZhuang = fromLonLat([114.514793, 38.042225]); const ShiJiaZhuang = fromLonLat([114.514793, 38.042225]);
const BeiJing = fromLonLat([116.322056, 39.89491]); const BeiJing = fromLonLat([116.322056, 39.89491]);
const VIEW = new View({ const VIEW = new View({
center: ShiJiaZhuang, center: ShiJiaZhuang,
zoom: 12, zoom: 12,
maxZoom: 18, maxZoom: 18,
}); });
/* /*
鹰眼 鹰眼
*/ */
// const overiewControl = new OverviewMap({ // const overiewControl = new OverviewMap({
// className: "ol-overviewmap ol-custom-overviewmap", // className: "ol-overviewmap ol-custom-overviewmap",
// layers: [tianSlC, tianSlB, tianSlA], // layers: [tianSlC, tianSlB, tianSlA],
// collapseLabel: "\u00BB", // collapseLabel: "\u00BB",
// label: "\u00AB", // label: "\u00AB",
// collapsed: false, // collapsed: false,
// }); // });
MAP = new Map({ MAP = new Map({
projection: "EPSG:4326", projection: "EPSG:4326",
target: that.divId, target: that.divId,
layers: [], layers: [],
view: VIEW, view: VIEW,
}); });
MAP.setLayerGroup( MAP.setLayerGroup(
new LayerGroup({ new LayerGroup({
id: 'mapGroup', id: 'mapGroup',
layers: [tianSlA, tianSlB, tianSlC], layers: [tianSlA, tianSlB, tianSlC],
}) })
); );
MAP.on("pointermove", function (evt) { MAP.on("pointermove", function (evt) {
MAP.getTargetElement().style.cursor = that.MAP.hasFeatureAtPixel( MAP.getTargetElement().style.cursor = that.MAP.hasFeatureAtPixel(
evt.pixel evt.pixel
) ? ) ?
"pointer" : "pointer" :
""; "";
}); });
return MAP return MAP
} }
//设置地图view //设置地图view
setViewF(option) { setViewF(option) {
let that = this, view = that.MAP.getView(); let that = this, view = that.MAP.getView();
if (option.center) view.setCenter(fromLonLat(option.center)); if (option.center) view.setCenter(fromLonLat(option.center));
if (option.zoom) view.setZoom(option.zoom); if (option.zoom) view.setZoom(option.zoom);
} }
/*标注到地图 /*标注到地图
* type为是标注类型 在设备标注中为标注类型- layClassName * type为是标注类型 在设备标注中为标注类型- layClassName
* scale, id可以为空 * scale, id可以为空
*/ */
addMarkerToMap(type, name, imgageUrl, lnglat, scale, id) { addMarkerToMap(type, name, imgageUrl, lnglat, scale, id) {
let that = this, feature = new Feature({ let that = this, feature = new Feature({
geometry: new Point(fromLonLat(lnglat)), geometry: new Point(fromLonLat(lnglat)),
}); });
let style = new Style({ let style = new Style({
image: new Icon({ image: new Icon({
anchor: [.5, 1], anchor: [.5, 1],
src: imgageUrl, src: imgageUrl,
scale: scale ? scale : 1, scale: scale ? scale : 1,
}), }),
text: new Text({ text: new Text({
textAlign: "center", //位置 textAlign: "center", //位置
textBaseline: "bottom", //基准线 textBaseline: "bottom", //基准线
offsetY: -44, offsetY: -44,
font: "normal 14px 微软雅黑", //文字样式 font: "normal 14px 微软雅黑", //文字样式
text: name, //文本内容 text: name, //文本内容
placement: "point", placement: "point",
fill: new Fill({ fill: new Fill({
color: "#efeb54", color: "#efeb54",
}), }),
backgroundFill: new Fill({ backgroundFill: new Fill({
color: "#5f636a", color: "#5f636a",
}), }),
padding: [2, 2, 2, 2], padding: [2, 2, 2, 2],
}), }),
}); });
let iconFeatureArr = []; let iconFeatureArr = [];
feature.setStyle(style); feature.setStyle(style);
if (id) feature.set('did', id); if (id) feature.set('did', id);
iconFeatureArr.push(feature); iconFeatureArr.push(feature);
var vectorSource = new VectorSource({ var vectorSource = new VectorSource({
features: iconFeatureArr, features: iconFeatureArr,
}); });
var vectorLayer = new VectorLayer({ var vectorLayer = new VectorLayer({
source: vectorSource, source: vectorSource,
}); });
vectorLayer.set('layClassName', type) vectorLayer.set('layClassName', type)
if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) { if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) {
vectorLayer.set('layClassMark', 'Maker'); vectorLayer.set('layClassMark', 'Maker');
if (id) vectorLayer.set('did', id); if (id) vectorLayer.set('did', id);
} }
that.MAP.addLayer(vectorLayer) that.MAP.addLayer(vectorLayer)
} }
/* /*
*获取layer根据-layClassName 属性移除 *获取layer根据-layClassName 属性移除
*/ */
getLayerByClass( ClassName ){ getLayerByClass( ClassName ){
let that = this, layerarr = that.MAP.getLayers().getArray(), let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == ClassName); formerLayer = layerarr.filter((e) => e.get("layClassName") == ClassName);
return formerLayer return formerLayer
} }
/* /*
*移除某类型标注 根据-layClassName 属性移除 *移除某类型标注 根据-layClassName 属性移除
*/ */
removeSearchm(type) { removeSearchm(type) {
let that = this, layerarr = that.MAP.getLayers().getArray(), let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == type); formerLayer = layerarr.filter((e) => e.get("layClassName") == type);
if (formerLayer) { if (formerLayer) {
formerLayer.forEach((ele) => { formerLayer.forEach((ele) => {
that.MAP.removeLayer(ele); that.MAP.removeLayer(ele);
}); });
} }
} }
//隐藏显示某类型标注 type:Boolean 是否显示 //隐藏显示某类型标注 type:Boolean 是否显示
visibleMarks(type, datatype) { visibleMarks(type, datatype) {
let that = this, layerarr = that.MAP.getLayers().getArray(), let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype); formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype);
if (formerLayer) { if (formerLayer) {
formerLayer.forEach((ele) => { formerLayer.forEach((ele) => {
ele.setVisible(type) ele.setVisible(type)
}); });
} }
} }
//增加标注弹窗 //增加标注弹窗
addPopup(popConHtml, id, longitude, latitude) { addPopup(popConHtml, id, longitude, latitude) {
let that = this; let that = this;
let newDiv = document.createElement('div'); let newDiv = document.createElement('div');
newDiv.setAttribute('id', `popup${id}`); newDiv.setAttribute('id', `popup${id}`);
newDiv.setAttribute('class', `popup`); newDiv.setAttribute('class', `popup`);
newDiv.innerHTML = `<div class="pop-con"></div>${popConHtml}<div class="pop-close" id="pop-close${id}" data-id="${id}">×</div>` 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'); let mapdiv = document.getElementById('mapbox');
mapdiv.appendChild(newDiv); mapdiv.appendChild(newDiv);
let hei = newDiv.offsetHeight, kuan = newDiv.offsetWidth; let hei = newDiv.offsetHeight, kuan = newDiv.offsetWidth;
let overlay = new Overlay({ let overlay = new Overlay({
id: id, id: id,
element: document.getElementById(`popup${id}`), element: document.getElementById(`popup${id}`),
autoPan: true, autoPan: true,
offset: [- (kuan / 2 + 10), -(hei + 50)], offset: [- (kuan / 2 + 10), -(hei + 50)],
position: fromLonLat([longitude, latitude]), position: fromLonLat([longitude, latitude]),
autoPanAnimation: { autoPanAnimation: {
duration: 250, duration: 250,
}, },
}) })
that.MAP.addOverlay(overlay); that.MAP.addOverlay(overlay);
document.getElementById(`pop-close${id}`).onclick = function () { document.getElementById(`pop-close${id}`).onclick = function () {
overlay.setPosition(undefined) overlay.setPosition(undefined)
} }
} }
mapSelectBind(callbcak) {//地图绑定选中feature事件 mapSelectBind(callbcak) {//地图绑定选中feature事件
let se = new Select({ let se = new Select({
style: null, style: null,
hitTolerance: 0, hitTolerance: 0,
multi: false, multi: false,
}); });
se.on("select", function (evt) { se.on("select", function (evt) {
if (evt.selected.length > 0) { if (evt.selected.length > 0) {
callbcak( evt ) callbcak( evt )
} }
}) })
this.MAP.addInteraction(se) this.MAP.addInteraction(se)
} }
/* /*
*绘制多边形 callbcak-drawend触发事件 mapView:Object *绘制多边形 callbcak-drawend触发事件 mapView:Object
*/ */
drawPloygon(mapView, callbcak) { drawPloygon(mapView, callbcak) {
let that = this; let that = this;
let obj = { let obj = {
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'MultiPolygon', type: 'MultiPolygon',
coordinates: mapView ? mapView.polygoncoorArr : null coordinates: mapView ? mapView.polygoncoorArr : null
} }
} }
let source = mapView ? new VectorSource({ wrapX: false, features: new GeoJSON().readFeatures(obj) }) : new VectorSource({ wrapX: false }); let source = mapView ? new VectorSource({ wrapX: false, features: new GeoJSON().readFeatures(obj) }) : new VectorSource({ wrapX: false });
let vector = new VectorLayer({ let vector = new VectorLayer({
source: source, source: source,
style: new Style({ style: new Style({
fill: new Fill({ fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)' color: 'rgba(212, 220, 29, 0.1)'
}), }),
stroke: new Stroke({ stroke: new Stroke({
color: '#ec0d0d', color: '#ec0d0d',
width: 2 width: 2
}) })
}) })
}); });
vector.set('layClassName', 'boundary') vector.set('layClassName', 'boundary')
//已有图形填充到地图 //已有图形填充到地图
if (mapView) { if (mapView) {
let view = that.MAP.getView(); let view = that.MAP.getView();
view.setCenter(mapView.center); view.setCenter(mapView.center);
view.setZoom(mapView.zoom); view.setZoom(mapView.zoom);
that.MAP.addLayer(vector) that.MAP.addLayer(vector)
return return
} }
//绘制 //绘制
let drawPoly = new Draw({ let drawPoly = new Draw({
source: source, source: source,
type: 'Polygon' type: 'Polygon'
}), }),
drawPoint = new Draw({ drawPoint = new Draw({
source: source, source: source,
type: 'Point', type: 'Point',
style: new Style({ style: new Style({
stroke: new Stroke({ stroke: new Stroke({
color: '#08d527', color: '#08d527',
width: 2 width: 2
}) })
}) })
}); });
that.MAP.addLayer(vector) that.MAP.addLayer(vector)
that.MAP.addInteraction(drawPoly) that.MAP.addInteraction(drawPoly)
drawPoly.on('drawend', function (evt) { drawPoly.on('drawend', function (evt) {
callbcak(evt.feature, evt.target) callbcak(evt.feature, evt.target)
that.MAP.removeInteraction(drawPoly); that.MAP.removeInteraction(drawPoly);
}) })
} }
tianSlA() { tianSlA() {
this.MAP.getLayers().getArray()[0].setVisible(true); this.MAP.getLayers().getArray()[0].setVisible(true);
this.MAP.getLayers().getArray()[1].setVisible(false); this.MAP.getLayers().getArray()[1].setVisible(false);
this.MAP.getLayers().getArray()[2].setVisible(true); this.MAP.getLayers().getArray()[2].setVisible(true);
}; };
tianSlB() { tianSlB() {
this.MAP.getLayers().getArray()[0].setVisible(false); this.MAP.getLayers().getArray()[0].setVisible(false);
this.MAP.getLayers().getArray()[1].setVisible(true); this.MAP.getLayers().getArray()[1].setVisible(true);
this.MAP.getLayers().getArray()[2].setVisible(false); this.MAP.getLayers().getArray()[2].setVisible(false);
}; };
tianSlC() { tianSlC() {
this.MAP.getLayers().getArray()[0].setVisible(false); this.MAP.getLayers().getArray()[0].setVisible(false);
this.MAP.getLayers().getArray()[1].setVisible(false); this.MAP.getLayers().getArray()[1].setVisible(false);
this.MAP.getLayers().getArray()[2].setVisible(true); this.MAP.getLayers().getArray()[2].setVisible(true);
} }
drawArea(json) { drawArea(json) {
let pointsz = []; //存储点坐标 let pointsz = []; //存储点坐标
let points = json.polyline.split(";"); //获取点坐标 let points = json.polyline.split(";"); //获取点坐标
//对获取的点坐标数据进行处理,重构,得到我们需要的数据结构 //对获取的点坐标数据进行处理,重构,得到我们需要的数据结构
for (let i = 0; i < points.length; i++) { for (let i = 0; i < points.length; i++) {
let region = points[i]; //单个面 let region = points[i]; //单个面
//let pointArr = region.split(','); let pArr = region.split(',');
//let p = pointArr[j]; let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857
let pArr = region.split(','); //let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857 pointsz.push(pos) //将转化格式后的点坐标存储起来
let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标 };
pointsz.push(pArr) //将转化格式后的点坐标存储起来 //自己造的地图数据(GeoJSON数据)
}; let geojsonObject = this.structureGeojson(pointsz);
//自己造的地图数据(GeoJSON数据) let vectorSource = new VectorSource({ //提供矢量图层的数据
let geojsonObject = { features: (new GeoJSON().readFeatures(geojsonObject))
'type': 'FeatureCollection', //要素集合 });
'crs': { let vectorLayer = new VectorLayer({
'type': 'name', source: vectorSource, //来源
'properties': { //特性 style: new Style({
'name': 'EPSG:3857' stroke: new Stroke({
} color: '#08d527',
}, width: 4
}),
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
structureGeojson(pointsz){
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
}
},
'features': [{ //要素 'features': [{ //要素
'type': 'Feature', 'type': 'Feature',
'geometry': { //几何图形 'geometry': { //几何图形
...@@ -332,41 +354,17 @@ export default class Mutil { ...@@ -332,41 +354,17 @@ export default class Mutil {
}] }]
} }
}] }]
}; };
let vectorSource = new VectorSource({ //提供矢量图层的数据 return geojsonObject;
features: (new GeoJSON().readFeatures(geojsonObject)) }
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(255,255,0,0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
changeCenter(name) { //根据name传参 getBoundaries(name) { //根据name传参
axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => { axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
let local = res.data.districts[0].center.split(","); let local = res.data.districts[0].center.split(",");
let view = new View({ let view = this.MAP.getView();
center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'), //将中心点坐标转为EPSG:4326 view.setCenter(fromLonLat(local));
projection: get('EPSG:4326'), //投影坐标系 EPSG:4326 view.setZoom(10);
zoom: 10 this.drawArea(res.data.districts[0])
}); })
this.MAP.setView(view); }
this.drawArea(res.data.districts[0])
})
}
} }
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
tongji:'Enterprises', tongji:'Enterprises',
HazardsListMg:'Hazards', HazardsListMg:'Hazards',
PlansMg:'Plans', PlansMg:'Plans',
PlansMgGovernment:'Plans',
qyMap:'qyMap', qyMap:'qyMap',
qystatistics:'qystatistics', qystatistics:'qystatistics',
SafetyDeviceMg:'SafetyDevice', SafetyDeviceMg:'SafetyDevice',
......
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
<el-form-item> <el-form-item>
<el-input v-model="searchData.orgCode" placeholder="请输入统一社会信用代码"></el-input> <el-input v-model="searchData.orgCode" placeholder="请输入统一社会信用代码"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <!--<el-form-item>
<City @changeFun="changeFun" :valueqv="cityval"></City> <City @changeFun="changeFun" :valueqv="cityval"></City>
</el-form-item> </el-form-item>-->
<el-form-item> <el-form-item>
<el-button type="primary" @click="searchFun()"> <el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索 <i class="el-icon-search"></i> 搜索
......
...@@ -51,13 +51,13 @@ ...@@ -51,13 +51,13 @@
<el-table-column prop="checkStatus" label="审核状态"> <el-table-column prop="checkStatus" label="审核状态">
<template slot-scope="scope"> <template slot-scope="scope">
<font v-if="scope.row.checkStatus == 0" class="colorP"> <font v-if="scope.row.checkStatus == 0" class="colorP">
审核中 <i class="iconfont iconshenhe"></i>审核中
</font> </font>
<font v-else-if="scope.row.checkStatus == 1" class="colorM"> <font v-else-if="scope.row.checkStatus == 1" class="colorM">
审核通过 <i class="iconfont iconzhengchang"></i>审核通过
</font> </font>
<font v-else-if="scope.row.checkStatus == 2" class="colorR"> <font v-else-if="scope.row.checkStatus == 2" class="colorR">
审核未通过 <i class="iconfont iconweitongguo"></i>审核未通过
</font> </font>
</template> </template>
</el-table-column> </el-table-column>
...@@ -81,14 +81,11 @@ ...@@ -81,14 +81,11 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> --> <!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> -->
<el-table-column label="操作" width="300" align="center"> <el-table-column label="操作" width="220" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small" v-if="qyvisble"> <el-button @click="editFun(scope.row)" size="small" v-if="qyvisble">
<i class="el-icon-edit-outline"></i> 编辑 <i class="el-icon-edit-outline"></i> 编辑
</el-button> </el-button>
<el-button type="success" @click="checkFun(scope.row)" size="small" v-if="qyvisble" :disabled="scope.row.checkStatus != 0?true:false">
<i class="el-icon-key"></i> 审核
</el-button>
<el-button type="primary" plain @click="editFun(scope.row)" size="small" v-if="!qyvisble"> <el-button type="primary" plain @click="editFun(scope.row)" size="small" v-if="!qyvisble">
查看详情 查看详情
</el-button> </el-button>
...@@ -116,15 +113,6 @@ ...@@ -116,15 +113,6 @@
@refreshTableData="getTableData" @refreshTableData="getTableData"
:key="zjKey" :key="zjKey"
></PlansMgEdit> ></PlansMgEdit>
<PlansMgCheck
v-if="dialogVisible2"
:dialogVisible="dialogVisible2"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="chKey"
></PlansMgCheck>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -133,7 +121,7 @@ import PlansMgEdit from "./PlansMgEdit.vue"; ...@@ -133,7 +121,7 @@ import PlansMgEdit from "./PlansMgEdit.vue";
import PlansMgCheck from "./PlansMgCheck.vue"; import PlansMgCheck from "./PlansMgCheck.vue";
import METHOD from "@/utils/methods"; import METHOD from "@/utils/methods";
@Component({ @Component({
components: { PlansMgEdit, PlansMgCheck } components: { PlansMgEdit}
}) })
export default class CamerasMg extends Vue { export default class CamerasMg extends Vue {
@Provide() enterpriseId: String = ""; @Provide() enterpriseId: String = "";
...@@ -144,15 +132,13 @@ export default class CamerasMg extends Vue { ...@@ -144,15 +132,13 @@ export default class CamerasMg extends Vue {
@Provide() loading: Boolean = false; @Provide() loading: Boolean = false;
//编辑组件 //编辑组件
@Provide() dialogVisible: Boolean = false; @Provide() dialogVisible: Boolean = false;
@Provide() dialogVisible2: Boolean = false;
@Provide() dialogTit: String = "新增预案"; @Provide() dialogTit: String = "新增预案";
@Provide() formData: Object = {}; @Provide() formData: Object = {};
@Provide() zjKey: any = 0; @Provide() zjKey: any = 0;
@Provide() chKey: any = 0;
@Provide() qyvisble: boolean = true;//政府端隐藏项 @Provide() qyvisble: boolean = true;//政府端隐藏项
getTableData() { getTableData() {
let that = this, let that = this,
param = Object.assign({enterpriseId: that.enterpriseId, isReported: that.enterpriseId ? '' : 0 }, that.PAGE, that.searchData); param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
that.loading = true; that.loading = true;
METHOD.axiosPost( METHOD.axiosPost(
that, that,
...@@ -185,12 +171,6 @@ export default class CamerasMg extends Vue { ...@@ -185,12 +171,6 @@ export default class CamerasMg extends Vue {
this.zjKey++; this.zjKey++;
this.dialogVisible = true; this.dialogVisible = true;
} }
checkFun(row: any){
this.dialogTit = "预案审核";
this.formData = Object.assign({}, row);
this.chKey++;
this.dialogVisible2 = true;
}
delFun(row: any) { delFun(row: any) {
let that = this as any; let that = this as any;
METHOD.deleteFun( METHOD.deleteFun(
...@@ -212,7 +192,6 @@ export default class CamerasMg extends Vue { ...@@ -212,7 +192,6 @@ export default class CamerasMg extends Vue {
closeDialog() { closeDialog() {
//关闭窗口 //关闭窗口
this.dialogVisible = false; this.dialogVisible = false;
this.dialogVisible2 = false;
this.formData = {}; this.formData = {};
} }
checkFile(url: any) { checkFile(url: any) {
......
...@@ -11,55 +11,45 @@ ...@@ -11,55 +11,45 @@
<div> <div>
<div class="yatit">预案基本信息</div> <div class="yatit">预案基本信息</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px"> <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="预案标题" prop="planTitle"> <el-form-item label="所属公司:">
<el-input v-model="editForm.planTitle"></el-input> <font>{{editForm.enterpriseName}}</font>
</el-form-item> </el-form-item>
<el-form-item label="预案分类" prop="planType"> <el-form-item label="预案标题:">
<el-input v-model="editForm.planType"></el-input> <font>{{editForm.planTitle}}</font>
</el-form-item> </el-form-item>
<el-form-item label="预案等级" prop="planLevel"> <el-form-item label="预案分类:">
<el-radio-group v-model="editForm.planLevel"> <font>{{editForm.planType}}</font>
<el-radio label="Ⅰ">Ⅰ级</el-radio> </el-form-item>
<el-radio label="Ⅱ">Ⅱ级</el-radio> <el-form-item label="预案等级:">
<el-radio label="Ⅲ">Ⅲ级</el-radio> <font>{{editForm.planLevel + '级'}}</font>
</el-radio-group> </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-item>
<el-form-item label="审核预案" prop="checkStatus"> <el-form-item label="审核预案" prop="checkStatus">
<el-radio-group v-model="editForm.checkStatus"> <el-radio-group v-model="editForm.checkStatus">
<el-radio label="0">审核中</el-radio>
<el-radio label="1">通过</el-radio> <el-radio label="1">通过</el-radio>
<el-radio label="2">未通过</el-radio> <el-radio label="2">未通过</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </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> </el-form>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="flcolum"> <el-col :span="12" class="flcolum">
<div> <div>
<div class="yatit">预案内容</div> <div class="yatit">预案内容</div>
<textarea id="editorA" v-model="editForm.planContents" height="100%"></textarea> <div v-html="editForm.planContents"></div>
<font v-if="editForm.planContents == ''">暂无内容~</font>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -75,7 +65,6 @@ import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator"; ...@@ -75,7 +65,6 @@ import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class"; import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue"; import City from "@/components/city.vue";
import METHOD from "@/utils/methods"; import METHOD from "@/utils/methods";
import ice from "@/utils/iceEditor-min.js";
let uploadfile = require("@/assets/uploadfile.png"); let uploadfile = require("@/assets/uploadfile.png");
@Component({ @Component({
components: { City }, components: { City },
...@@ -154,91 +143,14 @@ export default class PlansMgEdit extends Vue { ...@@ -154,91 +143,14 @@ export default class PlansMgEdit extends Vue {
} }
}); });
} }
/*
上传
*/
onSuccess(res: any, file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onError(err: any, file: any, fileList: any) { onError(err: any, file: any, fileList: any) {
this.$message.error("上传失败!"); 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 = "413px";
this.editorA.create();
}
deleteList() {
this.fileList = [];
this.editForm.sourceFile = "";
}
checkFile(url: any) { checkFile(url: any) {
window.open(METHOD.URL + url, "_blank"); window.open(METHOD.URL + url, "_blank");
} }
created() { created() {
let that = this; 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: uploadfile,
});
}
});
// }
that.actionUrl = METHOD.URL + "/file/uploadFile";
} }
} }
</script> </script>
......
...@@ -175,7 +175,7 @@ export default class PlansMgEdit extends Vue { ...@@ -175,7 +175,7 @@ export default class PlansMgEdit extends Vue {
that.editForm.planContents = that.editorA.getHTML(); that.editForm.planContents = that.editorA.getHTML();
that.editForm.enterpriseId = that.enterpriseId; that.editForm.enterpriseId = that.enterpriseId;
(that as any).$refs[formName].validate((valid: boolean) => { (that as any).$refs[formName].validate((valid: boolean) => {
if (that.editorA.getText() == false && that.editForm.sourceFile == "") { if (that.editorA.getText() == false && (that.editForm.sourceFile == "" || that.editForm.sourceFile == undefined)) {
that.$message.error("没有预案内容!"); that.$message.error("没有预案内容!");
return; return;
} }
......
<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>
</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="checkStatus" label="审核状态">
<template slot-scope="scope">
<font v-if="scope.row.checkStatus == 0" class="colorP">
<i class="iconfont iconshenhe"></i>审核中
</font>
<font v-else-if="scope.row.checkStatus == 1" class="colorM">
<i class="iconfont iconzhengchang"></i>审核通过
</font>
<font v-else-if="scope.row.checkStatus == 2" class="colorR">
<i class="iconfont iconweitongguo"></i>审核未通过
</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>
</template>
</el-table-column>
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button type="success" @click="checkFun(scope.row)" size="small" :disabled="scope.row.checkStatus != 0?true:false">
<i class="el-icon-key"></i> 审核
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small">
<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>
<PlansMgCheck
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></PlansMgCheck>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import PlansMgEdit from "./PlansMgEdit.vue";
import PlansMgCheck from "./PlansMgCheck.vue";
import METHOD from "@/utils/methods";
@Component({
components: { PlansMgCheck }
})
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;
getTableData() {
let that = this,
param = Object.assign({ isReported: 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();
}
checkFun(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')
}
created() {
this.getTableData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
\ No newline at end of file
...@@ -180,7 +180,9 @@ export default class SafetyDeviceMgEdit extends Vue { ...@@ -180,7 +180,9 @@ export default class SafetyDeviceMgEdit extends Vue {
}); });
} }
created() { created() {
this.enterpriseId = METHOD.enterpriseId; if(METHOD.enterpriseId){
this.enterpriseId = METHOD.enterpriseId;
}
} }
} }
</script> </script>
......
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