代码修改

suerprisePlus

2024-09-30 703703929e97b94ca1c1c5e35a578e5fe9d4cfea

代码修改

 .env.development

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = æ³°ç‘žå·¥ä¸šæ•°å­—孪生管理平台
VUE_APP_TITLE = å±±è¥¿é…ç½‘

# å¼€å‘环境配置
ENV = 'development'

 .env.production

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = FastBee物联网
VUE_APP_TITLE = å±±è¥¿é…ç½‘

# ç”Ÿäº§çŽ¯å¢ƒé…ç½®
ENV = 'production'

 .env.staging

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜
VUE_APP_TITLE = æ³°ç‘žå·¥ä¸šæ•°å­—孪生管理平台
VUE_APP_TITLE = å±±è¥¿é…ç½‘

NODE_ENV = production


 public/config/config.js

@@ -15,9 +15,9 @@
// æ•°æ®åˆ†æžç«¯å£
const pyHost = isWeb ? isUrl + ":9036" : isUrl + ":8000";
//rag端口
const ragHost = isWeb ? isUrl + ":9036" : "192.168.11.95:8080";
const ragHost = isWeb ? isUrl + ":9036" : "192.168.11.24:8103";
// æœ¬åœ°æ•°æ®åœ°å€
const pwythHost = "http://localhost/pwyth";
const pwythHost = "http://192.168.11.95:8888/pwyth";
//配置
const config = {
  // server服务
@@ -29,7 +29,8 @@
  //数据分析接口
  pyServices: "http://" + pyHost + "/py",
  //rag服务地址
  ragServices: "http://" + ragHost+ "/api/vi",
  // ragServices: "http://" + ragHost+ "/api/vi",
  ragServices: "http://" + ragHost+ "/rag_sxdw/api/vi",
  imageUrl: "",
  // sdk显示
  sdkImg: host + "/CimSDK/",

 public/config/config.js.gz

Binary files differ

 public/index.html

@@ -7,7 +7,7 @@
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>logo.png">
  <script src="./config/config.js"></script>
  <script src="/config/config.js"></script>
  <script src="./CimSDK/Workers/jquery-3.5.0.min.js"></script>
  <script src="./CimSDK/Workers/layui/layui.js"></script>
  <script src="./CimSDK/CimSDK.min.js"></script>

 src/assets/js/mapSdk/index.js

@@ -1,87 +1,121 @@
import mapConfig from './mapConfig';
import mapData from './mapData';
import mapServer from './mapServe';
import * as turf from '@turf/turf';
import store from '@/store';
import mapConfig from "./mapConfig";
import mapData from "./mapData";
import mapServer from "./mapServe.js";
import * as turf from "@turf/turf";
import store from "@/store";
const mapInit = {
    async Init() {
        window.earthCtrl = new SmartEarth.EarthCtrl('sdkContainer', {
            // éšè—é»˜è®¤åº•å›¾
            defaultImagery: false,
            // éšè—logo
            printLog: false,
            // sceneMode: SmartEarth.Cesium.SceneMode.SCENE2D
            StaticFileBaseUrl: '/CimSDK/',
        });
        // åˆå§‹åŒ–Cesium
        window.Cesium = SmartEarth.Cesium;
        // åˆå§‹åŒ–Viewer
        window.Viewer = earthCtrl.viewer;
        //设置地球颜色
        Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9');
        Viewer.imageryLayers.removeAll()
        // åœ°å½¢åŠ è½½
        const terrain = config.terrain;
        if (terrain.isShow && terrain.isUrl) {
            const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(terrain.isUrl, {
                requestWaterMask: true,
                requestVertexNormals: true,
  async Init() {
    // é»˜è®¤è®¾ç½®åº•å›¾
    this.addImageLayer();
    // æ·»åŠ é¼ æ ‡ç‚¹å‡»äº‹ä»¶
    this.addMapClick();

    // window.earthCtrl = new SmartEarth.EarthCtrl(
    //     'sdkContainer',
    //     {
    //         // éšè—é»˜è®¤åº•å›¾
    //         defaultImagery: false,
    //         // éšè—logo
    //         printLog: false,
    //         // sceneMode: SmartEarth.Cesium.SceneMode.SCENE2D
    //         StaticFileBaseUrl: '/CimSDK/',
    //     },
    //     {},
    //     {},
    //     () => {
    //         debugger
    //         // åˆå§‹åŒ–Cesium
    //         window.Cesium = SmartEarth.Cesium;
    //         // åˆå§‹åŒ–Viewer
    //         window.Viewer =  window.earthCtrl.Viewer;
    //         //设置地球颜色
    //         window.Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9');
    //         window.earthCtrl.Viewer.imageryLayers.removeAll();
    //         // // åœ°å½¢åŠ è½½
    //         // const terrain = config.terrain;
    //         // if (terrain.isShow && terrain.isUrl) {
    //         //     const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(terrain.isUrl, {
    //         //         requestWaterMask: true,
    //         //         requestVertexNormals: true,
    //         //     });

    //         //     window.Viewer.terrainProvider = terrainProvider;
    //         // }
    //         this.setStartViwer();
    //     }
    // );
  },
  // async setStartViwer() {
  //     // Viewer.scene.screenSpaceCameraController.maximumZoomDistance =50000
  //     // é»˜è®¤è®¾ç½®åº•å›¾
  //     this.addImageLayer();
  //     // æ·»åŠ é¼ æ ‡ç‚¹å‡»äº‹ä»¶
  //     this.addMapClick();
  // },
  addImageLayer() {
    const baseLayer = mapData.baseLayer;
    // æ·»åŠ å¤©åœ°å›¾åº•å›¾
    // mapServer.addLayer({
    //     serveType: 'tdMap',
    //     url: baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl,
    // });
    console.log(config.geoServer);
    // console.log(mapServer);
    // mapServer.addLayer({
    //   serveType: "WMS",
    //   url:
    // });
    const serverUrl = config.geoServer;
    const layer = new Cesium.WebMapServiceImageryProvider({
        url:serverUrl.url + serverUrl.wms,
        layers: serverUrl.layers[1],
        parameters: {
            transparent: true,
            format: 'image/png',
            srs: 'EPSG:4490',
            styles: '',
            cql_filter: '',
        },
        tileWidth: 512,
        tileHeight: 512,
    });

    window.Viewer.imageryLayers.addImageryProvider(layer);
    // æ·»åŠ å¤©åœ°å›¾æ ‡æ³¨
    // mapServer.addLayer({
    //     serveType: 'tdMap',
    //     url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
    // });
 
    // åˆå§‹åŒ–视角
    this.setdefaultPerspective();
  },
  setdefaultPerspective() {
    mapConfig.sertCameraTo(mapData.defaultPerspective);
  },
  addMapClick() {
    // ä¸ºviewer添加鼠标点击事件监听
    window.Viewer.screenSpaceEventHandler.setInputAction(event => {
      // èŽ·å–点击位置的世界坐标
      var pickedFeature = window.Viewer.scene.pick(event.position);
      if (Cesium.defined(pickedFeature)) {
        console.log(pickedFeature);
        if (pickedFeature.id) {
          const obj = pickedFeature.id;
          var arr = [];
          for (var key in obj) {
            arr.push({
              name: key,
              val: obj[key]
            });

            Viewer.terrainProvider = terrainProvider;
        }
        // Viewer.scene.screenSpaceCameraController.maximumZoomDistance =50000
        // é»˜è®¤è®¾ç½®åº•å›¾
        this.addImageLayer();
        // æ·»åŠ é¼ æ ‡ç‚¹å‡»äº‹ä»¶
        this.addMapClick();
    },
    addImageLayer() {
        const baseLayer = mapData.baseLayer;
        // æ·»åŠ å¤©åœ°å›¾åº•å›¾
        // mapServer.addLayer({
        //     serveType: 'tdMap',
        //     url: baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl,
        // });

        mapServer.addLayer({
            serveType: 'WMS',
            url: config.geoServer.layers[1],
        });
        // æ·»åŠ å¤©åœ°å›¾æ ‡æ³¨
        // mapServer.addLayer({
        //     serveType: 'tdMap',
        //     url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
        // });
        // åˆå§‹åŒ–视角
        this.setdefaultPerspective();
    },
    setdefaultPerspective() {
        mapConfig.sertCameraTo(mapData.defaultPerspective);
    },
    addMapClick() {
        // ä¸ºviewer添加鼠标点击事件监听
        Viewer.screenSpaceEventHandler.setInputAction((event) => {
            // èŽ·å–点击位置的世界坐标
            var pickedFeature = Viewer.scene.pick(event.position);
            if (Cesium.defined(pickedFeature)) {
                console.log(pickedFeature);
                if (pickedFeature.id) {
                    const obj = pickedFeature.id;
                    var arr=[];
                    for(var key in obj){
                        arr.push({
                            name: key,
                            val: obj[key],
                        });
                        store.dispatch('mapLayers/changeMapInfo', []);
                        if (arr.length > 0) {
                            store.dispatch('mapLayers/changeMapInfo', arr);
                        }
                    }
                }
            store.dispatch("mapLayers/changeMapInfo", []);
            if (arr.length > 0) {
              store.dispatch("mapLayers/changeMapInfo", arr);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
          }
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
};
export default mapInit;

 src/assets/js/mapSdk/mapServe.js

@@ -1,12 +1,14 @@
import mapConfig from './mapConfig';
import mapConfig from './mapConfig.js';
import { zhangzitou_selectAll } from '@/api/mapView/map.js';
import WKT from 'terraformer-wkt-parser';
import store from '@/store';
 
// æœåŠ¡åŠ è½½
const mapServer = {
    serveType: null,
    layerList: [],
    addLayer(res) {
        
        const obj = this.getLayerChecked(res);
        if (obj) return;
        this.serveType = res.serveType;
@@ -35,7 +37,7 @@
            const cnName = res.cnName + '_' + res.id;
            const modelLayer = new Cesium.PrimitiveCollection();
            modelLayer.name = cnName;
            Viewer.scene.primitives.add(modelLayer);
            window.Viewer.scene.primitives.add(modelLayer);
            pois.map((item) => {
                var geom = WKT.parse(item.geom).coordinates;
                const terrain = config.terrain;
@@ -55,7 +57,7 @@
    },
    addTerrainGLB(item, geom, modelLayer) {
        var positions = [Cesium.Cartographic.fromDegrees(geom[0], geom[1])];
        var promise = Cesium.sampleTerrainMostDetailed(Viewer.terrainProvider, positions);
        var promise = Cesium.sampleTerrainMostDetailed(window.Viewer.terrainProvider, positions);
        promise.then((updatedPositions) => {
            var terrainHeight = updatedPositions[0].height;
            var style = {
@@ -107,7 +109,7 @@

    addTdLayer(res) {
        const url = res.url + config.tdToken;
        Viewer.imageryLayers.addImageryProvider(
        window.Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url: url,
            })
@@ -124,7 +126,7 @@
    },
    addWMSLayer(res) {
        const serverUrl = config.geoServer;
        const that = this;
        const that = this;  
        var getFeatureInfoFormat = new Cesium.GetFeatureInfoFormat('html', null, function (html) {
            that.getFeatureInfo(html);
        });
@@ -146,7 +148,7 @@
            tileHeight: 512,
        });

        const imageLayer = Viewer.imageryLayers.addImageryProvider(layer);
        const imageLayer = window.Viewer.imageryLayers.addImageryProvider(layer);
        const cnName = res.cnName + '_' + res.id;
        imageLayer.name = cnName;
        imageLayer.id = res.id;
@@ -163,7 +165,7 @@
        if (res.bak) {
            height = JSON.parse(res.bak).height;
        }
        var model = earthCtrl.factory.create3DTilesets({
        var model = window.earthCtrl.factory.create3DTilesets({
            url: url,
            option: {
                height: height,
@@ -188,13 +190,13 @@
        this.layerList.map((item, index) => {
            if (cnName == item.name && res.id == item.id) {
                if (item.serveType == 'WMS') {
                    Viewer.imageryLayers.remove(item.layer);
                    window.Viewer.imageryLayers.remove(item.layer);
                    this.layerList.splice(index, 1);
                } else if (item.serveType == 'Tileset') {
                    item.layer.deleteObject();
                    this.layerList.splice(index, 1);
                } else if (item.serveType == 'WFS') {
                    Viewer.scene.primitives.remove(item.layer);
                    window.Viewer.scene.primitives.remove(item.layer);
                    this.layerList.splice(index, 1);
                }
            }

 src/assets/logo/background.png

 src/assets/logo/logo2.png

 src/assets/logo/sdw.png

 src/layout/components/Navbar.vue

@@ -106,7 +106,7 @@
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
          location.href = '/';
        })
      }).catch(() => { });
    }

 src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@
  },
  data() {
    return {
      title: 'TerraDT',
      title: '山西配网',
      logo: logoImg
    }
  }

 src/router/index.js

@@ -79,7 +79,8 @@
        children: [
            {
                path: 'index',
                component: () => import('@/views/index'),
                // component: () => import('@/views/index'),
                component: () => import('@/views/visual/mapView/index.vue'),
                name: 'Index',
                meta: { title: '首页', icon: 'dashboard', affix: true },
            },
@@ -202,7 +203,7 @@
};

export default new Router({
    mode: 'history', // åŽ»æŽ‰url中的#
    // mode: 'history', // åŽ»æŽ‰url中的#
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
});

 src/store/modules/permission.js

@@ -126,7 +126,8 @@
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // ä½¿ç”¨ import å®žçŽ°ç”Ÿäº§çŽ¯å¢ƒçš„路由懒加载
    return () => import(`@/views/${view}`)
    // return () => import(`@/views/${view}`)
    return (resolve) => require([`@/views/${view}`], resolve)
  }
}


 src/views/login copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,403 @@
<template>
    <div class="login">
        <el-row>
            <el-col :xs="24">
                <div style="color: #fff; background-color: #0f73ee; width: 100%; height: 200px; text-align: center; padding: 15px; font-family: '微软雅黑'">
                    <div style="font-size: 42px; padding-top: 40px; width: 400px; margin: 0 auto">
                        <div class="logoImg"></div>
                        <!-- <img :src="logo" alt="logo" style="width: 100px; height: 100px; float: left" /> -->
                        <div style="float: left; margin-top: 13px; width: 300px; text-align: left">
                            <div>山西配网</div>
                            <div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">山西配网</div>
                        </div>
                    </div>
                </div>

                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <!-- <div style="margin-bottom: 10px; font-size: 14px; font-family: '微软雅黑'; color: #f78e21">演示账号：fastbee 123456</div> -->
                    <el-form-item prop="username" >
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                            <svg-icon slot="prefix" icon-class="user" class="input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="password" class="input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="captchaOnOff" prop="code">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
                        </el-input>

                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" />
                        </div>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>

                    <el-form-item style="width: 100%">
                        <div style="margin-bottom: 10px">
                            <el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
                                <span v-if="!loading">登 å½•</span>
                                <span v-else>登 å½• ä¸­...</span>
                            </el-button>
                            <el-button v-else :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleBind">
                                <span v-if="!loading">绑 å®š</span>
                                <span v-else>绑 å®š ä¸­...</span>
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--  åº•éƒ¨  -->
        <div class="el-login-footer">
            <span>
                Copyright Â© 2004－2023
                <a target="_blank" href="https://www.smartearth.cn/">SmartEarth</a>
                All Rights Reserved.
            </span>
        </div>
    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css';
import logo from '@/assets/logo/logo.png';
import { getCodeImg, checkBindId, getErrorMsg, socialLogin, bindLogin } from '@/api/login';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { setToken } from '@/utils/auth';

export default {
    name: 'Login',
    data() {
        return {
            logo,
            codeUrl: '',
            loginForm: {
                username: '',
                password: '',
                rememberMe: false,
                code: '',
                uuid: '',
                bindId: '',
                // loginId: '',
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的账号',
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的密码',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请输入验证码',
                    },
                ],
            },
            loading: false,
            // éªŒè¯ç å¼€å…³
            captchaOnOff: true,
            bindAccount: false,
            // æ³¨å†Œå¼€å…³
            register: true,
            redirect: undefined,
        };
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true,
        },
    },
    created() {
        const loginId = this.$route.query.loginId;
        if (loginId === undefined || loginId === null) {
            this.checkBind();
            this.getCode();
            this.checkErrorMsg();
            this.getCookie();
        } else {
            this.redirectSocialLogin(loginId);
        }
    },
    methods: {
        redirectLogin(loginId) {
            this.loading = true;
            this.$store
                .dispatch('RedirectLogin', loginId)
                .then(() => {
                    this.$router
                        .push({
                            path: this.redirect || '/',
                        })
                        .catch(() => {});
                })
                .catch(() => {
                    this.loading = false;
                    if (this.captchaOnOff) {
                        this.getCode();
                    }
                    this.$router.push({
                        query: {},
                    });
                });
        },
        redirectSocialLogin() {
            const query = this.$route.query;
            const loginId = query.loginId;
            socialLogin(loginId).then((res) => {
                // ä¿å­˜token
                this.loading = true;
                setToken(res.token);
                this.$router
                    .push({
                        path: this.redirect || '/',
                    })
                    .catch(() => {});
                if (this.captchaOnOff) {
                    this.getCode();
                    this.loading = false;
                }
            });
        },
        checkBind() {
            const query = this.$route.query;
            const bindId = query.bindId;
            if (bindId === undefined || bindId === null) {
                this.bindAccount = false;
            } else {
                this.bindAccount = true;
                checkBindId(bindId).then((res) => {
                    this.bindAccount = res.bindAccount === undefined ? true : res.bindAccount;
                    if (this.bindAccount) {
                        this.loginForm.bindId = bindId;
                    } else {
                        this.loginForm.bindId = '';
                        this.$router.push({
                            query: {},
                        });
                    }
                });
            }
        },
        checkErrorMsg() {
            const errorId = this.$route.query.errorId;
            if (errorId !== undefined && errorId !== null) {
                getErrorMsg(errorId)
                    .then((res) => {})
                    .catch((err) => {
                        this.$router.push({ query: {} });
                        console.log(err);
                    });
            }
        },
        getCode() {
            getCodeImg().then((res) => {
                this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
                if (this.captchaOnOff) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            });
        },
        getCookie() {
            const username = Cookies.get('username');
            const password = Cookies.get('password');
            const rememberMe = Cookies.get('rememberMe');
            const loginId = Cookies.get('loginId');
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
                loginId: loginId === undefined ? this.loginForm.loginId : loginId,
            };
        },
        qqLogin() {
            window.location.href = 'http://localhost:8080/auth/render/qq';
        },
        weChatLogin() {
            const baseURL = process.env.VUE_APP_BASE_API;
            window.location.href = baseURL + '/auth/render/wechat_open_web';
        },
        authLogin() {
            this.$alert('第三方登录正在集成中...', '提示消息', {
                confirmButtonText: '确定',
                callback: (action) => {
                    this.$message({
                        type: 'info',
                        message: `action: ${action}`,
                    });
                },
            });
        },
        handleBind() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set('username', this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set('password', encrypt(this.loginForm.password), {
                            expires: 30,
                        });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                    this.loginForm.bindId = this.$route.query.bindId;
                    bindLogin(this.loginForm)
                        .then((res) => {
                            // ä¿å­˜token
                            setToken(res.token);
                            this.$router
                                .push({
                                    path: '/',
                                })
                                .catch(() => {});
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.loading = false;
                                this.getCode();
                            }
                        });
                }
            });
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set('username', this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set('password', encrypt(this.loginForm.password), {
                            expires: 30,
                        });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                    this.$store
                        .dispatch('Login', this.loginForm)
                        .then(() => {
                            this.$router
                                .push({
                                    path: this.redirect || '/',
                                })
                                .catch(() => {});
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.getCode();
                            }
                        });
                }
            });
        },
    },
};
</script>

<style lang="scss">
.login {
    height: 100%;
    overflow: auto;
}
.logoImg {
    width: 100px;
    height: 100px;
    background: url('../assets/logo/logo.png') no-repeat;
    background-size: 100% 100%;
    float: left;
}
.bindAccountTitle {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #333;
    font-size: 24px;
}

.login-form {
    margin: 30px auto 0 auto;
    padding: 15px;
    z-index: 1000;
    max-width: 350px;

    input {
        height: 38px;
        background-color: #f1f1f1;
        color: #666;
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.login-code {
    width: 33%;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
        border-radius: 3px;
        height: 38px;
    }
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #333;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.alert-box-wrap {
    border: 1px solid #f78e21;

    .alert-message-wrap {
        font-size: 14px;
        font-family: '微软雅黑';
        color: rgba(197, 41, 41, 0.856);
        margin-left: 10px;
    }
}
</style>

 src/views/login.vue

@@ -1,32 +1,32 @@
<template>
    <div class="login">
        <el-row>
            <el-col :xs="24">
                <div style="color: #fff; background-color: #0f73ee; width: 100%; height: 200px; text-align: center; padding: 15px; font-family: '微软雅黑'">
                    <div style="font-size: 42px; padding-top: 40px; width: 400px; margin: 0 auto">
                        <div class="logoImg"></div>
                        <!-- <img :src="logo" alt="logo" style="width: 100px; height: 100px; float: left" /> -->
                        <div style="float: left; margin-top: 13px; width: 300px; text-align: left">
                            <div>TerraDT</div>
                            <div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">泰瑞工业数字孪生管理平台</div>
                        </div>
                    </div>
                </div>
        <div class="logoTitle">
            <div class="titleItem">
                <div class="logImg"></div>
            </div>

            <div class="titleItem">
                <div class="logText">数字孪生智能配网巡检系统</div>
            </div>
        </div>
        <div class="logContent">
            <div class="contFrom">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <!-- <div style="margin-bottom: 10px; font-size: 14px; font-family: '微软雅黑'; color: #f78e21">演示账号：fastbee 123456</div> -->
                    <el-form-item prop="username">
                    <el-form-item prop="username" >
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                            <svg-icon slot="prefix" icon-class="user" class="input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                            @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="password" class="input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="captchaOnOff" prop="code">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                            @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
                        </el-input>

@@ -34,31 +34,34 @@
                            <img :src="codeUrl" @click="getCode" />
                        </div>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>
                    <el-checkbox v-model="loginForm.rememberMe"
                        style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>

                    <el-form-item style="width: 100%">
                        <div style="margin-bottom: 10px">
                            <el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
                            <el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%"
                                @click.native.prevent="handleLogin">
                                <span v-if="!loading">登 å½•</span>
                                <span v-else>登 å½• ä¸­...</span>
                            </el-button>
                            <el-button v-else :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleBind">
                            <el-button v-else :loading="loading" type="primary" style="width: 100%"
                                @click.native.prevent="handleBind">
                                <span v-if="!loading">绑 å®š</span>
                                <span v-else>绑 å®š ä¸­...</span>
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--  åº•éƒ¨  -->
        <div class="el-login-footer">
            <span>
                Copyright Â© 2004－2023
                <a target="_blank" href="https://www.smartearth.cn/">SmartEarth</a>
                All Rights Reserved.
            </span>
            </div>
            <div class="contMessage">
                <span>
                    Copyright Â© 2004－2023
                    <a target="_blank" href="https://www.smartearth.cn/">SmartEarth</a>
                    All Rights Reserved.
                </span>
            </div>
        </div>

    </div>
</template>

@@ -146,7 +149,7 @@
                        .push({
                            path: this.redirect || '/',
                        })
                        .catch(() => {});
                        .catch(() => { });
                })
                .catch(() => {
                    this.loading = false;
@@ -169,7 +172,7 @@
                    .push({
                        path: this.redirect || '/',
                    })
                    .catch(() => {});
                    .catch(() => { });
                if (this.captchaOnOff) {
                    this.getCode();
                    this.loading = false;
@@ -200,7 +203,7 @@
            const errorId = this.$route.query.errorId;
            if (errorId !== undefined && errorId !== null) {
                getErrorMsg(errorId)
                    .then((res) => {})
                    .then((res) => { })
                    .catch((err) => {
                        this.$router.push({ query: {} });
                        console.log(err);
@@ -274,7 +277,7 @@
                                .push({
                                    path: '/',
                                })
                                .catch(() => {});
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.loading = false;
@@ -312,7 +315,7 @@
                                .push({
                                    path: this.redirect || '/',
                                })
                                .catch(() => {});
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.loading = false;
@@ -327,77 +330,109 @@
};
</script>

<style lang="scss">
<style scoped lang="scss">
.login {
    height: 100%;
    overflow: auto;
}
.logoImg {
    width: 100px;
    height: 100px;
    background: url('../assets/logo/logo.png') no-repeat;
    background-size: 100% 100%;
    float: left;
}
.bindAccountTitle {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #333;
    font-size: 24px;
}

.login-form {
    margin: 30px auto 0 auto;
    padding: 15px;
    z-index: 1000;
    max-width: 350px;

    input {
        height: 38px;
        background-color: #f1f1f1;
        color: #666;
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.login-code {
    width: 33%;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
        border-radius: 3px;
        height: 38px;
    }
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    // overflow: auto;
    width: 100%;
    text-align: center;
    color: #333;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
    position: absolute;
    background: url('../assets/logo/sdw.png') no-repeat;
    background-size: 100% 100%;

.alert-box-wrap {
    border: 1px solid #f78e21;

    .alert-message-wrap {
        font-size: 14px;
        font-family: '微软雅黑';
        color: rgba(197, 41, 41, 0.856);
        margin-left: 10px;
    .logoTitle {
        height: 266px;
        background: rgba(51, 132, 198, 1);
        width: 100%;
        z-index: -1;
        position: absolute;
        display: flex;
        justify-content: center;

        .titleItem {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .logImg {
            width: 89px;
            height: 89px;
            background: url('../assets/logo/logo2.png') no-repeat;
            background-size: 100% 100%;
        }

        .logText {
            font-family: SourceHanSansSC-Bold;
            font-size: 36px;
            font-weight: bold;
            color: #ffffff;
            margin-left: 19px;
        }
    }

    .logContent {
        width: 100%;
        height: calc(100% - 266px);
        bottom: 0px;
        position: absolute;
        display: flex;
        flex-direction: column;

        .contFrom {
            flex: 1;
        }

        .contMessage {
            width: 100%;
            display: flex;
            justify-content: center;
            line-height: 40px;
        }

    }

    .login-form {
        margin: 30px auto 0 auto;
        padding: 15px;
        z-index: 1000;
        max-width: 350px;

        input {
            height: 38px;
            background-color: #f1f1f1;
            color: #666;
        }

        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
        }
    }

    .login-code {
        width: 33%;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
            border-radius: 3px;
            height: 38px;
        }
    }

    .alert-box-wrap {
        border: 1px solid #f78e21;

        .alert-message-wrap {
            font-size: 14px;
            font-family: '微软雅黑';
            color: rgba(197, 41, 41, 0.856);
            margin-left: 10px;
        }
    }

}
</style>

 src/views/visual/mapView/index.vue

@@ -51,20 +51,20 @@
</template>

<script>
import mapInit from '@/assets/js/mapSdk/index.js';
import mapInit from '../../../assets/js/mapSdk/index.js';
import mapData from '@/assets/js/mapSdk/mapData.js';
import layerManager from './layerManager.vue';
import menuManager from '@/assets/js/mapSdk/menuManager.js';
import location from './location.vue';
import knowledge from './knowledge.vue';
import lineRoaming from './lineRoaming.vue';
import { layer_selectAll } from "@/api/mapView/map.js";
import { layer_selectAll } from '@/api/mapView/map.js';
import configTools from '@/assets/js/configTools';
import store from "@/store";
import store from '@/store';
import mapServer from '@/assets/js/mapSdk/mapServe';
import undergroundMode from './undergroundMode.vue';
import dataAnalysis from './dataAnalysis.vue';
import dataStatistics from './dataStatistics.vue'
import dataStatistics from './dataStatistics.vue';
import attributeInfo from './attributeInfo.vue';
import mapInfo from './mapInfo.vue';
export default {
@@ -77,22 +77,26 @@
            childMenuIsShow: true,
            childMenuOption: [],
            childObj: [],
            showEarth: false,
        };
    },
    created() {
        console.log('created');
    },
    mounted() {
        this.showEarth = true;
        this.mapViewStart();
        this.$busEvent.$on('CHANGE_MAPINFO', res => {

            this.setMapInfo(res)

        this.$busEvent.$on('CHANGE_MAPINFO', (res) => {
            this.setMapInfo(res);
        });

    },
    beforeCreate() {
        console.log('beforeCreate');
    },
    beforeDestroy() {
        this.$store.dispatch('mapLayers/changeLayerTree', [])
        this.$store.dispatch('mapLayers/changeDefaultLayer', [])
        this.$store.dispatch('mapLayers/changeLayerTree', []);
        this.$store.dispatch('mapLayers/changeDefaultLayer', []);
    },


    methods: {
        setMapInfo(res) {
@@ -102,41 +106,85 @@
                setTimeout(() => {
                    this.$refs && this.$refs.mapInfo && this.$refs.mapInfo.open();
                }, 200);


            }

        },
        mapViewStart() {
            this.menuOption = mapData.menuData;
            this.$nextTick(() => {
                mapInit.Init();
                setTimeout(() => {
                  if(config.baseModel.url){
                    mapServer.addLayer(config.baseModel);
                  }
                    this.getSelectLayers();
                }, 500);

            });
            window.earthCtrl = new SmartEarth.EarthCtrl(
                'sdkContainer',
                {
                    // éšè—é»˜è®¤åº•å›¾
                    defaultImagery: false,
                    // éšè—logo
                    printLog: false,
                    // sceneMode: SmartEarth.Cesium.SceneMode.SCENE2D
                    StaticFileBaseUrl: '/CimSDK/',
                },
                {},
                {},
                () => {
                    setTimeout(() => {
                        mapServer.layerList = [];
                        //初始化Cesium
                        window.Cesium = SmartEarth.Cesium;
                        // åˆå§‹åŒ–Viewer
                        window.Viewer = window.earthCtrl.viewer;
                        //设置地球颜色
                        window.Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9');
                        window.Viewer.imageryLayers.removeAll();
                        const serverUrl = config.geoServer;
                        const layer = new Cesium.WebMapServiceImageryProvider({
                            url: serverUrl.url + serverUrl.wms,
                            layers: serverUrl.layers[1],
                            parameters: {
                                transparent: true,
                                format: 'image/png',
                                srs: 'EPSG:4490',
                                styles: '',
                                cql_filter: '',
                            },
                            tileWidth: 512,
                            tileHeight: 512,
                        });

                        window.Viewer.imageryLayers.addImageryProvider(layer);
                        this.setStart();

                    }, 500);
                }
            );
        },
        setStart() {
            mapInit.Init();
            setTimeout(() => {
                if (config.baseModel.url) {
                    var model = window.earthCtrl.factory.create3DTilesets({
                        url: config.baseModel.url

                    });
                }
                this.getSelectLayers();
            }, 500);
        },

        getSelectLayers() {
            layer_selectAll().then(response => {
                if (response.data.code != 200) return
            layer_selectAll().then((response) => {
                if (response.data.code != 200) return;
                const defaultLayer = [];
                const val = response.data.result.filter(item => {
                const val = response.data.result.filter((item) => {
                    item.checked = false;
                    if (item.type == 2 && item.isShow == 1) {
                        item.checked = true;
                        mapServer.addLayer(item)
                        defaultLayer.push(item.id)
                        mapServer.addLayer(item);
                        defaultLayer.push(item.id);
                    }
                    return item;
                })
                this.$store.dispatch('mapLayers/changeDefaultLayer', defaultLayer)
                var obj = configTools.getTreeData(val)
                this.$store.dispatch('mapLayers/changeLayerTree', obj)
            })
                });
                this.$store.dispatch('mapLayers/changeDefaultLayer', defaultLayer);
                var obj = configTools.getTreeData(val);
                this.$store.dispatch('mapLayers/changeLayerTree', obj);
            });
        },
        setMenuClose() {
            this.menuIsShow = !this.menuIsShowx;

 src/views/visualization/data.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,184 @@
const data = [
    {
        title: '总览',

        val: [
            {
                name: '事件',
                t1: '已复电',
                t2: '未复电',
                v1: 318,
                v2: 43,
            },
            {
                name: '客户',
                v1: 618,
                v2: 60,
                t1: '已复电',
                t2: '未复电',
            },
            {
                name: '投诉',
                v1: 18,
                v2: 3,
                t1: '已答复',
                t2: '未答复',
            },
            {
                name: '短信',
                v1: 1218,
                v2: 122,
                t1: '已通知',
                t2: '未通知',
            },
        ],
    },
    {
        title: '影响客户情况',
        val: [
            {
                name: '专变客户',
                v1: 12,
                v2: 2,
                count: 14,
            },
            {
                name: '公变客户',
                v1: 270,
                v2: 70,
                count: 340,
            },
            {
                name: '保供客户',
                v1: 30,
                v2: 2,
                count: 32,
            },
            {
                name: '重要客户',
                v1: 513,
                v2: 20,
                count: 533,
            },
            {
                name: '特级客户',
                v1: 7,
                v2: 1,
                count: 8,
            },
            {
                name: '一级客户',
                v1: 105,
                v2: 21,
                count: 126,
            },
            {
                name: '二级客户',
                v1: 407,
                v2: 11,
                count: 417,
            },
        ],
    },
    {
        title: '影响设备',
        val: [
            {
                name: '变电站',
                v1: 7,
                v2: 1,
                count: 8,
            },
            {
                name: '馈线',
                v1: 12,
                v2: 2,
                count: 14,
            },
            {
                name: '母线',
                v1: 22,
                v2: 7,
                count: 29,
            },
            {
                name: '输电线路',
                v1: 54,
                v2: 3,
                count: 57,
            },
            {
                name: '公变',
                v1: 65,
                v2: 3,
                count: 68,
            },
            {
                name: '专变',
                v1: 107,
                v2: 11,
                count: 1187,
            },
            {
                name: '损失负荷',
                v1: 47,
                v2: 9,
                count: 56,
            },
        ],
    },
    {
        title: '雨',
        val: [
            {
                point: '112.56978672907,37.8558881392881',
                line: '桃环南线',
                address: '广场变电站',
                type: 'rain',
                data: [
                    23.97957226, 23.67522328, 23.64627646, 23.98678133, 23.7049411, 23.90907715, 23.97135417, 23.93937771, 24.7313574, 23.78658559, 23.86060646, 23.93976822, 23.77442911, 23.70706984, 23.97513076,
                    24.00566013, 23.68618352, 23.62046202, 23.94578353, 23.667424, 23.89900528, 23.84667184, 23.79052521, 23.54961054,
                ],
                source: '山西省气象局',
                time: '2024 -09 - 26 10:06: 40',
                level: '特大暴雨',
            },
        ],
    },

    {
        title: '雪',
        val: [
            {
                point: '112.54236790420437.8448783429948',
                line: '沙北线',
                address: '太原市市政建设开发处箱变',
                type: 'snow',
                data: [
                    0.9637209, 0.9645375, 0.973203, 0.95669932, 0.96515904, 0.96456309, 0.96226909, 0.95940984, 0.97185096, 0.95898406, 0.96430508, 0.96534445, 0.96647128, 0.95301892, 0.96867214, 0.9640161, 0.95022946,
                    0.96365523, 0.96611146, 0.97417531, 0.96427799, 0.96411997, 0.96401091, 0.96554052,
                ],
                source: '山西省气象局',
                time: '2024-09-26 10:06:40',
                level: '特大暴雪',
            },
        ],
    },
    {
        val: [
            {
                point: '112.542367904204 37.839565698022',
                line: '丈字头',
                address: '老军营开闭所',
                type: 'fire',
                data: '',
                source: '山西省应急指挥中心',
                time: '2024-09-26 10:06:40',
                level: '火灾',
            },
        ],

        title: '火',
    },
];
export default data;

 src/views/visualization/index.vue

@@ -42,7 +42,6 @@
import analysis from '@/views/visual/analysis/index.vue'
import lineLoss from './lineLoss.vue';
import statistics from '@/views/visual/statistics/index.vue'
import { type } from 'jquery';
export default {
    components: {
        mapView, leftMenu,

 src/views/visualization/leftMenu.vue

@@ -1,23 +1,25 @@
<template>
    <div class="leftMnu">
        <div class="menuBox">
            <div class="aside-title">{{ title.t1 }}</div>
            <div class="echartBox">
                <div id="letftEchart1" class="chartBox"></div>
            </div>
            <chart-vue :childData="childData"></chart-vue>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t2 }}</div>
            <chart-vue :childData="childData1"></chart-vue>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t3 }}</div>
            <chart-vue :childData="childData2"></chart-vue>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import chartVue from './list/chart.vue';
import data from './data.js';
export default {
    components: {
        chartVue
    },
    props: {
        leftChartData: {
            type: Object,
@@ -26,94 +28,36 @@
    },
    data() {
        return {
            title: {
                t1: 'xxx',
                t2: 'XXXX',
                t3: 'xxxxx'
            },
            myLeftChart1: null,
            leftChartOption: {
                lenData: [],
                xData: [],
                serData: [],
            },
            childData: null,
            childData1: null,
            childData2: null,
        }
    },
    watch: {
        leftChartData: {
            deep: true,
            handler(res) {
                if (res) {
                    if (res.type == "left1") {
                        this.setLeftChart1(res.val)
                    }
                }

            }
        }
    },
    mounted() {
        this.initEchart();
    },
    methods: {
        setLeftChart1(res) {
            console.log(res);

            if (!this.myLeftChart1) {
                this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
            }
            if (this.leftChartOption.lenData.length == 0) {
                this.title.t1 = res.head[1]
                this.leftChartOption.lenData.push(res.head[0])
                const colors=['#67C23A','#E6A23C','#F56C6C']
                for (var i = 0; i < 3; i++) {
                    this.leftChartOption.serData.push({
                        name: res.head[i+1],
                        type: 'line',
                        stack: 'Total',
                        data: [],
                        lineStyle: {
                            color: colors[i], // æŠ˜çº¿é¢œè‰²

                        }
                    })
                }
            }
            var option = this.getChartOption(res)
            this.myLeftChart1 && this.myLeftChart1.setOption(option);
        initEchart() {
            this.initEchart1();
            this.initEchart2();
            this.initEchart3();
        },
        getChartOption(res) {
            for(var i = 0;i<3;i++){
                this.leftChartOption.serData[i].data.push(res.data[i+1])
            }
         

            this.leftChartOption.xData.push(res.data[0])
            return {
                legend: {
                    show: false
                },

                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.leftChartOption.xData,
                    axisLine: {
                        lineStyle: {
                            color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
                        }
                    }
                },
                series: this.leftChartOption.serData
            }
        initEchart1() {
            var chart1= data[3];
            chart1.id = "myChart01";
            this.childData =chart1
        },
        initEchart2() {
            var chart2= data[4];
            chart2.id = "myChart02";
            this.childData1 = chart2
        }, initEchart3() {
            var chart3= data[5];
            chart3.id = "myChart03";
            this.childData2 = chart3
        }
    }
}

 src/views/visualization/list/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,201 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title">{{ childData.title }}</div>
        <div class="echartBox">
            <table class="chartTable">
                <tr>
                    <th></th>
                    <th>
                        çº¿è·¯
                    </th>
                    <th>
                        ç±»åž‹
                    </th>

                    <th>
                        æ“ä½œ
                    </th>
                </tr>
                <tr>
                    <td class="chartTd" colspan="4">
                        <div class=" elDriver">
                        </div>
                    </td>
                </tr>
                <tr v-for="(item, i) in childData.val">
                    <td>{{ item.address }}</td>
                    <td>{{ item.line }}</td>
                    <td style="color:#f56c6c">{{ item.level }}</td>
                    <td style="color:#409eff">
                        <el-button v-show="flagData != item.address" class="elButton" type="primary" plain size="mini"
                            @click="setChangeItem(item)">详情</el-button>
                        <el-button v-show="flagData == item.address" class="elButton" type="danger" plain size="mini"
                            @click="setCannelItem(item)">重置</el-button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        childData: {
            type: Object,
            default: null
        }
    },
    watch: {
        childData(newValue, oldValue) {
            if (newValue) {
                this.chartId = newValue.id;
                this.title = newValue.title;
                setTimeout(() => {
                    this.setEchartChange(newValue)
                }, 1000);
            }
        }
    },
    data() {
        return {
            chartId: "",
            title: "",
            flagData: null,
        }
    },
    methods: {
        setCannelItem() {
            this.flagData = null;
        },
        setChangeItem(res) {
            this.flagData = res.address;
        },

        setEchartChange(res) {
            if (!res.data) return;
            const data = res.data;
            const id = document.getElementById(this.chartId)
            var std = [];
            for (var i = 0; i < data.length; i++) {
                var h = i + 1
                var t = h > 10 ? h : "0" + h;
                std.push(t + ":00:00")
            }
            const myChart = echarts.init(id);
            var option = {
                title: {
                    text: res.address,
                    textStyle: {
                        color: "white"
                    }
                },
                xAxis: {
                    type: 'category',
                    data: std,
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'WHITE' // è®¾ç½®å­—体颜色为红色
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        data: data,
                        type: 'line',
                        smooth: true,
                        // itemStyle: {
                        //     normal: {

                        //         lineStyle: {
                        //             color: ""// çº¿çš„颜色
                        //         }
                        //     }
                        // }
                    }
                ]
            };


            option && myChart.setOption(option);
        }
    }
}
</script>

<style lang="scss" scoped>
.chartListBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .aside-title {
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 15px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .echartBox {
        flex: 1;
        padding: 5px;
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;
        // justify-content: space-around;

        .myChart {
            width: 100%;
            height: 100%;
        }

        .chartTd {
            width: 100%;
            padding: 0px !important;
        }

        .elDriver {
            width: 100%;
            height: 2px;
            background: #409EFF;
            margin: 10px 0px;

        }

        .chartTable {
            width: 100%;

            td {
                text-align: center;

                .elButton {
                    padding: 5px 10px;
                }
            }
        }

    }
}
</style>

 src/views/visualization/list/chartList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title">{{ childData.title }}</div>
        <div class="echartBox">
            <div class="chartMenu" v-for="(item, key) in childData.val" :key="key">
                <table class="chartTable">
                    <tr>
                        <td></td>
                        <td>{{ item.t1 }}</td>
                        <td>{{ item.t2 }}</td>
                    </tr>

                    <tr>
                        <td class="chartTd" colspan="3">
                            <div class="elDriver">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ item.name }}</td>
                        <td style="color:#67c23a">{{ item.v1 }}</td>
                        <td style="color:#f56c6c"> {{ item.v2 }}</td>
                    </tr>
                </table>

            </div>

        </div>
    </div>
</template>

<script>


export default {
    props: {
        childData: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            // childData:null,
        }
    }
}
</script>

<style lang="scss" scoped>
.chartListBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .aside-title {
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 15px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .echartBox {
        flex: 1;
        padding: 5px;
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .chartTd {
            width: 100%;
            padding: 0px !important;
        }

        .elDriver {
            width: 100%;
            height: 2px;
            background: #409EFF;
            margin: 10px 0px;

        }

        .chartTable {
            width: 100%;

            td {
                text-align: center;
            }
        }

    }
}
</style>

 src/views/visualization/list/chartList1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,107 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title">{{ childData.title }}</div>
        <div class="echartBox">
            <table class="chartTable">
                <tr>
                    <th></th>
                    <th>
                        å·²å¤ç”µ
                    </th>
                    <th>
                        æœªå¤ç”µ
                    </th>
                    <th>
                        æ€»æ•°
                    </th>
                </tr>
                <tr>
                    <td class="chartTd" colspan="4">
                        <div class=" elDriver">
                        </div>
                    </td>
                </tr>
                <tr v-for="(item,i) in childData.val">
                    <td>{{ item.name }}</td>
                    <td style="color:#67c23a">{{ item.v1 }}</td>
                    <td style="color:#f56c6c"> {{ item.v2 }}</td>
                    <td style="color:#409eff">{{ item.count }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>


export default {
    props: {
        childData: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            // childData:null,
        }
    }
}
</script>

<style lang="scss" scoped>
.chartListBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .aside-title {
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 15px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .echartBox {
        flex: 1;
        padding: 5px;
        position: relative;
        color: white;
        display: flex;
   

        .chartTd {
            width: 100%;
            padding: 0px !important;
        }

        .elDriver {
            width: 100%;
            height: 2px;
            background: #409EFF;
            margin: 0px 0px;

        }

        .chartTable {
            width: 100%;
th{
    text-align: center;
}
            td {
                text-align: center;
            }
        }

    }
}
</style>

 src/views/visualization/rightMenu.vue

@@ -1,30 +1,30 @@
<template>
  <div class="rightMnu">
    <div class="menuBox">
      <div class="aside-title">{{ title.t1 }}</div>
      <!-- <div class="aside-title">{{ title.t1 }}</div>
      <div class="echartBox">
        <div id="rightEchart1" class="chartBox"></div>
      </div>
      </div> -->
      <chart-list :childData="childData"></chart-list>
    </div>
    <div class="menuBox">
      <div class="aside-title">{{ title.t2 }}</div>
      <div class="echartBox">
        <div id="rightEchart2" class="chartBox"></div>
      </div>
     <chart-list1 :childData="childData1"></chart-list1>
    </div>
    <div class="menuBox">
      <div class="aside-title">{{ title.t3 }}</div>
      <div class="echartBox">
        <div id="rightEchart3" class="chartBox"></div>
      </div>
      <chart-list1 :childData="childData2"></chart-list1>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

import chartList from './list/chartList.vue';
import chartList1 from './list/chartList1.vue';
import data from './data.js';
export default {
  components:{
    chartList,chartList1
  },
  props: {
    rightChartData: {
      type: Object,
@@ -36,8 +36,12 @@
      title: {
        t1: 'xxx',
        t2: 'XXXX',
        t3: 'xxxxx'
      }
        t3: 'xxxxx',

      },
      childData:null,
      childData1:null,
      childData2:null,
    }
  },
  watch: {
@@ -63,155 +67,158 @@
      this.initEchart3();
    },
    initEchart1() {
      var myChart = echarts.init(document.getElementById('rightEchart1'));
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#409EFF', // æŠ˜çº¿é¢œè‰²
     this.childData= data[0];
      // var myChart = echarts.init(document.getElementById('rightEchart1'));
      // var option = {
      //   xAxis: {
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //     axisLine: {
      //       lineStyle: {
      //         color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
      //       }
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     axisLine: {
      //       lineStyle: {
      //         color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       data: [820, 932, 901, 934, 1290, 1330, 1320],
      //       type: 'line',
      //       smooth: true,
      //       lineStyle: {
      //         color: '#409EFF', // æŠ˜çº¿é¢œè‰²

            }
          }
        ]
      };
      //       }
      //     }
      //   ]
      // };

      option && myChart.setOption(option);
      // option && myChart.setOption(option);

    },

    initEchart2() {
      var myChart1 = echarts.init(document.getElementById('rightEchart2'));
      var option1 = {
        title: {
      this.childData1=data[1];
      // var myChart1 = echarts.init(document.getElementById('rightEchart2'));
      // var option1 = {
      //   title: {

          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          show: false
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option1 && myChart1.setOption(option1);
      //     subtext: 'Fake Data',
      //     left: 'center'
      //   },
      //   tooltip: {
      //     trigger: 'item'
      //   },
      //   legend: {
      //     orient: 'vertical',
      //     left: 'left',
      //     show: false
      //   },
      //   series: [
      //     {
      //       name: 'Access From',
      //       type: 'pie',
      //       radius: '50%',
      //       data: [
      //         { value: 1048, name: 'Search Engine' },
      //         { value: 735, name: 'Direct' },
      //         { value: 580, name: 'Email' },
      //         { value: 484, name: 'Union Ads' },
      //         { value: 300, name: 'Video Ads' }
      //       ],
      //       emphasis: {
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //     }
      //   ]
      // };
      // option1 && myChart1.setOption(option1);
    },
    initEchart3() {
      var myChart2 = echarts.init(document.getElementById('rightEchart3'));
      // prettier-ignore
      let dataAxis = ['点', '击', '柱', '子',];
      // prettier-ignore
      let data = [220, 182, 191, 234, 290];
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      var option2 = {
        title: {
      this.childData2=data[2];
      // var myChart2 = echarts.init(document.getElementById('rightEchart3'));
      // // prettier-ignore
      // let dataAxis = ['点', '击', '柱', '子',];
      // // prettier-ignore
      // let data = [220, 182, 191, 234, 290];
      // let yMax = 500;
      // let dataShadow = [];
      // for (let i = 0; i < data.length; i++) {
      //   dataShadow.push(yMax);
      // }
      // var option2 = {
      //   title: {

        },
        xAxis: {
          data: dataAxis,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
            }
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          },
      //   },
      //   xAxis: {
      //     data: dataAxis,
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
      //       }
      //     },
      //     z: 10
      //   },
      //   yAxis: {
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: 'white' // è®¾ç½®ä¸ºçº¢è‰²
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLabel: {
      //       color: '#fff'
      //     },

        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: data
          }
        ]
      };
      option2 && myChart2.setOption(option2);
      //   },
      //   dataZoom: [
      //     {
      //       type: 'inside'
      //     }
      //   ],
      //   series: [
      //     {
      //       type: 'bar',
      //       showBackground: true,
      //       itemStyle: {
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //           { offset: 0, color: '#83bff6' },
      //           { offset: 0.5, color: '#188df0' },
      //           { offset: 1, color: '#188df0' }
      //         ])
      //       },
      //       emphasis: {
      //         itemStyle: {
      //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //             { offset: 0, color: '#2378f7' },
      //             { offset: 0.7, color: '#2378f7' },
      //             { offset: 1, color: '#83bff6' }
      //           ])
      //         }
      //       },
      //       data: data
      //     }
      //   ]
      // };
      // option2 && myChart2.setOption(option2);
    }



 vue.config.js

@@ -8,7 +8,7 @@
const CompressionPlugin = require('compression-webpack-plugin');
const { log } = require('console');

const name = process.env.VUE_APP_TITLE || '泰瑞工业数字孪生管理平台'; // ç½‘页标题
const name = process.env.VUE_APP_TITLE || '山西配网'; // ç½‘页标题

const port = process.env.port || process.env.npm_config_port || 80; // ç«¯å£
console.log( "123",process.env.VUE_APP_SERVER_API_URL);