| | |
| | | <div class="list_title">报警点位列表</div> |
| | | <div class="inp_box"> |
| | | <span>选择时间段:</span> |
| | | <el-date-picker |
| | | size="large" |
| | | v-model="selectform.value1" |
| | | type="datetimerange" |
| | | @change="changeTime" |
| | | value-format="YYYY-MM-DD HH" |
| | | format="YYYY-MM-DD HH" |
| | | /> |
| | | <el-date-picker size="large" v-model="selectform.value1" type="datetimerange" @change="changeTime" |
| | | value-format="YYYY-MM-DD HH" format="YYYY-MM-DD HH" /> |
| | | </div> |
| | | |
| | | <div class="table_box"> |
| | | <el-table |
| | | :data="data.tableData" |
| | | style="width: 100%" |
| | | height="100%" |
| | | @row-click="flytoPoi" |
| | | > |
| | | <el-table-column |
| | | prop="name" |
| | | label="名称" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table :data="data.tableData" style="width: 100%" height="100%" @row-click="flytoPoi"> |
| | | <el-table-column prop="name" label="名称" show-overflow-tooltip align="center" /> |
| | | <!-- <el-table-column prop="name" label="名称" show-overflow-tooltip />--> |
| | | <el-table-column |
| | | prop="lon" |
| | | label="经度" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | prop="lat" |
| | | label="纬度" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | prop="value" |
| | | label="数值" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | prop="time" |
| | | label="时间" |
| | | show-overflow-tooltip |
| | | :formatter="dateFormatter" |
| | | align="center" |
| | | /> |
| | | <el-table-column label="操作"> |
| | | <el-table-column prop="lon" label="经度" show-overflow-tooltip align="center" /> |
| | | <el-table-column prop="lat" label="纬度" show-overflow-tooltip align="center" /> |
| | | <el-table-column prop="value" label="数值" show-overflow-tooltip align="center" /> |
| | | <el-table-column prop="time" label="时间" show-overflow-tooltip :formatter="dateFormatter" align="center" /> |
| | | <el-table-column label="操作" width="180px"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | @click.stop="listClick(scope.row)" |
| | | >污染源</el-button |
| | | > |
| | | <el-button link type="primary" size="small" @click.stop="listClick(scope.row)" :disabled="scope.row.isSuYuan == 0 || scope.row.isSuYuan == null |
| | | ">污染源</el-button> |
| | | |
| | | <el-button link type="primary" size="small" @click.stop="kssyClick(scope.row)">快速溯源</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- :disabled="scope.row.isFast == 0 || scope.row.isFast == null" --> |
| | | </template> |
| | | |
| | | // |
| | | <script> |
| | | import { Search } from "@element-plus/icons-vue"; // svg图标 |
| | | // import type { FormInstance, FormRules } from "element-plus"; |
| | |
| | | ysshSuYuanX00Controller, |
| | | getCoordByName, |
| | | selectSuYuan46ById, |
| | | selectFastByld, |
| | | } from "@/api/api.js"; |
| | | import menuTool from "@/assets/js/menuTool"; |
| | | import { useStore } from "vuex"; |
| | |
| | | const listClick = (row) => { |
| | | SYWG(row); |
| | | |
| | | sgworld.Core.postMessage({ |
| | | func_name: "SetSmallWind", |
| | | lon: "", |
| | | lat: "", |
| | | alt: 300, |
| | | Scope: scope, |
| | | Direction: "", |
| | | Hidden: "true", |
| | | }); |
| | | window.sgworld.Core.postMessage("Type=customewinds;Bool=false;"); |
| | | window.sgworld.Core.postMessage( |
| | | `Type=customewinds;Bool=true;Year=${row.time.slice( |
| | |
| | | )};Mouth=${row.time.slice(4, 6)};Day=${row.time.slice( |
| | | 6, |
| | | 8 |
| | | )};Hour=${row.time.slice(8, 10)};Density=${BJFC.Density};Speed=${ |
| | | BJFC.Speed |
| | | };d1=0;d2=30;Corp=1;Lon=${row.lon};Lat=${row.lat};Length=${ |
| | | BJFC.Length |
| | | )};Hour=${row.time.slice(8, 10)};Density=${BJFC.Density};Speed=${BJFC.Speed |
| | | };d1=0;d2=30;Corp=1;Lon=${row.lon};Lat=${row.lat};Length=${BJFC.Length |
| | | };` |
| | | ); |
| | | }; |
| | | /** |
| | | * 快速溯源 |
| | | */ |
| | | const kssyClick = (row) => { |
| | | kssyOperator(row); |
| | | }; |
| | | |
| | | const kssyOperator = async (POIobj) => { |
| | | sgworld.Core.postMessage({ type: "delete" }); |
| | | |
| | | const dt1 = await getCoordByName(POIobj.name); |
| | | |
| | | var date = insertStr(POIobj.time) + ":00:00"; |
| | | // const dt = await ysshSuYuanX00Controller( |
| | | // { name: POIobj.name, date: date }, |
| | | // 100 |
| | | // ); |
| | | // console.log("快速溯源-获取溯源列表", dt); |
| | | |
| | | // if (dt1.result) { |
| | | sgworld.Core.postMessage({ func_name: "RemoveGridLines", id: "" }); |
| | | //删除边界 |
| | | sgworld.Core.postMessage({ func_name: "RemoveGridSide", id: "" }); |
| | | |
| | | const dt2 = await selectFastByld({ |
| | | id: dt1.result.id.slice(0, -2) + "_0", |
| | | date: date, |
| | | }); |
| | | |
| | | window.sgworld.Core.postMessage("Type=customewinds;Bool=false;"); |
| | | sgworld.Core.postMessage({ |
| | | func_name: "SetSmallWind", |
| | | lon: "", |
| | | lat: "", |
| | | alt: 300, |
| | | Scope: scope, |
| | | Direction: "", |
| | | Hidden: "true", |
| | | }); |
| | | |
| | | console.log("快速溯源-获取溯源详情", dt2); |
| | | if (dt2.result) { |
| | | |
| | | dt2.result.map((item) => { |
| | | console.log("val_step",item.dir); |
| | | var dir = item.dir + val_step; |
| | | console.log("val_step",dir); |
| | | sgworld.Core.postMessage({ |
| | | func_name: "SetSmallWind", |
| | | lon: item.x, |
| | | lat: item.y, |
| | | alt: 300, |
| | | Scope: scope, |
| | | Direction: dir, |
| | | Hidden: "false", |
| | | }); |
| | | }); |
| | | console.log("快速溯源-获取经纬度,", dt2); |
| | | |
| | | |
| | | sgworld.Navigate.flyToPosition(dt2.result[0].x, dt2.result[0].y, 500, { |
| | | heading: 270, |
| | | pitch: -89.5, |
| | | roll: 0, |
| | | }); |
| | | } |
| | | |
| | | // dt.result.data.forEach(async (e) => { |
| | | // const dt2 = await selectFastByld({ |
| | | // id: e.id, |
| | | // date: date, |
| | | // }); |
| | | // console.log("快速溯源-获取溯源详情", dt2); |
| | | // if (dt2.result) { |
| | | // dt2.result.nap((item) => { |
| | | // sgworld.Core.postMessage({ |
| | | // func_name: "SetSmallWind", |
| | | // lon: item.x, |
| | | // lat: item.y, |
| | | // alt: 300, |
| | | // Scope: 300000, |
| | | // Direction: item.dir, |
| | | // Hidden: "false", |
| | | // }); |
| | | // }); |
| | | // } |
| | | // }); |
| | | |
| | | // } else { |
| | | // return ElMessage.error("请检查是否有数据"); |
| | | // } |
| | | }; |
| | | |
| | | const SYWG = async (POIobj) => { |
| | | // data.time = insertStr(POIobj.time) + ":00:00"; |
| | | var date = insertStr(POIobj.time) + ":00:00"; |
| | |
| | | flytoPoi, |
| | | selectform, |
| | | changeTime, |
| | | kssyClick, |
| | | kssyOperator, |
| | | }; |
| | | }, |
| | | }; |
| | |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .BJlist_box { |
| | | |
| | | // position: absolute; |
| | | // right: 20px; |
| | | // top: 490px; |
| | |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .text { |
| | | font-size: 24px; |
| | | font-weight: 400; |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | |
| | | .list_box { |
| | | width: calc(775px * 1.8); |
| | | height: calc(472px * 1.8); |
| | |
| | | background-size: 100% 100%; |
| | | padding: calc(45px * 1.5); |
| | | position: relative; |
| | | |
| | | .list_close { |
| | | width: 22px; |
| | | height: 22px; |
| | |
| | | right: 80px; |
| | | top: 80px; |
| | | } |
| | | |
| | | .list_title { |
| | | font-size: 30px; |
| | | margin-bottom: 20px; |
| | | font-weight: bold; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .table_box { |
| | | width: 100%; |
| | | height: 80%; |
| | |
| | | // z-index: 10; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .el-table { |
| | | // height: 370px; |
| | | width: 100%; |
| | | overflow: auto; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .el-table::before { |
| | | height: 0; |
| | | } |
| | | |
| | | .el-table /deep/ .el-tooltip { |
| | | padding: 0; |
| | | } |
| | | |
| | | .el-table /deep/ th, |
| | | .el-table /deep/ tr { |
| | | background-color: transparent; |
| | | color: white; |
| | | } |
| | | .el-table /deep/ tr:hover > td { |
| | | |
| | | .el-table /deep/ tr:hover>td { |
| | | background-color: rgba(0, 0, 0, 1) !important; |
| | | } |
| | | |
| | | /deep/ .el-table__body { |
| | | width: 100% !important; |
| | | } |
| | |
| | | width: 100% !important; |
| | | } |
| | | } |
| | | |
| | | .inp_box { |
| | | span { |
| | | font-size: 24px; |
| | |
| | | color: #ffffff; |
| | | padding-right: 10px; |
| | | } |
| | | |
| | | /deep/ .el-input__wrapper { |
| | | // width: 460px; |
| | | background: rgba(0, 0, 0, 0.2); |
| | |
| | | padding: 0; |
| | | padding-left: 3px; |
| | | } |
| | | |
| | | /deep/ .el-input__inner, |
| | | /deep/ .el-textarea__inner { |
| | | // background-color: rgba(134, 132, 132, 0.5); |
| | | color: #ffffff; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | /deep/.el-range-input { |
| | | color: white; |
| | | } |
| | | |
| | | /deep/ .el-range-separator { |
| | | color: white; |
| | | } |
| | | |
| | | .el-select { |
| | | width: 180px; |
| | | } |
| | | |
| | | .el-select /deep/ .el-input__wrapper { |
| | | background: rgba(0, 0, 0, 0.2); |
| | | border: 2px solid #2e58cc; |
| | |
| | | padding: 0; |
| | | padding-left: 6px; |
| | | } |
| | | |
| | | .el-select /deep/ .el-input__inner { |
| | | color: #ffffff; |
| | | font-size: 24px; |