123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <template>
- <div class="map-ditu">
- <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
- <bottom-data :maplistArr="maplistArr" :defaultdata="defaultdata" />
- <div class="zuobian">
- <selecttree
- placeholder="请选择所属公司"
- :list="parentOpt"
- type="1"
- v-model="companyCode"
- @change="parentChange"
- :defaultParentProps="{
- children: 'children',
- label: 'companyName',
- value: 'codeNumber',
- }"
- >
- </selecttree>
- </div>
- <router-view></router-view>
- </div>
- </template>
- <script>
- import selecttree from "../../../components/selecttree.vue";
- import {
- getCompanyFieldNumberVo,
- getSysOrganizationAuthTreeByRoleId,
- } from "@/api/ledger.js";
- import Tmap from "@/components/map";
- import BottomData from "./component/bottomData.vue";
- export default {
- name: "Index",
- components: {
- Tmap,
- BottomData,
- selecttree,
- },
- props: {
- fieldCode: "",
- batchCode: "",
- },
- data() {
- return {
- ShowRi: true,
- treeval: "",
- value1: true,
- treeval: "", // 绑定的输入框值
- showTree: false, // 控制树列表显示
- treeData: [],
- maplist: [],
- maplistArr: {},
- totalList: [],
- parentOpt: [],
- companyCode: "",
- defaultdata: {},
- };
- },
- created() {
- this.GETtree();
- this.GETtotal();
- },
- mounted() {
- //模拟地图上的点位
- const data = this.maplist;
- // data.forEach((element) => {
- // console.log(element);
- // // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
- // });
- },
- methods: {
- // 获取总数
- GETtotal() {
- getCompanyFieldNumberVo().then((res) => {
- this.totalList = res.data;
- });
- },
- // 获取企业数
- async GETtree() {
- const res = await getSysOrganizationAuthTreeByRoleId();
- const treedata = res.data;
- const processedData = this.processTreeData(treedata);
- this.parentOpt = processedData;
- this.defaultdata = res.data[0];
- this.parentChange(this.defaultdata);
- // const firstLayer = this.findFirstFieldLayer(processedData);
- // if (firstLayer) {
- // this.parentChange( this.defaultdata);
- // }
- },
- //过滤数据
- processTreeData(treeData) {
- const processedData = [];
- function processNode(node) {
- if (node.codeType === "field") {
- node.companyName = node.fieldName;
- }
- if (node.children && node.children.length > 0) {
- node.children.forEach((child) => {
- processNode(child);
- });
- }
- }
- treeData.forEach((root) => {
- processNode(root);
- processedData.push(root);
- });
- return processedData;
- },
- handleTreeData() {
- this.treeData = this.processTreeData(this.treeData);
- },
- parseCoordinates(input) {
- if (input && typeof input === "string") {
- return input.split(",").map(Number);
- }
- // debugger;
- return [];
- },
- parentChange(data) {
- //data为当前选中对象
- this.$refs.map.clearMarkers();
- this.maplist = data;
- this.maplistArr = data;
- if (data.codeType === "field") {
- if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
- this.$refs.map.addMarker({
- point: this.parseCoordinates(data.longitudeAndLatitudeString),
- val: data.analysisState,
- ...data,
- });
- return;
- }
- this.$refs.map.clearMarkers();
- } else {
- const dataMapList = data.children;
- dataMapList.forEach((element) => {
- if (
- this.parseCoordinates(element.longitudeAndLatitudeString).length >
- 0 &&
- element.codeType === "field"
- ) {
- this.$refs.map.addMarker({
- point: this.parseCoordinates(element.longitudeAndLatitudeString),
- val: element.analysisState,
- ...element,
- });
- return;
- }
- this.$refs.map.clearMarkers();
- });
- }
- },
- findFirstFieldLayer(data) {
- for (const item of data) {
- if (item.codeType === "field") {
- return item;
- }
- if (item.children && item.children.length > 0) {
- const childResult = this.findFirstFieldLayer(item.children);
- if (childResult) {
- return childResult;
- }
- }
- }
- return null;
- },
- featureClick(data) {
- const val = data.val;
- if (val === "-1" || val === -1 || val === 10) {
- this.$message.error("当前风场未完成分析");
- } else if (val === "0" || val === 0) {
- this.$message({
- message: "当前风场正在分析中",
- type: "warning",
- });
- } else if (val === "1" || val === 1 || val === "30" || val === 30) {
- console.log("打包成功");
- this.$router.push({
- path: "cockpitManage/electronic-map",
- query: {
- fieldCode: data.codeNumber,
- batchCode: data.batchCode,
- },
- });
- }
- },
- handleSwitchChange() {
- this.ShowRi = !this.ShowRi;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .map-ditu {
- height: 93.3vh;
- display: flex;
- flex-direction: column;
- }
- // 动态计算 Tmap 组件高度
- Tmap {
- height: calc(93.3vh - 230px);
- min-height: 0; // 防止 flex 项溢出
- }
- // 设置 bottom-data 组件高度为 230px
- bottom-data {
- height: 230px;
- flex-shrink: 0; // 防止组件缩小
- }
- .zuobian{
- width: 180px;
- position: absolute;
- top: 10px;
- left: 10px;
- }
- </style>
|