123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <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>
|