feat:项目初始化

.env

@@ -0,0 +1,3 @@
+VUE_APP_MARS3D_SOURCE=module
+
+# VUE_APP_MARS3D_SOURCE=local

.gitignore

@@ -0,0 +1,28 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# System Files
+.DS_Store
+package-lock.json
+yarn.lock

.npmrc

@@ -0,0 +1,12 @@
+registry=https://registry.npmmirror.com/
+#//10.34.53.35:7001/:_auth="eXVleGI6aU51b2FuT0s="
+#@ct:registry=http://10.34.53.35:7001/
+#//10.38.77.5:8081/repository/npm-public/:_auth="eXVleGI6aU51b2FuT0s="
+@ct:registry=http://10.38.77.5:8081/repository/npm-public/
+
+
+
+shamefully-hoist=true
+strict-peer-dependencies=false
+ignore-workspace-root-check=true
+prefer-frozen-lockfile=true

README.md

@@ -1,3 +1,27 @@
-# tmzn-weihe
+# 渭河生态区智慧化监管平台
 
-渭河项目
+## Project setup
+```
+yarn install
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+npm run build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "weihe-map",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@ct/iframe-connect-sdk": "^1.0.17",
+    "@turf/turf": "^7.2.0",
+    "core-js": "^3.8.3",
+    "echarts": "^5.5.1",
+    "lodash-es": "^4.17.21",
+    "element-ui": "^2.15.14",
+    "mars3d": "^3.9.3",
+    "mars3d-cesium": "^1.127.0",
+    "process": "^0.11.10",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "vue": "^2.7.14",
+    "vue-router": "^3.5.2",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/config/config.json

@@ -0,0 +1,172 @@
+{
+  "map3d": {
+    "scene": {
+      "center": { "lat": 22.26707, "lng": 114.20959, "alt": 1057.2, "heading": 175.14, "pitch": -44.92 },
+      "scene3DOnly": false,
+      "shadows": false,
+      "removeDblClick": false,
+      "sceneMode": 3,
+      "showSun": true,
+      "showMoon": true,
+      "showSkyBox": true,
+      "showSkyAtmosphere": true,
+      "fog": true,
+      "fxaa": true,
+      "requestRenderMode": true,
+      "globe": {
+        "depthTestAgainstTerrain": false,
+        "baseColor": "#546a53",
+        "showGroundAtmosphere": true,
+        "enableLighting": false
+      },
+      "cameraController": {
+        "zoomFactor": 3.0,
+        "minimumZoomDistance": 1,
+        "maximumZoomDistance": 50000000,
+        "enableRotate": true,
+        "enableTranslate": true,
+        "enableTilt": true,
+        "enableZoom": true,
+        "enableCollisionDetection": true,
+        "minimumCollisionTerrainHeight": 15000
+      }
+    },
+    "control": {
+      "homeButton": false,
+      "baseLayerPicker": false,
+      "sceneModePicker": false,
+      "vrButton": false,
+      "fullscreenButton": false,
+      "navigationHelpButton": false,
+      "animation": false,
+      "timeline": false,
+      "infoBox": false,
+      "geocoder": false,
+      "selectionIndicator": false,
+      "contextmenu": { "hasDefault": true },
+      "mouseDownView": true
+    },
+    "basemaps": [
+      { "id": 10, "name": "地图底图", "type": "group" },
+      {
+        "pid": 10,
+        "name": "天地图影像",
+        "icon": "img/basemaps/tdt_img.png",
+        "type": "group",
+        "layers": [
+          { "name": "底图", "type": "tdt", "layer": "img_d" },
+          { "name": "注记", "type": "tdt", "layer": "img_z" }
+        ],
+        "show": true
+      },
+      {
+        "pid": 10,
+        "name": "天地图电子",
+        "icon": "img/basemaps/tdt_vec.png",
+        "type": "group",
+        "layers": [
+          { "name": "底图", "type": "tdt", "layer": "vec_d" },
+          { "name": "注记", "type": "tdt", "layer": "vec_z" }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "高德影像",
+        "type": "group",
+        "icon": "img/basemaps/gaode_img.png",
+        "layers": [
+          { "name": "底图", "type": "gaode", "layer": "img_d" },
+          { "name": "注记", "type": "gaode", "layer": "img_z" }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "高德电子",
+        "type": "gaode",
+        "icon": "img/basemaps/gaode_vec.png",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "百度影像",
+        "type": "group",
+        "icon": "img/basemaps/bd-img.png",
+        "layers": [
+          { "name": "底图", "type": "baidu", "layer": "img_d" },
+          { "name": "注记", "type": "baidu", "layer": "img_z" }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "百度电子",
+        "icon": "img/basemaps/bd-vec.png",
+        "type": "baidu",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "腾讯影像",
+        "icon": "img/basemaps/tencent_img.png",
+        "type": "group",
+        "layers": [
+          { "name": "底图", "type": "tencent", "layer": "img_d" },
+          { "name": "注记", "type": "tencent", "layer": "img_z" }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "腾讯电子",
+        "icon": "img/basemaps/tencent_vec.png",
+        "type": "tencent",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "ArcGIS影像",
+        "icon": "img/basemaps/esriWorldImagery.png",
+        "type": "xyz",
+        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+        "enablePickFeatures": false,
+        "show": false
+      },
+      {
+        "pid": 10,
+        "name": "微软影像",
+        "icon": "img/basemaps/bingAerial.png",
+        "type": "bing",
+        "layer": "Aerial"
+      },
+      {
+        "pid": 10,
+        "name": "黑色底图",
+        "icon": "/img/basemaps/bd-c-dark.png",
+        "type": "gaode",
+        "layer": "vec",
+        "chinaCRS": "GCJ02",
+        "invertColor": true,
+        "filterColor": "#909090",
+        "brightness": 0.6,
+        "contrast": 1.8,
+        "gamma": 0.3,
+        "hue": 1,
+        "saturation": 0
+      },
+      {
+        "pid": 10,
+        "name": "离线影像地图 (供参考)",
+        "icon": "/img/basemaps/google_img.png",
+        "type": "xyz",
+        "url": "{dataServer}/tile/img/{z}/{x}/{y}.jpg",
+        "chinaCRS": "GCJ02",
+        "maximumLevel": 13
+      },
+      {
+        "pid": 10,
+        "name": "单张图片 (本地离线)",
+        "icon": "img/basemaps/offline.png",
+        "type": "image",
+        "url": "//data.mars3d.cn/file/img/world/world.jpg"
+      }
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      window.basePathUrl = "<%= BASE_URL %>"; //标识config、widgets所在的目录
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  width: 100%;
+  height: 100%;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>

src/assets/scss/_mixins.scss

@@ -0,0 +1,174 @@
+@mixin ie11 {
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    & {
+      @content
+    }
+  }
+};
+
+@mixin horizontal-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin vertical-center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin absolute-center {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin ellipsis{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin utils-vertical-center {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: "";
+      height: 100%;
+      vertical-align: middle
+    }
+  }
+}
+
+@mixin default-webkit-scrollbar {
+  ::-webkit-scrollbar {
+    height: 8px;
+  }
+}
+
+@mixin flex-space-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin fill{
+  width: 100%;
+  height: 100%;
+}
+
+@mixin ab-pos($left,$top){
+  position: absolute;
+  left: $left;
+  top: $top;
+}
+
+@mixin ab-pos($left, $top, $right: null, $bottom: null) {
+  position: absolute;
+  left: $left;
+  top: $top;
+  @if $right != null {
+    right: $right;
+  }
+  @if $bottom != null {
+    bottom: $bottom;
+  }
+}
+
+@mixin flex-center($layout) {
+  display: flex;
+  align-items: center;
+  @if $layout == start {
+    justify-content:flex-start;
+  } @else if $layout == end {
+    justify-content: flex-end;
+  } @else if $layout == btw {
+    justify-content: space-between;
+  } @else if $layout == ad {
+    justify-content: space-around;
+  } @else if $layout == eve {
+    justify-content: space-evenly;
+  } @else {
+    justify-content: center;
+  }
+}
+
+@mixin main-bg{
+  // background-image: url('~common/guotu-img/box/side-dark.png');
+  background-size: 101% 101%;
+  background-position: -1px -1px;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+  border: 2px solid #6E674E;
+}
+
+@mixin box-active-bg{
+  // background-image: url('~common/guotu-img/default/box-active-bg.png');
+  background-color: #3e3e3e8a;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+}
+
+// 弹框的标题高亮
+@mixin pop-active-title{
+  // background-image: url('~common/guotu-img/light/active-normal.png');
+  background-repeat: no-repeat;
+  background-position: 50% 145%;
+  @include flex-center(center);
+}
+
+// 弹窗的标题文字阴影
+@mixin pop-title{
+  font-size: 14px;
+  color: #fff;
+  text-shadow: 0px 1px 4px #dcd277;
+}
+
+// 弹窗背景
+@mixin box-bg{
+  // background-image: url('@/assets/guotu-img/default/box-bg.png');
+  background-color: #3e3e3e8a;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+}
+
+@mixin scale($scale){
+  scale: $scale;
+  transform-origin: center center;
+}
+
+@mixin miss-scroll{
+  overflow: auto;
+  &::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+@mixin btn-confirm{
+  // background: url("~common/guotu-img/box/horn/btn-horn.png") no-repeat 0 0 / 100% 100%,
+  // url("~common/guotu-img/light/btn-confirm.png") no-repeat 0 0 / 100% 100%;
+  @include flex-center(center);
+  background-color: rgb(52 49 32 / 36%);
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+// 地图打点弹窗的工具栏按钮
+@mixin pop-tool-box{
+  width: 25px;
+  height: 25px;
+  @include flex-center(center);
+}
+
+// 地图打点弹窗的工具栏按钮-点亮
+@mixin pop-tool-box-active{
+  // background-image: url("~common/guotu-img/box/tool-height.png");
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}

src/assets/scss/_reset.scss

@@ -0,0 +1,75 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-weight: normal;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section {
+  display: block;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* custom */
+a {
+  color: inherit;
+  text-decoration: none;
+  -webkit-backface-visibility: hidden;
+}
+
+li {
+  list-style: none;
+}
+
+html, body {
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+button{
+  list-style: none;
+  text-decoration: none;
+}

src/assets/scss/_screen.scss

@@ -0,0 +1,61 @@
+/* 
+guotu-alarm-layout:
+t = top
+l = left
+w = width
+h = height
+
+br = border-radius
+
+tr = 带透明度的颜色
+
+ap = alpha        第一梯队
+bt = beta         第二梯队
+gm = gamma        第三梯队
+dt = delta        第四梯队
+ep = epsilon      第五梯队
+zt = zeta         第六梯队
+et = eta          第七梯队
+th = theta        第八梯队
+io = iota         第九梯队
+kp = kappa        第十梯队
+*/
+$th: 45px;
+$gap: 10px;
+
+$ap-green: #19e0af;
+
+$ap-c: #f8ebbf;
+$bt-c: #b5b89d;
+$gm-c: #58522c;
+$dt-c: #4e4928;
+$ep-c: #b1a678; // 弹框左侧字体
+$zt-c: #312e24; // 底部弹出的背景色
+
+$ap-tr:rgba(122, 113, 61, 0.36);
+$bt-tr: #c8c471da;
+
+$tool-side: 34px;
+
+$ap-br: 3px;
+$ap-fs: 12px;
+
+$lw: 22vw; //左边展开宽 & 天气宽 & 地区搜索宽
+$rw: 20vw; //告警列表宽
+
+$icon-fs:12px;
+
+/* 
+weather
+会影响 left-tool-bar 动态位置
+常规高 30px
+打开高 100px + 30px(待调整)
+*/
+$weather-h-normal:35px;
+$weather-h-expand:180px;
+
+/* 
+map-search
+*/
+$map-s-h:30px;
+$map-s-bar-w:50px; //全国二字的占位宽度

src/assets/scss/_variables.scss

@@ -0,0 +1,61 @@
+// 定义颜色规范
+$--color-primary: #409eff;
+
+$primary-color: #409eff; 
+$primary-color-1: #f0faff;
+$primary-color-2: #e3f5ff;
+$primary-color-3: #bae3ff;
+$primary-color-4: #91cfff;
+$primary-color-5: #69b9ff;
+$primary-color-6: $primary-color;
+$primary-color-7: #2b7cd9;
+
+$--color-danger: #F56C6C;
+$--color-success: #67C23A;
+$--color-warning: #e6a23c;
+$--color-info: #909399;
+$white: #fff;
+
+$sidebarBgColor: #fafafa;
+$navBgColor: #1c2b36;
+
+$color-sidebar-bg: #fafafa;
+$color-nav-bg: #1c2b36;
+$color-text: #fff;
+$color-text-d: #666;
+$color-text-dl: #999;
+
+$color-icon: #fff;
+$color-icon-d: #869fb1;
+
+// 页面文字颜色
+// 页面大标题颜色
+$admin-title-color: #303133;
+// 页面中每一块的标题颜色
+$admin-cf-title-color: #303133;
+
+
+//定义字体规范
+$font-size-s: 12px;
+$font-size-sx: 13px;
+$font-size-m: 14px;
+$font-size-mx: 16px;
+$font-size-l: 18px;
+$font-size-lx: 22px;
+
+$sidebarWidth: 280px;
+$sidebarMainMenuWidth: 45px;
+$sidebarSubMenuWidth: $sidebarWidth - $sidebarMainMenuWidth;
+
+// @function strip-unit($number) {
+//   @if type-of($number) == 'number' and not unitless($number) {
+//     @return $number / ($number * 0 + 1);
+//   }
+
+//   @return $number;
+// }
+
+:export{
+  sidebarWidth: strip-unit($sidebarWidth);
+  sidebarMainMenuWidth: strip-unit($sidebarMainMenuWidth);
+}

src/assets/scss/common.scss

@@ -0,0 +1,302 @@
+// 相对路径
+@import "assets/scss/_screen";
+@import "assets/scss/_variables";
+@import "assets/scss/_mixins";
+
+// camera-detail页中有左右header的card
+%card-wrapper{
+  .card-wrapper {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .card-label{
+        font-size: 13px;
+      }
+    }
+    // 覆盖
+    .el-card__header {
+      padding: 7px 20px;
+    }
+    .el-card__body {
+      padding: 7px 0;
+    }
+  }  
+}
+
+// 页面基础样式
+%page-base{
+  padding: 20px 30px;
+  overflow-y: auto;
+  // .page-header{
+  //   margin-bottom: 20px;
+  //   .page-title {
+  //     @include ellipsis;
+  //     max-width: 300px;
+  //     font-size: 20px;
+  //     color: $admin-title-color;
+  //   }
+  // }
+  .el-card{
+    margin-bottom: 20px;
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+  // admin页card基本样式
+  .cf-title{
+    font-size: 16px;
+    color: white;
+  }
+}
+
+// 表单一行有多个元素时，一行排列;
+%multi-form-item{
+  .multi-form-item{
+    display: flex;
+  }
+}
+
+// dialog通用样式
+%dialog-base{
+  .el-dialog__title{
+    font-size: 16px;
+  }
+  .el-form-item__label{
+    font-size: 13px;
+  }
+}
+
+// 分割线
+%split{
+  .split{
+    margin: 15px 0;
+    width: 100%;
+    border-bottom: 1px solid #ebeef5;
+  }
+}
+
+// 拥有左右header的card默认样式
+%card-base{
+  .card-wrapper{
+    .card-header{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
+// 拥有左右header的card默认样式
+%card-base-table{
+  @extend %card-base;
+  .card-wrapper{
+    .card-main{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .el-table{
+        // 在 flex-direction: column 下 flex: 1(1 1 0) 的元素显示异常，需要修改为-> flex: 1 1 auto;
+        flex: auto;
+      }
+      .el-pagination{
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+// add-item的btn存在边界情况，内容不居中;
+// .add-item-btn {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   width: 20%;
+// }
+
+// 覆盖elem样式: form-item包含多个元素时，并排一行排列
+// .el-form-item__content {
+//   display: flex;
+//   .add-item-btn{
+//     margin-left: 10px;
+//   }
+// }
+
+// 时间轴
+.el-popover{
+  word-break: normal;
+}
+%timeline-item{
+  .timeline-item{
+    position: relative;
+    margin-left: 5px;
+    border-left: 2px solid #409eff;
+    word-break: break-all;
+    &::before{
+      content: '';
+      position: absolute;
+      left: -7px;
+      top: 10px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: #409eff;
+    }
+    &:first-child{
+      &::before{
+        top: 5px;
+      }
+      .header{
+        padding-top: 0;
+      }
+    }
+    .lineborder{
+      padding-left: 20px;
+    }
+    .header{
+      padding: 5px 0 5px 0;
+      font-weight: bold;
+    }
+    .item{
+      padding-bottom: 5px;
+      line-height: 1.8;
+      .title{
+        color: #606266;
+        .text{
+          color: #303133;
+        }
+      }
+    }
+    img{
+      margin: 10px 0;
+      width: 90%;
+    }
+  }
+}
+
+
+%el-pagination-common {
+  margin-top: 20px;
+  text-align: center;
+}
+.hover-zoom-img-wrapper{
+  z-index: 4000 !important;
+}
+
+.common-bg-corner{
+  background-repeat: no-repeat;
+  background-image: url('~common/guotu-img/corner-1.png'), url('~common/guotu-img/corner-3.png'), url('~common/guotu-img/corner-2.png');
+  background-position: top left, bottom left, bottom right;
+  padding: 3px;
+  background-size: 12px 12px;
+  position: relative;
+  .inner-container{
+    background: linear-gradient(360deg, rgba(#000000, 0.8) 0%, rgba(#493A14, 0.8) 100%);
+    border: 1px solid #6E674E;
+  }
+  .close-btn{
+    top: -8px;
+    right: -8px;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+    &:hover{
+      cursor: pointer;
+    }
+  }
+}
+.info-table-common{
+  width: 90vw;
+  position: fixed;
+  height: 30vh;
+  left: 30px;
+  bottom: 10px;
+  z-index: 100;
+  .inner-container{
+    width: 100%;
+    height: 100%;
+    .info-title{
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      text-shadow: 0px 1px 4px #DCD277;
+      .info-name{
+        border-bottom: 1px solid;
+        border-image: linear-gradient(90deg, rgba(255, 222, 76, 0), rgba(255, 222, 76, 1), rgba(255, 222, 76, 0)) 1 1;
+        height: 70%;
+        padding: 0 10px;
+      }
+    }
+    .info-table{
+      height: calc(100% - 40px);
+      .top-table{
+        height: calc(100% - 40px);
+        overflow: auto;
+        padding: 0 10px;
+        .el-table{
+          background-color: transparent;
+          color: #E4E7C1;
+          .el-table__header{
+            background-color: rgba(#7A713D, 0.36);
+            color: #FFEEB1;
+            th{
+              color: #FFEEB1;
+            }
+          }
+          tr{
+            background-color: transparent;
+            &:hover{
+              background-color: rgba(#7A713D, 0.36);
+              td{
+                background-color: rgba(#7A713D, 0.36);
+              }
+            }
+            th{
+              background-color: transparent;
+              border-bottom: 1px solid #6E674E;
+            }
+            td{
+              border-bottom: 1px solid #6E674E;
+            }
+          }
+        }
+      }
+      .bottom-pagination{
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        color: #E4E7C1;
+        .el-pagination{
+          .btn-prev, .btn-next, li{
+            background-color: transparent;
+            color: #E4E7C1;
+          }
+          li.active{
+            background-color: #9F9853;
+          }
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar{
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track{
+  background: transparent;
+}
+::-webkit-scrollbar-thumb{
+  width: 5px;
+  height: 5px;
+  border-radius: 10px;
+  background-color: rgba(#796B3D, 0.76);
+}

src/assets/scss/element-variables.scss

@@ -0,0 +1,4 @@
+$--color-success: #67c23a;
+$--color-primary: teal;
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/assets/scss/index.scss

@@ -0,0 +1,236 @@
+// 相对路径
+@import '@/assets/scss/reset';
+@import '@/assets/scss/variables';
+@import '@/assets/scss/mixins';
+
+html,
+body{
+  font: 14px/1.5 'Microsoft YaHei',tahoma,arial,Hiragino Sans GB, '\5b8b\4f53',sans-serif;
+  background-color: #f3f3f3;
+  height: 100%;
+}
+
+#nprogress{
+  position: relative;
+  z-index: 3000;
+}
+
+.clearfix{
+  display: inline-block;
+  &::after{
+    display: block;
+    content: '';
+    height: 0;
+    line-height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+.ellipsis{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+.el-select-dropdown{
+  // z-index: 3000 !important;
+}
+
+.el-textarea__inner{
+  font-family: inherit;
+}
+
+.el-table .cell,
+.el-table th div{
+  // TODO: FIXME: .el-table .cell, th div 均设置了text-overflow: ellipsis, 部分场景（table-column为非文字slot，如按钮，checkbox，且没有设置宽度）在窗口宽度较小时会出现 `...`
+  text-overflow: clip !important;
+}
+
+input:-ms-input-placeholder{
+  color: #c0c4cc;
+}
+
+.el-message-box{
+  .el-message-box__title{
+    font-size: 16px;
+  }
+}
+
+$spaceamounts: (0, 2, 5, 10, 15, 20);
+$sides: (
+  "": "all",
+  "t": "top",
+  "b": "bottom",
+  "l": "left",
+  "r": "right",
+);
+
+@each $space in $spaceamounts {
+  @each $prefix, $value in $sides {
+    $property: if($prefix == '', '', -#{$value});
+    .m#{$prefix}#{$space} {
+      margin#{$property}: #{$space}px !important;
+    }
+    .p#{$prefix}#{$space} {
+      padding#{$property}: #{$space}px !important;
+    }
+  }
+}
+
+.mg-t-20{
+  margin-top: 20px !important;
+}
+.mg-l-10{
+  margin-left: 10px !important;
+}
+
+.el-dialog{
+  z-index: 4001 !important;
+  .el-dialog__body{
+    padding: 10px 15px;
+  }
+}
+
+html#baidu-map-hack{
+  height: auto;
+  overflow: auto;
+  body{
+    height: auto;
+    #app{
+      height: auto;
+      #layout{
+        #nav{
+          position: fixed;
+          left: 0;
+          right: 0;
+          top: 0;
+          z-index: 2999;
+        }
+        .main-wrapper{
+          padding-top: 60px;
+          height: auto !important;
+          #sidebar{
+            position: fixed;
+            width: $sidebarMainMenuWidth;
+            left: 0;
+            bottom: 0;
+            top: 60px;
+            z-index: 10;
+            &.expand{
+              width: $sidebarWidth;
+              & + .main{
+                margin-left: $sidebarWidth;
+              }
+            }
+          }
+          .main{
+            margin-left: $sidebarMainMenuWidth;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.BMap_cpyCtrl,
+.anchorBL{
+  display: none !important;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;
+}
+
+@keyframes flash {
+  0% {opacity: 1;}
+  50% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+.cameras-notification.el-notification{
+  width: 300px;
+  padding: 8px 25px 8px 10px;
+  .el-notification__group{
+    margin-left: 8px;
+  }
+  .el-icon-warning{
+    color: #F56C6C;
+  }
+  .el-notification__closeBtn {
+    top: 8px;
+    right: 8px;
+  }
+  .el-notification__icon{
+    height: 14px;
+    width: 14px;
+    font-size: 14px;
+    line-height: 21px;
+  }
+  .el-notification__title{
+    font-size: 14px;
+    font-weight: normal;
+    color: #606266;
+  }
+  .el-notification__content{
+    margin: 0;
+    font-size: 14px;
+    p{
+      // @include ellipsis;
+      width: 220px;
+      .link{
+        padding-left: 8px;
+        color: #409eff;
+        cursor: pointer;
+        &:hover{
+          opacity: .8;
+        }
+        &.active{
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.text-link{
+  padding-right: 8px;
+  color: #409eff;
+  cursor: pointer;
+  &.disabled{
+    cursor: not-allowed; 
+    color: #909399;
+  }
+  &.danger{
+    color: $--color-danger;
+  }
+  &.warning{
+    color: $--color-warning;
+  }
+  &:hover{
+    opacity: .8;
+  }
+  &.active{
+    opacity: 1;
+  }
+}

src/assets/scss/map.scss

@@ -0,0 +1,13 @@
+.tdt-cluster0{
+  span{
+    margin: 0 !important;
+  }
+}
+.map-filter{
+  .tdt-tile[src*="tianditu"]{
+    filter: contrast(0.53) sepia(1) invert(1) brightness(1.2);
+  }
+}
+.tdt-container{
+  background: transparent !important;
+}

src/main.js

@@ -0,0 +1,32 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "@/assets/iconfont/iconfont.css";
+// element引入
+import Element from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+// sdk引入
+import sdk from "@ct/iframe-connect-sdk";
+import router from "./router";
+import store from "./store";
+
+Vue.config.productionTip = false;
+// 挂载请求sdk
+const { iframeSDK, requestSDK, postMsgUtil } = sdk;
+Vue.prototype.$iframeSDK = iframeSDK;
+Vue.prototype.$requestSDK = requestSDK;
+Vue.prototype.$postMsgUtil = postMsgUtil;
+
+Vue.use(Element, { size: "small" });
+Vue.prototype.isCross = true;
+
+localStorage.setItem("isCross", true);
+postMsgUtil.listen("checkCrossResult", function ({ data }) {
+  Vue.prototype.isCross = data !== 200;
+  localStorage.setItem("isCross", data !== 200);
+});
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

src/router/index.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import { postMsgUtil } from "@ct/iframe-connect-sdk";
+import Index from "../views/index.vue";
+
+Vue.use(VueRouter);
+
+const routes = [{ path: "/allAlarm", component: Index }];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+router.beforeEach((to, from, next) => {
+  postMsgUtil.trigger(null, "middleLink", { url: "checkCross" });
+  next();
+});
+
+export default router;

src/store/home.store.js

@@ -0,0 +1,15 @@
+const homeStore = {
+  //存储数据
+  state: () => ({
+    mainMenu: "",
+  }),
+  //修改数据
+  mutations: {
+    setMenu: (state, data) => {
+      state.mainMenu = data;
+    },
+  },
+  actions: {},
+  getters: {},
+};
+export default homeStore;

src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import home from '@/store/home.store'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: { home }
+})

src/views/components/map/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div :id="`mapView_${mapKey}`" class="map-container"></div>
+</template>
+
+<script>
+import Vue from "vue";
+import "mars3d/mars3d.css";
+import * as mars3d from "mars3d";
+// 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
+Vue.prototype.mars3d = mars3d;
+Vue.prototype.Cesium = mars3d.Cesium;
+
+export default {
+  name: "MapViewer",
+  props: {
+    // 地图唯一性标识
+    mapKey: { type: String, default: "" },
+    // 初始化配置config.json的地址
+    url: String,
+    // 自定义参数
+    options: Object,
+  },
+
+  mounted() {
+    mars3d.Util.fetchJson({ url: this.url }).then((data) => {
+      this.initMars3d({ ...data.map3d, ...this.options }); // 构建地图
+    });
+  },
+
+  beforeDestroy() {
+    const map = this[`_map${this.mapKey}`];
+    if (map) {
+      map.destroy();
+      delete this[`_map${this.mapKey}`];
+    }
+    console.log(">>>>> 地图卸载完成 >>>>");
+  },
+
+  methods: {
+    initMars3d(mapOptions) {
+      if (this[`_map${this.mapKey}`]) {
+        this[`_map${this.mapKey}`].destroy();
+      }
+      // 创建三维地球场景
+      const map = new mars3d.Map(`mapView_${this.mapKey}`, mapOptions);
+      window.map = map;
+      console.log(">>>>> 地图创建成功 >>>>", map);
+      // webgl渲染失败后，刷新页面
+      map.on(mars3d.EventType.renderError, async () => {
+        warning("程序内存消耗过大，请重启浏览器");
+        window.location.reload();
+      });
+      // 抛出事件
+      this.$emit("onload", map);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.map-container {
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/views/components/menu/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="header-menu">
+    <div class="left-menu">
+      <div class="menu-item" v-for="item in leftMenuList" :key="item.id" @click="menuChange(item)">
+        <div class="left-item">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="title">渭河生态区智慧化监管平台</div>
+    <div class="right-menu">
+      <div class="menu-item" v-for="item in rightMenuList" :key="item.id" @click="menuChange(item)">
+        <div class="right-item">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MenuPanel",
+  data() {
+    return {
+      leftMenuList: [
+        { id: "left_1", name: "综合概览", active: true },
+        { id: "left_2", name: "水文信息", active: false },
+      ],
+      rightMenuList: [
+        { id: "right_1", name: "智能预警", active: false },
+        { id: "right_2", name: "安全巡查", active: false },
+        { id: "right_3", name: "采砂监控", active: false },
+      ],
+    };
+  },
+
+  methods: {
+    menuChange(item) {
+      // 重置所有菜单项的active状态
+      this.leftMenuList.forEach((i) => {
+        i.active = false;
+      });
+      this.rightMenuList.forEach((i) => {
+        i.active = false;
+      });
+      item.active = true;
+      this.$store.commit("setMenu", item.name);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.header-menu {
+  width: 100%;
+  height: 60px;
+  background: url("@/assets/image/header/menu-bg.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  .title {
+    font-size: 28px;
+    color: #ffffff;
+    letter-spacing: 4px;
+    line-height: 60px;
+    text-align: center;
+    flex: 2;
+  }
+  .menu-item {
+    font-size: 14px;
+    width: 145px;
+    line-height: 35px;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    z-index: 10;
+  }
+  .left-menu {
+    display: flex;
+    margin-left: 15px;
+    margin-top: 5px;
+    flex: 1;
+  }
+  .right-menu {
+    display: flex;
+    margin-right: 10px;
+    margin-top: 5px;
+    flex: 1;
+  }
+}
+</style>

src/views/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-container class="main-container">
+    <div class="header-container">
+      <menu-panel></menu-panel>
+    </div>
+    <el-container class="content-container">
+      <el-main>
+        <div class="home-view">
+          <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import menuPanel from "@/views/components/menu";
+import { mapState } from "vuex";
+import MainMap from "@/views/components/map";
+const basePathUrl = window.basePathUrl || "";
+export default {
+  name: "MainView",
+  components: { MainMap, menuPanel },
+  computed: {
+    ...mapState({
+      mainMenu: (state) => state.home.mainMenu,
+    }),
+  },
+  data() {
+    return {
+      mapName: "cMap",
+      configUrl: basePathUrl + "config/config.json",
+      mapOptions: {
+        scene: { center: { lat: 32.507731, lng: 111.498888, alt: 1405.2, heading: 350.3, pitch: -11.6 } },
+        basemaps: [
+          //   {
+          //     name: "天地图电子",
+          //     type: "group",
+          //     layers: [
+          //       { name: "底图", type: "tdt", layer: "vec_d", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] },
+          //       { name: "注记", type: "tdt", layer: "vec_z", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] },
+          //     ],
+          //   },
+          {
+            name: "天地图影像",
+            type: "group",
+            layers: [{ name: "底图", type: "tdt", layer: "img_d", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] }],
+            show: true,
+          },
+          {
+            type: "tdt",
+            name: "天地图注记",
+            layer: "img_z",
+            key: ["d7077257b0ca8c279c3e1bf92fb437dc"],
+            show: true,
+          },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    // 地图加载回调优化
+    async onMapload(map) {
+      window.map = map;
+      map.hasTerrain = true;
+    },
+    // 添加水面
+    // addWaterSurface(map) {
+    //   const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
+    //     name: "dataWaterCS",
+    //     url: "./Zhengchang_river.json",
+    //     symbol: {
+    //       type: "water",
+    //       styleOptions: {
+    //         normalMap: "//data.mars3d.cn/img/textures/waterNormals.jpg",
+    //         addHeight: 120,
+    //         frequency: 8000.0, // 控制波数的数字。
+    //         animationSpeed: 0.02, // 控制水的动画速度的数字。
+    //         amplitude: 5.0, // 控制水波振幅的数字。
+    //         specularIntensity: 0.8, // 控制镜面反射强度的数字。
+    //         baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
+    //         blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
+    //         opacity: 0.7, // 透明度
+    //         clampToGround: true, // 是否贴地
+    //       },
+    //     },
+    //   });
+    //   map.addLayer(geoJsonLayer);
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.main-container {
+  width: 100%;
+  flex-direction: column;
+  .el-main {
+    padding: 0px;
+  }
+}
+.header-container {
+  z-index: 100;
+  position: absolute;
+  width: 100%;
+}
+.content-container {
+  height: 100vh;
+}
+.home-view {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  box-sizing: border-box;
+}
+</style>

vue.config.js

@@ -0,0 +1,65 @@
+const { defineConfig } = require("@vue/cli-service");
+const path = require("path");
+const webpack = require("webpack");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: "/",
+  assetsDir: "static",
+  outputDir: "dist",
+  lintOnSave: false, // 是否开启eslint
+  productionSourceMap: false, // 生产环境是否生成sourceMap
+  filenameHashing: true, // 文件名哈希
+  configureWebpack: (config) => {
+    if (process.env.VUE_APP_MARS3D_SOURCE === "module") {
+      const cesiumSourcePath = "node_modules/mars3d-cesium/Build/Cesium/"; // cesium库安装目录
+      const cesiumRunPath = "./mars3d-cesium/"; // cesium运行时路径
+      let plugins = [
+        // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
+        new webpack.DefinePlugin({
+          CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath)),
+        }),
+        // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
+        new CopyWebpackPlugin({
+          patterns: [
+            { from: path.join(cesiumSourcePath, "Workers"), to: path.join(config.output.path, cesiumRunPath, "Workers") },
+            { from: path.join(cesiumSourcePath, "Assets"), to: path.join(config.output.path, cesiumRunPath, "Assets") },
+            { from: path.join(cesiumSourcePath, "ThirdParty"), to: path.join(config.output.path, cesiumRunPath, "ThirdParty") },
+            { from: path.join(cesiumSourcePath, "Widgets"), to: path.join(config.output.path, cesiumRunPath, "Widgets") },
+          ],
+        }),
+        new NodePolyfillPlugin(),
+      ];
+      return {
+        module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
+        plugins: plugins,
+      };
+    } else {
+      return {
+        externals: { "mars3d-cesium": "Cesium" }, //排除使用 mars3d-cesium
+      };
+    }
+  },
+  devServer: {
+    client: { overlay: false },
+    host: "0.0.0.0", // 也可以直接写IP地址这样方便真机测试
+    port: 3000, // 端口号
+    open: false, // 配置自动启动浏览器
+  },
+  css: {
+    // 启用 CSS modules
+    // requireModuleExtension: false,
+    // 是否使用css分离插件
+    extract: false,
+    // 开启 CSS source maps，一般不建议开启
+    sourceMap: false,
+    // css预设器配置项
+    loaderOptions: {
+      sass: {
+        additionalData: '@import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; @import "@/assets/scss/index.scss";',
+      },
+    },
+  },
+});