修改文件的加载方式

This commit is contained in:
zhangshujuan 2023-11-23 09:21:03 +08:00
parent dae3fdc211
commit 7384c83e7e
5 changed files with 1856 additions and 1683 deletions

File diff suppressed because it is too large Load Diff

View File

@ -127,22 +127,24 @@ import {
} from "@/utils/bigscreenTool/index.js";
import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode:'289153494763707d55b03878ace1cb08',
}
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
};
export default {
components: { BigScreenTime },
data() {
const add0 = (val) => {
const numVal = parseInt(val)
return numVal < 10 ? ('0' + numVal) : numVal.toString()
}
const numVal = parseInt(val);
return numVal < 10 ? "0" + numVal : numVal.toString();
};
const formatter = (offset = 0, date = new Date()) => {
const d = new Date(date.getTime() - offset)
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
}
const d = new Date(date.getTime() - offset);
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(
d.getDate()
)} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`;
};
return {
map: null,
height: "100%",
@ -199,11 +201,21 @@ export default {
},
methods: {
initMap() {
this.map = new AMap.Map("middleMap", {
zoom: 11,//
center: [105.60178899809716, 27.14450662262202], //
mapStyle: 'amap://styles/blue',
});
AMapLoader.load({
key: "e49669059fa36494531a82ed982f395c", // WebKey load
version: "1.4.15", // JSAPI 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 使'AMap.Scale'
})
.then((AMap) => {
this.map = new AMap.Map("middleMap", {
zoom: 11, //
center: [105.60178899809716, 27.14450662262202], //
mapStyle: "amap://styles/blue",
});
})
.catch((e) => {
console.log(e);
});
},
getEchart2Data() {
// calEquipNumPerWeek({ locationId: 0 }).then((response) => {
@ -373,10 +385,10 @@ export default {
},
},
grid: {
left: '6%',
top: '19%',
right: '6%',
bottom: '13%'
left: "6%",
top: "19%",
right: "6%",
bottom: "13%",
},
tooltip: {
trigger: "axis",

File diff suppressed because it is too large Load Diff

View File

@ -68,7 +68,7 @@
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "75f71884c462a7dfb8debd271a69498b",
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
};
export default {
name: "app",
@ -103,7 +103,7 @@ export default {
loadmap() {
const that = this;
AMapLoader.load({
key: "810bb1feef3a2c50e0fbace06c8e8c31", // WebKey load
key: "e49669059fa36494531a82ed982f395c", // WebKey load
version: "1.4.15", // JSAPI 1.4.15
plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 使'AMap.Scale'
AMapUI: {

View File

@ -1,6 +1,13 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="火情位置" prop="fireAddress">
<el-input
v-model="queryParams.fireAddress"
@ -37,26 +44,34 @@
/>
</el-form-item>
<!-- <el-form-item label="火情坐标" prop="coordinate">-->
<!-- <el-input-->
<!-- v-model="queryParams.coordinate"-->
<!-- placeholder="请输入火情坐标"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="责任人" prop="chargePerson">-->
<!-- <el-input-->
<!-- v-model="queryParams.chargePerson"-->
<!-- placeholder="请输入责任人"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="火情坐标" prop="coordinate">-->
<!-- <el-input-->
<!-- v-model="queryParams.coordinate"-->
<!-- placeholder="请输入火情坐标"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="责任人" prop="chargePerson">-->
<!-- <el-input-->
<!-- v-model="queryParams.chargePerson"-->
<!-- placeholder="请输入责任人"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
@ -69,7 +84,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['forest:fire:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -80,7 +96,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['forest:fire:edit']"
>修改</el-button>
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -91,7 +108,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['forest:fire:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -101,42 +119,66 @@
size="mini"
@click="handleExport"
v-hasPermi="['forest:fire:export']"
>导出</el-button>
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="fireList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="fireList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" />-->
<!-- <el-table-column label="主键" align="center" prop="id" />-->
<el-table-column label="火情位置" align="center" prop="fireAddress" />
<el-table-column label="火情时间" align="center" prop="fireTime" width="180">
<el-table-column
label="火情时间"
align="center"
prop="fireTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.fireTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<span>{{
parseTime(scope.row.fireTime, "{y}-{m}-{d} {h}:{i}:{s}")
}}</span>
</template>
</el-table-column>
<el-table-column label="发生区域" align="center" prop="fireArea" />
<el-table-column label="火情情况" align="center" prop="fireInfo" />
<!-- <el-table-column label="上报时间" align="center" prop="reportTime" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="上报人" align="center" prop="reportPerson" />-->
<!-- <el-table-column label="上报来源" align="center" prop="reportSource" />-->
<!-- <el-table-column label="上报时间" align="center" prop="reportTime" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="上报人" align="center" prop="reportPerson" />-->
<!-- <el-table-column label="上报来源" align="center" prop="reportSource" />-->
<el-table-column label="火情坐标" align="center" prop="coordinate" />
<el-table-column label="火情图片" align="center" prop="photoInfo" width="100">
<el-table-column
label="火情图片"
align="center"
prop="photoInfo"
width="100"
>
<template slot-scope="scope">
<image-preview :src="scope.row.photoInfo" :width="50" :height="50"/>
<image-preview :src="scope.row.photoInfo" :width="50" :height="50" />
</template>
</el-table-column>
<el-table-column label="责任人" align="center" prop="chargePerson" />
<el-table-column label="责任人电话" align="center" prop="chargePhone" />
<!-- <el-table-column label="火情等级" align="center" prop="fireLevel" />-->
<!-- <el-table-column label="发布方式" align="center" prop="reportMethod" />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<!-- <el-table-column label="数据类型" align="center" prop="dataType" />-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- <el-table-column label="火情等级" align="center" prop="fireLevel" />-->
<!-- <el-table-column label="发布方式" align="center" prop="reportMethod" />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<!-- <el-table-column label="数据类型" align="center" prop="dataType" />-->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -144,34 +186,38 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['forest:fire:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['forest:fire:remove']"
>删除</el-button>
>删除</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-place"
@click="handleJump(scope.row)"
v-hasPermi="['forest:fire:remove']"
>周边资源</el-button>
>周边资源</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-location-outline"
@click="handleZuobiao(scope.row)"
v-hasPermi="['forest:fire:remove']"
>火点位置</el-button>
>火点位置</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -185,38 +231,44 @@
<el-input v-model="form.fireAddress" placeholder="请输入火情位置" />
</el-form-item>
<el-form-item label="火情时间" prop="fireTime">
<el-date-picker clearable
<el-date-picker
clearable
v-model="form.fireTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择火情时间">
placeholder="请选择火情时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="发生区域" prop="fireArea">
<el-input v-model="form.fireArea" placeholder="请输入发生区域" />
</el-form-item>
<el-form-item label="火情情况" prop="fireInfo">
<el-input v-model="form.fireInfo" placeholder="请输入火情情况" type="textarea"/>
<el-input
v-model="form.fireInfo"
placeholder="请输入火情情况"
type="textarea"
/>
</el-form-item>
<!-- <el-form-item label="上报时间" prop="reportTime">-->
<!-- <el-date-picker clearable-->
<!-- v-model="form.reportTime"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="请选择上报时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上报人" prop="reportPerson">-->
<!-- <el-input v-model="form.reportPerson" placeholder="请输入上报人" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上报来源" prop="reportSource">-->
<!-- <el-input v-model="form.reportSource" placeholder="请输入上报来源" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上报时间" prop="reportTime">-->
<!-- <el-date-picker clearable-->
<!-- v-model="form.reportTime"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="请选择上报时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上报人" prop="reportPerson">-->
<!-- <el-input v-model="form.reportPerson" placeholder="请输入上报人" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上报来源" prop="reportSource">-->
<!-- <el-input v-model="form.reportSource" placeholder="请输入上报来源" />-->
<!-- </el-form-item>-->
<el-form-item label="火情坐标" prop="coordinate">
<el-input v-model="form.coordinate" placeholder="请输入火情坐标" />
</el-form-item>
<el-form-item label="火情图片" prop="photoInfo">
<image-upload v-model="form.photoInfo"/>
<image-upload v-model="form.photoInfo" />
</el-form-item>
<el-form-item label="责任人" prop="chargePerson">
<el-input v-model="form.chargePerson" placeholder="请输入责任人" />
@ -224,18 +276,22 @@
<el-form-item label="责任人电话" prop="chargePhone">
<el-input v-model="form.chargePhone" placeholder="请输入责任人电话" />
</el-form-item>
<!-- <el-form-item label="火情等级" prop="fireLevel">-->
<!-- <el-input v-model="form.fireLevel" placeholder="请输入火情等级" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="发布方式" prop="reportMethod">-->
<!-- <el-input v-model="form.reportMethod" placeholder="请输入发布方式" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="火情等级" prop="fireLevel">-->
<!-- <el-input v-model="form.fireLevel" placeholder="请输入火情等级" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="发布方式" prop="reportMethod">-->
<!-- <el-input v-model="form.reportMethod" placeholder="请输入发布方式" />-->
<!-- </el-form-item>-->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<!-- <el-form-item label="数据类型" prop="dataType">-->
<!-- <el-input v-model="form.dataType" placeholder="请输入数据类型" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据类型" prop="dataType">-->
<!-- <el-input v-model="form.dataType" placeholder="请输入数据类型" />-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
@ -243,24 +299,30 @@
</div>
</el-dialog>
<el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body>
<div id="innerMap" style="height: 400px;">
</div>
<el-dialog
:title="title1"
:visible.sync="open1"
width="500px"
append-to-body
>
<div id="innerMap" style="height: 400px"></div>
</el-dialog>
</div>
</template>
<script>
import { listFire, getFire, delFire, addFire, updateFire } from "@/api/forest/fire";
import {listFirePosition} from "../../../api/forest/fire";
import {
listFire,
getFire,
delFire,
addFire,
updateFire,
} from "@/api/forest/fire";
import { listFirePosition } from "../../../api/forest/fire";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode:'b6314ade5a42c3f3ac2284b6d4d89b1f',
}
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
};
export default {
//
@ -304,7 +366,7 @@ export default {
chargePhone: null,
fireLevel: null,
reportMethod: null,
dataType: "火情信息"
dataType: "火情信息",
},
//
form: {},
@ -314,35 +376,46 @@ export default {
//
rules: {
chargePerson: [
{ required: true, message: "负责人不能为空", trigger: "blur" }
{ required: true, message: "负责人不能为空", trigger: "blur" },
],
}
},
};
},
created() {
this.getList();
},
methods: {
initMap(position) {
let posiList = position.split(',')
this.map = new AMap.Map("innerMap", {
zoom: 16,//
center: posiList, //
// mapStyle: "amap://styles/macaron"
});
this.map.on('click', (e) => {
navigator.clipboard.writeText(`[${e.lnglat.lng.toString()}, ${e.lnglat.lat.toString()}],`)
AMapLoader.load({
key: "e49669059fa36494531a82ed982f395c", // WebKey load
version: "1.4.15", // JSAPI 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 使'AMap.Scale'
})
this.addMapMarker(posiList)
.then((AMap) => {
let posiList = position.split(",");
this.map = new AMap.Map("innerMap", {
zoom: 16, //
center: posiList, //
// mapStyle: "amap://styles/macaron"
});
this.map.on("click", (e) => {
navigator.clipboard.writeText(
`[${e.lnglat.lng.toString()}, ${e.lnglat.lat.toString()}],`
);
});
this.addMapMarker(posiList);
})
.catch((e) => {
console.log(e);
});
},
//
addMapMarker(LngLatData = [], type = '', info = {}) {
addMapMarker(LngLatData = [], type = "", info = {}) {
const marker = new AMap.Marker({
position: new AMap.LngLat(LngLatData[0], LngLatData[1]),
// offset: new AMap.Pixel(-50, -52),
// icon: `/images/${type}.png`, // Icon URL
title: '',
title: "",
});
this.map.add(marker);
// marker.on('click', (e) => {
@ -353,8 +426,10 @@ export default {
showInfoWindow(lng, lat, sourceInfo = {}) {
const content = `
<div style="padding: 6px;background-color: white;">
<div style="background-color: ${sourceInfo.type};color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
${sourceInfo.plantareaAddress || '监控点'}
<div style="background-color: ${
sourceInfo.type
};color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
${sourceInfo.plantareaAddress || "监控点"}
</div>
<div style="padding: 6px 10px 0 10px;font-size: 12px;color:#565656;">
<div style="padding: 4px;">${sourceInfo.info}</div>
@ -365,10 +440,10 @@ export default {
`;
const infoWindow = new AMap.InfoWindow({
content,
anchor: 'middle-left',
isCustom: true
anchor: "middle-left",
isCustom: true,
});
infoWindow.open(this.map, [lng, lat])
infoWindow.open(this.map, [lng, lat]);
},
/**
* 跳转GIS图
@ -380,8 +455,8 @@ export default {
this.open1 = true;
this.title1 = "火点定位";
this.$nextTick(() => {
this.initMap(zuobiao)
})
this.initMap(zuobiao);
});
},
/** 跳转周边资源按钮操作 */
handleJump(row) {
@ -390,7 +465,7 @@ export default {
// id = this.ids[0];
// }
this.$router.push({
path: '/fire/resource',
path: "/fire/resource",
// query: {
// cardNoFirst: id
// }//
@ -400,11 +475,11 @@ export default {
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeFireTime && '' != this.daterangeFireTime) {
if (null != this.daterangeFireTime && "" != this.daterangeFireTime) {
this.queryParams.params["beginFireTime"] = this.daterangeFireTime[0];
this.queryParams.params["endFireTime"] = this.daterangeFireTime[1];
}
listFirePosition(this.queryParams).then(response => {
listFirePosition(this.queryParams).then((response) => {
this.fireList = response.rows;
this.total = response.total;
this.loading = false;
@ -433,7 +508,7 @@ export default {
fireLevel: null,
reportMethod: null,
remark: null,
dataType: null
dataType: null,
};
this.resetForm("form");
},
@ -450,9 +525,9 @@ export default {
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
@ -464,8 +539,8 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFire(id).then(response => {
const id = row.id || this.ids;
getFire(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改火情管理";
@ -473,16 +548,16 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateFire(this.form).then(response => {
updateFire(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFire(this.form).then(response => {
addFire(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -494,19 +569,27 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除火情管理编号为"' + ids + '"的数据项?').then(function() {
return delFire(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
this.$modal
.confirm('是否确认删除火情管理编号为"' + ids + '"的数据项?')
.then(function () {
return delFire(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('forest/fire/export', {
...this.queryParams
}, `fire_${new Date().getTime()}.xlsx`)
}
}
this.download(
"forest/fire/export",
{
...this.queryParams,
},
`fire_${new Date().getTime()}.xlsx`
);
},
},
};
</script>