|
@@ -0,0 +1,287 @@
|
|
|
+<template>
|
|
|
+ <div class="map-ditu">
|
|
|
+ <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
|
|
|
+ <div class="ledata">
|
|
|
+ <selecttree
|
|
|
+ placeholder="请选择上级单位"
|
|
|
+ :list="parentOpt"
|
|
|
+ type="1"
|
|
|
+ v-model="companyCode"
|
|
|
+ @change="parentChange"
|
|
|
+ :defaultParentProps="{
|
|
|
+ children: 'children',
|
|
|
+ label: 'companyName',
|
|
|
+ value: 'codeNumber',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ </selecttree>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ <span class="SpText">登录人风场总数:</span>
|
|
|
+ {{ totalList?.fieldSumNumber ? totalList.fieldSumNumber : 0 }}
|
|
|
+ 个
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="SpText">已完成分析风场:</span>
|
|
|
+ {{
|
|
|
+ totalList?.analysisFinishNumber ? totalList.analysisFinishNumber : 0
|
|
|
+ }}
|
|
|
+ 个
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="SpText">未完成分析风场:</span>
|
|
|
+ {{
|
|
|
+ totalList?.analysisUnFinishedNumber
|
|
|
+ ? totalList.analysisUnFinishedNumber
|
|
|
+ : 0
|
|
|
+ }}
|
|
|
+ 个
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="SpText">风机数量:</span>
|
|
|
+ {{ totalList?.engineGroupNumber ? totalList.engineGroupNumber : 0 }}
|
|
|
+ 个
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="SpText">风场状态:</span>
|
|
|
+ <span class="red"></span>
|
|
|
+ <span class="yellow"></span>
|
|
|
+ <span class="green"></span>
|
|
|
+ </p>
|
|
|
+ <el-switch
|
|
|
+ v-model="value1"
|
|
|
+ active-text="显示"
|
|
|
+ inactive-text="隐藏"
|
|
|
+ @change="handleSwitchChange"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <Rightdata
|
|
|
+ v-show="ShowRi"
|
|
|
+ ref="childRef"
|
|
|
+ :maplistArr="maplistArr"
|
|
|
+ :defaultdata="defaultdata"
|
|
|
+ class="ridata"
|
|
|
+ ></Rightdata>
|
|
|
+ <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 Rightdata from "./component/rightdata.vue";
|
|
|
+export default {
|
|
|
+ name: "Index",
|
|
|
+ components: {
|
|
|
+ Tmap,
|
|
|
+ Rightdata,
|
|
|
+ selecttree,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ShowRi: true,
|
|
|
+ treeval: "",
|
|
|
+ value1: true,
|
|
|
+ treeval: "", // 绑定的输入框值
|
|
|
+ showTree: false, // 控制树列表显示
|
|
|
+ treeData: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ maplist: [],
|
|
|
+ maplistArr: {},
|
|
|
+ totalList: [],
|
|
|
+ parentOpt: [],
|
|
|
+ companyCode: "",
|
|
|
+ defaultdata: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.GETtree();
|
|
|
+ this.GETtotal();
|
|
|
+
|
|
|
+ // 页面初始化时手动触发一次赋值操作
|
|
|
+ this.$watch("defaultdata", (newValue) => {
|
|
|
+ this.maplistArr = newValue; // 将defaultdata的值赋给maplistArr
|
|
|
+ });
|
|
|
+ this.maplistArr = this.defaultdata;
|
|
|
+ },
|
|
|
+ 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];
|
|
|
+ },
|
|
|
+
|
|
|
+ //过滤数据
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ parseCoordinates(input) {
|
|
|
+ if (input && typeof input === "string") {
|
|
|
+ return input.split(",").map(Number);
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ parentChange(data) {
|
|
|
+ //data为当前选中对象
|
|
|
+ this.$refs.map.clearMarkers();
|
|
|
+ this.maplist = data;
|
|
|
+ this.maplistArr = data;
|
|
|
+ console.log(data, "parentChange");
|
|
|
+ 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) => {
|
|
|
+ console.log(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();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ featureClick(data) {
|
|
|
+ console.log(data, "featureClick");
|
|
|
+ const val = data.val;
|
|
|
+ if (val === "-1" || val === -1) {
|
|
|
+ this.$message.error("当前风场未进行分析");
|
|
|
+ } else if (val === "0" || val === 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "当前风场正在分析中",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ } else if (val === "1" || val === 1) {
|
|
|
+ this.$router.push({
|
|
|
+ path: "cockpitManage/electronic-map",
|
|
|
+ query: {
|
|
|
+ fieldCode: data.codeNumber,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSwitchChange() {
|
|
|
+ this.ShowRi = !this.ShowRi;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.map-ditu {
|
|
|
+ // min-width: 86.9vw;
|
|
|
+ // max-width: 94.9vw;
|
|
|
+ height: 93vh;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.ridata {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ledata {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 300px;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 60px;
|
|
|
+ background: #008080;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ .SpText {
|
|
|
+ display: inline-block;
|
|
|
+ width: 120px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red,
|
|
|
+ .yellow,
|
|
|
+ .green {
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ background-color: #e16757;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow {
|
|
|
+ background-color: #eecb5f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ background-color: #7ecf51;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-switch__label.is-active {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|