中图代码合并

package-lock.json

@@ -3958,6 +3958,15 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/copy-concurrently/download/copy-concurrently-1.0.5.tgz",
@@ -7489,6 +7498,13 @@
       "integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "image-webpack-loader": {
       "version": "6.0.0",
       "resolved": "https://registry.npm.taobao.org/image-webpack-loader/download/image-webpack-loader-6.0.0.tgz",
@@ -8372,6 +8388,12 @@
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz",
@@ -8628,6 +8650,69 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+          "dev": true
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        }
+      }
+    },
     "lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -9377,6 +9462,29 @@
         }
       }
     },
+    "needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
@@ -10108,6 +10216,12 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
@@ -14930,6 +15044,12 @@
       "integrity": "sha1-8shUBoALmw90yfdGW4HqrSQSUvg=",
       "dev": true
     },
+    "tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "dev": true
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",

package.json

@@ -80,7 +80,9 @@
         "js-cookie": "3.0.1",
         "jsencrypt": "3.2.1",
         "jszip": "^3.10.1",
-        "file-saver": "^2.0.5"
+        "file-saver": "^2.0.5",
+        "less": "^4.1.1",
+        "less-loader": "^5.0.0"
     },
     "engines": {
         "node": ">= 6.0.0",

src/components/VueLayer/index.js

@@ -0,0 +1,9 @@
+import layer from './src/layer.js'
+
+// 为组件提供 install 安装方法，供按需引入
+layer.install = function (Vue) {
+  Vue.component('layer', layer);
+}
+
+// 默认导出组件
+export default layer;

src/components/VueLayer/src/alert.vue

@@ -0,0 +1,97 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-19 16:16:24
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-24 16:02:01
+-->
+<template>
+  <base-drag :options="options" :cls="cls">
+    <div class="vl-notify-content">
+      <i
+        class="vlayer vlicon-warning"
+        v-if="this.options.icon == 0"
+        style="color:#f4ea2a;font-size:32px"
+      ></i>
+      <i
+        class="vlayer vlicon-error"
+        v-if="this.options.icon == 1"
+        style="color:#f4ea2a;font-size:32px"
+      ></i>
+      <i
+        class="vlayer vlicon-success"
+        v-if="this.options.icon == 2"
+        style="color:#00ba9b;font-size:32px"
+      ></i>
+      <i
+        class="vlayer vlicon-wenti"
+        v-if="this.options.icon == 3"
+        style="color:#f4ea2a;font-size:32px"
+      ></i>
+      <div class="vl-notify-content-div" v-html="options.content"></div>
+    </div>
+    <div class="vl-notify-btns">
+      <pzbutton btn="primary" @click.native="btnyes" size="small">{{btns[0]}}</pzbutton>
+      <pzbutton
+        btn="default"
+        @click.native="btncancel"
+        size="small"
+        v-if="typeof(options.cancel) == 'function' || options.cancel=='cancel'"
+        style="margin-left:10px;"
+      >{{btns[1]}}</pzbutton>
+    </div>
+  </base-drag>
+</template>
+
+<script>
+import pzbutton from "./components/button/button.vue";
+import helper from "./helper/helper.js";
+import drag from "./components/drag/drag";
+
+export default {
+  data() {
+    return {
+      btns: [],
+      cls: {
+        "vl-notify-alert": true
+      }
+    };
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  methods: {
+    btnyes(event) {
+      helper.btnyes(event, this.options);
+    },
+    btncancel(event) {
+      helper.btncancel(event, this.options);
+    },
+    formatBtnText() {
+      const a = this.options.btn;
+      if (typeof a === "string") {
+        this.btns = [this.options.btn, "取消"];
+        return;
+      }
+      if (a instanceof Array) {
+        this.btns = [a[0] || "确定", a[1] || "取消"];
+      }
+    }
+  },
+  async mounted() {
+    await helper.sleep(20);
+    this.formatBtnText();
+    helper.hiddenScrollBar(this.options);
+  },
+  components: {
+    pzbutton,
+    "base-drag": drag
+  }
+};
+</script>

src/components/VueLayer/src/components/button/button.vue

@@ -0,0 +1,57 @@
+<style lang="less" scoped>
+@import "./css/button.less";
+</style>
+
+<template>
+  <button
+    v-on:click="clickon"
+    :type="type"
+    name="button"
+    class="notify-btn"
+    :class="[
+    btn ? 'notify-btn-' + btn : '',
+    size ? 'notify-btn-' + size : '',
+    {
+      'disabled': disabled,
+    }
+  ]"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    btn: { //btn的样式
+      type: String,
+      default: 'primary'
+    },
+    size: String,
+    type: { //类型，
+      type: String,
+      default: 'button'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {},
+  mounted() { },
+  methods: {
+    clickon: function() {
+      this.$emit("click", "");
+    }
+  },
+  components: {}
+}
+</script>

src/components/VueLayer/src/components/button/css/button.less

@@ -0,0 +1,83 @@
+@import "var.less";
+@import "mixin.less"; //button按钮生成工厂
+
+.btn-css(@bgcolor: @btn-primary-bgcolor) {
+    color: @btn-color;
+    background-color: @bgcolor;
+    .border(darken(@bgcolor,5%));
+
+    &.hover,
+    &:hover {
+        color: #fff;
+        background-color: darken(@bgcolor, 8%);
+    }
+
+    &.active,
+    &:active {
+        color: #fff;
+        background-color: darken(@bgcolor, 8%);
+    }
+}
+//具体样式
+//---------------------------------------------
+
+.notify-btn {
+    position: relative;
+    display: inline-block;
+    padding: 6px 10px;
+    margin-bottom: 0;
+    font-size: @btn-font-size;
+    min-width: 10px;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: top;
+    cursor: pointer;
+    background-color: #f7f7f7;
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    outline: 0;
+    -webkit-appearance: none;
+
+    &.active,
+    &:active {
+        color: inherit;
+        // background-color: #f7f7f7;
+        background-color: darken(#f7f7f7, 8%);;
+    }
+}
+
+.btn-default {
+    .btn-css(#f7f7f7);
+    color: #000;
+
+    &:hover {
+        color: #000;
+    }
+}
+
+.notify-btn-primary {
+    .btn-css(@btn-primary-bgcolor);
+}
+
+.notify-btn-success {
+    .btn-css(@bgcolor-success);
+}
+
+.notify-btn-info {
+    .btn-css(@bgcolor-info);
+}
+
+.notify-btn-warning {
+    .btn-css(@bgcolor-warning);
+}
+
+.notify-btn-danger {
+    .btn-css(@bgcolor-danger);
+}
+
+.btn-small {
+    font-size: 12px;
+    min-width: 31px;
+    min-height: 14px;
+    padding: 6px 9px;
+}

src/components/VueLayer/src/components/button/css/mixin.less

@@ -0,0 +1,14 @@
+//border
+.border(@color: #999,@width: 1px, @style: solid){
+    border: @width  @style @color;
+}
+
+.border-radius(@value: 5px){
+    border-radius: @value;
+}
+
+.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
+  box-shadow: @x @y @blur @color;
+  -moz-box-shadow: @x @y @blur @color;
+  -webkit-box-shadow: @x @y @blur @color;
+}

src/components/VueLayer/src/components/button/css/var.less

@@ -0,0 +1,23 @@
+
+
+/// bg colors
+@bgcolor: #fff;
+@bgcolor-disable: #e6ecf5;
+@bgcolor-success: #449d44; //绿色
+@bgcolor-info: #31b0d5; // 浅蓝
+@bgcolor-warning: #ec971f; //橙色
+@bgcolor-danger: #d9534f; //红色
+
+
+
+//border default
+@border-color: #c0c8c8;
+@border: 1px solid @border-color;
+
+// button
+// --------------------------------------------
+@btn-color: #fff;
+@btn-bgcolor: #ccc;
+@btn-bgcolor-hover: #58b4e6;
+@btn-font-size: 14px;
+@btn-primary-bgcolor: #20a0ff;

src/components/VueLayer/src/components/drag/drag.vue

@@ -0,0 +1,334 @@
+<template>
+  <div
+    class="vl-notify vl-notify-main vl-notify-alert"
+    :class="cls"
+    @mousemove="move"
+    @mouseup="moveEnd"
+    @focus="resetZIndex"
+    tabindex="1"
+    :id="options.id"
+    :style="getBaseStyle"
+    :minindex="minindex"
+  >
+    <h2
+      class="vl-notice-title"
+      :style="options.layerStyle"
+      @mousedown="moveStart"
+    >
+      <span v-html="options.title" class="lv-title"></span>
+      <template v-if="options.maxmin == true">
+        <span class="lv-icon-maxmini">
+          <template v-if="maxMiniState === 0">
+            <i class="vlayer vlicon-mini lv-icon-mini" @click="mini"></i>
+            <i class="vlayer vlicon-max lv-icon-max" @click="max"></i>
+          </template>
+          <template v-else-if="maxMiniState === 1">
+            <i class="vlayer vlicon-huanyuan lv-icon-max" @click="maxmini"></i>
+          </template>
+          <template v-else-if="maxMiniState === 2">
+            <i class="vlayer vlicon-huanyuan lv-icon-min" @click="maxmini"></i>
+          </template>
+        </span>
+      </template>
+      <i class="icon-remove" @click="close"></i>
+    </h2>
+    <slot></slot>
+    <span
+      class="vl-drag-resize"
+      @mousedown="resizeHand"
+      @mouseup="resizeHandMoveEnd"
+      v-if="options.resize"
+    ></span>
+  </div>
+</template>
+<script>
+import helper from "../../helper/helper.js";
+export default {
+  data() {
+    return {
+      moveLeft: 0, //左移的距离
+      moveTop: 0, //上移的距离
+      ismove: false,
+      id: "vlip" + new Date().getTime(),
+      zindex: 1,
+      addStyle: {},
+      minindex: -2,
+      maxMiniState: 0, //0normal,1mini,2max
+      resize: {
+        isResize: false,
+        oWidth: 0,
+        oHeight: 0,
+        moveLeft: 0,
+        moveTop: 0,
+        tt: {},
+      },
+    };
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    cls: {
+      type: Object,
+      default: function () {
+        return {
+          "vl-notify-alert": true,
+        };
+      },
+    },
+  },
+  async mounted() {
+    if (this.options.shade) {
+      await helper.sleep(20);
+      //是否显示遮罩
+      document
+        .getElementsByClassName("vl-notify-mask")[0]
+        .addEventListener("mousemove", (event) => {
+          this.move(event);
+        });
+      document
+        .getElementsByClassName("vl-notify-mask")[0]
+        .addEventListener("mouseup", (event) => {
+          this.moveEnd(event);
+        });
+    } else {
+      document.addEventListener("mousemove", (event) => {
+        this.move(event);
+      });
+      document.addEventListener("mouseup", (event) => {
+        this.moveEnd(event);
+      });
+    }
+    this.resetZIndex();
+  },
+  computed: {
+    getBaseStyle() {
+      //获取z-index
+      this.resetZIndex();
+      const op = this.options;
+      const styleBase = {
+        left: op.offset[0] + "px",
+        top: op.offset[1] + "px",
+        margin: op.offset[2],
+        zIndex: this.zindex,
+        width: helper.evenNumber(op.area[0]),
+        height: helper.evenNumber(op.area[1]),
+        overflow: "hidden",
+      };
+      let a = helper.deepClone(styleBase);
+      return this.mergeJson(a, this.addStyle);
+    },
+  },
+  methods: {
+    mergeJson(options, def) {
+      for (let key in def) {
+        options[key] = def[key];
+      }
+      return options;
+    },
+    getStyle(el, styleProp) {
+      let x = document.getElementById(el);
+      let y = 0;
+      if (window.getComputedStyle) {
+        y = document.defaultView
+          .getComputedStyle(x, null)
+          .getPropertyValue(styleProp);
+      } else if (x.currentStyle) {
+        y = x.currentStyle[styleProp];
+      }
+      return y;
+    },
+    resetZIndex() {
+      let max = 500;
+      let keys = Object.keys(this.cls);
+      let doms = document.querySelectorAll("." + keys[0]); //vl-notify-iframe
+      let domZindex = 0;
+      for (let i = 0, len = doms.length; i < len; i++) {
+        let value = parseInt(this.getStyle(doms[i].id, "z-index"));
+        if (this.options.id == doms[i].id) {
+          domZindex = value;
+        }
+        if (max < value) {
+          max = value;
+        }
+      }
+      if (domZindex == max && max != 500) {
+        return;
+      }
+      //预留遮罩层z-index
+      this.zindex = max + 2;
+    },
+    async close(event) {
+      await helper.btncancel(event, this.options);
+      helper.clickMaskCloseAll(event, this.options.layer, this.options.id);
+    },
+    mini() {
+      //最小化窗口
+      let domMinIndex = parseInt(
+        document.getElementById(this.options.id).getAttribute("minindex")
+      );
+      if (domMinIndex < 0) {
+        const iframeMinList = this.options.layer.iframeMinList;
+        for (let i = 0, len = iframeMinList.length; i < len; i++) {
+          if (iframeMinList[i] === -1) {
+            this.minindex = i;
+            domMinIndex = i;
+            iframeMinList[i] = 1;
+            break;
+          }
+        }
+        if (this.minindex === -2) {
+          iframeMinList.push(1);
+          this.minindex = iframeMinList.length - 1;
+          domMinIndex = iframeMinList.length - 1;
+        }
+      }
+      this.addStyle = {
+        overflow: "hidden",
+        bottom: 0,
+        left: 250 * domMinIndex + 135 + "px",
+        width: "100px",
+        height: "42px",
+        minHeight: "42px",
+        top: "auto",
+      };
+      this.maxMiniState = 1;
+    },
+    max() {
+      //最大化窗口
+      let height = document.documentElement.clientHeight;
+      if (height % 2 === 1) {
+        height += 1;
+      }
+      this.addStyle = {
+        overflow: "hidden",
+        left: "50%",
+        width: "100%",
+        height: height + "px",
+        minHeight: "42px",
+      };
+      this.maxMiniState = 2;
+    },
+    maxmini() {
+      //还原
+      document.getElementById(this.options.id).removeAttribute("style");
+      this.addStyle = {
+        left: "tpx",
+        top: "tpx",
+        margin: "t",
+      };
+      this.maxMiniState = 0;
+    },
+    moveStart(event) {
+      helper.moveStart(event, this.options);
+      this.moveLeft = event.clientX;
+      this.moveTop = event.clientY;
+      this.ismove = true;
+    },
+    move(event) {
+      if (this.ismove) {
+        let o = document.getElementById(this.options.id + "");
+        let top = this.options.offset[1] + (event.clientY - this.moveTop);
+        let docOffsetHeight = o.offsetHeight / 2;
+        let left = this.options.offset[0] + (event.clientX - this.moveLeft);
+        let docOffsetWidth = o.offsetWidth / 2;
+        if (top <= docOffsetHeight) {
+          //顶部边界
+          top = docOffsetHeight;
+        }
+        if (left <= docOffsetWidth) {
+          //左侧边界
+          left = docOffsetWidth;
+        }
+        let docHeight = document.documentElement.clientHeight;
+        let docWidth = document.documentElement.clientWidth;
+        if (top >= docHeight - docOffsetHeight) {
+          //底部边界
+          top = docHeight - docOffsetHeight;
+        }
+        if (left >= docWidth - docOffsetWidth) {
+          //右部边界
+          left = docWidth - docOffsetWidth;
+        }
+        o.style.left = left + "px";
+        o.style.top = top + "px";
+        this.resetZIndex();
+      }
+    },
+    moveEnd() {
+      this.ismove = false;
+      this.resize.isResize = false;
+    },
+    resizeHand(event) {
+      //拉伸操作
+      let o = document.getElementById(this.options.id + "");
+      this.resize.oWidth = o.offsetWidth;
+      this.resize.oHeight = o.offsetHeight;
+      this.resize.moveTop = event.clientY;
+      this.resize.moveLeft = event.clientX;
+      this.resize.isResize = true;
+      document.body.addEventListener("mousemove", (e) => {
+        this.resizeHandMove(e);
+      });
+    },
+    resizeHandMove(event) {
+      if (this.resize.isResize) {
+        let o = document.getElementById(this.options.id + "");
+        let top = event.clientY;
+        let left = event.clientX;
+
+        let oWidth = this.resize.oWidth + (left - this.resize.moveLeft) * 2;
+        let oHeight = this.resize.oHeight + (top - this.resize.moveTop) * 2;
+
+        // console.log('top', o.offsetHeight / 2, o.getBoundingClientRect().top);
+
+        if (oWidth < 200 || oHeight < 200) {
+          return;
+        }
+        //控制边界
+        const clientRect = o.getBoundingClientRect();
+
+        //右边界
+        let docWidth = document.documentElement.clientWidth;
+        if (clientRect.right > docWidth) {
+          oWidth = docWidth - 20;
+        }
+        //底边界
+        // let docHeight = document.documentElement.clientHeight;
+        // console.log('clientRect', clientRect, docHeight);
+        // if (clientRect.right > docHeight) {
+        //   oHeight = docHeight - 20;
+        // }
+        o.style.width = oWidth + "px";
+        o.style.height = oHeight + "px";
+
+        //上边界
+        if (clientRect.top < 0) {
+          o.style.top = o.getBoundingClientRect().height / 2 + "px";
+        }
+        //左边界
+        if (clientRect.left < 0) {
+          o.style.left = o.getBoundingClientRect().width / 2 + "px";
+        }
+        //下边界
+        if (clientRect.left < 0) {
+          o.style.left = o.getBoundingClientRect().width / 2 + "px";
+        }
+      }
+    },
+    resizeHandMoveEnd() {
+      setTimeout(() => {
+        this.resize.isResize = false;
+        document.body.removeEventListener("mousemove", (e) => {
+          this.resizeHandMove(e);
+        });
+      }, 50);
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/VueLayer/src/components/input/input.vue

@@ -0,0 +1,10 @@
+<template>
+  <input class="ly-notify-btn" />
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+</style>

src/components/VueLayer/src/css/iconfont.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: "vlayer";
+  src: url('iconfont.eot?t=1563499118921');
+  /* IE9 */
+  src: url('iconfont.eot?t=1563499118921#iefix') format('embedded-opentype'),
+    /* IE6-IE8 */
+    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAV0AAsAAAAAC0gAAAUlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDdAqJEIc1ATYCJAMgCxIABCAFhFUHYxuSCRGVpB+Q/TiwG6/2sC8uo0XES9qRzSd4INxe3+UuEMxrSNVpZxJmjtbN+X8mCjPlzz2HczZgo06oktwTefRZdknaEDwLJViZRwYbDsUXYvL/jpVuPl9bzG+LtiTzZ6NybKPyio60nke0FciBN98J45lI518yoSleXGfdDAE4SdAJkbn4yiwGCmUSqBs3euRgjIIb1SESGDZbw4kKsQkdQ1utvQhsjN5ffEMPYYCGLlEXuXbERcM4v6Y3eOUiaxH95FZEs7sgMNgSJNAJUOxe0xheg0wynZA4Z6WKAYBf/qKEml6L1TrUirVhtTkNXsuqjMIsNhrCv3igI5DYUGjYQdhQZjcJh2XtUNONicgSgxMBSwc4kbAU4cQGyzA4UbDMgRIaNHg7sANguBP8QBMQ14L4DGVNs1EXq3wNi5Xb3VI4NGdUicljShx+5fM1Uhef++bn2be+yFUbCpXarEolX60W3nor9+abA/Q1sovKa+vFwVfeei2+7cZ2px5tRmlTsfeWjvVPJCuVfs7dvfVaXLfm1FAxcBubXTfsennD8GsHV2r5FmwPvvn5nO0iIeHmPw9Htzl3RMP5G3Ijr+sbwD9+zYVztpjOrjmFduhkU7mnrpijgzewuG6u/84Hm9n2P9QrcM8jSfuBh2f57YFJe+vbeijkcT/5ZgpXzvNMtaVwsutUK7fI5nKuteVFp8LuHXVRubO+z6DvzspB4ZnONXWL62Oe7eWItu0UmBDZbWCx0WKxB51Tf5Ixlyu/o8IiM1jkQTen/iRjTmdue2WDaErOrahEQlWEOLT6rMkztXyP+u03BcM9jBji137NFKUiF/oyybRP+S4D5Xk9cN+LtrTfTJj+NL/13FmWmKWSmT7N9n0X2ZDjmyh9/7aeSulvB4SR9dzk2Xr/Q+rffxUMDzFCz+XGwRa7d7cYg2ashZ8qmdLfEeKWvaO42XP09vvUH3+o+4gQWj0/wZf9VwWGGrcuZ8/eHvPmBUM9cd779ZSvkd3uVL/8Iu+Qd5Lxzj6BWN2p7mh2mUerKh5XVRHHm1V1Z7Nm9iLVZvHq58FM8PRApmWG00XG/0ZB0spsabba7axftizo9oFcID/oFiU089UF6rIHcmKEv2RuGLthXKZ0/kUXqdnXn/1W6YI4Puv6WfWMBekXrt9vMz9u+WNPX0tvOpnxvWhxXzyT2KONfnGyxQuWVU5k4nt79vLvTntb+nr+2PJjE5w9qhLl0cKxN45H3sdAAKxl8l85D6xFCrkYQP4m7pvdbrG05CzrO2v8LCS3grVE/i8X/BXuxq/K4s//BvoOf7uuAnincJaJhrgKg4aB5ovv7KiD851+rlMeo9NJBn21m1dgGGSOlAacEgeL4kF/u7RGvM38t6yRDDR2TUGyacFVwnagc+litIn1DIBTRyenu4QMpkQf6OAjAMHtJGi87gDJ7TGuEr4EuqhPsHH7AZzy/i/o0ibXbS4CkoR72L1AT61h+qS0KYq8YLhFnhUJU40zPFJX7K2BtmpKgRs0VrfpIbHwLiUGLFgN11u5HSplwQU7IE2VSMlt65o1vVJFrR5tmAJEJGgP7LwAPcoymDs82ZhBIV6g4DYIc7myODSOZOZHCkf95iuDVqXp5N6YTTL20K1RwXWSBBkwqcDSbL0+GSMOCDIWcM3GYV5JJRWxQcrZqmUp5muuLsqqn10jmEI9tZGRmWZl5+Tm0T+a1M8xBBuWMVOKMc50b/rlEwmuxfCVyMS8mLKpJs+jEQAAAA==') format('woff2'),
+    url('iconfont.woff?t=1563499118921') format('woff'),
+    url('iconfont.ttf?t=1563499118921') format('truetype'),
+    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+    url('iconfont.svg?t=1563499118921#vlayer') format('svg');
+  /* iOS 4.1- */
+}
+
+.vlayer {
+  font-family: "vlayer" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.vlicon-wenti:before {
+  content: "\e617";
+}
+
+.vlicon-error:before {
+  content: "\e67a";
+}
+
+.vlicon-success:before {
+  content: "\e62a";
+}
+
+.vlicon-mini:before {
+  content: "\e664";
+}
+
+.vlicon-warning:before {
+  content: "\e605";
+}
+
+.vlicon-huanyuan:before {
+  content: "\e658";
+}
+
+.vlicon-max:before {
+  content: "\e70e";
+}

src/components/VueLayer/src/css/index.less

@@ -0,0 +1,340 @@
+/**
+ * @Author: 左盐
+ * @Date:   2018-03-19 17:30:29
+ * @Email:  huabinglan@163.com
+ * @Project: xxx
+ * @Last modified by:   左盐
+ * @Last modified time: 2018-03-24 15:59:18
+ */
+
+*[class^="vl-notify"] {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+    transform: scale(0.5) translate(-100%, -100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+.vl-html-scrollbar-hidden {
+  overflow-y: hidden !important;
+}
+
+.vl-notify {
+  position: fixed;
+  z-index: 1000;
+  left: 50%;
+  top: 50%;
+  transform: perspective(1px) translate(-50%, -50%);
+  -ms-transform: perspective(1px) translate(-50%, -50%);
+  box-sizing: border-box;
+
+  &.vl-notify-msg-p {
+    display: inline;
+    height: 0;
+    left: 50%;
+    top: 50%;
+    transform: perspective(1px) translate(-50%, -50%);
+    -ms-transform: perspective(1px) translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, .6);
+  }
+
+  &.vl-notify-tips-p {
+    display: inline;
+    height: 0;
+    top: 0;
+    left: 0;
+    position: absolute;
+  }
+
+  &.vl-notify-main {
+    min-width: 250px;
+    max-width: 1500px;
+    min-height: 100px;
+    background-color: #fff;
+    border: 1px solid #eee;
+    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    padding-bottom: 5px;
+  }
+
+  .vl-notify-content {
+    min-height: 65px;
+    padding: 20px;
+    max-height: calc(100% - 42px);
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      overflow: none;
+    }
+  }
+
+  .vl-notify-btns {
+    text-align: right;
+    padding: 0 8px 0 0;
+  }
+
+  &.vl-notify-alert {
+    animation: fadein 0.3s;
+    max-width: 500px;
+
+    h2.vl-notice-title {
+      box-sizing: border-box;
+      width: 100%;
+      height: 42px;
+      line-height: 43px;
+      background-color: #F8F8F8;
+      border-bottom: 1px solid #eee;
+      font-size: 14px;
+      padding-left: 15px;
+      cursor: move;
+      -moz-user-select: -moz-none;
+      -webkit-user-select: none;
+      margin: 0;
+      display: flex;
+      position: relative;
+      z-index: 100000;
+      word-break: keep-all;
+      overflow: hidden;
+
+      .lv-title {
+        text-overflow: ellipsis;
+        flex: 1;
+        height: 100%;
+      }
+
+      .icon-remove {
+        position: absolute;
+        right: 10px;
+        font-size: 14px;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+        top: 0px;
+        font-weight: normal;
+        cursor: pointer;
+        color: rgb(51, 51, 51);
+        font-style: normal;
+
+        &::before {
+          content: "\2716";
+        }
+      }
+
+      .lv-icon-maxmini {
+        // position: absolute;
+        // right: 32px;
+        //  top: 0px;
+        min-width: 10px;
+        font-size: 14px;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+        font-weight: normal;
+        cursor: pointer;
+        color: rgb(51, 51, 51);
+        font-style: normal;
+        margin-right: 25px;
+
+        i {
+          margin: 0 3px;
+          font-size: 14px;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+          font-weight: normal;
+          cursor: pointer;
+          color: rgb(51, 51, 51);
+          font-style: normal;
+        }
+      }
+
+      .lv-icon-max {}
+
+      .lv-icon-mini {}
+    }
+
+    .vl-notify-content {
+      display: flex;
+
+      .vl-notify-content-div {
+        margin-left: 10px;
+        flex: 1;
+      }
+    }
+  }
+
+  &.vl-notify-iframe {
+    max-width: 2000px;
+
+    .vl-notify-content {
+      padding: 0;
+    }
+  }
+
+  &.vl-notify-loading {
+    animation: fadein 0.2s;
+    display: inline-block;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    min-width: 50px;
+    min-height: 50px;
+    display: none;
+
+    // &:nth-last-child(2) {
+    //   display: inline-block !important;
+    // }
+
+    &:nth-last-child(1) {
+      display: inline-block !important;
+    }
+
+    @keyframes loading {
+      from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    span {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      border: 2px solid #f3f3f3;
+      border-top: 2px solid #999999;
+      border-right: 2px solid #999999;
+      border-radius: 50%;
+      animation: loading 1.0s infinite linear;
+    }
+  }
+
+  &.vl-notify-msg {
+    animation: fadein 0.2s;
+    min-width: 50px;
+    display: inline;
+    min-height: 44px;
+    font-size: 14px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, .6);
+    color: #fff;
+    padding: 12px 25px;
+    text-align: center;
+    border-radius: 5px;
+
+    &.vl-notify-loading {
+      min-height: 50px;
+
+      span {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+        margin-right: 7px;
+      }
+
+      i {
+        font-style: normal;
+        font-size: 14px;
+      }
+    }
+  }
+
+  &.vl-notify-tips {
+    min-width: 50px;
+    max-width: 400px;
+    display: inline;
+    min-height: 32px;
+    position: absolute;
+    left: -50%;
+    background-color: #303133;
+    color: #fff;
+    padding: 6px 12px;
+    border-radius: 5px;
+    transform: none;
+
+    &:after {
+      content: " ";
+      border: 10px solid #303133;
+      position: absolute;
+      display: inline-block;
+    }
+  }
+
+  &.vl-notify-tips-0 {
+
+    //上
+    &:after {
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: 15px;
+      bottom: -8px;
+    }
+  }
+
+  &.vl-notify-tips-1 {
+
+    //右
+    &:after {
+      border-top-color: transparent !important;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      left: -8px;
+      top: 0;
+    }
+  }
+
+  &.vl-notify-tips-2 {
+
+    //下
+    &:after {
+      border-top-color: transparent !important;
+      border-left-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: 15px;
+      top: -8px;
+    }
+  }
+
+  &.vl-notify-tips-3 {
+    //左
+    max-width: 300px;
+
+    &:after {
+      border-top-color: transparent !important;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      right: -8px;
+      top: 0;
+    }
+  }
+
+  .vl-drag-resize {
+    display: inline-block;
+    width: 17px;
+    height: 17px;
+    position: absolute;
+    right: 0px;
+    bottom: 0;
+    z-index: 100000;
+    cursor: nw-resize;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M765.558 510.004a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM765.558 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM422.15700000000004 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM422.15700000000004 510.004a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM765.558 202.54a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM66.77700000000002 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0z' fill='%23BFBFBF'/%3E%3C/svg%3E") no-repeat center;
+  }
+}

src/components/VueLayer/src/helper/helper.js

@@ -0,0 +1,163 @@
+/**
+ * @Author: 左盐
+ * @Date:   2018-03-23 18:27:59
+ * @Email:  huabinglan@163.com
+ * @Project: xxx
+ * @Last modified by:   左盐
+ * @Last modified time: 2018-03-23 18:27:59
+ */
+export default class helper {
+  /**
+   * 点击mask关闭弹窗
+   * @param  {[type]} event [description]
+   * @param  {[type]} layer [description]
+   * @return {[type]}       [description]
+   */
+  static clickMaskCloseAll(event, layer, id) {
+    let mask = event.target.getAttribute("class");
+    if (mask && (mask.indexOf("notify-mask") > -1 || mask.indexOf("icon-remove") > -1)) {
+      layer.close(id);
+    }
+  }
+  /**
+   * 默认的yes按钮操作
+   * @param  {[type]} event [description]
+   * @return {[type]}       [description]
+   */
+  static btnyes(event, options, formValue) {
+    if (typeof (options.yes) == "function") {
+      if (options.type === 6) {
+        options.yes(formValue, options.id);
+      } else {
+        options.yes(options.id);
+      }
+    } else {
+      options.layer.close(options.id);
+    }
+  }
+  /**
+   * 默认取消按钮操作
+   * @param  {[type]} event [description]
+   * @return {[type]}       [description]
+   */
+  static async btncancel(event, options) {
+    if (typeof (options.cancel) == "function") {
+      await options.cancel(options.id);
+    } else {
+      options.layer.close(options.id);
+    }
+  }
+  /**
+   * 隐藏滚动条
+   */
+  static hiddenScrollBar(options) {
+    if (!options.scrollbar) {
+      const htmlDom = document.getElementsByTagName("html")[0];
+      const htmlClass = [...htmlDom.classList];
+      if (htmlClass.indexOf('vl-html-scrollbar-hidden') > -1) {
+        return;
+      }
+
+      const htmlWidth = htmlDom.offsetWidth;
+      //隐藏滚动条
+      // htmlDom.style.overflowY = "hidden";
+      htmlDom.classList.add("vl-html-scrollbar-hidden");
+      const htmlWidthH = htmlDom.offsetWidth;
+      htmlDom.style.marginRight = htmlWidthH - htmlWidth + "px";
+    }
+  }
+  /**
+   * 鼠标拖动弹窗
+   * @param  {[type]} event   [description]
+   * @param  {[type]} options [description]
+   * @return {[type]}         [description]
+   */
+  static moveStart(event, options) {
+    options.offset = options.offset == 'auto' ? [] : options.offset;
+    if (options.offset.length == 0) {
+      options.offset.push(document.getElementById(options.id + "").offsetLeft);
+      options.offset.push(document.getElementById(options.id + "").offsetTop);
+      options.offset.push(0);
+    }
+    if (options.offset.length == 2) {
+      options.offset.push(0);
+    }
+    options.offset[0] = (document.getElementById(options.id + "").offsetLeft);
+    options.offset[1] = (document.getElementById(options.id + "").offsetTop);
+  }
+  /**
+   * 拖动弹窗
+   * @param  {[type]} event  [description]
+   * @param  {[type]} ismove [description]
+   * @return {[type]}        [description]
+   */
+  static move(event, options, ismove) {
+    if (ismove) {
+      let o = document.getElementById(options.id + "_alert");
+      o.style.left = options.offset[0] + (event.clientX - this.moveLeft) + "px";
+      o.style.top = options.offset[1] + (event.clientY - this.moveTop) + "px";
+    }
+  }
+  /**
+   * [sleep description]
+   * @param  {[type]} ms [description]
+   * @return {[type]}    [description]
+   */
+  static sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+  /**
+   *  深度拷贝
+   * @param {*} source 
+   */
+  static deepClone(target) {
+    let copyed_objs = []; //此数组解决了循环引用和相同引用的问题，它存放已经递归到的目标对象 
+    function _deepCopy(target) {
+      if ((typeof target !== 'object') || !target) {
+        return target;
+      }
+      for (let i = 0; i < copyed_objs.length; i++) {
+        if (copyed_objs[i].target === target) {
+          return copyed_objs[i].copyTarget;
+        }
+      }
+      let obj = {};
+      if (Array.isArray(target)) {
+        obj = []; //处理target是数组的情况 
+      }
+      copyed_objs.push({
+        target: target,
+        copyTarget: obj
+      })
+      Object.keys(target).forEach(key => {
+        if (obj[key]) {
+          return;
+        }
+        obj[key] = _deepCopy(target[key]);
+      });
+      return obj;
+    }
+    return _deepCopy(target);
+  }
+  /**
+   *  取偶数
+   * @param {*} str 
+   */
+  static evenNumber(str = '') {
+    const result = str.match(/\d+/g);
+    if (result) {
+      const n = parseInt(result[0]);
+      if (n % 2 === 0) {
+        return str;
+      } else {
+        str = str.replace(n, n + 1);
+        return str;
+      }
+    } else {
+      return str;
+    }
+
+  }
+
+
+}

src/components/VueLayer/src/iframe.vue

@@ -0,0 +1,77 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-19 12:25:54
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-04-02 12:20:29
+-->
+<template>
+  <base-drag :options="options" :cls="cls">
+    <div class="vl-notify-content" :style="contentStyle" :id="id"></div>
+  </base-drag>
+</template>
+
+<script>
+import helper from "./helper/helper.js";
+import drag from "./components/drag/drag";
+
+export default {
+  data() {
+    return {
+      cls: {
+        "vl-notify-iframe": true
+      },
+      id: "vlip" + new Date().getTime()
+    };
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {};
+      }
+    }
+  },
+  components: {
+    "base-drag": drag
+  },
+  computed: {
+    contentStyle() {
+      return {
+        height: "calc(100% - 50px)",//parseInt(this.options.area[1]) - 50 + "px",
+        minHeight: "0px",
+        overflow: "auto"
+      };
+    }
+  },
+  async mounted() {
+    this.getContent();
+    helper.hiddenScrollBar(this.options);
+  },
+  methods: {
+    async getContent() {
+      await helper.sleep(10);
+      let propsData = helper.deepClone(this.options.content.data) || {};
+      propsData["layerid"] = this.options.id;
+      propsData["lydata"] = this.options.content.data;
+      propsData["lyoption"] = this.options;
+      let instance = new this.options.content.content({
+        //具体参数信息，请参考vue源码
+        parent: this.options.content.parent,
+        propsData: propsData
+      });
+      instance.vm = instance.$mount();
+      document.getElementById(this.id).appendChild(instance.vm.$el);
+      this.options.layer.instancesVue[this.options.id].iframe = instance.vm;
+    },
+
+    btnyes(event) {
+      helper.btnyes(event, this.options);
+    },
+    btncancel(event) {
+      helper.btncancel(event, this.options);
+    }
+  }
+};
+</script>

src/components/VueLayer/src/layer.js

@@ -0,0 +1,409 @@
+/**
+ * @Author: 左盐
+ * @Date:   2018-03-05 16:12:17
+ * @Email:  huabinglan@163.com
+ * @Last modified by:   左盐
+ * @Last modified time: 2018-03-31 10:39:54
+ */
+
+import layerVue from "./layer.vue";
+import maskVue from "./mask.vue";
+let Notification = function (
+  Vue,
+  globalOption = {
+    msgtime: 1.5, //msg消失时间
+  }
+) {
+  let NotificationConstructor = Vue.extend(layerVue);
+  let maskLayer = Vue.extend(maskVue);
+  let self = {};
+  const defOptions = {
+    type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,5msg,6prompt
+    title: "信息",
+    content: "",
+    area: "auto",
+    offset: "auto",
+    icon: -1,
+    btn: "确定",
+    time: 0,
+    maxmin: false, //最大最小化
+    shade: true,
+    yes: "",
+    cancel: "",
+    tips: [0, {}], //支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
+    tipsMore: false, //是否允许多个tips
+    shadeClose: true,
+    scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
+    resize: false, //是否允许拉伸，默认是不允许
+  };
+  self.instances = {};
+  self.instancesVue = [];
+  self.iframeMinList = [];
+  let seed = 0;
+
+  /**
+   * [function description]
+   * @method function
+   * @param  {[type]} options [description]
+   * @return {[type]}         [description]
+   */
+  self.open = function (options) {
+    debugger;
+    options = mergeJson(options, defOptions);
+    // let id = "";
+    // if (options.id) {
+    //   this.$layer.close(options.id);
+    //   id = options.id;
+    // } else {
+    //   id = `notification_${new Date().getTime()}_${seed++}`;
+    // }
+    let id = `notification_${new Date().getTime()}_${seed++}`;
+    options.id = id;
+    options.layer = self;
+    let instance = new NotificationConstructor({
+      data: options,
+    });
+    if (options.type == 2) {
+      options.content.content = Vue.extend(options.content.content);
+    }
+    instance.id = id;
+    instance.vm = instance.$mount();
+    self.instances[id] = {
+      inst: instance,
+      type: options.type,
+    };
+    document.body.appendChild(instance.vm.$el);
+    self.instancesVue[id] = {
+      mask: "",
+      main: instance.vm,
+      iframe: "",
+    };
+    if (options.shade) {
+      //是否显示遮罩，始终添加遮罩
+      // let layerMask = document.querySelector('.vl-notify-mask');
+      // if (layerMask) { //layerMask
+      // return;
+      // document.body.removeChild(layerMask);
+      // } else {
+      let maskInstance = new maskLayer({
+        data: options,
+      });
+      maskInstance.vm = maskInstance.$mount();
+      // document.body.appendChild(maskInstance.vm.$el);
+      document.body.insertBefore(maskInstance.vm.$el, instance.vm.$el);
+      self.instancesVue[id].mask = maskInstance.vm;
+      // }
+    }
+    return id;
+  };
+  /**
+   * alert
+   * @param  {[type]} content [description]
+   * @param  {[type]} options [description]
+   * @param  {[type]} yes     [description]
+   * @return {[type]}         [description]
+   */
+  self.alert = function (content, options, yes) {
+    switch (typeof options) {
+      case "function":
+        yes = options;
+        options = {};
+        break;
+      case "object":
+        break;
+      default:
+        options = {};
+        break;
+    }
+    yes = typeof yes === "function" ? yes : "";
+
+    options.content = content || "";
+    options.yes = yes;
+    return self.open(options);
+  };
+  /**
+   * alert
+   * @param  {[type]} content [description]
+   * @param  {[type]} options [description]
+   * @param  {[type]} yes     [description]
+   * @return {[type]}         [description]
+   */
+  self.confirm = function (content, options, yes, cancel) {
+    switch (typeof options) {
+      case "function":
+        cancel = yes;
+        yes = options;
+        options = {};
+        break;
+      case "object":
+        break;
+      default:
+        options = {};
+        break;
+    }
+    yes = typeof yes === "function" ? yes : "";
+    cancel = typeof cancel === "function" ? cancel : "cancel";
+
+    options.content = content || "";
+    options.yes = yes;
+    options.cancel = cancel;
+    return self.open(options);
+  };
+  /**
+   * [function description]
+   * @method function
+   * @param  {[type]} content [description]
+   * @param  {[type]} options [description]
+   * @param  {[type]} end     [description]
+   * @return {[type]}         [description]
+   */
+  self.msg = function (content, options, end) {
+    switch (typeof options) {
+      case "function":
+        end = options;
+        options = {};
+        break;
+      case "object":
+        break;
+      default:
+        options = {};
+        break;
+    }
+    end = typeof end === "function" ? end : "";
+    options.type = 5;
+    options.time = options.time ? options.time : globalOption.msgtime;
+    options.content = content || "this is a msg!!";
+    options.yes = end;
+    if (options.shade == undefined) {
+      options.shade = false;
+    }
+    self.closeAll("msg");
+    return self.open(options);
+  };
+  //loading
+  self.loading = function (icon, options) {
+    if (typeof icon === "object") {
+      options = icon;
+      icon = 0;
+    }
+    options = options || {};
+    options.icon = icon ? icon : 0;
+    if (options.icon < 0 || options.icon > 2) {
+      options.icon = 0;
+    }
+    if (!options.time) {
+      //单位秒
+      options.time = 100;
+    }
+    options.type = 3;
+    if (options.shade == undefined) {
+      options.shade = true;
+    }
+    if (options.shadeClose == undefined) {
+      options.shadeClose = false;
+    }
+    return self.open(options);
+  };
+  /**
+   * tips
+   * @method function
+   * @param  {[type]} content [description]
+   * @param  {[type]} follow  [description]
+   * @param  {[type]} options [description]
+   * @return {[type]}         [description]
+   */
+  self.tips = function (content, follow, options) {
+    options = options || {};
+    options.type = 4;
+    options.content = content || "";
+    options.title = follow || "body";
+    options.tips = options.tips || [0, {}];
+    if (typeof options.tips !== "object") {
+      options.tips = [options.tips, {}];
+    }
+    if (options.shade == undefined) {
+      options.shade = false;
+    }
+    if (!options.tipsMore) {
+      self.closeAll("tips");
+    }
+    return self.open(options);
+  };
+  /**
+   * [description]
+   * @param  {[type]} options [description]
+   * @return {[type]}         [description]
+   */
+  self.iframe = function (opt) {
+    let option = {
+      type: 2,
+      content: opt.content,
+      area: opt.area,
+    };
+    option = mergeJson(option, opt);
+    return self.open(option);
+  };
+  /**
+   * 获取信息框
+   */
+  self.prompt = function (
+    options = {
+      formType: 1,
+      value: "",
+    },
+    yes = "",
+    cancel = ""
+  ) {
+    switch (typeof cancel) {
+      case "object":
+        options = cancel;
+        break;
+    }
+    options.content = "";
+    options.yes = yes;
+    options.cancel = cancel;
+    options.type = 6;
+    //如果是textarea
+    if (options.formType == 3) {
+      if (!options.area) {
+        options.area = ["500px", "500px"];
+      }
+    }
+    // options.title = title || '';
+    return self.open(options);
+  };
+  /**
+   * 关闭一个弹窗
+   * @param  {[type]} id [description]
+   * @return {[type]}    [description]
+   */
+  self.close = function (id) {
+    let oElm = document.getElementById(id);
+    if (oElm) {
+      document.body.removeChild(oElm);
+      delete self.instances[id];
+      self.instancesVue[id].main.$destroy();
+      if (self.instancesVue[id].iframe != "") {
+        const minindex = parseInt(
+          self.instancesVue[id].main.$el.getAttribute("minindex") || -2
+        );
+        if (minindex > -1) {
+          self.iframeMinList[minindex] = -1;
+        }
+        self.instancesVue[id].iframe.$destroy();
+      }
+      //取消隐藏滚动条
+      if (!self.instancesVue[id].main.scrollbar) {
+        let scrollbarCount = 0;
+        for (let key in self.instancesVue) {
+          if (!self.instancesVue[key].main.scrollbar) {
+            scrollbarCount++;
+          }
+        }
+        if (scrollbarCount === 1) {
+          const htmlDom = document.getElementsByTagName("html")[0];
+          htmlDom.style.marginRight = "auto";
+          htmlDom.classList.remove("vl-html-scrollbar-hidden");
+        }
+      }
+      //控制遮罩,删除掉当前的遮罩
+      if (self.instancesVue[id].main.shade) {
+        let layerMask = document.getElementById(id + "_mask");
+        let maskId = id + "_mask";
+        document.body.removeChild(layerMask);
+        if (self.instancesVue[maskId]) {
+          self.instancesVue[maskId].mask.$destroy();
+        }
+      }
+      delete self.instancesVue[id];
+    } else {
+      setTimeout(function () {
+        let oElm = document.getElementById(id);
+        if (oElm) {
+          document.body.removeChild(oElm);
+          delete self.instances[id];
+          self.instancesVue[id].main.$destroy();
+          if (self.instancesVue[id].iframe != "") {
+            self.instancesVue[id].iframe.$destroy();
+          }
+        }
+      }, 200);
+    }
+  };
+  /**
+   * 关闭一个弹窗
+   * @param  {[type]} id [description]
+   * @return {[type]}    [description]
+   */
+  self.closeAll = function (type = -1) {
+    let types = {
+      alert: 0,
+      page: 1,
+      iframe: 2,
+      loading: 3,
+      tips: 4,
+      msg: 5,
+    };
+    if (type === -1) {
+      for (let k in self.instances) {
+        self.close(k);
+      }
+    } else {
+      let targetType = types[type];
+      for (let k in self.instances) {
+        if (self.instances[k].type === targetType) {
+          self.close(k);
+        }
+      }
+    }
+  };
+  /**
+   * 手动最大化
+   */
+  self.full = function (id = "") {
+    document.querySelector("#" + id + " .lv-icon-max").click();
+  };
+  /**
+   * 手动最小化
+   */
+  self.min = function (id = "") {
+    document.querySelector("#" + id + " .lv-icon-mini").click();
+  };
+  /**
+   * 手动最小化
+   */
+  self.restore = function (id = "") {
+    document.querySelector("#" + id + " .lv-icon-huanyuan").click();
+  };
+
+  /**
+   * get offset
+   */
+  // function getOffset() {
+  //   let offset = [];
+  //   offset.push(document.body.clientWidth);
+  //   offset.push(document.body.clientHeight);
+  //   return offset;
+  // }
+
+  /**
+   * 合并json
+   * @method mergeJson
+   * @param  {[type]}  optons [description]
+   * @param  {[type]}  def    [description]
+   * @return {[type]}         [description]
+   */
+  function mergeJson(options, def) {
+    for (let key in def) {
+      if (options[key] == undefined) {
+        options[key] = def[key];
+      }
+    }
+    return options;
+  }
+
+  return self;
+};
+
+// module.exports = Notification;
+export default Notification;

src/components/VueLayer/src/layer.vue

@@ -0,0 +1,77 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-19 15:05:38
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-19 18:05:33
+-->
+<template lang="html">
+    <component :options="this.$data" :is="getActiveName"></component>
+</template>
+
+<script>
+import pzalert from "./alert.vue";
+import pzloading from "./loading.vue";
+import pzmsg from "./msg.vue";
+import pztips from "./tips.vue";
+import pzpage from "./page.vue";
+import pziframe from "./iframe.vue";
+import pzprompt from "./prompt.vue";
+
+export default {
+  data() {
+    return {
+      id: "",
+      type: 0, //0（alert默认）1（页面层）2（iframe层）3（loading）4（tips层）,5(msg),6(prompt)
+      title: "信息",
+      content: "",
+      area: "auto",
+      offset: "auto",
+      icon: -1,
+      btn: "确定",
+      time: 0,
+      shade: true,
+      yes: "",
+      cancel: ""
+    };
+  },
+  computed: {
+    getActiveName() {
+      let comps = [
+        "pzalert",
+        "pzpage",
+        "pziframe",
+        "pzloading",
+        "pztips",
+        "pzmsg",
+        "pzprompt"
+      ];
+      return comps[this.$data.type];
+    },
+    isMsg: function() {
+      return this.type == 5 ? true : false;
+    },
+    isTips: function() {
+      return this.type == 4 ? true : false;
+    }
+  },
+  mounted() {},
+  methods: {},
+  watch: {},
+  components: {
+    pzalert,
+    pzloading,
+    pzmsg,
+    pztips,
+    pzpage,
+    pziframe,
+    pzprompt
+  }
+};
+</script>
+
+<style lang="less">
+@import "./css/iconfont.css";
+@import "./css/index.less";
+</style>

src/components/VueLayer/src/loading.vue

@@ -0,0 +1,50 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-24 12:33:19
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-24 12:33:28
+-->
+<template >
+  <label :class="setClass" :id="options.id">
+    <span></span>
+    <i v-if="options.content!=''" v-html="options.content"></i>
+  </label>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // timeout: ""
+    };
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {};
+      }
+    }
+  },
+  computed: {
+    setClass() {
+      let cls = {
+        'vl-notify': true,
+        'vl-notify-msg': true,
+        'vl-notify-loading': true
+      };
+      if (this.options.content === '') {
+        delete cls['vl-notify-msg']
+      }
+      return cls;
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.options.layer.close(this.options.id);
+    }, this.options.time * 1000);
+  }
+};
+</script>

src/components/VueLayer/src/mask.vue

@@ -0,0 +1,82 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-19 17:59:08
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-24 15:29:43
+-->
+<template>
+  <div class="vl-notify-mask" @click="close" :id="id + '_mask'" :style="setOpacity"></div>
+</template>
+
+<script>
+import helper from "./helper/helper.js";
+
+export default {
+  data() {
+    return {
+      id: "",
+      type: 0, //0（alert默认）1（页面层）2（iframe层）3（loading）4（tips层）,5(msg)
+      title: "信息",
+      content: "",
+      area: "auto",
+      offset: "auto",
+      icon: -1,
+      btn: "确定",
+      time: 0,
+      shade: true,
+      yes: "",
+      cancel: ""
+    };
+  },
+  props: {},
+  computed: {
+    setOpacity() {
+      if (this.type == 3) {
+        return {
+          opacity: 0
+        };
+      } else if (this.type == 2) {
+        //iframe层级 需要给遮罩层设置z-index
+        return {
+          "z-index": parseInt(this.getStyle(this.id, "z-index")) - 1
+        };
+      }
+      return {};
+    }
+  },
+  methods: {
+    getStyle(el, styleProp) {
+      let x = document.getElementById(el);
+      let y = 0;
+      if (window.getComputedStyle) {
+        y = document.defaultView
+          .getComputedStyle(x, null)
+          .getPropertyValue(styleProp);
+      } else if (x.currentStyle) {
+        y = x.currentStyle[styleProp];
+      }
+      return y;
+    },
+    close(event) {
+      if (this.shadeClose) {
+        helper.clickMaskCloseAll(event, this.layer, this.id);
+      }
+    }
+  },
+  mounted() { }
+};
+</script>
+
+<style lang="css">
+.vl-notify-mask {
+  background-color: #ccc;
+  opacity: 0.4;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/VueLayer/src/msg.vue

@@ -0,0 +1,42 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-24 12:22:51
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-24 12:23:04
+-->
+<template>
+  <label :id="options.id" class="vl-notify vl-notify-msg" v-html="options.content"></label>
+</template>
+
+<script>
+import helper from './helper/helper.js';
+export default {
+  data() {
+    return {
+      timeout: ''
+    }
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  async mounted() {
+    await helper.sleep(this.options.time * 1000);
+    this.btnyes();
+  },
+  methods: {
+    btnyes(event) {
+      let o = document.getElementById(this.options.id);
+      if (o) {
+        helper.btnyes(event, this.options);
+      }
+    },
+  },
+}
+</script>

src/components/VueLayer/src/page.vue

@@ -0,0 +1,87 @@
+
+
+<template lang="html">
+<div class="notify" @mousemove="move" @mouseup="moveEnd">
+    <div class="notify-mask" @click="close"></div>
+    <div :id="options.id + '_alert'" class="notify-main notify-alert"  :style="{left:options.offset[0] + 'px',top:options.offset[1] +'px', margin:options.offset[2]}">
+        <h2 class="title" @mousedown="moveStart">{{options.title}}</h2>
+        <div class="notify-content" v-html="options.content"></div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      moveLeft: 0, //左移的距离
+      moveTop: 0, //上移的距离
+      ismove: false
+    }
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  computed: {},
+  mounted() { },
+  methods: {
+    'close': function (event) {
+      let mask = event.target.getAttribute("class");
+      if (mask && mask.indexOf("notify-mask") > -1) {
+        this.options.layer.close(this.options.id);
+      }
+    },
+    'btnyes': function () {
+      if (typeof (this.options.yes) == "function") {
+        this.options.yes();
+      } else {
+        this.options.layer.close(this.options.id);
+      }
+    },
+    'btncancel': function () {
+      if (typeof (this.options.cancel) == "function") {
+        this.options.cancel();
+      } else {
+        this.options.layer.close(this.options.id);
+      }
+    },
+    'moveStart': function (event) {
+      this.options.offset = this.options.offset == 'auto' ? [] : this.options.offset;
+      if (this.options.offset.length == 0) {
+        this.options.offset.push(document.getElementById(this.options.id + "_alert").offsetLeft);
+        this.options.offset.push(document.getElementById(this.options.id + "_alert").offsetTop);
+        this.options.offset.push(0);
+      }
+      if (this.options.offset.length == 2) {
+        this.options.offset.push(0);
+      }
+      this.options.offset[0] = (document.getElementById(this.options.id + "_alert").offsetLeft);
+      this.options.offset[1] = (document.getElementById(this.options.id + "_alert").offsetTop);
+      this.moveLeft = event.clientX;
+      this.moveTop = event.clientY;
+      this.ismove = true;
+    },
+    'move': function (event) {
+      if (this.ismove) {
+        let o = document.getElementById(this.options.id + "_alert");
+        o.style.left = this.options.offset[0] + (event.clientX - this.moveLeft) + "px";
+        o.style.top = this.options.offset[1] + (event.clientY - this.moveTop) + "px";
+      }
+    },
+    'moveEnd': function () {
+      this.ismove = false;
+    }
+  },
+  watch: {
+
+  },
+  components: {
+
+  }
+}
+</script>

src/components/VueLayer/src/prompt.vue

@@ -0,0 +1,117 @@
+<template>
+  <base-drag :options="options" :cls="cls">
+    <div class="vl-notify-content" :style="contentStyle" :id="id">
+      <div style="width:100%;padding:20px 20px 0 20px;">
+        <input :type="inputType" class="vl-input" v-model="form.value" v-if="options.formType!=3" />
+        <textarea class="vl-textarea" v-model="form.value" v-else></textarea>
+        <div class="prompt-btn">
+          <pzbutton btn="primary" @click.native="btnyes" size="small">确定</pzbutton>
+          <pzbutton btn @click.native="btncancel" size="small">取消</pzbutton>
+        </div>
+      </div>
+    </div>
+  </base-drag>
+</template>
+
+<script>
+import helper from "./helper/helper.js";
+import drag from "./components/drag/drag";
+import pzbutton from "./components/button/button.vue";
+
+export default {
+  data() {
+    return {
+      cls: {
+        "vl-notify-iframe": true
+      },
+      form: {
+        value: this.options.value
+      },
+      id: "vlip" + new Date().getTime()
+    };
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  components: {
+    "base-drag": drag,
+    pzbutton
+  },
+  computed: {
+    contentStyle() {
+      const areaHeight = (parseInt(this.options.area[1]) || 100) - 50;
+      return {
+        height: areaHeight + "px",
+        minHeight: "inherit",
+        overflow: "auto"
+      };
+    },
+    inputType() {
+      let s = 'text';
+      if (this.options.formType == 1) {
+        s = 'text';
+      } else if (this.options.formType == 2) {
+        s = 'password';
+      }
+      return s;
+    }
+  },
+  async mounted() {
+    helper.hiddenScrollBar(this.options);
+  },
+  methods: {
+    btnyes(event) {
+      helper.btnyes(event, this.options, this.form.value);
+    },
+    btncancel(event) {
+      helper.btncancel(event, this.options);
+    }
+  }
+};
+</script>
+
+
+<style lang="less" scoped>
+.vl-input {
+  width: 100%;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  display: inline-block;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 15px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-sizing: border-box;
+}
+.vl-textarea {
+  width: 100%;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  display: inline-block;
+  line-height: 22px;
+  padding: 10px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-sizing: border-box;
+  word-break: break-all;
+  height: calc(100% - 70px);
+}
+
+.prompt-btn {
+  margin-top: 30px;
+  text-align: right;
+  button {
+    margin-right: 20px;
+  }
+}
+</style>

src/components/VueLayer/src/tips.vue

@@ -0,0 +1,130 @@
+<!--
+@Author: 左盐
+@Date:   2018-03-24 15:30:33
+@Email:  huabinglan@163.com
+@Project: xxx
+@Last modified by:   左盐
+@Last modified time: 2018-03-24 15:49:07
+-->
+<template>
+  <label
+    class="vl-notify vl-notify-tips"
+    :class="[this.options.tips[1],'vl-notify-tips-'+ this.options.tips[0]]"
+    :id="options.id"
+    v-html="options.content"
+  >
+    <em></em>
+  </label>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeout: ''
+    }
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  computed: {
+    offset() {
+      return this.getOffset();
+    }
+  },
+  async mounted() {
+    let self = this;
+    if (this.options.time == 0) {
+      this.options.time = 2;
+    }
+
+    setTimeout(function () {
+      self.btnyes();
+    }, self.options.time * 1000);
+
+    await this.getOffset();
+
+  },
+  methods: {
+    'btnyes': function () {
+      let o = document.getElementById(this.options.id);
+      if (o) {
+        if (typeof (this.options.yes) == "function") {
+          this.options.yes();
+        }
+        this.options.layer.close(this.options.id);
+        // delete this.$layer.instances[this.options.id];
+        // o.remove();
+      }
+    },
+    sleep: function (ms) {
+      return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+      });
+    },
+    async getOffset() {
+      await this.sleep(1);
+      let o = document.querySelector(this.options.title); //用title传递that元素
+      const bound = o.getBoundingClientRect();
+      let oTips = document.querySelector("#" + this.options.id);
+      let boundTips = oTips.getBoundingClientRect();
+
+      let scrollTop = 0; //this.getScrollTop();
+      let left = o.offsetLeft;
+      let top = o.offsetTop - scrollTop;
+      let jiantou = 8 + 1;
+      while (o.offsetParent) {
+        o = o.offsetParent;
+        left += o.offsetLeft;
+        top += o.offsetTop;
+      }
+
+
+      let offset = {};
+      switch (this.options.tips[0]) {
+        case 0:
+          offset = {
+            left: left + "px",
+            top: top - boundTips.height - jiantou + "px"
+          }
+          break;
+        case 1:
+          offset = {
+            left: (left + bound.width + jiantou) + "px",
+            top: top + "px"
+          }
+          break;
+        case 2:
+          offset = {
+            left: left + "px",
+            top: (top + bound.height + jiantou) + "px"
+          }
+          break;
+        case 3:
+          offset = {
+            left: (left - boundTips.width - jiantou) + "px",
+            top: top + "px"
+          }
+          break;
+      }
+      oTips.style.left = offset.left;
+      oTips.style.top = offset.top;
+      // return offset;
+    },
+    getScrollTop() {
+      var scrollTop = 0;
+      if (document.documentElement && document.documentElement.scrollTop) {
+        scrollTop = document.documentElement.scrollTop;
+      } else if (document.body) {
+        scrollTop = document.body.scrollTop;
+      }
+      return scrollTop;
+    },
+  },
+}
+</script>

src/main.js

@@ -15,7 +15,8 @@ import App from './App.vue'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import VueLazyLoad from 'vue-lazyload'
-import layer from "vue-layer";
+// import layer from "vue-layer";
+import layer from "@/components/VueLayer/index";
 import "vue-layer/lib/vue-layer.css";
 Vue.prototype.$layer = layer(Vue);
 

src/views/ConstructionApplication3D/BenchmarkLandPriceAnalysis/BenchmarkLandPrice.vue

@@ -23,34 +23,48 @@
               :rules="rules"
               label-width="90px"
             >
-              <el-form-item label="选址范围" size="mini" prop="ProjectScope">
-                <el-col :span="20">
-                  <el-button type="primary">导入范围</el-button>
-                  <el-button type="primary" @click="getProjectScope"
-                    >绘制范围</el-button
-                  >
-                </el-col>
-              </el-form-item>
               <el-form-item label="项目名称" size="mini" prop="ProjectName">
                 <el-col :span="20">
                   <el-input size="mini" v-model="form.ProjectName"></el-input>
                 </el-col>
               </el-form-item>
-              <el-form-item label="项目类型" size="mini" prop="ProjectType">
+              <el-form-item label="项目土地用途" size="mini" prop="ProjectType">
                 <el-col :span="20">
-                  <el-select
+                  <!-- <el-select
                     v-model="form.ProjectType"
-                    placeholder="请选择项目类型"
+                    placeholder="请选择土地用途"
                     clearable
+                    @change="handleChange"
                   >
                     <el-option
-                      v-for="dict in zt_jzdj_ProjectType"
+                      v-for="dict in zt_jzdj_LandUse"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"
                     />
-                  </el-select>
-                  <!-- <el-input size="mini" v-model="form.ProjectType"></el-input> -->
+                  </el-select> -->
+                  <el-cascader
+                    placeholder="请选择土地用途"
+                    v-model="form.ProjectType"
+                    :options="landUseNatureRelation"
+                    :show-all-levels="false"
+                    clearable
+                    @change="handleChange"
+                    :props="{
+                      value: 'tdyt',
+                      label: 'tdyt',
+                      children: 'children',
+                      emitPath: false,
+                    }"
+                  ></el-cascader>
+                </el-col>
+              </el-form-item>
+              <el-form-item label="选址范围" size="mini" prop="ProjectScope">
+                <el-col :span="20">
+                  <el-button type="primary">导入范围</el-button>
+                  <el-button type="primary" @click="getProjectScope"
+                    >绘制范围</el-button
+                  >
                 </el-col>
               </el-form-item>
               <el-form-item
@@ -117,7 +131,7 @@
                         </el-col>
                       </el-row>
                       <el-row>
-                        <el-col :span="6">
+                        <el-col :span="12">
                           <el-button
                             v-if="itemModel.AnalysisStatus == '完成'"
                             size="mini"
@@ -137,15 +151,19 @@
                             >{{ itemModel.AnalysisStatus }}</el-button
                           >
                         </el-col>
-                        <el-col :span="18">
-                          <el-button size="mini" type="default">日志</el-button>
-                          <el-button
-                            size="mini"
-                            type="default"
-                            @click="openAnalyzeResults(itemModel)"
-                            >结果</el-button
-                          >
-                          <el-button size="mini" type="default">报告</el-button>
+                        <el-col :span="12">
+                          <div style="float: right">
+                            <!-- <el-button size="mini" type="default">日志</el-button> -->
+                            <el-button
+                              size="mini"
+                              type="default"
+                              @click="openAnalyzeResults(itemModel)"
+                              >结果</el-button
+                            >
+                            <el-button size="mini" type="default"
+                              >报告</el-button
+                            >
+                          </div>
                         </el-col>
                       </el-row>
                     </el-card>
@@ -171,10 +189,20 @@ import {
   mercator2lonLat,
   undergroundMode,
 } from "@/utils/MapHelper/MapHelper.js";
+import {
+  booleanContains,
+  area,
+  intersect,
+  polygon,
+  point,
+  midpoint,
+  difference,
+} from "@turf/turf";
+
 export default {
   data() {
     return {
-      zt_jzdj_ProjectType: window.dict.zt_jzdj_ProjectType,
+      landUseNatureRelation: window.landUseNatureRelation,
       tooltip: createTooltip(document.body),
       /**
        * tabs 标签
@@ -197,8 +225,14 @@ export default {
         ProjectScope: [
           { required: true, message: "请添加项目范围", trigger: "blur" },
         ],
+        ProjectType: [
+          { required: true, message: "请选择土地用途", trigger: "blur" },
+        ],
       },
       BenchmarkLandPriceList: [],
+      LayerData: {
+        GHDKData: [],
+      },
     };
   },
   mounted() {
@@ -249,7 +283,7 @@ export default {
      */
     getProjectScope() {
       let that = this;
-      this.clear();
+      this.clearScope();
       this.handlerPolygon = new Cesium.DrawHandler(
         viewer,
         Cesium.DrawMode.Polygon,
@@ -290,18 +324,13 @@ export default {
             points.push(points[0]);
           }
         }
-        that.form.ProjectScope = points;
+        if (this.calculateBooleanContains(positions)) {
+          that.form.ProjectScope = points;
+        } else {
+          this.$message.error("请在规划地块范围内选择范围");
+        }
       });
     },
-    clear() {
-      if (this.handlerPolygon) {
-        this.handlerPolygon.clear();
-        this.handlerPolygon.deactivate();
-        this.handlerPolygon = null;
-      }
-      this.tooltip.setVisible(false);
-    },
-
     submitForm(formName) {
       let that = this;
       this.$refs[formName].validate((valid) => {
@@ -310,7 +339,10 @@ export default {
           that.form.analysisDate = moment(new Date()).format(
             "YYYY-MM-DD HH:mm:ss"
           );
-          window.BenchmarkLandPriceList.push(that.form);
+          that.form.AnalysisStatus = "完成";
+          window.BenchmarkLandPriceList.push(
+            JSON.parse(JSON.stringify(that.form))
+          );
           debugger;
           that.openAnalyzeResults(JSON.parse(JSON.stringify(that.form)));
           that.resetForm(formName);
@@ -358,6 +390,236 @@ export default {
         cancel: () => {},
       });
     },
+    //切换用地类型时加载用地规划图层
+    handleChange() {
+      this.clear();
+      if (this.form.ProjectType) {
+        this.getGHDK(this.form.ProjectType);
+      }
+    },
+    /**
+     * 查询区域内规划地块
+     * @param ProjectType
+     */
+    async getGHDK(ProjectType) {
+      let that = this;
+      //查询规划地块
+      let layer = flatten(window.layerTree).find(
+        (item) => item.core == "003006"
+      );
+      let sql = "";
+      let landUseNatureRelation = flatten(window.landUseNatureRelation).find(
+        (c) => c.tdyt == ProjectType
+      );
+      landUseNatureRelation.GHDKType.forEach((Type, i) => {
+        if (i == 0) {
+          sql += " KZXXGYDDM like '" + Type.ydxzdl + "%' ";
+        } else {
+          sql += "|| KZXXGYDDM like '" + Type.ydxzdl + "%' ";
+        }
+      });
+      if (sql == "") {
+        this.$message.error("当前土地用途类型未配置，请联系管理员");
+        return;
+      }
+      let queryByGeometryParameters = {
+        getFeatureMode: "SQL",
+        datasetNames: [
+          layer.date_server.dataSourceName +
+            ":" +
+            layer.date_server.datasetName,
+        ],
+        queryParameter: {
+          attributeFilter: sql,
+        },
+        hasGeometry: "true",
+        maxFeatures: 99999999,
+      };
+      let e = await mapQuery(
+        layer.date_server.url + "/featureResults.json?returnContent=true",
+        queryByGeometryParameters
+      );
+      if (e && e.totalCount > 0) {
+        e.features.forEach((feature) => {
+          let featureData = {
+            id: uuidv4(),
+            layerInfo: layer,
+            data: [],
+            geometry: feature.geometry,
+          };
+
+          feature.fieldNames.forEach((fieldName, i) => {
+            let Field = e.datasetInfos
+              ? e.datasetInfos[0].fieldInfos.find(
+                  (c) =>
+                    c.name &&
+                    c.name.toUpperCase() == fieldName.toUpperCase() &&
+                    c.name.toUpperCase().indexOf("SM") == -1
+                )
+              : null;
+            if (Field) {
+              featureData.data.push({
+                label: fieldName,
+                labelCN: Field ? Field.caption : fieldName,
+                value: e.features[0].fieldValues[i],
+              });
+            }
+          });
+
+          let point3ds = [];
+          let pointholes = [];
+          let startindex = 0;
+          for (
+            let index = 0;
+            index < featureData.geometry.parts.length;
+            index++
+          ) {
+            let thisps = [];
+            const endindex = startindex + featureData.geometry.parts[index];
+            let geometryPoints = featureData.geometry.points.slice(
+              startindex,
+              endindex
+            );
+            for (
+              let pointindex = 0;
+              pointindex < geometryPoints.length;
+              pointindex++
+            ) {
+              const point = geometryPoints[pointindex];
+              thisps.push(point.x);
+              thisps.push(point.y);
+            }
+            if (featureData.geometry.partTopo[index] === 1) {
+              point3ds.push(Cesium.Cartesian3.fromDegreesArray(thisps));
+            } else {
+              pointholes.push(Cesium.Cartesian3.fromDegreesArray(thisps));
+            }
+
+            startindex = endindex;
+          }
+
+          if (point3ds.length > 0 && pointholes.length > 0) {
+            let holes = [];
+            pointholes.forEach((hole) => {
+              holes.push({ positions: hole });
+            });
+
+            var orangePolygon1 = viewer.entities.add({
+              id: "GHDK-" + featureData.id,
+              polygon: {
+                hierarchy: {
+                  // Cesium.PolygonHierarchy
+                  positions: point3ds[0],
+                  holes: holes, // Cesium.PolygonHierarchy 数组
+                },
+                material: Cesium.Color.RED.withAlpha(0.4),
+                outline: true,
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 2.0,
+              },
+            });
+          } else if (point3ds.length > 0) {
+            var orangePolygon1 = viewer.entities.add({
+              id: "GHDK-" + featureData.id,
+              polygon: {
+                hierarchy: point3ds[0],
+                material: Cesium.Color.RED.withAlpha(0.4),
+                outline: true,
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 2.0,
+              },
+            });
+          }
+
+          that.LayerData.GHDKData.push(featureData);
+        });
+      }
+    },
+
+    /**
+     * 与已有的规划地块比较看是否包含
+     * @param points
+     */
+    calculateBooleanContains(points) {
+      let DataPs = points.map((item) => {
+        let xyz = cartesian3ToWGS84(item);
+        return [xyz.lng, xyz.lat];
+      });
+      if (DataPs.length > 0) {
+        if (
+          JSON.stringify(DataPs[0]) != JSON.stringify(DataPs[DataPs.length - 1])
+        ) {
+          DataPs.push(DataPs[0]);
+        }
+        //绘制的图形边界
+        let polygonPs = polygon([DataPs]);
+        //规划地块的范围
+        for (let index = 0; index < this.LayerData.GHDKData.length; index++) {
+          const geometry = this.LayerData.GHDKData[index].geometry;
+
+          let point3ds = [];
+          let pointholes = [];
+          let startindex = 0;
+          for (let index = 0; index < geometry.parts.length; index++) {
+            let thisps = [];
+            const endindex = startindex + geometry.parts[index];
+            let geometryPoints = geometry.points.slice(startindex, endindex);
+            for (
+              let pointindex = 0;
+              pointindex < geometryPoints.length;
+              pointindex++
+            ) {
+              const point = geometryPoints[pointindex];
+              thisps.push([point.x, point.y]);
+            }
+            if (geometry.partTopo[index] === 1) {
+              point3ds.push(thisps);
+            } else {
+              pointholes.push(thisps);
+            }
+
+            startindex = endindex;
+          }
+
+          // 主多边形
+          var mainPolygon = polygon(point3ds);
+
+          // 岛洞多边形
+          var holePolygon = polygon(pointholes);
+
+          // 计算差集 得到有导洞的图形
+          var getdifference = difference(mainPolygon, holePolygon);
+          let areaPs = booleanContains(getdifference, polygonPs);
+          if (areaPs) {
+            return true;
+          }
+        }
+        return false;
+      } else {
+        return false;
+      }
+    },
+
+    clearGHDK() {
+      //删除规划地块图层
+      for (let index = 0; index < this.LayerData.GHDKData.length; index++) {
+        const element = this.LayerData.GHDKData[index];
+        viewer.entities.removeById("GHDK-" + element.id);
+      }
+      this.LayerData.GHDKData = [];
+    },
+    clearScope() {
+      if (this.handlerPolygon) {
+        this.handlerPolygon.clear();
+        this.handlerPolygon.deactivate();
+        this.handlerPolygon = null;
+      }
+      this.tooltip.setVisible(false);
+    },
+    clear() {
+      this.clearScope();
+      this.clearGHDK();
+    },
   },
   beforeDestroy() {
     this.clear();

src/views/ConstructionApplication3D/BenchmarkLandPriceAnalysis/jzdjfxsmjg.vue

@@ -31,9 +31,9 @@
             style="justify-content: flex-start"
           >
             <div class="con-col" style="align-items: flex-start">
-              <a style="color: white">分析面积（平方米）</a>
+              <a style="color: white">分析面积（亩）</a>
               <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
-                formData.fxzmj
+                (Number(formData.fxzmj) / 666.67).toFixed(2)
               }}</a>
             </div>
           </el-col>
@@ -59,9 +59,9 @@
           >
             <div class="con-col" style="align-items: flex-start">
               <a style="color: white">总地价（万元）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
-                >55555</a
-              >
+              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                ((formData.gyzdj + formData.jtzdj) / 10000).toFixed(2)
+              }}</a>
             </div>
           </el-col>
         </el-row>
@@ -89,9 +89,9 @@
             <div class="con-col" style="align-items: flex-start">
               <a style="color: white">国有建设</a>
               <a style="color: white">用地地价（万元）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
-                >66666</a
-              >
+              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                (formData.gyzdj / 10000).toFixed(2)
+              }}</a>
             </div>
           </el-col>
         </el-row>
@@ -117,15 +117,15 @@
             <div class="con-col" style="align-items: flex-start">
               <a style="color: white">集体建设</a>
               <a style="color: white">用地地价（万元）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
-                >55555</a
-              >
+              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                (formData.jtzdj / 10000).toFixed(2)
+              }}</a>
             </div>
           </el-col>
         </el-row>
       </el-col>
     </el-row>
-    <el-row :gutter="10" style="display: flex; align-items: center">
+    <!-- <el-row :gutter="10" style="display: flex; align-items: center">
       <el-col :span="24">
         土地用途：
         <el-select
@@ -142,7 +142,7 @@
           />
         </el-select>
       </el-col>
-    </el-row>
+    </el-row> -->
     <el-row :gutter="10">
       <el-col :span="24">
         <div id="echartFGY" ref="echartFGY" class="EchartsWH">
@@ -196,10 +196,14 @@ export default {
       JTmyChart: null,
       formData: {
         fxzmj: 0,
+        gyzdj: 0,
+        jtzdj: 0,
       },
       LayerData: {
         GYData: [],
         JTData: [],
+        GHDKData: [],
+        JZDJData: [],
       },
     };
   },
@@ -240,12 +244,41 @@ export default {
     this.init();
   },
   methods: {
-    init() {
+    async init() {
       debugger;
-      this.CalculateAnalysisArea();
-      this.getLandOwnership();
-      this.initGY();
-      this.initJT();
+      this.DrawScope();
+      await this.CalculateAnalysisArea();
+      await this.getGYLandOwnership();
+      await this.getJTLandOwnership();
+      await this.CalculateJZDJ();
+      // await this.getGHDK();
+      // await this.getJZDJ();
+      await this.initGY();
+      await this.initJT();
+    },
+    /**
+     * 渲染绘制范围
+     */
+    DrawScope() {
+      let ProjectScope = this.info.BenchmarkLandPrice.ProjectScope;
+      if (ProjectScope.length > 0) {
+        if (ProjectScope[0] != ProjectScope[ProjectScope.length - 1]) {
+          ProjectScope.push(ProjectScope[0]);
+        }
+        let points = ProjectScope.map((obj) => [obj.x, obj.y]).flat();
+        var orangePolygon1 = viewer.entities.add({
+          id: "HZFW",
+          polygon: {
+            hierarchy: Cesium.Cartesian3.fromDegreesArray(points),
+            material: Cesium.Color.RED.withAlpha(0.4),
+            outline: true,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2.0,
+          },
+        });
+      } else {
+        this.$message.error("请在传入分析范围");
+      }
     },
     /**
      * 计算分析面积
@@ -266,9 +299,177 @@ export default {
       }
     },
     /**
-     * 查询区域内土地权属
+     * 计算基准地价
+     */
+    async CalculateJZDJ() {
+      let that = this;
+      let BenchmarkLandPrice = this.info.BenchmarkLandPrice;
+      if (BenchmarkLandPrice.ProjectType) {
+        let landUseNatureRelation = flatten(window.landUseNatureRelation).find(
+          (c) => c.tdyt == BenchmarkLandPrice.ProjectType
+        );
+        if (landUseNatureRelation) {
+          let layerinfos = landUseNatureRelation.layerinfo;
+          for (let index = 0; index < layerinfos.length; index++) {
+            const layerinfo = layerinfos[index];
+            let layer = flatten(window.layerTree).find(
+              (item) => item.core == layerinfo.layerCore
+            );
+            if (layer && layer.date_server && layer.date_server.url) {
+              let points = this.info.BenchmarkLandPrice.ProjectScope;
+              let geo = {
+                id: 0,
+                style: null,
+                parts: [points.length],
+                points: points,
+                type: "REGION",
+                prjCoordSys: {
+                  epsgCode: null,
+                },
+              };
+              let queryByGeometryParameters = {
+                getFeatureMode: "SPATIAL",
+                datasetNames: [
+                  layer.date_server.dataSourceName +
+                    ":" +
+                    layer.date_server.datasetName,
+                ],
+                geometry: geo,
+                spatialQueryMode: "INTERSECT",
+                hasGeometry: "true",
+              };
+              let e = await mapQuery(
+                layer.date_server.url +
+                  "/featureResults.json?returnContent=true",
+                queryByGeometryParameters
+              );
+              if (e && e.totalCount > 0) {
+                e.features.forEach((feature) => {
+                  let layerData = {
+                    id: uuidv4(),
+                    layerInfo: layerinfo,
+                    data: [],
+                    geometry: feature.geometry,
+                  };
+                  feature.fieldNames.forEach((fieldName, i) => {
+                    let Field = e.datasetInfos
+                      ? e.datasetInfos[0].fieldInfos.find(
+                          (c) =>
+                            c.name &&
+                            c.name.toUpperCase() == fieldName.toUpperCase() &&
+                            c.name.toUpperCase().indexOf("SM") == -1
+                        )
+                      : null;
+                    if (Field) {
+                      layerData.data.push({
+                        label: fieldName,
+                        labelCN: Field ? Field.caption : fieldName,
+                        value: feature.fieldValues[i],
+                      });
+                    }
+                  });
+                  let ps = [];
+                  for (
+                    let index = 0;
+                    index < feature.geometry.points.length;
+                    index++
+                  ) {
+                    const element = feature.geometry.points[index];
+                    ps.push(element.x);
+                    ps.push(element.y);
+                  }
+                  that.LayerData.JZDJData.push(layerData);
+                });
+              }
+            } else {
+              this.$message.error(
+                "服务编码【" +
+                  layerinfo.layerCore +
+                  "】配置不正确，请检查后重试"
+              );
+            }
+          }
+          // 循环国有土地
+          that.LayerData.GYData.forEach((Data) => {
+            that.LayerData.JZDJData.forEach((JZDJ) => {
+              let area = that.calculateIntersectArea(
+                Data.geometry,
+                JZDJ.geometry
+              );
+              if (Number(area) > 0) {
+                let fromData = { area: area };
+                //土地级别
+                let tdjb = JZDJ.data.find(
+                  (c) => c.label == JZDJ.layerInfo.tdjbField
+                ).value;
+                fromData.tdjb = tdjb;
+                //单价
+                let dj = JZDJ.data.find(
+                  (c) => c.label == JZDJ.layerInfo.ydlxPriceField
+                ).value;
+                fromData.dj = Number(dj);
+                //占用面积地价
+                fromData.zdj = Number(area * dj);
+                Data.fromData.push(fromData);
+              }
+            });
+          });
+          // 循环国有土地
+          that.LayerData.JTData.forEach((Data) => {
+            that.LayerData.JZDJData.forEach((JZDJ) => {
+              let area = that.calculateIntersectArea(
+                Data.geometry,
+                JZDJ.geometry
+              );
+              if (Number(area) > 0) {
+                let fromData = { area: area };
+                //土地级别
+                let tdjb = JZDJ.data.find(
+                  (c) => c.label == JZDJ.layerInfo.tdjbField
+                ).value;
+                fromData.tdjb = tdjb;
+                //单价
+                let dj = JZDJ.data.find(
+                  (c) => c.label == JZDJ.layerInfo.ydlxPriceField
+                ).value;
+                fromData.dj = Number(dj);
+                //占用面积地价
+                fromData.zdj = Number(area * dj);
+
+                Data.fromData.push(fromData);
+              }
+            });
+          });
+
+          that.gyjtzdj();
+          debugger;
+        } else {
+          this.$message.error("未配置当前土地用途，请联系管理员添加");
+        }
+      } else {
+        this.$message.error("请在土地用途");
+      }
+    },
+    //
+    gyjtzdj() {
+      this.formData.gyzdj = 0;
+      this.formData.jtzdj = 0;
+      this.LayerData.GYData.forEach((gyelement) => {
+        gyelement.fromData.forEach((element) => {
+          this.formData.gyzdj += element.zdj;
+        });
+      });
+      this.LayerData.JTData.forEach((jtelement) => {
+        jtelement.fromData.forEach((element) => {
+          this.formData.jtzdj += element.zdj;
+        });
+      });
+    },
+
+    /**
+     * 查询区域内国有土地权属
      */
-    async getLandOwnership() {
+    async getGYLandOwnership() {
       let that = this;
       //查询国有使用权
       let layer = flatten(window.layerTree).find(
@@ -306,6 +507,7 @@ export default {
             id: uuidv4(),
             layerInfo: layer,
             data: [],
+            fromData: [],
             geometry: feature.geometry,
           };
 
@@ -319,7 +521,7 @@ export default {
                 )
               : null;
             if (Field) {
-              GHYDlayerData.data.push({
+              featureData.data.push({
                 label: fieldName,
                 labelCN: Field ? Field.caption : fieldName,
                 value: e.features[0].fieldValues[i],
@@ -339,10 +541,10 @@ export default {
           }
 
           var orangePolygon1 = viewer.entities.add({
-            id: "DLTB-" + DLTBlayerData.id,
+            id: "GYTD-" + featureData.id,
             polygon: {
               hierarchy: Cesium.Cartesian3.fromDegreesArray(ps),
-              material: Cesium.Color.ORANGE.withAlpha(0.7),
+              material: Cesium.Color.AQUAMARINE.withAlpha(0.4),
               outline: true,
               outlineColor: Cesium.Color.BLACK,
               outlineWidth: 2.0,
@@ -353,10 +555,401 @@ export default {
         });
       }
     },
-    clear() {},
+    /**
+     * 查询区域内集体土地权属
+     */
+    async getJTLandOwnership() {
+      let that = this;
+      //查询集体使用权
+      let layer = flatten(window.layerTree).find(
+        (item) => item.core == "007002"
+      );
+      let points = this.info.BenchmarkLandPrice.ProjectScope;
+      let geo = {
+        id: 0,
+        style: null,
+        parts: [points.length],
+        points: points,
+        type: "REGION",
+        prjCoordSys: {
+          epsgCode: null,
+        },
+      };
+      let queryByGeometryParameters = {
+        getFeatureMode: "SPATIAL",
+        datasetNames: [
+          layer.date_server.dataSourceName +
+            ":" +
+            layer.date_server.datasetName,
+        ],
+        geometry: geo,
+        spatialQueryMode: "INTERSECT",
+        hasGeometry: "true",
+      };
+      let e = await mapQuery(
+        layer.date_server.url + "/featureResults.json?returnContent=true",
+        queryByGeometryParameters
+      );
+      if (e && e.totalCount > 0) {
+        e.features.forEach((feature) => {
+          let featureData = {
+            id: uuidv4(),
+            layerInfo: layer,
+            data: [],
+            fromData: [],
+            geometry: feature.geometry,
+          };
+
+          feature.fieldNames.forEach((fieldName, i) => {
+            let Field = e.datasetInfos
+              ? e.datasetInfos[0].fieldInfos.find(
+                  (c) =>
+                    c.name &&
+                    c.name.toUpperCase() == fieldName.toUpperCase() &&
+                    c.name.toUpperCase().indexOf("SM") == -1
+                )
+              : null;
+            if (Field) {
+              featureData.data.push({
+                label: fieldName,
+                labelCN: Field ? Field.caption : fieldName,
+                value: e.features[0].fieldValues[i],
+              });
+            }
+          });
+
+          let ps = [];
+          for (
+            let index = 0;
+            index < featureData.geometry.points.length;
+            index++
+          ) {
+            const element = featureData.geometry.points[index];
+            ps.push(element.x);
+            ps.push(element.y);
+          }
+
+          var orangePolygon1 = viewer.entities.add({
+            id: "JTTD-" + featureData.id,
+            polygon: {
+              hierarchy: Cesium.Cartesian3.fromDegreesArray(ps),
+              material: Cesium.Color.ORANGE.withAlpha(0.4),
+              outline: true,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2.0,
+            },
+          });
+
+          that.LayerData.JTData.push(featureData);
+        });
+      }
+    },
+
+    /**
+     * 查询区域内规划地块
+     */
+    async getGHDK() {
+      let that = this;
+      //查询规划地块
+      let layer = flatten(window.layerTree).find(
+        (item) => item.core == "003006"
+      );
+      let points = this.info.BenchmarkLandPrice.ProjectScope;
+      let geo = {
+        id: 0,
+        style: null,
+        parts: [points.length],
+        points: points,
+        type: "REGION",
+        prjCoordSys: {
+          epsgCode: null,
+        },
+      };
+      let queryByGeometryParameters = {
+        getFeatureMode: "SQL",
+        datasetNames: [
+          layer.date_server.dataSourceName +
+            ":" +
+            layer.date_server.datasetName,
+        ],
+        // geometry: geo,
+        // spatialQueryMode: "INTERSECT",
+        queryParameter: {
+          attributeFilter: "DKBM = '" + bm.value + "'",
+        },
+        hasGeometry: "true",
+      };
+      let e = await mapQuery(
+        layer.date_server.url + "/featureResults.json?returnContent=true",
+        queryByGeometryParameters
+      );
+      if (e && e.totalCount > 0) {
+        e.features.forEach((feature) => {
+          let featureData = {
+            id: uuidv4(),
+            layerInfo: layer,
+            data: [],
+            geometry: feature.geometry,
+          };
+
+          feature.fieldNames.forEach((fieldName, i) => {
+            let Field = e.datasetInfos
+              ? e.datasetInfos[0].fieldInfos.find(
+                  (c) =>
+                    c.name &&
+                    c.name.toUpperCase() == fieldName.toUpperCase() &&
+                    c.name.toUpperCase().indexOf("SM") == -1
+                )
+              : null;
+            if (Field) {
+              featureData.data.push({
+                label: fieldName,
+                labelCN: Field ? Field.caption : fieldName,
+                value: e.features[0].fieldValues[i],
+              });
+            }
+          });
+
+          let point3ds = [];
+          let pointholes = [];
+          let startindex = 0;
+          for (
+            let index = 0;
+            index < featureData.geometry.parts.length;
+            index++
+          ) {
+            let thisps = [];
+            const endindex = startindex + featureData.geometry.parts[index];
+            let geometryPoints = featureData.geometry.points.slice(
+              startindex,
+              endindex
+            );
+            for (
+              let pointindex = 0;
+              pointindex < geometryPoints.length;
+              pointindex++
+            ) {
+              const point = geometryPoints[pointindex];
+              thisps.push(point.x);
+              thisps.push(point.y);
+            }
+            if (featureData.geometry.partTopo[index] === 1) {
+              point3ds.push(Cesium.Cartesian3.fromDegreesArray(thisps));
+            } else {
+              pointholes.push(Cesium.Cartesian3.fromDegreesArray(thisps));
+            }
+
+            startindex = endindex;
+          }
+
+          if (point3ds.length > 0 && pointholes.length > 0) {
+            let holes = [];
+            pointholes.forEach((hole) => {
+              holes.push({ positions: hole });
+            });
+
+            var orangePolygon1 = viewer.entities.add({
+              id: "GHDK-" + featureData.id,
+              polygon: {
+                hierarchy: {
+                  // Cesium.PolygonHierarchy
+                  positions: point3ds[0],
+                  holes: holes, // Cesium.PolygonHierarchy 数组
+                },
+                material: Cesium.Color.RED.withAlpha(0.4),
+                outline: true,
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 2.0,
+              },
+            });
+          } else if (point3ds.length > 0) {
+            var orangePolygon1 = viewer.entities.add({
+              id: "GHDK-" + featureData.id,
+              polygon: {
+                hierarchy: point3ds[0],
+                material: Cesium.Color.RED.withAlpha(0.4),
+                outline: true,
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 2.0,
+              },
+            });
+          }
+
+          that.LayerData.GHDKData.push(featureData);
+        });
+      }
+    },
+
+    /**
+     * 查询区域内基准地价
+     */
+    async getJZDJ() {
+      let that = this;
+      //查询基准地价
+      let layers = flatten(window.layerTree).find((item) => item.core == "006");
+      if (layers && layers.children) {
+        for (let index = 0; index < layers.children.length; index++) {
+          const layer = layers.children[index];
+          let points = this.info.BenchmarkLandPrice.ProjectScope;
+          let geo = {
+            id: 0,
+            style: null,
+            parts: [points.length],
+            points: points,
+            type: "REGION",
+            prjCoordSys: {
+              epsgCode: null,
+            },
+          };
+          let queryByGeometryParameters = {
+            getFeatureMode: "SPATIAL",
+            datasetNames: [
+              layer.date_server.dataSourceName +
+                ":" +
+                layer.date_server.datasetName,
+            ],
+            geometry: geo,
+            spatialQueryMode: "INTERSECT",
+            hasGeometry: "true",
+          };
+          let e = await mapQuery(
+            layer.date_server.url + "/featureResults.json?returnContent=true",
+            queryByGeometryParameters
+          );
+          if (e && e.totalCount > 0) {
+            e.features.forEach((feature) => {
+              let featureData = {
+                id: uuidv4(),
+                layerInfo: layer,
+                data: [],
+                geometry: feature.geometry,
+              };
+
+              feature.fieldNames.forEach((fieldName, i) => {
+                let Field = e.datasetInfos
+                  ? e.datasetInfos[0].fieldInfos.find(
+                      (c) =>
+                        c.name &&
+                        c.name.toUpperCase() == fieldName.toUpperCase() &&
+                        c.name.toUpperCase().indexOf("SM") == -1
+                    )
+                  : null;
+                if (Field) {
+                  featureData.data.push({
+                    label: fieldName,
+                    labelCN: Field ? Field.caption : fieldName,
+                    value: e.features[0].fieldValues[i],
+                  });
+                }
+              });
+
+              let ps = [];
+              for (
+                let index = 0;
+                index < featureData.geometry.points.length;
+                index++
+              ) {
+                const element = featureData.geometry.points[index];
+                ps.push(element.x);
+                ps.push(element.y);
+              }
+
+              that.LayerData.JZDJData.push(featureData);
+            });
+          }
+        }
+      }
+    },
+
+    /**
+     * 计算两个面的交集面积
+     * @param Points1
+     * @param Points2
+     */
+    calculateIntersectArea(Points1, Points2) {
+      const geometry1 = this.AssemblySurface(Points1);
+      const geometry2 = this.AssemblySurface(Points2);
+      let areaPs = intersect(geometry1, geometry2);
+      if (areaPs) {
+        const areadifference = area(areaPs);
+        return Number(areadifference.toFixed(2));
+      } else {
+        return 0;
+      }
+    },
+    /**
+     * 组装带洞和不带洞的面
+     * @param geometry 超图返回的图形数组
+     */
+    AssemblySurface(geometry) {
+      let point3ds = [];
+      let pointholes = [];
+      let startindex = 0;
+      for (let index = 0; index < geometry.parts.length; index++) {
+        let thisps = [];
+        const endindex = startindex + geometry.parts[index];
+        let geometryPoints = geometry.points.slice(startindex, endindex);
+        for (
+          let pointindex = 0;
+          pointindex < geometryPoints.length;
+          pointindex++
+        ) {
+          const point = geometryPoints[pointindex];
+          thisps.push([point.x, point.y]);
+        }
+        if (geometry.partTopo[index] === 1) {
+          point3ds.push(thisps);
+        } else {
+          pointholes.push(thisps);
+        }
+
+        startindex = endindex;
+      }
+
+      // 主多边形
+      var mainPolygon = polygon(point3ds);
+
+      // 岛洞多边形
+      var holePolygon = polygon(pointholes);
+
+      // 计算差集 得到有导洞的图形
+      var getdifference = difference(mainPolygon, holePolygon);
+      return getdifference;
+    },
+    clear() {
+      //删除国有土地权属图层
+      for (let index = 0; index < this.LayerData.GYData.length; index++) {
+        const element = this.LayerData.GYData[index];
+        viewer.entities.removeById("GYTD-" + element.id);
+      }
+      this.LayerData.GYData = [];
+      //删除国有土集体属图层
+      for (let index = 0; index < this.LayerData.JTData.length; index++) {
+        const element = this.LayerData.JTData[index];
+        viewer.entities.removeById("JTTD-" + element.id);
+      }
+      this.LayerData.JTData = [];
+      //删除规划地块图层
+      for (let index = 0; index < this.LayerData.GHDKData.length; index++) {
+        const element = this.LayerData.GHDKData[index];
+        viewer.entities.removeById("GHDK-" + element.id);
+      }
+      this.LayerData.GHDKData = [];
+      //删除绘制范围
+      viewer.entities.removeById("HZFW");
+    },
     initGY() {
       this.GYmyChart = window.echarts.init(this.$refs.GYEcharts);
 
+      let djGroup = this.GroupByzdj(this.LayerData.GYData);
+      let data = [];
+      djGroup.forEach((element) => {
+        data.push({
+          value: Number((element.zdj / 10000).toFixed(2)),
+          name: element.tdjb,
+        });
+      });
+
       var option = {
         color: [
           "#5470c6",
@@ -375,15 +968,23 @@ export default {
 
         legend: {
           orient: "vertical",
-          left: "right",
           top: "center",
+          right: 0,
+          radius: "60%",
           textStyle: {
             color: "#FFFFFF",
           },
+          formatter: function (name) {
+            var val = data.find((t) => t.name == name);
+            if (val) {
+              return name + "  " + val.value + "万元";
+            } else {
+              return name;
+            }
+          },
         },
         series: [
           {
-            name: "Access From",
             type: "pie",
             radius: ["40%", "70%"],
             center: ["35%", "50%"], // 将饼图的中心点向左调整到容器宽度的30%，纵坐标保持在中心
@@ -393,27 +994,35 @@ export default {
               borderColor: "#fff",
               borderWidth: 2,
             },
+
             label: {
-              show: false,
               position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 20,
-                fontWeight: "bold",
+              show: true,
+              formatter: () => {
+                let str =
+                  "国有建设用地" +
+                  "\n" +
+                  "基准地价预估" +
+                  "\n" +
+                  (this.formData.gyzdj / 10000).toFixed(2) +
+                  "万元";
+                return str;
               },
+              color: "#FFFFFF",
+              lineHeight: 16,
+              fontSize: 12,
             },
+            // emphasis: {
+            //   label: {
+            //     show: true,
+            //     fontSize: 20,
+            //     fontWeight: "bold",
+            //   },
+            // },
             labelLine: {
               show: false,
             },
-            data: [
-              { value: 1048, name: "I" },
-              { value: 735, name: "II" },
-              { value: 580, name: "III" },
-              { value: 484, name: "IV" },
-              { value: 300, name: "V" },
-            ],
+            data: data.length > 0 ? data : [{ value: 0, name: "无数据" }],
           },
         ],
       };
@@ -423,6 +1032,15 @@ export default {
     initJT() {
       this.JTmyChart = window.echarts.init(this.$refs.JTEcharts);
 
+      let djGroup = this.GroupByzdj(this.LayerData.JTData);
+      let data = [];
+      djGroup.forEach((element) => {
+        data.push({
+          value: Number((element.zdj / 10000).toFixed(2)),
+          name: element.tdjb,
+        });
+      });
+
       var option = {
         color: [
           "#5470c6",
@@ -440,15 +1058,23 @@ export default {
         },
         legend: {
           orient: "vertical",
-          left: "right",
           top: "center",
+          right: 0,
+          radius: "60%",
           textStyle: {
             color: "#FFFFFF",
           },
+          formatter: function (name) {
+            var val = data.find((t) => t.name == name);
+            if (val) {
+              return name + "  " + val.value + "万元";
+            } else {
+              return name;
+            }
+          },
         },
         series: [
           {
-            name: "Access From",
             type: "pie",
             radius: ["40%", "70%"],
             center: ["35%", "50%"], // 将饼图的中心点向左调整到容器宽度的30%，纵坐标保持在中心
@@ -459,32 +1085,66 @@ export default {
               borderWidth: 2,
             },
             label: {
-              show: false,
               position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 20,
-                fontWeight: "bold",
+              show: true,
+              formatter: () => {
+                let str =
+                  "集体建设用地" +
+                  "\n" +
+                  "基准地价预估" +
+                  "\n" +
+                  (this.formData.jtzdj / 10000).toFixed(2) +
+                  "万元";
+                return str;
               },
+              color: "#FFFFFF",
+              lineHeight: 16,
+              fontSize: 12,
             },
+            // emphasis: {
+            //   label: {
+            //     show: true,
+            //     fontSize: 20,
+            //     fontWeight: "bold",
+            //   },
+            // },
             labelLine: {
               show: false,
             },
-            data: [
-              { value: 1048, name: "I" },
-              { value: 735, name: "II" },
-              { value: 580, name: "III" },
-              { value: 484, name: "IV" },
-              { value: 300, name: "V" },
-            ],
+            data: data.length > 0 ? data : [{ value: 0, name: "无数据" }],
           },
         ],
       };
 
       this.JTmyChart.setOption(option);
     },
+
+    /**
+     * 对数组字段分组并求和计算每个土地级别的总地价
+     * @param djData
+     */
+    GroupByzdj(djData) {
+      let data = [];
+      djData.forEach((element) => {
+        data = data.concat(element.fromData);
+      });
+      const groupedData = data.reduce((accumulator, currentValue) => {
+        // 如果累加器（accumulator）中没有这个分组，就添加它
+        if (!accumulator[currentValue.tdjb]) {
+          accumulator[currentValue.tdjb] = { tdjb: currentValue.tdjb, zdj: 0 };
+        }
+        // 将当前对象的b值累加到对应分组上
+        accumulator[currentValue.tdjb].zdj += currentValue.zdj;
+        // 返回累加器，以便下一次迭代使用
+        return accumulator;
+      }, {});
+
+      // 将结果转换为数组（如果需要的话）
+      const resultArray = Object.keys(groupedData).map(
+        (key) => groupedData[key]
+      );
+      return resultArray;
+    },
   },
   beforeDestroy() {
     this.clear();

src/views/ConstructionApplication3D/Demolition/CQSetInfo.vue

@@ -1 +1,403 @@
 
+<template>
+    <!-- @blur="selectBlur($event, index)"  -->
+    <div class="ZTGlobal" style="padding: 1rem; ;width: 100%;">
+        <el-row :gutter="10">
+            <el-col :span="6">征地补偿标准：</el-col>
+            <el-col :span="18">
+                <el-select v-model="bcbz" style="width: 90%;" @change="selectZDBZ" placeholder="请选择">
+                    <el-option v-for=" item in bcbzList" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+        </el-row>
+        <!-- :span-method="arraySpanMethod" -->
+        <el-table :data="curBCBZ.BCBZ" fit border style="width: 100%">
+            <!-- <el-table-column prop="id" label="ID" width="180">
+            </el-table-column> -->
+            <el-table-column prop="JG" label="房屋结构" width="80">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.JG" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.JG }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="GRADE" label="等级" width="60">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.GRADE" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.GRADE }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="BZ" label="单价(元/平方米)" width="80">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.BZ" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.BZ }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="DES" label="结构及装饰特征(规格)">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.DES" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.DES }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="100">
+                <template slot-scope="scope">
+                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
+                    <el-button type="text" size="small">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-row justify="center" type="flex">
+            <el-button type="primary" @click="save()">保存</el-button>
+            <el-button type="primary" @click="saveAs()">另存为</el-button>
+            <el-button type="primary" @click="reset()">重置</el-button>
+        </el-row>
+        <el-dialog title="标准名称设置" modal="false" :visible.sync="dialogFormVisible" modal-append-to-body>
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+                <el-form-item label="名称" prop="name">
+                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog title="编辑" modal="false" :visible.sync="editFormVisible" modal-append-to-body>
+            <el-form :model="oldRow" :rules="rules" ref="oldRow">
+                <el-form-item label="房屋结构" prop="JG">
+                    <el-select v-model="oldRow.JG">
+                        <el-option label="框架结构" value="框架结构"></el-option>
+                        <el-option label="混合结构" value="混合结构"></el-option>
+                        <el-option label="砖木结构" value="砖木结构"></el-option>
+                        <el-option label="简易结构" value="简易结构"></el-option>
+                        <el-option label="凉棚" value="凉棚"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="房屋等级" prop="GRADE">
+                    <el-input v-model="oldRow.GRADE" type="number" min="1" max="5" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="单价(元/平方米)" prop="BZ">
+                    <el-input type="number" min="0" max="100000000" v-model="oldRow.BZ"
+                        autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="规格" prop="DES">
+                    <el-input type="textarea" :rows="4" v-model="oldRow.DES" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="editFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="submitEditForm('rowForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    props: ["cqValue"],
+    name: 'ZDShowInfo',
+    data() {
+        return {
+            editFormVisible: false,
+            dialogFormVisible: false,
+            ruleForm: {
+                name: null,
+
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入名称', trigger: 'blur' },
+                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ]
+            },
+            // rowForm: {
+            //     JG: "框架结构",
+            //     GRADE: 1,
+            //     BZ: 1350,
+            //     DES: ''
+            // },
+            rowRules: {
+                JG: [
+                    { required: true, message: '请选择结构', trigger: 'blur' },
+                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                GRADE: [
+                    { required: true, message: '请选择等级', trigger: 'blur' },
+                    // { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                BZ: [
+                    { required: true, message: '请输入名称', trigger: 'blur' },
+                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                DES: [
+                    { required: true, message: '请输入规划', trigger: 'blur' },
+                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ]
+            },
+            /**
+             * 补偿标准绑定值
+             */
+            bcbz: '',
+            // curLabel: '',
+            /**
+             * 补偿标准列表
+             */
+            bcbzList: JSON.parse(JSON.stringify(window.ZSBC.CQBCList)),
+            /**
+             * 当前标准
+             */
+            curBCBZ: {
+                label: "",
+                value: "",
+                BCBZ: [
+                    // {
+                    //     JG: "框架结构",
+                    //     GRADE: "1",
+                    //     BZ: 1350,
+                    //     DES: "层高:3.5m，惨板:钢筋砼8cm厚，楼地面:铺地板砖，基础:钢筋砼基础，梁柱:钢筋砼梁柱，墙体:红砖内外墙，水电:普通水电及卫生设备，墙面:内墙一般涂料，外墙有装饰面，窗:铝合金玻璃窗，门:普通镶板门",
+                    // },
+                    // {
+                    //     JG: "框架结构",
+                    //     GRADE: "2",
+                    //     BZ: 1250,
+                    //     DES: "层高:3m，楼板:钢筋砼8cm厚，地面:水泥砂浆批面，梁柱:钢筋砼梁柱，基础:钢筋砼基础，墙体:红砖内外墙，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
+                    // },
+                    // {
+                    //     JG: "混合结构",
+                    //     GRADE: "1",
+                    //     BZ: 1100,
+                    //     DES: "层高:3.5m，楼板:钢筋砼8cm厚，楼地面:铺地板砖，墙体:红砖内外墙，基础:地梁，片石基础，墙面:内墙一般涂料、外墙有装饰贴面，水电:普通水电及卫生洁具，窗:铝合金玻璃窗门:普通木门",
+                    // },
+                    // {
+                    //     JG: "混合结构",
+                    //     GRADE: "2",
+                    //     BZ: 1050,
+                    //     DES: "层高:3m，楼板:钢筋砼8cm厚，楼地面:水泥砂浆批面，墙体:红砖内外墙，基础:地梁片石基础，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
+                    // },
+                    // {
+                    //     JG: "砖木结构",
+                    //     GRADE: "1",
+                    //     BZ: 850,
+                    //     DES: "檐高:2.8m以上，墙体:红砖内外墙，地面:水泥砂浆批面、基础片石基础，屋面:土瓦屋面，梁料:木梁木，门窗:本门窗，墙面:石灰刷白，其他:普通水电设备",
+                    // },
+                    // {
+                    //     JG: "砖木结构",
+                    //     GRADE: "2",
+                    //     BZ: 750,
+                    //     DES: "檐高2.2m-2.8m，墙体:红砖内外墙，地面:水泥砂浆批面，墙面:石灰刷白，基础:片石基础，屋面:土瓦屋面，梁桁:木料木桁，门窗:木门窗",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "1",
+                    //     BZ: 350,
+                    //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:铁皮顶或石棉瓦顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "2",
+                    //     BZ: 300,
+                    //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:油毡顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "3",
+                    //     BZ: 280,
+                    //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:铁皮顶或石棉瓦顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "4",
+                    //     BZ: 200,
+                    //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:油毡顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "5",
+                    //     BZ: 80,
+                    //     DES: "层高:2.2m-3m，墙体:木板、铁皮、竹编等材料墙，屋顶油毡顶",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "1",
+                    //     BZ: 120,
+                    //     DES: "铁皮顶或石棉瓦顶、铁柱、铁架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "2",
+                    //     BZ: 70,
+                    //     DES: "铁皮顶或石棉瓦顶、木柱、木架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "3",
+                    //     BZ: 20,
+                    //     DES: "油毡顶、竹片顶、木板顶、木柱、木架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "4",
+                    //     BZ: 10,
+                    //     DES: "茅草、编叶、柳叶等",
+                    // }
+                ]
+            },
+
+
+            /**
+             * 行数据
+             */
+            oldRow: {},
+        }
+    },
+    mounted() {
+        this.initForm()
+    },
+    methods:
+    {
+        /**
+         * 初始化
+         */
+        initForm() {
+
+            debugger
+            console.log(this.cqValue)
+            if (this.cqValue && this.cqValue != "") {
+                this.bcbz = this.cqValue
+                var item = this.bcbzList.find(t => t.value == this.bcbz)
+                this.curBCBZ = item
+            }
+        },
+        /**
+         * 选择标准下拉框
+         */
+        selectZDBZ() {
+            debugger
+            if (this.bcbz && this.bcbz != "") {
+                this.curBCBZ = this.bcbzList.find(t => t.value == this.bcbz)
+            }
+        },
+
+        /**
+         * 重置
+         */
+        reset() {
+            // var val = this.bcbz
+            this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.CQBCList))
+            var item = this.bcbzList.find(t => t.value == this.bcbz)
+            debugger
+            this.curBCBZ = item
+        },
+
+        /**
+         * 保存修改
+         */
+        save() {
+            if (this.bcbz == "") {
+                this.$layer.alert("请选择补偿标准");
+                return;
+            }
+            debugger
+            var index = window.ZSBC.CQBCList.findIndex(t => t.value == this.bcbz)
+            if (index > -1) {
+                window.ZSBC.CQBCList[index] = this.curBCBZ
+                this.$layer.alert("保存完成");
+            }
+        },
+        /***
+         * 另存为
+         */
+        saveAs() {
+            // if (this.bcbz == "") {
+            //     this.$layer.alert("请选择补偿标准");
+            //     return
+            // }
+            this.dialogFormVisible = true;
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    // alert('submit!');
+                    this.dialogFormVisible = false
+                    this.saveData()
+                    // this.$layer.alert("保存完成");
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        /**
+         * 另存数据
+         */
+        saveData() {
+            debugger
+            var val = (window.ZSBC.CQBCList.length + 1).toString()
+            var newBCBZ = {
+
+                label: this.ruleForm.name,
+                value: val,
+                BCBZ: this.curBCBZ.BCBZ
+            }
+            window.ZSBC.CQBCList.push(newBCBZ)
+            this.bcbzList = window.ZSBC.CQBCList;
+            this.bcbz = val
+        },
+        /**
+         * 编辑按钮
+         */
+        handleClick(row) {
+          this.oldRow=row;
+          this.editFormVisible=true
+          
+        },
+        /**
+         * 开启行编辑
+         * @param {object} row 
+         */
+        handleSetFoucsSetData(row) {
+            this.oldRow = row
+
+        },
+        submitEditForm() {
+
+            this.editFormVisible=false;
+
+        },
+        /**
+         * 保存当前行
+         * @param {object} row 
+         */
+        saveHandleClick(row) {
+            row.seen = false
+        }
+    }
+}
+</script>
+<style lang="scss">
+@import "@/../../zt.scss";
+</style>
+
+<!-- <style scoped>
+.subtitle {
+    color: #02a7f0;
+    font-weight: 400;
+} -->
+
+/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
+{
+    color: #fff !important;
+    background-color: rgba(4, 28, 50, 0.5) !important;
+    border: 1px solid rgba(15, 122, 200, 0.4) !important;
+    text-align: center;
+
+} */
+/* .el-input
+{
+   text-align: center;
+} */
+</style>

src/views/ConstructionApplication3D/Demolition/CQShowInfo.vue

@@ -1 +1,359 @@
 
+<template>
+    <!-- @blur="selectBlur($event, index)"  -->
+    <div class="ZTGlobal" style="padding: 1rem; ;width: 100%;">
+        <el-row :gutter="10">
+            <el-col :span="6">征地补偿标准：</el-col>
+            <el-col :span="18">
+                <el-select v-model="bcbz" style="width: 90%;" @change="selectZDBZ" placeholder="请选择">
+                    <el-option v-for=" item in bcbzList" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+        </el-row>
+        <!-- :span-method="arraySpanMethod" -->
+        <el-table :data="curBCBZ.BCBZ" fit border style="width: 100%">
+            <!-- <el-table-column prop="id" label="ID" width="180">
+            </el-table-column> -->
+            <el-table-column prop="JG" label="房屋结构" width="80">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.JG" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.JG }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="GRADE" label="等级" width="60">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.GRADE" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.GRADE }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="BZ" label="单价(元/平方米)" width="80">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.BZ" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.BZ }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="DES" label="结构及装饰特征(规格)">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.DES" v-show="scope.row.seen" @focus="handleSetFoucsSetData(scope.row)"
+                        @blur="loseFoucs(scope.row)"></el-input>
+                    <div v-show="!scope.row.seen">{{ scope.row.DES }}</div>
+                </template>
+            </el-table-column>
+            <!-- <el-table-column fixed="right" label="操作" width="100">
+                <template slot-scope="scope">
+                    <el-button v-show="!scope.row.seen" @click="handleClick(scope.row)" type="text"
+                        size="small">编辑</el-button>
+                    <el-button v-show="scope.row.seen" @click="saveHandleClick(scope.row)" type="text"
+                        size="small">保存</el-button>
+                    <el-button type="text" size="small">删除</el-button>
+                </template>
+            </el-table-column> -->
+        </el-table>
+        <!-- <el-row justify="center" type="flex">
+            <el-button type="primary" @click="save()">保存</el-button>
+            <el-button type="primary" @click="saveAs()">另存为</el-button>
+            <el-button type="primary" @click="reset()">重置</el-button>
+        </el-row> -->
+        <el-dialog title="标准名称设置" modal="false" :visible.sync="dialogFormVisible" modal-append-to-body>
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+                <el-form-item label="名称" prop="name">
+                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    props: ["cqValue"],
+    name: 'ZDShowInfo',
+    data() {
+        return {
+            dialogFormVisible: false,
+            ruleForm: {
+                name: null,
+
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入名称', trigger: 'blur' },
+                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ]
+            },
+            /**
+             * 补偿标准绑定值
+             */
+            bcbz: '',
+            // curLabel: '',
+            /**
+             * 补偿标准列表
+             */
+            bcbzList: JSON.parse(JSON.stringify(window.ZSBC.CQBCList)),
+            /**
+             * 当前标准
+             */
+            curBCBZ: {
+                label: "",
+                value: "",
+                BCBZ: [
+                    // {
+                    //     JG: "框架结构",
+                    //     GRADE: "1",
+                    //     BZ: 1350,
+                    //     DES: "层高:3.5m，惨板:钢筋砼8cm厚，楼地面:铺地板砖，基础:钢筋砼基础，梁柱:钢筋砼梁柱，墙体:红砖内外墙，水电:普通水电及卫生设备，墙面:内墙一般涂料，外墙有装饰面，窗:铝合金玻璃窗，门:普通镶板门",
+                    // },
+                    // {
+                    //     JG: "框架结构",
+                    //     GRADE: "2",
+                    //     BZ: 1250,
+                    //     DES: "层高:3m，楼板:钢筋砼8cm厚，地面:水泥砂浆批面，梁柱:钢筋砼梁柱，基础:钢筋砼基础，墙体:红砖内外墙，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
+                    // },
+                    // {
+                    //     JG: "混合结构",
+                    //     GRADE: "1",
+                    //     BZ: 1100,
+                    //     DES: "层高:3.5m，楼板:钢筋砼8cm厚，楼地面:铺地板砖，墙体:红砖内外墙，基础:地梁，片石基础，墙面:内墙一般涂料、外墙有装饰贴面，水电:普通水电及卫生洁具，窗:铝合金玻璃窗门:普通木门",
+                    // },
+                    // {
+                    //     JG: "混合结构",
+                    //     GRADE: "2",
+                    //     BZ: 1050,
+                    //     DES: "层高:3m，楼板:钢筋砼8cm厚，楼地面:水泥砂浆批面，墙体:红砖内外墙，基础:地梁片石基础，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
+                    // },
+                    // {
+                    //     JG: "砖木结构",
+                    //     GRADE: "1",
+                    //     BZ: 850,
+                    //     DES: "檐高:2.8m以上，墙体:红砖内外墙，地面:水泥砂浆批面、基础片石基础，屋面:土瓦屋面，梁料:木梁木，门窗:本门窗，墙面:石灰刷白，其他:普通水电设备",
+                    // },
+                    // {
+                    //     JG: "砖木结构",
+                    //     GRADE: "2",
+                    //     BZ: 750,
+                    //     DES: "檐高2.2m-2.8m，墙体:红砖内外墙，地面:水泥砂浆批面，墙面:石灰刷白，基础:片石基础，屋面:土瓦屋面，梁桁:木料木桁，门窗:木门窗",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "1",
+                    //     BZ: 350,
+                    //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:铁皮顶或石棉瓦顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "2",
+                    //     BZ: 300,
+                    //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:油毡顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "3",
+                    //     BZ: 280,
+                    //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:铁皮顶或石棉瓦顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "4",
+                    //     BZ: 200,
+                    //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:油毡顶",
+                    // },
+                    // {
+                    //     JG: "简易结构",
+                    //     GRADE: "5",
+                    //     BZ: 80,
+                    //     DES: "层高:2.2m-3m，墙体:木板、铁皮、竹编等材料墙，屋顶油毡顶",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "1",
+                    //     BZ: 120,
+                    //     DES: "铁皮顶或石棉瓦顶、铁柱、铁架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "2",
+                    //     BZ: 70,
+                    //     DES: "铁皮顶或石棉瓦顶、木柱、木架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "3",
+                    //     BZ: 20,
+                    //     DES: "油毡顶、竹片顶、木板顶、木柱、木架",
+                    // },
+                    // {
+                    //     JG: "凉棚",
+                    //     GRADE: "4",
+                    //     BZ: 10,
+                    //     DES: "茅草、编叶、柳叶等",
+                    // }
+                ]
+            },
+
+
+            /**
+             * 行数据
+             */
+            oldRow: {},
+        }
+    },
+    mounted() {
+        this.initForm()
+    },
+    methods:
+    {
+        /**
+         * 初始化
+         */
+        initForm() {
+            
+            debugger
+           console.log(this.cqValue)
+            if (this.cqValue && this.cqValue != "") {
+                this.bcbz = this.cqValue
+                var item = this.bcbzList.find(t => t.value == this.bcbz)
+                this.curBCBZ = item
+            }
+        },
+        /**
+         * 选择标准下拉框
+         */
+        selectZDBZ() {
+            debugger
+            if (this.bcbz && this.bcbz != "") {
+                this.curBCBZ = this.bcbzList.find(t => t.value == this.bcbz)
+            }
+        },
+
+        /**
+         * 重置
+         */
+        reset() {
+            // var val = this.bcbz
+            this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.CQBCList))
+            var item = this.bcbzList.find(t => t.value == this.bcbz)
+            debugger
+            this.curBCBZ = item
+        }
+    },
+    /**
+     * 保存修改
+     */
+    save() {
+        if (this.bcbz == "") {
+            this.$layer.alert("请选择补偿标准");
+            return;
+        }
+        debugger
+        var index = window.ZSBC.CQBCList.findIndex(t => t.value == this.bcbz)
+        if (index > -1) {
+            window.ZSBC.CQBCList[index] = this.curBCBZ
+            this.$layer.alert("保存完成");
+        }
+    },
+    /***
+     * 另存为
+     */
+    saveAs() {
+        // if (this.bcbz == "") {
+        //     this.$layer.alert("请选择补偿标准");
+        //     return
+        // }
+        this.dialogFormVisible = true;
+    },
+    submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+            if (valid) {
+                // alert('submit!');
+                this.dialogFormVisible = false
+                this.saveData()
+                // this.$layer.alert("保存完成");
+            } else {
+                console.log('error submit!!');
+                return false;
+            }
+        });
+    },
+    /**
+     * 另存数据
+     */
+    saveData() {
+        debugger
+        var val = (window.ZSBC.CQBCList.length + 1).toString()
+        var newBCBZ = {
+
+            label: this.ruleForm.name,
+            value: val,
+            BCBZ: this.curBCBZ.BCBZ
+        }
+        window.ZSBC.CQBCList.push(newBCBZ)
+        this.bcbzList = window.ZSBC.CQBCList;
+        this.bcbz = val
+    },
+    /**
+     * 编辑按钮
+     */
+    handleClick(row) {
+        row.seen = true
+    },
+    /**
+     * 开启行编辑
+     * @param {object} row 
+     */
+    handleSetFoucsSetData(row) {
+        this.oldRow = row
+
+    },
+    /**
+     * 行数据变化更改
+     * @param {object} row 
+     */
+    loseFoucs(row) {
+        // let res = _.isEqual(row, this.oldRow)
+        // if (res) {
+        //     //行编辑未修改
+
+        // }
+        // else {
+        //     //行编辑发生修改
+        // }
+    },
+    /**
+     * 保存当前行
+     * @param {object} row 
+     */
+    saveHandleClick(row) {
+        row.seen = false
+    }
+}
+</script>
+<style lang="scss">
+@import "@/../../zt.scss";
+</style>
+
+<!-- <style scoped>
+.subtitle {
+    color: #02a7f0;
+    font-weight: 400;
+} -->
+
+/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
+{
+    color: #fff !important;
+    background-color: rgba(4, 28, 50, 0.5) !important;
+    border: 1px solid rgba(15, 122, 200, 0.4) !important;
+    text-align: center;
+
+} */
+/* .el-input
+{
+   text-align: center;
+} */
+</style>

src/views/ConstructionApplication3D/Demolition/DemolitionList.vue

@@ -1,672 +1,2216 @@
 <template>
-  <div class="ZTGlobal rootele">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="拆迁补偿预估" name="first">
-        <el-row>
-          <el-col :span="7">项目范围：</el-col>
-          <el-col :span="16">
-            <el-button type="primary">导入范围</el-button>
-            <el-button type="primary">绘制范围</el-button>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">项目名称：</el-col>
-          <el-col :span="16">
-            <el-input placeholder="输入项目名称"></el-input>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">征地补偿标准：</el-col>
-          <el-col :span="10">
-            <el-select v-model="zdValue" placeholder="请选择">
-              <el-option
-                v-for="item in zdList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-col>
-          <el-col :span="7" class="buttongroup">
-            <el-button
-              size="mini"
-              type="primary"
-              id="zdShow"
-              @click="zdShow()"
-              plain
-              >查看</el-button
-            >
-            <el-button
-              size="mini"
-              type="primary"
-              id="zdSet"
-              @click="zdSet()"
-              plain
-              >配置</el-button
-            >
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">青苗补偿标准：</el-col>
-          <el-col :span="10">
-            <el-select v-model="qmValue" placeholder="请选择">
-              <el-option
-                v-for="item in qmList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-col>
-          <el-col :span="7" class="buttongroup">
-            <el-button
-              size="mini"
-              type="primary"
-              id="qmShow"
-              @click="qmShow()"
-              plain
-              >查看</el-button
-            >
-            <el-button
-              size="mini"
-              type="primary"
-              id="qmSet"
-              @click="qmSet()"
-              plain
-              >配置</el-button
-            >
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">拆迁补偿标准：</el-col>
-          <el-col :span="10">
-            <el-select v-model="cqValue" placeholder="请选择">
-              <el-option
-                v-for="item in cqList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-col>
-
-          <el-col :span="7" class="buttongroup">
-            <el-button
-              size="mini"
-              type="primary"
-              id="cqShow"
-              @click="cqShow()"
-              plain
-              >查看</el-button
-            >
-            <el-button
-              size="mini"
-              type="primary"
-              id="cqSet"
-              @click="cqSet()"
-              plain
-              >配置</el-button
-            >
-          </el-col>
-        </el-row>
-
-        <el-row style="text-align: center">
-          <el-button type="primary" plain>确定</el-button>
-          <el-button type="primary" plain>取消</el-button>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane label="分析记录" name="second">分析记录</el-tab-pane>
-      <el-tab-pane label="分析结果" name="third">分析结果</el-tab-pane>
-    </el-tabs>
-  </div>
+    <div class="ZTGlobal rootele">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="拆迁补偿预估" name="first">
+                <el-row>
+                    <el-col :span="7">项目范围：</el-col>
+                    <el-col :span="16">
+                        <el-button type="primary">导入范围</el-button>
+                        <el-button type="primary" @click="drawPolygon()">绘制范围</el-button>
+                    </el-col>
+                </el-row>
+                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="8rem" class="demo-ruleForm">
+                    <el-form-item label="项目名称：" prop="projectName">
+                        <!-- <el-col :span="7">项目名称：</el-col> -->
+                        <el-col :span="16">
+                            <el-input placeholder="输入项目名称" v-model="ruleForm.projectName"></el-input>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="征地补偿标准：" prop="zdValue">
+                        <!-- <el-col :span="7">征地补偿标准：</el-col> -->
+                        <el-col :span="13">
+                            <el-select v-model="ruleForm.zdValue" placeholder="请选择">
+                                <el-option v-for="item in zdList" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="7" class="buttongroup">
+                            <el-button size="mini" type="primary" id="zdShow" @click="zdShow()" plain>查看</el-button>
+                            <el-button size="mini" type="primary" id="zdSet" @click="zdSet()" plain>配置</el-button>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="青苗补偿标准：" prop="qmValue">
+                        <!-- <el-col :span="7">青苗补偿标准：</el-col> -->
+                        <el-col :span="13">
+                            <el-select v-model="ruleForm.qmValue" placeholder="请选择">
+                                <el-option v-for="item in qmList" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="7" class="buttongroup">
+                            <el-button size="mini" type="primary" id="qmShow" @click="qmShow()" plain>查看</el-button>
+                            <el-button size="mini" type="primary" id="qmSet" @click="qmSet()" plain>配置</el-button>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="拆迁补偿标准：" prop="cqValue">
+                        <!-- <el-col :span="7">拆迁补偿标准：</el-col> -->
+                        <el-col :span="13">
+                            <el-select v-model="ruleForm.cqValue" placeholder="请选择">
+                                <el-option v-for="item in cqList" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="7" class="buttongroup">
+                            <el-button size="mini" type="primary" id="cqShow" @click="cqShow()" plain>查看</el-button>
+                            <el-button size="mini" type="primary" id="cqSet" @click="cqSet()" plain>配置</el-button>
+                        </el-col>
+                    </el-form-item>
+                    <el-row style="text-align: center;">
+                        <el-button type="primary" plain @click="submitForm('ruleForm')">确定</el-button>
+                        <el-button type="primary" plain @click="dialogClose()">取消</el-button>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="分析记录" name="second">
+                <el-row>
+                    <el-col :span="12">
+                        <el-input placeholder="请输入项目名称" v-model="projectName">
+                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                        </el-input>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-date-picker v-model="dateVal" type="daterange" range-separator="至" start-placeholder="开始日期"
+                            end-placeholder="结束日期">
+                        </el-date-picker>
+                    </el-col>
+                </el-row>
+                <div>
+                    <el-card class="box-card" v-for="projectInfo in projectList" :key="projectInfo.id">
+                        <div slot="header" class="clearfix">
+                            <el-col :span="12">
+                                <span>{{ projectInfo.name }}</span></el-col>
+                            <el-col :span="12">
+                                <span>{{ projectInfo.date }}</span>
+                            </el-col>
+                        </div>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-button style="float: right; padding: 3px 0" type="success">完成</el-button>
+                            </el-col>
+                            <el-col :span="12" justify="center">
+                                <el-button type="primary" style="float: right; padding: 3px 0">日志</el-button>
+                                <el-button type="primary" style="float: right; padding: 3px 0"
+                                    @click="showResult(projectInfo)">分析结果</el-button>
+                                <el-button type="primary" style="float: right; padding: 3px 0">报告</el-button>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="分析结果" name="third">
+                <el-row class="box-card" v-model="curProjectInfo" :key="curProjectInfo.id">
+                    <el-col :span="18">
+                        <span style="font-size: 1rem;">{{ curProjectInfo.name }}</span></el-col>
+                    <el-col :span="6">
+                        <el-button type="primary">导出报告</el-button>
+                    </el-col>
+                </el-row>
+                <el-tabs v-model="activePage" @tab-click="pageClick">
+                    <el-tab-pane label="征地补偿费评估" name="ZDPG">
+                        <el-row>
+                            <el-col :span="2" justify="center">
+                                <img :src="imgs.zd1" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+                                <span style="color: #fff; "> 预计征地面积(亩)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ zdResult.totalZDMJ }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.zd2" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 预计征地补偿费(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ zdResult.totalPay }}</span>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="2">
+                                <img :src="imgs.zd3" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+                                <span style="color: #fff; "> 预计土地补偿费(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ zdResult.totalZDOay }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.zd4" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 预计征地补偿费(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ zdResult.totalAZPay }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <div id="ZDBCChart" style="height:25rem;width: 25rem;"></div>
+                    </el-tab-pane>
+                    <el-tab-pane label="青苗补偿费评估" name="QMPG">
+                        <el-row>
+                            <el-col :span="2" justify="center">
+                                <img :src="imgs.qm1" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+                                <span style="color: #fff; "> 补偿面积(亩)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#2d8cf0">{{
+                                    qmResult.totalMJ }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.qm2" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+                                <span>
+                                    青苗补偿预估(万元)
+                                </span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span>
+                                    {{ qmResult.totalPay }}
+                                </span>
+                            </el-col>
+                        </el-row>
+
+                        <el-row>
+                            <el-col :span="2" justify="center">
+                                <img :src="imgs.qm1" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+
+
+                                <span style="color: #fff; "> 农作物补偿面积(亩)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.nzwMJ }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.qm2" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 农作物补偿费用预估(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.nzwPay }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="2" justify="center">
+                                <img :src="imgs.qm1" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+
+                                <span style="color: #fff; "> 经济作物补偿面积(亩)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.jjzwMJ }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.qm2" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 经济作物补偿费预估(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.jjzwPay }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="2">
+                                <img :src="imgs.qm3" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+
+                                <span style="color: #fff; "> 树木补偿面积(亩)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.smMJ }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.qm4" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 树木补偿费用预估(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ qmResult.smPay }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <div id="QMMJChart" style="height: 10rem;width: 25rem;"></div>
+                        <div id="QMFYChart" style="height: 10rem;width: 25rem;"></div>
+                    </el-tab-pane>
+                    <el-tab-pane label="房屋拆迁补偿费评估" name="FWCQ">
+                        <el-row>
+                            <el-col :span="2" justify="center">
+                                <img :src="imgs.cq1" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+                                <span style="color: #fff; ">房屋数量(个)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ cqResult.count
+                                }}</span>
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.cq2" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+                                <span style="color: #fff; "> 房屋总建筑面积(平方米)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ cqResult.totalJZMJ
+                                }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="2">
+                                <img :src="imgs.cq3" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6">
+
+                                <span style="color: #fff; "> 预计补偿(万元)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ cqResult.totalPay }}</span>
+
+                            </el-col>
+                            <el-col :span="2">
+                                <img :src="imgs.cq4" style="height: 2rem;width: 2rem;" />
+                            </el-col>
+                            <el-col :span="6" style="padding: 2px;">
+
+                                <span style="color: #fff; "> 平均补偿费(元/平方米)</span>
+                            </el-col>
+                            <el-col :span="4">
+                                <span color="#ffff#2d8cf0">{{ cqResult.average }}</span>
+
+                            </el-col>
+                        </el-row>
+                        <div style=" height:2rem;width:100%">
+                            <el-col :span="6">
+                                <el-select>
+                                    <el-option>混合结构</el-option>
+                                    <el-option>砖木结构</el-option>
+                                    <el-option>简易结构</el-option>
+                                    <el-option>凉棚</el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="7">
+                                <el-select>
+                                    <el-option>按建筑面积降序</el-option>
+                                    <el-option>按建筑面积升序</el-option>
+                                    <el-option>按照补偿款降序</el-option>
+                                    <el-option>按照补偿款升序</el-option>
+                                    <el-option>按照层高降序</el-option>
+                                    <el-option>按照层高升序</el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="11">
+                                <el-input placeholder="请输入查询内容" suffix-icon="el-icon-search"></el-input>
+                            </el-col>
+
+                        </div>
+                        <ul>
+                            <!-- item = { id: smid, cqr: cqrVal, jg: fwjgVal, fwdj: fwdjVal, floor: floorVal, jzmj: jzmjVal, zdmj: zdmjVal, address: addressVal, pay: pay, single: BZ } -->
+                            <li v-for="(cqItem, index) in cqResult.list" :key="index"
+                                style="margin-bottom:0.5rem;font-size: 0.8rem;">
+                                <el-row>
+                                    <el-col :span="20">
+                                        <span style="color:#06c4f3;font-Weight:600;">{{ index + 1 }}.&nbsp{{ cqItem.cqr
+                                        }}</span>
+                                    </el-col>
+                                    <el-col :span="4">
+                                        <!-- <img src="imgs.zd1" /> -->
+                                        <i class="el-icon-s-operation"></i>
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="12">
+                                        结构：{{ cqItem.jg }}
+                                    </el-col>
+                                    <el-col :span="12">
+                                        层数：{{ cqItem.floor }}
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="12">
+                                        建筑面积：{{ formatterArea(cqItem.jzmj) }}平方米
+                                    </el-col>
+                                    <el-col :span="12">
+                                        拆迁补偿：{{ cqItem.pay }}万元
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="24">
+                                        <i class="el-icon-map-location"></i> 地址：{{ cqItem.address }}
+                                    </el-col>
+                                </el-row>
+                            </li>
+                        </ul>
+
+                    </el-tab-pane>
+                </el-tabs>
+
+            </el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
 <script>
-// import CQSetInfo from './CQSetInfo.vue';
-// import CQShowInfo from './CQShowInfo.vue';
-import QMSetInfo from "./QMSetInfo.vue";
-import QMShowInfo from "./QMShowInfo.vue";
+import { polygon, area, booleanContains, intersect, difference } from '@turf/turf';
+// import projectInfoVue from '../projectInfo/projectInfo.vue';
+import CQSetInfo from './CQSetInfo.vue';
+import CQShowInfo from './CQShowInfo.vue';
+import QMSetInfo from './QMSetInfo.vue';
+import QMShowInfo from './QMShowInfo.vue';
+
+import ZDSetInfo from './ZDSetInfo.vue';
+import ZDShowInfo from './ZDShowInfo.vue';
 
-import ZDSetInfo from "./ZDSetInfo.vue";
-import ZDShowInfo from "./ZDShowInfo.vue";
 export default {
-  name: "DemolitionList",
-  data() {
-    return {
-      /**
-       * tabs 标签
-       */
-      activeName: "first",
-      /**
-       * 弹窗保证弹出唯一
-       */
-      layerid: null,
-      /**
-       * 征地标准值
-       */
-      zdValue: "",
-      /**
-       * 征地标准列表
-       */
-      zdList: [
-        // {
-        //     label: "征地标准01",
-        //     value: '征地标准01',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "征地标准02",
-        //     value: '征地标准02',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "征地标准03",
-        //     value: '征地标准03',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-      ],
-      /**
-       * 青苗标准值
-       */
-      qmValue: "",
-      /**
-       * 青苗标准值
-       */
-      qmList: [
-        // {
-        //     label: "青苗标准01",
-        //     value: '01',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "青苗标准02",
-        //     value: '02',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "青苗标准03",
-        //     value: '03',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-      ],
-      /**
-       * 拆迁标准值
-       */
-      cqValue: "",
-      /**
-       * 拆迁标准值
-       */
-      cqList: [
-        // {
-        //     label: "拆迁标准01",
-        //     value: '01',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "拆迁标准02",
-        //     value: '02',
-        //     rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-        // {
-        //     label: "拆迁标准03",
-        //     value: '03', rules: {
-        //         /**
-        //          * 土地统一年产值
-        //          */
-        //         TDCZ: 1000,
-        //         /**
-        //          * 土地补偿倍数
-        //          */
-        //         TDBCBS: 10,
-        //         /**
-        //          * 土地补偿费
-        //          */
-        //         TDBCF: 1000,
-        //         /**
-        //                                 * 安置补偿倍数
-        //                                 */
-        //         AZBCBS: 10,
-        //         /**
-        //         * 安置补偿费
-        //         */
-        //         ZBBCF: 111,
-        //         //  /**
-        //         //  * 土地补偿费
-        //         //  */
-        //         // BCHJ:1000,
-        //     }
-        // },
-      ],
-    };
-  },
-  created() {
-    this.initSetting();
-  },
-  methods: {
-    /**
-     * tas切换
-     * @param {String} tab
-     * @param {Object} event
-     */
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
+    props: ['layerid'],
+    name: "DemolitionList",
+    data() {
+        return {
+            loading: null,
+            /**
+             * 
+             */
+            imgs: {
+                /**
+                 * 征地版面图片
+                 */
+                zd1: require("@/assets/homeimg/1.png"),
+                zd2: require("@/assets/homeimg/1.png"),
+                zd3: require("@/assets/homeimg/1.png"),
+                zd4: require("@/assets/homeimg/1.png"),
+                /**
+                 * 拆迁版面图片
+                */
+                cq1: require("@/assets/homeimg/1.png"),
+                cq2: require("@/assets/homeimg/1.png"),
+                cq3: require("@/assets/homeimg/1.png"),
+                cq4: require("@/assets/homeimg/1.png"),
+                /**
+                * 青苗版面图片
+                */
+                qm1: require("@/assets/homeimg/1.png"),
+                qm2: require("@/assets/homeimg/1.png"),
+                qm3: require("@/assets/homeimg/1.png"),
+                qm4: require("@/assets/homeimg/1.png"),
 
-    initSetting() {
-      this.zdList = window.ZSBC.ZDBCList;
-      this.cqList = window.ZSBC.CQBCList;
-      this.qmList = window.ZSBC.QMBCList;
-    },
-    /**
-     *拆迁标准查看
-     */
-    // cqShow() {
-    //     var that = this;
-    //     if (that.layerid)
-    //         that.$layer.close(that.layerid)
-    //     var width = 400
-    //     var top = 500
-    //     var left = 680 //Math.floor(document.body.clientWidth - width / 2);
-    //     var height = 350;
-
-    //     that.layerid = that.$layer.iframe({
-    //         content: {
-    //             content: CQShowInfo, //传递的组件对象
-    //             parent: this, //当前的vue对象
-    //             data: {}, //props
-    //         },
-    //         offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-    //         area: [width.toString(), height.toString()],
-    //         title: "拆迁补偿标准",
-    //         maxmin: false,
-    //         shade: false, //是否显示遮罩
-    //         shadeClose: false, //点击遮罩是否关闭
-    //         cancel: () => {
-    //             //关闭事件
-    //             // alert("关闭iframe");
-    //         },
-    //     });
-    // },
-    // /**
-    //  * 拆迁标准设置
-    //  */
-    // cqSet() {
-    //     var that = this;
-    //     if (that.layerid)
-    //         that.$layer.close(that.layerid)
-    //     var width = 400
-    //     var top = 500
-    //     var left = Math.floor(document.body.clientWidth - width / 2);
-    //     var height = 350;
-    //     that.layerid = that.$layer.iframe({
-    //         content: {
-    //             content: CQSetInfo, //传递的组件对象
-    //             parent: this, //当前的vue对象
-    //             data: {}, //props
-    //         },
-    //         offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-    //         area: [width.toString(), height.toString()],
-    //         title: "拆迁补偿标准设置",
-    //         maxmin: false,
-    //         shade: false, //是否显示遮罩
-    //         shadeClose: false, //点击遮罩是否关闭
-    //         cancel: () => {
-    //             //关闭事件
-    //             // alert("关闭iframe");
-    //         },
-    //     });
-    // },
-    /**
-     *青苗标准查看
-     */
-    qmShow() {
-      var that = this;
-      if (that.layerid) that.$layer.close(that.layerid);
-      var width = 400;
-      var top = 500;
-      var left = Math.floor(document.body.clientWidth - width / 2);
-      var height = 350;
-      that.layerid = that.$layer.iframe({
-        content: {
-          content: QMShowInfo, //传递的组件对象
-          parent: this, //当前的vue对象
-          data: {}, //props
-        },
-        // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-        area: ["30rem", "15rem"],
-        title: "青苗补偿标准",
-        maxmin: false,
-        shade: false, //是否显示遮罩
-        shadeClose: false, //点击遮罩是否关闭
-        cancel: () => {
-          //关闭事件
-          // alert("关闭iframe");
-        },
-      });
-    },
-    /**
-     * 青苗标准设置
-     */
-    qmSet() {
-      var that = this;
-      if (that.layerid) that.$layer.close(that.layerid);
-      var width = 400;
-      var top = 500;
-      var left = Math.floor(document.body.clientWidth - width / 2);
-      var height = 350;
-      that.layerid = that.$layer.iframe({
-        content: {
-          content: QMSetInfo, //传递的组件对象
-          parent: this, //当前的vue对象
-          data: {}, //props
-        },
-        // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-        area: ["35rem", "20rem"],
-        title: "青苗补偿标准设置",
-        maxmin: false,
-        shade: false, //是否显示遮罩
-        shadeClose: false, //点击遮罩是否关闭
-        cancel: () => {
-          //关闭事件
-          // alert("关闭iframe");
-        },
-      });
-    },
-    /**
-     *征地标准查看
-     */
-    zdShow() {
-      var that = this;
-      if (that.layerid) that.$layer.close(that.layerid);
-      var width = 400;
-      var top = 500;
-      var left = Math.floor(document.body.clientWidth - width / 2);
-      var height = 350;
-      that.layerid = that.$layer.iframe({
-        content: {
-          content: ZDShowInfo, //传递的组件对象
-          parent: this, //当前的vue对象
-          data: { zdValue: that.zdValue }, //props
-        },
-        // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-        area: ["35rem", "32rem"],
-        title: "征地补偿标准",
-        maxmin: false,
-        shade: false, //是否显示遮罩
-        shadeClose: false, //点击遮罩是否关闭
-        cancel: () => {
-          //关闭事件
-          // alert("关闭iframe");
-        },
-      });
+            },
+            /**
+             * tabs 标签
+             */
+            activeName: 'first',
+            /**
+             * 弹窗保证弹出唯一
+             */
+            sublayerid: null,
+
+            ruleForm: {
+                projectName: '',
+                /**
+                * 征地标准值
+                */
+                zdValue: '',
+                /* 青苗标准值
+                 */
+                qmValue: '',
+                /**
+                 * 拆迁标准值
+                 */
+                cqValue: '',
+            },
+            rules: {
+                projectName: [
+                    { required: true, message: '请输入项目名称', trigger: 'blur' },
+                ],
+                zdValue: [
+                    { required: true, message: '请选择征地补偿标准', trigger: 'blur' },
+                ],
+
+                qmValue: [
+                    { required: true, message: '请选择青苗补偿标准', trigger: 'blur' },
+                ],
+
+                cqValue: [
+                    { required: true, message: '请选择拆迁补偿标准', trigger: 'blur' },
+                ],
+            },
+            /**
+            /**
+            /**
+             * 征地标准列表
+             */
+            zdList: [
+                // {
+                //     label: "征地标准01",
+                //     value: '征地标准01',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+
+
+                //     }
+                // },
+                // {
+                //     label: "征地标准02",
+                //     value: '征地标准02',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+
+
+                //     }
+                // },
+                // {
+                //     label: "征地标准03",
+                //     value: '征地标准03',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+            ],
+            /**
+          * 青苗标准值
+          */
+            qmList: [
+                // {
+                //     label: "青苗标准01",
+                //     value: '01',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+                // {
+                //     label: "青苗标准02",
+                //     value: '02',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+                // {
+                //     label: "青苗标准03",
+                //     value: '03',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+            ],
+            /**
+             * 拆迁标准值
+             */
+            cqList: [
+                // {
+                //     label: "拆迁标准01",
+                //     value: '01',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+                // {
+                //     label: "拆迁标准02",
+                //     value: '02',
+                //     rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+                // {
+                //     label: "拆迁标准03",
+                //     value: '03', rules: {
+                //         /**
+                //          * 土地统一年产值
+                //          */
+                //         TDCZ: 1000,
+                //         /**
+                //          * 土地补偿倍数
+                //          */
+
+                //         TDBCBS: 10,
+                //         /**
+                //          * 土地补偿费
+                //          */
+                //         TDBCF: 1000,
+                //         /**
+                //                                 * 安置补偿倍数
+                //                                 */
+
+                //         AZBCBS: 10,
+                //         /**
+                //         * 安置补偿费
+                //         */
+                //         ZBBCF: 111,
+                //         //  /**
+                //         //  * 土地补偿费
+                //         //  */
+                //         // BCHJ:1000,
+                //     }
+                // },
+            ],
+            /***
+             * tab2
+             */
+            activePage: 'ZDPG',
+            dateVal: '',
+            projectList: [
+                // {
+                //     id: '',
+                //     name: '',
+                //     date: '',
+                //     /* 征地标准值
+                //     */
+                //     zdValue: '',
+                //     /* 青苗标准值
+                //      */
+                //     qmValue: '',
+                //     /**
+                //      * 拆迁标准值
+                //      */
+                //     cqValue: '',
+                //     /**
+                //      * 分析范围
+                //      */
+                //     geometry: {},
+                //     /**
+                //      * 拆迁分析结果
+                //      */
+                //     cqResult: {},
+                //     /**
+                //      * 青苗分析结果
+                //      */
+                //     qmResult: {},
+                //     /**
+                //      * 征地分析结果
+                //      */
+                //     zdResult: {}
+                // }
+
+            ],
+            curProjectInfo: {
+                id: '',
+                name: '',
+                date: '',
+                /* 征地标准值
+                */
+                zdValue: '',
+                /* 青苗标准值
+                 */
+                qmValue: '',
+                /**
+                 * 拆迁标准值
+                 */
+                cqValue: '',
+                /**
+                 * 分析范围
+                 */
+                geometry: {},
+                /**
+                 * 拆迁分析结果
+                 */
+                cqResult: {
+                    count: 0,
+                    totalJZMJ: 0,
+                    totalPay: 0,
+                    average: 0,
+                    list: [
+                    ],
+                    features: [],
+                },
+                /**
+                 * 青苗分析结果
+                 */
+                qmResult: {},
+                /**
+                 * 征地分析结果
+                 */
+                zdResult: {}
+            },
+
+            /**
+             * 拆迁结果
+             */
+            cqResult: {
+                count: 0,
+                totalJZMJ: 0,
+                totalPay: 0,
+                average: 0,
+                list: [
+
+                ],
+                features: [],
+            },
+            // {
+            //     id: 1,
+            //     name: '陈亮',
+            //     area: 123.98,
+            //     jg: '混合结构',
+            //     floor: 1,
+            //     address: '朱楼村102号',
+            //     pay: 730021,
+            //     single: 5862,
+            // },
+            // {
+            //     id: 2,
+            //     name: '朱长贵',
+            //     jg: '砖木结构',
+            //     area: 123.98,
+            //     floor: 1,
+            //     address: '朱楼村103号',
+            //     pay: 730021,
+            //     single: 5862,
+            // },
+
+            // {
+            //     id: 3,
+            //     name: '朱长贵明',
+            //     jg: '砖木结构',
+            //     area: 123.98,
+            //     floor: 1,
+            //     address: '朱楼村111号',
+            //     pay: 730021,
+            //     single: 5862,
+            // },
+            /**
+            * 青苗结果
+            */
+            qmResult: {
+                totalPay: 0.00,
+                totalMJ: 0.00,
+                nzwMJ: 0.00,
+                nzwPay: 0.00,
+                jjzwMJ: 0.00,
+                jjzwPay: 0.00,
+                smMJ: 0.00,
+                smPay: 0.00,
+                features: []
+            },
+            /**
+           * 征地结果
+           */
+            zdResult: {
+                //征地面积
+                totalZDMJ: 0,
+                //总补偿
+                totalPay: 0,
+                //征地补偿
+                totalZDOay: 0,
+                //安置补偿
+                totalAZPay: 0,
+
+                //地类及面积
+                list: [],
+                features: []
+            },
+            /**
+             * 绘制多边形
+             */
+            handlerPolygon: null,
+            positions: [],
+            regions: [],
+            // clipMode: Cesium.ModifyRegionMode.CLIP_OUTSIDE;
+        };
     },
-    /**
-     * 征地标准设置
-     */
-    zdSet() {
-      var that = this;
-      if (that.layerid) that.$layer.close(that.layerid);
-      var width = 400;
-      var top = 500;
-      var left = Math.floor(document.body.clientWidth - width / 2);
-      var height = 350;
-      that.layerid = that.$layer.iframe({
-        content: {
-          content: ZDSetInfo, //传递的组件对象
-          parent: this, //当前的vue对象
-          data: { zdValue: that.zdValue }, //props
-        },
-        // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
-        area: ["35rem", "37rem"],
-        title: "征地补偿标准",
-        maxmin: false,
-        shade: false, //是否显示遮罩
-        shadeClose: false, //点击遮罩是否关闭
-        cancel: () => {
-          //关闭事件
-          // alert("关闭iframe");
-        },
-      });
+    created() {
+        this.initSetting()
+        this.startPolygon()
     },
-  },
-};
+    methods: {
+
+        formatterArea(area) {
+            if (area) {
+                return area.toFixed(2)
+            }
+            return 0.00
+        },
+        formatterPay(number) {
+            return (number / 10000).toFixed(2)
+
+        },
+
+        /**
+         * tas切换
+         * @param {String} tab 
+         * @param {Object} event 
+         */
+        handleClick(tab, event) {
+            if (this.activeName == 'third') {
+                this.pageClick();
+            }
+        },
+
+        initSetting() {
+            this.zdList = window.ZSBC.ZDBCList
+            this.cqList = window.ZSBC.CQBCList
+            this.qmList = window.ZSBC.QMBCList
+        },
+        dialogClose() {
+            if (this.handlerPolygon) {
+                this.handlerPolygon.deactivate()
+                this.handlerPolygon.clear();
+            }
+            this.positions = [];
+            this.regions = [];
+            if (this.layerid)
+                this.$layer.close(this.layerid)
+        },
+        /**
+         *拆迁标准查看
+         */
+        cqShow() {
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = 680 //Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: CQShowInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: {}, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["35rem", "40rem"],
+                title: "拆迁补偿标准",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+        },
+        /**
+         * 拆迁标准设置
+         */
+        cqSet() {
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: CQSetInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: { 'cqValue': that.ruleForm.cqValue }, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["50rem", "40rem"],
+                title: "拆迁补偿标准设置",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+        },
+        /**
+        *青苗标准查看
+        */
+        qmShow() {
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: QMShowInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: { 'qmValue': that.ruleForm.qmValue }, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["30rem", "15rem"],
+                title: "青苗补偿标准",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+        },
+        /**
+         * 青苗标准设置
+         */
+        qmSet() {
+
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: QMSetInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: { 'qmValue': that.ruleForm.qmValue }, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["35rem", "20rem"],
+                title: "青苗补偿标准设置",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+
+        },
+        /**
+        *征地标准查看
+        */
+        zdShow() {
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: ZDShowInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: { 'zdValue': that.ruleForm.zdValue }, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["35rem", "32rem"],
+                title: "征地补偿标准",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+        },
+        /**
+         * 征地标准设置
+         */
+        zdSet() {
+            var that = this;
+            if (that.sublayerid)
+                that.$layer.close(that.sublayerid)
+            var width = 400
+            var top = 500
+            var left = Math.floor(document.body.clientWidth - width / 2);
+            var height = 350;
+            that.sublayerid = that.$layer.iframe({
+                content: {
+                    content: ZDSetInfo, //传递的组件对象
+                    parent: this, //当前的vue对象
+                    data: { 'zdValue': that.ruleForm.zdValue }, //props
+                },
+                // offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
+                area: ["35rem", "37rem"],
+                title: "征地补偿标准",
+                maxmin: false,
+                shade: false, //是否显示遮罩
+                shadeClose: false, //点击遮罩是否关闭
+                cancel: () => {
+                    //关闭事件
+                    // alert("关闭iframe");
+                },
+            });
+        },
+        /**
+         * 查看姓名结果
+         * @param {object} projectInfo 
+         */
+        showResult(projectInfo) {
+            this.activeName = "third"
+            // this.ZDBCChart() //征地
+            // this.QMBCChart()  //青苗
+            this.curProjectInfo = projectInfo;
+            this.pageClick();
+        },
+        pageClick() {
+            var page = this.activePage;
+            this.ZDBCChart();
+            this.QMBCChart();
+            // this.CQBCChart();
+            // switch (page) {
+            //     case "ZDPG":
+            //         this.ZDBCChart();
+            //         break;
+            //     case "QMPG":
+            //         this.QMBCChart();
+            //         break;
+            //     // case "FWCQ":
+            //     //     this.CQBCChart();
+            //     //     break;
+            //     default:
+            //         this.ZDBCChart();
+            // }
+        },
+        /**
+         *征地补偿chart 
+         */
+        ZDBCChart() {
+            debugger
+            var chartDom = document.getElementById('ZDBCChart');
+            var myChart = window.echarts.init(chartDom);
+            // this.zdResult.list.push({ 'dlbm': dlbmVal, 'dlmc': dlmcVal, 'mj': insertArea });
+            var datas = [];
+            var nameLength = 0;
+            for (var i = 0; i < this.zdResult.list.length; i++) {
+                if (this.zdResult.list[i].dlmc.length > nameLength) {
+                    nameLength = this.zdResult.list[i].dlmc.length
+                }
+                datas.push({ value: this.zdResult.list[i].mj, name: this.zdResult.list[i].dlmc })
+            }
+            // var datas = [
+            //     { value: 1048, name: '水田' },
+            //     { value: 735, name: '农村道路' },
+            //     { value: 580, name: '水塘' },
+            //     { value: 484, name: '农用地' },
+            //     { value: 300, name: '村镇建设用地' }
+            // ]
+
+            var option = {
+                //   title: {
+                //       text: '',
+                //       subtext: '',
+                //       left: 'center'
+                //   },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 0,
+                    top: 0,
+                    radius: '55%',
+                    // bottom: 20,
+                    textStyle: {
+                        // fontSize: '12px',
+                        color: '#FFFF'
+                    },
+                    data: datas.map(t => t.name),
+                    formatter: function (name) {
+                        var val = datas.find(t => t.name == name).value
+                        var lastSpace = (nameLength - name.length) * 3;
+                        return (name + new Array(lastSpace).join(" ")) + val + "亩"
+                    }
+                },
+                color: ['#0a915d', '#bb88dd', '#6699ff', '#d5b158', '#ff6347', 'indigo', 'purple'],
+                series: [
+                    {
+                        name: '征地补偿分析',
+                        type: 'pie',
+                        center: ['25%', '50%'],
+                        radius: ['30%', '50%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 12,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: datas
+                    }
+                ]
+            };
+            myChart.setOption(option);
+        },
+        /**
+         * 青苗补偿chart
+         */
+        QMBCChart() {
+            debugger
+            var chartDom1 = document.getElementById('QMMJChart');
+            var myChart1 = window.echarts.init(chartDom1);
+
+            var datas1 = [];
+            if (this.qmResult) {
+                datas1 = [
+                    { value: this.qmResult.nzwMJ, name: '农作物' },
+                    { value: this.qmResult.jjzwMJ, name: '经济作物' },
+                    { value: this.qmResult.smMJ, name: '树木' }
+                ]
+            }
+            else {
+                datas1 = [
+                    { value: 0.00, name: '农作物' },
+                    { value: 0.00, name: '经济作物' },
+                    { value: 0.00, name: '树木' }
+                ]
+
+            }
+
+            var option1 = {
+                title: {
+                    text: '农作物补偿面积',
+                    //   subtext: '',
+                    left: 'center',
+                    textStyle: {
+                        fontSize: '16',
+                        color: '#FFFF'
+                    },
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 0,
+                    top: '20%',
+                    radius: '55%',
+                    // bottom: 20,
+                    textStyle: {
+                        // fontSize: '1rem',
+                        color: '#FFFF'
+                    },
+                    data: datas1.map(t => t.name),
+                    formatter: function (name) {
+                        var val = datas1.find(t => t.name == name).value
+                        return (name + new Array(20 - name.length * 3).join(" ")) + val + "亩"
+                    }
+                },
+                color: ['#0a915d', '#bb88dd', '#6699ff', '#d5b158', '#ff6347', 'indigo', 'purple'],
+                series: [
+                    {
+                        name: '征地补偿分析',
+                        type: 'pie',
+                        center: ['25%', '45%'],
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 12,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: datas1
+                    }
+                ]
+            };
+            myChart1.setOption(option1);
+
+
+            var chartDom2 = document.getElementById('QMFYChart');
+            var myChart2 = window.echarts.init(chartDom2);
+            var datas2 = [];
+            if (this.qmResult) {
+                datas2 = [
+                    { value: this.qmResult.nzwPay, name: '农作物' },
+                    { value: this.qmResult.jjzwPay, name: '经济作物' },
+                    { value: this.qmResult.smPay, name: '树木' }
+                ]
+            }
+            else {
+                datas2 = [
+                    { value: 0.00, name: '农作物' },
+                    { value: 0.00, name: '经济作物' },
+                    { value: 0.00, name: '树木' }
+                ]
+            }
+            var option2 = {
+                title: {
+                    text: '农作物补偿费用',
+                    subtext: '',
+                    left: 'center',
+                    textStyle: {
+                        fontSize: '16',
+                        color: '#FFFF'
+                    },
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 0,
+                    top: '20%',
+                    radius: '55%',
+                    // bottom: 20,
+                    textStyle: {
+                        // fontSize: '12px',
+                        color: '#FFFF'
+                    },
+                    data: datas2.map(t => t.name),
+                    formatter: function (name) {
+                        var val = datas2.find(t => t.name == name).value
+                        return (name + new Array(20 - name.length * 3).join(" ")) + val + "万元"
+                    }
+                },
+                color: ['#0a915d', '#bb88dd', '#6699ff', '#d5b158', '#ff6347', 'indigo', 'purple'],
+                series: [
+                    {
+                        name: '征地补偿分析',
+                        type: 'pie',
+                        center: ['25%', '45%'],
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 12,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: datas2
+                    }
+                ]
+            };
+            myChart2.setOption(option2);
+        },
+        /**
+        * 拆迁补偿chart
+        */
+        CQBCChart() {
+            debugger
+            var chartDom = document.getElementById('CQBCChart');
+            var myChart = window.echarts.init(chartDom);
+
+            item = { id: smid, cqr: cqrVal, jg: fwjgVal, fwdj: fwdjVal, floor: floorVal, jzmj: jzmjVal, zdmj: zdmjVal, address: addressVal, pay: pay, single: BZ }
+            that.cqResult.list.push(item);
+            that.cqResult.totalJZMJ += jzmjVal;
+            that.cqResult.totalPay += pay;
+
+        },
+        /**
+         * 绘制多边形
+         */
+        startPolygon() {
+            var that = this;
+            that.handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
+            that.handlerPolygon.activeEvt.addEventListener(function (isActive) {
+                if (isActive == true) {
+                    viewer.enableCursorStyle = false;
+                    viewer._element.style.cursor = '';
+                    // var nodes = document.getElementsByTagName('body')
+                    // if (nodes.length > 0)
+                    //     nodes[0].className.replace('drawCur','drawCur')
+                } else {
+                    viewer.enableCursorStyle = true;
+                    // var nodes = document.getElementsByTagName('body')
+                    // if (nodes.length > 0) {
+                    //     nodes[0].className.replace('drawCur','')
+                    // }
+                }
+            });
+            that.handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
+                // if (this.handlerPolygon.isDrawing) {
+                //     window.createTooltip.showAt(windowPosition, '点击确定多边形顶点,右键单击结束绘制,');
+                // } else {
+                //     window.createTooltip.showAt(windowPosition, '点击绘制第一个点,');
+                // }
+            });
+            that.handlerPolygon.drawEvt.addEventListener(function (result) {
+                // window.createTooltip.setVisible(false);
+                that.handlerPolygon.polygon.show = true;
+                that.handlerPolygon.polyline.show = true;
+                that.positions = [];
+                for (var pt of result.object.positions) {
+                    var cartographic = Cesium.Cartographic.fromCartesian(pt);
+                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                    var height = cartographic.height;
+                    that.regions.push({ 'x': longitude, 'y': latitude });
+                }
+                that.regions.push(that.regions[0]);
+                // that.regions = [];
+                // that.regions.push(that.positions);
+            });
+        },
+        /**
+         * 点击绘制多边形
+         */
+        drawPolygon() {
+
+            if (this.handlerPolygon == null)
+                this.startPolygon()
+            else {
+                this.handlerPolygon.clear();
+                this.positions = [];
+                this.regions = [];
+            }
+            this.handlerPolygon.activate();
+        },
+        /**
+         * 查询数据
+         */
+        doQuery() {
+
+            var that = this
+
+            that.loading = that.$loading({
+                lock: false,
+                text: '开始分析计算',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            console.log(JSON.stringify(that.regions))
+            var dataSources = []
+            dataSources.push(window.ZSBC.ZDBCJS.DLTB.layerDataSource)
+            dataSources.push(window.ZSBC.ZDBCJS.BDC.layerDataSource)
+            var queryObj = {
+                "getFeatureMode": "SPATIAL",
+                "spatialQueryMode": "INTERSECT",
+                "datasetNames": dataSources,
+                "geometry": {
+                    // id: 0,
+                    // style: null,
+                    // parts: [queryPoints.length],
+                    points: that.regions,
+                    type: "REGION"
+                }
+            };
+            var queryData = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
+            var url = window.ZSBC.dataServiceUrl; //"http://192.168.1.30:8091/iserver/services/data-sanyamap1-2/rest/data/featureResults.rjson?returnContent=true&hasGeometry=true";
+            window.axios
+                .post(url, queryObj)
+                .then(function (response) {
+                    debugger
+                    var count = response.data.totalCount;
+                    if (count == 0) {
+                        alert("未查询到数据请重新选择")
+
+                        return;
+                    }
+                    if (that.loading)
+                        that.loading.text = "正在计算图层数据...";
+                    var dataSetInfos = response.data.datasetInfos
+                    var features = response.data.features;
+                    var dltbFeatures = []
+                    var bdcFeatures = [];
+                    var start = 0;
+                    var end = 0;
+                    var count = 0;
+                    var fieldInfos = []
+                    dataSetInfos.forEach(element => {
+                        start = element.featureRange.start;
+                        end = element.featureRange.end;
+                        count = end - start
+                        fieldInfos = element.fieldInfos
+                        if (element.datasetName == window.ZSBC.ZDBCJS.BDC.layerDataSource) {
+                            bdcFeatures = features.filter((item, index) => {
+                                return index >= start && index <= end
+                            })
+                            if (bdcFeatures != null && bdcFeatures.length > 0) {
+                                that.jzComputer(bdcFeatures, fieldInfos)
+                            }
+                        }
+                        else if (element.datasetName == window.ZSBC.ZDBCJS.DLTB.layerDataSource) {
+                            dltbFeatures = features.filter((item, index) => {
+                                return index >= start && index <= end
+                            })
+                            if (dltbFeatures != null && dltbFeatures.length > 0) {
+                                that.zdComputer(dltbFeatures, fieldInfos)
+                            }
+                        }
+                    });
+                    if (that.loading) {
+                        that.loading.close();
+                        that.$message({
+                            message: '征地分析计算完成',
+                            type: 'success'
+                        });
+
+                        var date = new Date();
+                        that.curProjectInfo = {
+                            id: that.projectList.length + 1,
+                            name: that.ruleForm.projectName,
+                            date: that.dateFormat(date),//date.getFullYear() + '-' + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
+                            /* 征地标准值
+                            */
+                            zdValue: that.ruleForm.zdValue,
+                            /* 青苗标准值
+                             */
+                            qmValue: that.ruleForm.qmValue,
+                            /**
+                             * 拆迁标准值
+                             */
+                            cqValue: that.ruleForm.cqValue,
+                            /**
+                             * 分析范围
+                             */
+                            geometry: {
+                                partTopo: [1],
+                                parts: [that.regions.length],
+                                points: that.regions
+                            },
+                            /**
+                             * 拆迁分析结果
+                             */
+                            cqResult: that.cqResult,
+                            /**
+                             * 青苗分析结果
+                             */
+                            qmResult: that.qmResult,
+                            /**
+                             * 征地分析结果
+                             */
+                            zdResult: that.zdResult
+                        }
+                        that.projectList.push(that.curProjectInfo);
+
+                    }
+                    // function (result) {
+                    // var resultObj = JSON.parse(result);
+                    // console.log(resultObj);
+                    // if (resultObj.featureCount > 0) {
+                    //     onQueryComplete(resultObj.features);
+                    // }
+                })
+                .catch(error => {
+                    that.loading.close();
+                    console.log(error);
+                })
+        },
+        /**
+         * 查询结果
+         */
+        onQueryComplete(features) {
+            var selectedFeatures = features;
+            viewer.entities.removeAll();
+        },
+        /**
+         * 查询失败
+         */
+        processFailed(queryEventArgs) {
+            alert('查询失败！');
+        },
+        /**
+         * 点击确定开始计算
+         */
+        submitForm(formName) {
+            var that = this
+            if (that.regions.length == 0) {
+                that.$alert('请导入或绘制项目范围', '警告'
+                );
+                // alert('请导入或绘制项目范围')
+                return false;
+            }
+            that.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //alert('submit!');
+                    that.doQuery()
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        /**
+         * 征地计算
+         */
+        zdComputer(features, fieldInfos) {
+
+            console.log("zdComputer", features.length)
+            var that = this;
+            if (that.loading)
+                that.loading.text = "正在计算征地数据...";
+            var fieldNames = []
+            var fieldValues = []
+            //地类名称
+            var dlmcVal = '';
+            var dlmc = window.ZSBC.ZDBCJS.DLTB.dlmc.field
+            var dlmcIndex = that.getfldIndex(fieldInfos, dlmc);
+            if (dlmcIndex == -1) {
+                console.log("地类图斑中未找到地类名称字段，请检查配置是否正确");
+                return;
+            }
+            //地类编
+            var dlbmVal = '';
+            var dlbm = window.ZSBC.ZDBCJS.DLTB.dlbm.field;
+            var dlbmIndex = that.getfldIndex(fieldInfos, dlbm);
+
+
+            if (dlbmIndex == -1) {
+                console.log("地类图斑中未找到地类编码字段，请检查配置是否正确");
+                // return;
+            }
+            //图斑面积
+
+            var tbmj = window.ZSBC.ZDBCJS.DLTB.tbmj.field;
+
+            var tbmjIndex = that.getfldIndex(fieldInfos, tbmj);
+
+            // fieldInfos.indexOf(fld => fld.name == tbmj)
+            //树木统计类
+            var smfl = window.ZSBC.ZDBCJS.DLTB.smfl.dlmc
+            //农作物统计类
+            var nzwfl = window.ZSBC.ZDBCJS.DLTB.nzwfl.dlmc
+            //经济作物分类
+            var jjzwfl = window.ZSBC.ZDBCJS.DLTB.jjzwfl.dlmc
+
+
+            var tbmjVal = 0;
+            var points = [];
+            // geometry.points[0].x
+
+            // var polygon1=that.creaturfPolygon(that.regions)
+            // var polygon2=[];
+            //经济作物面积           
+            var jjzwMJ = 0.00;
+            //农作物面积
+            var nzwMJ = 0.00;
+            //树木面积            
+            var smMJ = 0.00;
+            var dlAreas = [
+                // {
+                //     dlbm: '',
+                //     dlmc: '',
+                //     mj: 0
+                // }
+            ]
+            var totalZDMJ = 0.00;
+            var interserArea = 0.00;
+            var geometry = {
+                partTopo: [1],
+                parts: [that.regions.length],
+                points: that.regions
+            }
+            features.forEach((curFeature, index) => {
+                points = curFeature.geometry;
+                //平方米折算
+                var insertArea = that.calculateIntersectArea(geometry, points) / 666.66;
+                // polygon2=that.creaturfPolygon(points);
+                //青苗面积计算-->
+                if (dlmcIndex > -1)
+                    dlmcVal = curFeature.fieldValues[dlmcIndex];
+                if (dlbmIndex > -1)
+                    dlbmVal = curFeature.fieldValues[dlbmIndex];
+                if (smfl.indexOf(dlmcVal) > -1) {
+                    smMJ += insertArea;
+                    that.qmResult.features.push(curFeature);
+                }
+                else if (jjzwfl.indexOf(dlbmVal) > -1) {
+                    jjzwMJ += insertArea;
+                    that.qmResult.features.push(curFeature);
+                }
+                else if (nzwfl.indexOf(dlbmVal) > -1) {
+                    nzwMJ += insertArea;
+                    that.qmResult.features.push(curFeature);
+                }
+                //<--
+                //征地面积计算-->
+                //
+
+                totalZDMJ += insertArea;
+                var dlIndex = -1;
+                that.zdResult.list.forEach((t, index) => {
+                    if (t.dlbm == dlbmVal) {
+                        dlIndex = index;
+
+                    }
+                });
+                if (dlIndex == -1)
+                    that.zdResult.list.push({ 'dlbm': dlbmVal, 'dlmc': dlmcVal, 'mj': insertArea });
+                else
+                    that.zdResult.list[dlIndex].mj += insertArea;
+                //<--
+            });
+            for (var i = 0; i < that.zdResult.list.length; i++) {
+                var mj = parseFloat(that.zdResult.list[i].mj.toFixed(2))
+                that.zdResult.list[i].mj = mj
+
+            }
+            that.zdResult.list
+            //青苗补偿标准-->
+            var QMBZ = that.qmList.find(t => t.value = that.ruleForm.qmValue)
+            //农作物单价
+            var nzw = 0;
+            //经济作物单价
+            var jjzw = 0;
+            //树木单价
+            var sm = 0;
+            //农作物支付总额
+            var nzwPay = 0;
+            //经济作物支付总额
+            var jjzwPay = 0;
+            //树木支付总额
+            var smPay = 0;
+            //
+            if (QMBZ) {
+                nzw = parseFloat((QMBZ.BCBZ.NZW).toFixed(2));
+                jjzw = parseFloat((QMBZ.BCBZ.JJZW).toFixed(2));
+                sm = parseFloat((QMBZ.BCBZ.SM).toFixed(2));
+
+                nzwPay = parseFloat((nzw * nzwMJ / 10000).toFixed(2));
+                jjzwPay = parseFloat((jjzw * jjzwMJ / 10000).toFixed(2));
+                smPay = parseFloat((sm * smMJ / 10000).toFixed(2));
+            }
+
+            that.qmResult.nzwMJ = parseFloat(nzwMJ.toFixed(2));
+            that.qmResult.nzwPay = nzwPay;
+            that.qmResult.jjzwMJ = parseFloat(jjzwMJ.toFixed(2));
+            that.qmResult.jjzwPay = jjzwPay;
+            that.qmResult.smMJ = parseFloat(smMJ.toFixed(2));
+            that.qmResult.smPay = smPay;
+            that.qmResult.totalMJ = parseFloat((nzwMJ + jjzwMJ + smMJ).toFixed(2));
+            that.qmResult.totalPay = parseFloat((nzwPay + jjzwPay + smPay).toFixed(2));
+
+            //<--
+
+            //征地补偿-->
+            var ZDBZ = that.zdList.find(t => t.value = that.ruleForm.zdValue);
+            if (ZDBZ) {
+                //征地面积
+                that.zdResult.totalZDMJ = parseFloat(totalZDMJ.toFixed(2));
+                //总补偿
+                that.zdResult.totalPay = parseFloat((totalZDMJ * ZDBZ.BCBZ.BCHJ / 10000).toFixed(2));
+                //征地补偿
+                that.zdResult.totalZDOay = parseFloat((totalZDMJ * ZDBZ.BCBZ.TDBCF / 10000).toFixed(2));
+                //安置补偿
+                that.zdResult.totalAZPay = parseFloat((totalZDMJ * ZDBZ.BCBZ.AZBCF / 10000).toFixed(2));
+            }
+            that.zdResult.features = features;
+            //<--
+
+        },
+        getfldIndex(fieldInfos, fldName) {
+            var fldIndex = -1;
+            fieldInfos.forEach((fld, index) => {
+                if (fld.name.toUpperCase() == fldName.toUpperCase()) {
+                    fldIndex = index;
+                }
+            })
+            return fldIndex;
+        },
+        /**
+         * 建筑计算
+         */
+        jzComputer(features, fieldInfos) {
+            console.log("jzComputer", features.length)
+            var that = this;
+            if (that.loading)
+                that.loading.text = "正在计算房屋建筑数据...";
+            var fieldNames = []
+            var fieldValues = []
+            //产权人、
+            var cqrVal = '';
+            var cqr = window.ZSBC.ZDBCJS.BDC.cqr.field
+            var cqrIndex = that.getfldIndex(fieldInfos, cqr);
+
+            // fieldInfos.indexOf(fld => fld.name == cqr)
+            if (cqrIndex == -1) {
+                console.log("不动产中未找到产权人字段，请检查配置是否正确");
+                return;
+            }
+            //房屋结构
+            var fwjgVal = ''
+            var fwjg = window.ZSBC.ZDBCJS.BDC.fwjg.field
+            var fwjgIndex = that.getfldIndex(fieldInfos, fwjg);
+
+            //  fieldInfos.indexOf(fld => fld.name == fwjg)
+            if (fwjgIndex == -1) {
+                console.log("不动产中未找到房屋结构字段，请检查配置是否正确");
+                fwjgVal = window.ZSBC.ZDBCJS.BDC.fwjg.defaultVal
+            }
+            //房屋等级
+            var fwdjVal = 1;
+            var fwdj = window.ZSBC.ZDBCJS.BDC.fwdj.field
+            var fwdjIndex = that.getfldIndex(fieldInfos, fwdj);
+
+            // fieldInfos.indexOf(fld => fld.name == fwdj)
+            if (fwdjIndex == -1) {
+                fwdjVal = window.ZSBC.ZDBCJS.BDC.fwdj.defaultVal
+            }
+            //占地面积
+            var zdmjVal = 0;
+            var zdmj = window.ZSBC.ZDBCJS.BDC.jzmj.field
+            var zdmjIndex = that.getfldIndex(fieldInfos, zdmj);
+
+            // fieldInfos.indexOf((fld, index) => {
+            //     if (fld.name == zdmj)
+            //         return index;
+            // });
+            if (zdmjIndex == -1) {
+                console.log("不动产中未找到占地面积字段，请检查配置是否正确");
+            }
+
+            //房屋层数
+            var floorVal = 0;
+            var floor = window.ZSBC.ZDBCJS.BDC.floor.field
+            var floorIndex = that.getfldIndex(fieldInfos, floor);
+
+            if (floorIndex == -1) {
+                console.log("不动产中未找到房层数字段，请检查配置是否正确");
+            }
+
+            //建筑面积
+            var jzmjVal = 0;
+            var jzmj = window.ZSBC.ZDBCJS.BDC.jzmj.field
+            var jzmjIndex = that.getfldIndex(fieldInfos, jzmj);
+
+            fieldInfos.indexOf(fld => fld.name == jzmj)
+            if (jzmjIndex == -1) {
+                console.log("不动产中未找到建筑面积字段，请检查配置是否正确");
+            }
+
+            // "SMAREA"var jzmjVal = 0;
+            var feattureMJVal = 0
+            var feattureMJIndex = that.getfldIndex(fieldInfos, "SMAREA");
+
+
+            var smid = '';
+            var smidIndex = that.getfldIndex(fieldInfos, "SMID");
+
+            // fieldInfos.indexOf(fld => fld.name == 'SMID')
+            //地址
+            var addressVal = '';
+            var address = window.ZSBC.ZDBCJS.BDC.address.field
+            var addressIndex = that.getfldIndex(fieldInfos, address);
+
+            // fieldInfos.indexOf(fld => fld.name == zdmj)
+            if (addressIndex == -1) {
+                console.log("不动产中未找到房屋地址字段，请检查配置是否正确");
+            }
+            that.cqResult = {
+                count: 0,
+                totalJZMJ: 0,
+                totalPay: 0,
+                average: 0,
+                list: [
+
+                ],
+                features: [],
+            }
+            var item = { id: '', cqr: '', jg: '', floor: 1, jzmj: 0, zdmj: 0, address: '', pay: 0, single: 0 }
+
+            var pay = 0;
+            features.forEach((curFeature, index) => {
+                pay = 0;
+                item = { cqr: '', jg: '', floor: 1, jzmj: 0, zdmj: 0, address: '', pay: 0 }
+                //产权人
+                if (cqrIndex > -1) {
+                    cqrVal = curFeature.fieldValues[cqrIndex];
+                }
+                //结构
+                if (fwjgIndex > -1) {
+                    fwjgVal = parseInt(curFeature.fieldValues[fwjgIndex]);
+                }
+                else {
+                    fwjgVal = window.ZSBC.ZDBCJS.BDC.fwjg.defaultVal;
+                }
+                //层数
+                if (floorIndex > -1) {
+                    floorVal = parseInt(curFeature.fieldValues[floorIndex]);
+                }
+                else { floorVal = 1; }
+                //等级
+                if (fwdjIndex > -1) {
+                    fwdjVal = parseInt(curFeature.fieldValues[fwdjIndex]);
+                }
+                else {
+                    fwdjVal = window.ZSBC.ZDBCJS.BDC.fwdj.defaultVal
+                }
+                smid = curFeature.fieldValues[smidIndex];
+                //系统面积
+                feattureMJVal = parseFloat(curFeature.fieldValues[feattureMJIndex]).toFixed(2);
+                //建筑面积
+                if (jzmjIndex > -1) {
+                    jzmjVal = parseFloat(curFeature.fieldValues[jzmjIndex]);
+                }
+                else {
+                    jzmjVal = feattureMJVal * floorVal;
+                }
+                //房屋地址
+                if (addressIndex > -1) {
+                    addressVal = curFeature.fieldValues[addressIndex];
+                }
+                //占地面积
+                if (zdmjIndex > -1) {
+                    zdmjVal = parseFloat(curFeature.fieldValues[zdmjIndex]);
+                }
+                else {
+                    zdmjVal = feattureMJVal
+                }
+                //补偿单价 元/平方米
+                var BZ = 0.00
+                var PGBZ = that.cqList.find(t => t.value == that.ruleForm.cqValue);
+                if (PGBZ && PGBZ.BCBZ.length > 0) {
+                    var BZItem = PGBZ.BCBZ.find(t => { t.JG == fwjgVal && t.GRADE == fwdjVal })
+                    if (BZItem && BZItem.BZ) {
+                        BZ = BZItem.BZ;
+                    }
+                    pay = parseFloat((jzmjVal * BZ / 10000).toFixed(2));
+                }
+                else
+                    console.log("结构：" + fwjgVal + ",等级：" + fwdjVal + "的补偿标准未设置");
+                item = { id: smid, cqr: cqrVal, jg: fwjgVal, fwdj: fwdjVal, floor: floorVal, jzmj: jzmjVal, zdmj: zdmjVal, address: addressVal, pay: pay, single: BZ }
+                that.cqResult.list.push(item);
+                that.cqResult.totalJZMJ += jzmjVal;
+                that.cqResult.totalPay += pay;
+            })
+            that.cqResult.average = parseFloat((that.cqResult.totalPay / that.cqResult.totalJZMJ * 10000).toFixed(2));
+            that.cqResult.totalJZMJ = parseFloat(that.cqResult.totalJZMJ.toFixed(2));
+            that.cqResult.totalPay = parseFloat(that.cqResult.totalPay.toFixed(2));
+            that.cqResult.count = features.length;
+            that.cqResult.features = features
+        },
+
+        /***
+         * pararm {object} @arr
+         */
+        creaturfPolygon(arr) {
+            var points = [];
+            var parts = []
+            var polygon = [];
+
+            if (arr && arr.length > 0)
+                for (var i = 0; i < arr.length; i++) {
+                    points.push([arr[i].x, arr[i].y])
+                }
+            parts.push(points);
+            polygon.push(parts)
+            return polygon(polygon);
+
+        },
+        /**
+         * point1(裁剪),points2(被裁剪) [{x:1,y:2}]
+         */
+        computerInsertArea(points1, points2) {
+            if (points1 == null || points2 == null || points2.length == 0 || points1.length == 0) {
+                console.log("征地补偿图斑计算传入参数错误")
+                return 0;
+            }
+            var parts1 = [];
+            var poly1 = [];
+            var parts2 = [];
+            var poly2 = [];
+            // parts1.push()
+            for (var i = 0; i < points1.length; i++) {
+                parts1.push([points1[i].x, points1[i].y])
+            }
+            poly1 = polygon([parts1])
+            var textarea = area(poly1)
+            console.log("分析范围：" + textarea)
+            for (var i = 0; i < points2.length; i++) {
+                parts2.push([points2[i].x, points2[i].y])
+            }
+            poly2 = polygon([parts2])
+            var isContain = booleanContains(poly1, poly2);
+            if (isContain)
+                return area(poly2);
+            else {
+                var intersection = intersect(poly1, poly2);
+                return area(intersection);
+            }
+            return 0;
+
+
+        },
+        /**
+         * 计算两个面的交集面积
+         */
+
+        calculateIntersectArea(Points1, Points2) {
+            const geometry1 = this.AssemblySurface(Points1);
+
+            var textarea = area(geometry1)
+            console.log("分析范围：" + textarea)
+            const geometry2 = this.AssemblySurface(Points2);
+            let areaPs = intersect(geometry1, geometry2);
+            if (areaPs) {
+                const areadifference = area(areaPs);
+                return Number(areadifference.toFixed(2));
+            } else {
+                return 0;
+            }
+        },
+        /**
+         * 组装带洞和不带洞的面
+         * @param geometry 超图返回的图形数组
+         */
+        AssemblySurface(geometry) {
+            let point3ds = [];
+            let pointholes = [];
+            let startindex = 0;
+            for (let index = 0; index < geometry.parts.length; index++) {
+                let thisps = [];
+                const endindex = startindex + geometry.parts[index];
+                let geometryPoints = geometry.points.slice(startindex, endindex);
+                for (
+                    let pointindex = 0;
+                    pointindex < geometryPoints.length;
+                    pointindex++
+                ) {
+                    const point = geometryPoints[pointindex];
+                    thisps.push([point.x, point.y]);
+                }
+                if (geometry.partTopo[index] === 1) {
+                    point3ds.push(thisps);
+                } else {
+                    pointholes.push(thisps);
+                }
+
+                startindex = endindex;
+            }
+
+            // 主多边形
+            var mainPolygon = polygon(point3ds);
+
+            // 岛洞多边形
+            var holePolygon = polygon(pointholes);
+
+            // 计算差集 得到有导洞的图形
+            var getdifference = difference(mainPolygon, holePolygon);
+            return getdifference;
+        },
+        beforeDestroy() {
+            if (this.handlerPolygon) {
+                this.handlerPolygon.deactivate()
+                this.handlerPolygon.clear();
+            }
+            this.positions = [];
+            this.regions = [];
+        },
+
+        destroyed() {
+        },
+        dateFormat(date) {
+            // console.log(showTime(date.getHours()));
+            var year = date.getFullYear();                // 年
+            var month = this.showTime(date.getMonth() + 1);        // 月
+            // var week = this.showTime(date.getDay());           // 星期
+            var day = this.showTime(date.getDate());          // 日
+            var hours = this.showTime(date.getHours());         // 小时
+            var minutes = this.showTime(date.getMinutes());    // 分钟
+            var second = this.showTime(date.getSeconds());     // 秒
+            var str = '';
+            str = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + second;
+            return str;
+            
+        },
+        // 封装一个不够两位数就补零的函数
+        showTime(t) {
+            var time
+            time = t > 10 ? t : '0' + t
+            return time
+        }
+    }
+}
 </script>
 <style lang="scss">
 @import "@/../../zt.scss";
 </style>
 
 <style scoped>
+input.el-range-input {
+    background-color: transparent;
+}
+
+.el-range-editor.el-input__inner {
+    background-color: transparent;
+}
+
 .el-row {
-  /* padding: 0.5rem 0 0.5rem 0; */
-  /* display: inline-flex; */
-  align-items: center;
-  /* margin-bottom: 0.5rem; */
+    /* padding: 0.5rem 0 0.5rem 0; */
+    /* display: inline-flex; */
+    align-items: center;
+    margin-bottom: 0.5rem;
 }
 
 .el-col {
-  display: inline-flex;
+    display: inline-flex;
 }
 
 .buttongroup {
-  display: inline-flex;
+    display: inline-flex
 }
 
 .rootele {
-  padding: 0.5rem;
-  color: white;
+    padding: 0.5rem;
+    color: white;
+    overflow-y: none
 }
 
 .el-col {
-  color: white;
+    color: white;
 }
 
 .el-tab-pane {
-  color: white;
+    color: white;
 }
 
 .el-input {
-  background: transparent;
+    background: transparent;
 }
-</style>
+
+ul {
+    height: 25rem;
+    width: 100%;
+    overflow-y: auto;
+    font-size: 1rem;
+    padding: 1rem;
+    list-style-type: none
+}
+</style>

src/views/ConstructionApplication3D/Demolition/QMSetInfo.vue

@@ -4,50 +4,29 @@
     <el-row :gutter="10">
       <el-col :span="6">青苗补偿标准：</el-col>
       <el-col :span="18">
-        <el-select v-model="bcbz" style="width: 90%">
-          <el-option
-            v-for="item in bcbzList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
+        <el-select v-model="bcbz" style="width: 90%" @change="selectZDBZ()">
+          <el-option v-for="item in bcbzList" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-col>
     </el-row>
 
     <el-row>
       <el-col :span="6">农作物补偿：</el-col>
-      <el-col :span="16"
-        ><el-input
-          style="width: 100%"
-          type="number"
-          placeholder="请输入"
-          readonly
-          v-model="curBCBZ.BCBZ.TDCZ"
-        ></el-input>
+      <el-col :span="16"><el-input style="width: 100%" type="number" placeholder="请输入" readonly
+          v-model="curBCBZ.BCBZ.NZW"></el-input>
       </el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
     <el-row>
       <el-col :span="6">经济作物：</el-col>
       <el-col :span="16">
-        <el-input
-          style="width: 100%"
-          placeholder="请输入"
-          v-model="curBCBZ.BCBZ.TDBCBS"
-        ></el-input
-      ></el-col>
+        <el-input style="width: 100%" placeholder="请输入" v-model="curBCBZ.BCBZ.JJZW"></el-input></el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
     <el-row>
       <el-col :span="6">树木补偿：</el-col>
       <el-col :span="16">
-        <el-input
-          style="width: 100%"
-          placeholder="请输入"
-          v-model="curBCBZ.BCBZ.TDBCBS"
-        ></el-input
-      ></el-col>
+        <el-input style="width: 100%" placeholder="请输入" v-model="curBCBZ.BCBZ.SM"></el-input></el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
     <el-row justify="center" type="flex">
@@ -55,12 +34,7 @@
       <el-button type="primary" @click="saveAs()">另存为</el-button>
       <el-button type="primary" @click="reset()">重置</el-button>
     </el-row>
-    <el-dialog
-      title="标准名称设置"
-      modal="false"
-      :visible.sync="dialogFormVisible"
-      modal-append-to-body
-    >
+    <el-dialog title="标准名称设置" modal="false" :visible.sync="dialogFormVisible" modal-append-to-body>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
         <el-form-item label="名称" prop="name">
           <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
@@ -68,16 +42,14 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm('ruleForm')"
-          >确 定</el-button
-        >
+        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
 export default {
-  props: ["zdValue"],
+  props: ["qmValue"],
   name: "QMSetInfo",
   data() {
     return {
@@ -99,7 +71,7 @@ export default {
       /**
        * 补偿标准列表
        */
-      bcbzList: JSON.parse(JSON.stringify(window.ZSBC.ZDBCList)),
+      bcbzList: JSON.parse(JSON.stringify(window.ZSBC.QMBCList)),
       /**
        * 当前标准
        */
@@ -107,32 +79,9 @@ export default {
         label: "",
         value: "",
         BCBZ: {
-          /**
-           * 土地统一年产值
-           */
-          TDCZ: 0,
-          /**
-           * 土地补偿倍数
-           */
-
-          TDBCBS: 0,
-          /**
-           * 土地补偿费
-           */
-          TDBCF: 0,
-          /**
-           * 安置补偿倍数
-           */
-
-          AZBCBS: 0,
-          /**
-           * 安置补偿费
-           */
-          AZBCF: 0,
-          /**
-           * 补偿合计
-           */
-          BCHJ: 0,
+          NZW: 0,
+          JJZW: 0,
+          SM: 0
         },
       },
     };
@@ -143,8 +92,8 @@ export default {
   methods: {
     initForm() {
       debugger;
-      if (this.zdValue && this.zdValue != "") {
-        this.bcbz = this.zdValue;
+      if (this.qmValue && this.qmValue != "") {
+        this.bcbz = this.qmValue;
         var item = this.bcbzList.find((t) => t.value == this.bcbz);
         this.curBCBZ = item;
       }
@@ -154,25 +103,25 @@ export default {
       if (this.bcbz && this.bcbz != "") {
         this.curBCBZ = this.bcbzList.find((t) => t.value == this.bcbz);
       }
-      this.changeZDBZ();
+      // this.changeZDBZ();
     },
     /**
      * 选择标准改变
      */
     changeZDBZ() {
-      this.curBCBZ.BCBZ.TDBCF =
-        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS;
-      this.curBCBZ.BCBZ.AZBCF =
-        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS;
-      this.curBCBZ.BCBZ.BCHJ =
-        this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF;
+      // this.curBCBZ.BCBZ.TDBCF =
+      //   this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS;
+      // this.curBCBZ.BCBZ.AZBCF =
+      //   this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS;
+      // this.curBCBZ.BCBZ.BCHJ =
+      //   this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF;
     },
     /**
      * 重置
      */
     reset() {
       // var val = this.bcbz
-      this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.ZDBCList));
+      this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.QMBCList));
       var item = this.bcbzList.find((t) => t.value == this.bcbz);
       debugger;
       this.curBCBZ = {
@@ -182,29 +131,10 @@ export default {
           /**
            * 土地统一年产值
            */
-          TDCZ: item.BCBZ.TDCZ,
-          /**
-           * 土地补偿倍数
-           */
+          NZW: item.BCBZ.NZW,
+          JJZW: item.BCBZ.JJZW,
+          SM: item.BCBZ.SM,
 
-          TDBCBS: item.BCBZ.TDBCBS,
-          /**
-           * 土地补偿费
-           */
-          TDBCF: item.BCBZ.TDBCF,
-          /**
-           * 安置补偿倍数
-           */
-
-          AZBCBS: item.BCBZ.AZBCBS,
-          /**
-           * 安置补偿费
-           */
-          AZBCF: item.BCBZ.AZBCF,
-          /**
-           * 补偿合计
-           */
-          BCHJ: item.BCBZ.BCHJ,
         },
       };
 
@@ -220,9 +150,9 @@ export default {
         return;
       }
       debugger;
-      var index = window.ZSBC.ZDBCList.findIndex((t) => t.value == this.bcbz);
+      var index = window.ZSBC.QMBCList.findIndex((t) => t.value == this.bcbz);
       if (index > -1) {
-        window.ZSBC.ZDBCList[index] = this.curBCBZ;
+        window.ZSBC.QMBCList[index] = this.curBCBZ;
         this.$layer.alert("保存完成");
       }
     },
@@ -254,7 +184,7 @@ export default {
      */
     saveData() {
       debugger;
-      var val = (window.ZSBC.ZDBCList.length + 1).toString();
+      var val = (window.ZSBC.QMBCList.length + 1).toString();
       var newBCBZ = {
         label: this.ruleForm.name,
         value: val,
@@ -262,33 +192,13 @@ export default {
           /**
            * 土地统一年产值
            */
-          TDCZ: this.curBCBZ.BCBZ.TDCZ,
-          /**
-           * 土地补偿倍数
-           */
-
-          TDBCBS: this.curBCBZ.BCBZ.TDBCBS,
-          /**
-           * 土地补偿费
-           */
-          TDBCF: this.curBCBZ.BCBZ.TDBCF,
-          /**
-           * 安置补偿倍数
-           */
-
-          AZBCBS: this.curBCBZ.BCBZ.AZBCBS,
-          /**
-           * 安置补偿费
-           */
-          AZBCF: this.curBCBZ.BCBZ.AZBCF,
-          /**
-           * 补偿合计
-           */
-          BCHJ: this.curBCBZ.BCBZ.BCHJ,
+          NZW: this.curBCBZ.BCBZ.NZW,
+          JJZW: this.curBCBZ.BCBZ.JJZW,
+          SM: this.curBCBZ.BCBZ.SM,
         },
       };
-      window.ZSBC.ZDBCList.push(newBCBZ);
-      this.bcbzList = window.ZSBC.ZDBCList;
+      window.ZSBC.QMBCList.push(newBCBZ);
+      this.bcbzList = window.ZSBC.QMBCList;
       this.bcbz = val;
     },
   },
@@ -304,6 +214,7 @@ export default {
   /* align-items: center; */
   margin-bottom: 0.5rem;
 }
+
 .subtitle {
   color: #02a7f0;
   font-weight: 400;

src/views/ConstructionApplication3D/Demolition/QMShowInfo.vue

@@ -1,103 +1,87 @@
 <template>
+  <!-- @blur="selectBlur($event, index)"  -->
   <div class="ZTGlobal" style="padding: 1rem; width: 100%">
     <el-row :gutter="10">
       <el-col :span="6">青苗补偿标准：</el-col>
       <el-col :span="18">
-        <el-select v-model="bcbz" style="width: 90%">
-          <el-option
-            v-for="item in bcbzList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
+        <el-select v-model="bcbz" style="width: 90%" @change="selectZDBZ()">
+          <el-option v-for="item in bcbzList" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-col>
     </el-row>
 
     <el-row>
       <el-col :span="6">农作物补偿：</el-col>
-      <el-col :span="16"
-        ><el-input
-          style="width: 100%"
-          type="number"
-          placeholder="请输入"
-          readonly
-          v-model="curBCBZ.BCBZ.TDCZ"
-        ></el-input>
+      <el-col :span="16"><el-input style="width: 100%" type="number" placeholder="请输入" readonly
+          v-model="curBCBZ.BCBZ.NZW"></el-input>
       </el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
     <el-row>
       <el-col :span="6">经济作物：</el-col>
       <el-col :span="16">
-        <el-input
-          style="width: 100%"
-          placeholder="请输入"
-          v-model="curBCBZ.BCBZ.TDBCBS"
-        ></el-input
-      ></el-col>
+        <el-input style="width: 100%" placeholder="请输入" v-model="curBCBZ.BCBZ.JJZW"></el-input></el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
     <el-row>
       <el-col :span="6">树木补偿：</el-col>
       <el-col :span="16">
-        <el-input
-          style="width: 100%"
-          placeholder="请输入"
-          v-model="curBCBZ.BCBZ.TDBCBS"
-        ></el-input
-      ></el-col>
+        <el-input style="width: 100%" placeholder="请输入" v-model="curBCBZ.BCBZ.SM"></el-input></el-col>
       <el-col :span="2">元/亩</el-col>
     </el-row>
+    <!-- <el-row justify="center" type="flex">
+      <el-button type="primary" @click="save()">保存</el-button>
+      <el-button type="primary" @click="saveAs()">另存为</el-button>
+      <el-button type="primary" @click="reset()">重置</el-button>
+    </el-row> -->
+    <el-dialog title="标准名称设置" modal="false" :visible.sync="dialogFormVisible" modal-append-to-body>
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 export default {
-  props: ["zdValue"],
-  name: "QMShowInfo",
+  props: ["qmValue"],
+  name: "QMSetInfo",
   data() {
     return {
+      dialogFormVisible: false,
+      ruleForm: {
+        name: null,
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入名称", trigger: "blur" },
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+      },
       /**
        * 补偿标准绑定值
        */
       bcbz: "",
+      // curLabel: '',
       /**
        * 补偿标准列表
        */
-      bcbzList: [],
+      bcbzList: JSON.parse(JSON.stringify(window.ZSBC.QMBCList)),
       /**
        * 当前标准
        */
       curBCBZ: {
-        label: "征地标准01",
-        value: "1",
+        label: "",
+        value: "",
         BCBZ: {
-          /**
-           * 土地统一年产值
-           */
-          TDCZ: 1000,
-          /**
-           * 土地补偿倍数
-           */
-
-          TDBCBS: 10,
-          /**
-           * 土地补偿费
-           */
-          TDBCF: 10000,
-          /**
-           * 安置补偿倍数
-           */
-
-          AZBCBS: 10,
-          /**
-           * 安置补偿费
-           */
-          AZBCF: 10000,
-          /**
-           * 补偿合计
-           */
-          BCHJ: 20000,
+          NZW: 0,
+          JJZW: 0,
+          SM: 0
         },
       },
     };
@@ -105,30 +89,117 @@ export default {
   mounted() {
     this.initForm();
   },
-
-  computed() {
-    FYJS();
-    {
-    }
-  },
   methods: {
     initForm() {
-      // debugger
-      this.bcbzList = window.ZSBC.ZDBCList;
-      this.bcbz = this.zdValue;
-      this.curBCBZ = this.bcbzList.find((t) => t.value == this.bcbz);
+      debugger;
+      if (this.qmValue && this.qmValue != "") {
+        this.bcbz = this.qmValue;
+        var item = this.bcbzList.find((t) => t.value == this.bcbz);
+        this.curBCBZ = item;
+      }
+    },
+    selectZDBZ() {
+      debugger;
+      if (this.bcbz && this.bcbz != "") {
+        this.curBCBZ = this.bcbzList.find((t) => t.value == this.bcbz);
+      }
+      // this.changeZDBZ();
     },
     /**
      * 选择标准改变
      */
     changeZDBZ() {
+      // this.curBCBZ.BCBZ.TDBCF =
+      //   this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS;
+      // this.curBCBZ.BCBZ.AZBCF =
+      //   this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS;
+      // this.curBCBZ.BCBZ.BCHJ =
+      //   this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF;
+    },
+    /**
+     * 重置
+     */
+    reset() {
+      // var val = this.bcbz
+      this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.QMBCList));
+      var item = this.bcbzList.find((t) => t.value == this.bcbz);
       debugger;
-      this.curBCBZ.BCBZ.TDBCF =
-        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS;
-      this.curBCBZ.BCBZ.AZBCF =
-        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS;
-      this.curBCBZ.BCBZ.BCHJ =
-        this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF;
+      this.curBCBZ = {
+        label: item.label,
+        value: item.value,
+        BCBZ: {
+          /**
+           * 土地统一年产值
+           */
+          NZW: item.BCBZ.NZW,
+          JJZW: item.BCBZ.JJZW,
+          SM: item.BCBZ.SM,
+
+        },
+      };
+
+      //     var item = this.bcbzList.find(t => t.value == this.bcbz)
+      // this.bcbz = val;
+    },
+    /**
+     * 保存修改
+     */
+    save() {
+      if (this.bcbz == "") {
+        this.$layer.alert("请选择补偿标准");
+        return;
+      }
+      debugger;
+      var index = window.ZSBC.QMBCList.findIndex((t) => t.value == this.bcbz);
+      if (index > -1) {
+        window.ZSBC.QMBCList[index] = this.curBCBZ;
+        this.$layer.alert("保存完成");
+      }
+    },
+    /***
+     * 另存为
+     */
+    saveAs() {
+      // if (this.bcbz == "") {
+      //     this.$layer.alert("请选择补偿标准");
+      //     return
+      // }
+      this.dialogFormVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('submit!');
+          this.dialogFormVisible = false;
+          this.saveData();
+          // this.$layer.alert("保存完成");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    /**
+     * 另存数据
+     */
+    saveData() {
+      debugger;
+      var val = (window.ZSBC.QMBCList.length + 1).toString();
+      var newBCBZ = {
+        label: this.ruleForm.name,
+        value: val,
+        BCBZ: {
+          /**
+           * 土地统一年产值
+           */
+          NZW: this.curBCBZ.BCBZ.NZW,
+          JJZW: this.curBCBZ.BCBZ.JJZW,
+          SM: this.curBCBZ.BCBZ.SM,
+        },
+      };
+      window.ZSBC.QMBCList.push(newBCBZ);
+      this.bcbzList = window.ZSBC.QMBCList;
+      this.bcbz = val;
     },
   },
 };
@@ -143,8 +214,22 @@ export default {
   /* align-items: center; */
   margin-bottom: 0.5rem;
 }
+
 .subtitle {
   color: #02a7f0;
-  /* font-weight: 400; */
+  font-weight: 400;
 }
+
+/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
+{
+    color: #fff !important;
+    background-color: rgba(4, 28, 50, 0.5) !important;
+    border: 1px solid rgba(15, 122, 200, 0.4) !important;
+    text-align: center;
+
+} */
+/* .el-input
+{
+   text-align: center;
+} */
 </style>

src/views/ConstructionApplication3D/zt.scss

@@ -45,9 +45,6 @@
 .el-tabs__item {
   color: white;
 }
-.el-table__fixed-right::before{
-  background-color:transparent;
-}
 
 .el-collapse-item__header {
   color: #fff;
@@ -65,7 +62,6 @@
   // border-top: 0px solid #ebeef5;
   // border-bottom: 0px solid #ebeef5;
   border: none;
-  
 }
 
 .el-card {
@@ -168,7 +164,10 @@
 }
 
 
-
+.el-table__fixed-right::before{
+  
+   background-color:transparent;
+  }
 
 
 .el-button.is-plain {

static/Config/config.js

@@ -212,7 +212,7 @@ window.constructionmodel = [
 
     url: "http://192.168.60.2:8090/iserver/services/3D-fangan2/rest/realspace",
     dataurl: "http://192.168.60.2:8090/iserver/services/data-fangan2/rest/data",
-    dataSourceName: "DongAnZhuoYueCheng2",
+    dataSourceName: "sanyatieluxiaoqu2",
     datasetName: "建筑轮廓",
     selectionStatus: true,
     designunit: "筑博设计股份有限公司",
@@ -840,141 +840,263 @@ window.layerTree = [
       {
         nvfid: "6-1",
         pnvfid: "6",
-        layer_name: "c12 商服级别",
+        layer_name: "c1_2_商服级别",
         core: "006001",
         server: {
           nvfid: "456sd78",
-          server_name: "c12 商服级别",
+          server_name: "c1_2_商服级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "456sd78",
-          server_name: "c12 商服级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c1_2_商服级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c1_2_商服级别",
         },
       },
       {
         nvfid: "6-2",
         pnvfid: "6",
-        layer_name: "c2 2 住宅级别",
+        layer_name: "c2_2_0_住宅级别",
         core: "006002",
         server: {
           nvfid: "456swd78",
-          server_name: "c2 2 住宅级别",
+          server_name: "c2_2_0_住宅级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c2 2 住宅级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c2_2_0_住宅级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c2_2_0_住宅级别",
         },
       },
       {
         nvfid: "6-3",
         pnvfid: "6",
-        layer_name: "c32T业级别",
+        layer_name: "c3_2_工业级别",
         core: "006003",
         server: {
           nvfid: "456swd78",
-          server_name: "c32T业级别",
+          server_name: "c3_2_工业级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c32T业级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c3_2_工业级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c3_2_工业级别",
         },
       },
       {
         nvfid: "6-4",
         pnvfid: "6",
-        layer_name: "c41公服级别",
+        layer_name: "c4_1_公服级别",
         core: "006004",
         server: {
           nvfid: "456swd78",
-          server_name: "c41公服级别",
+          server_name: "c4_1_公服级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c41公服级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c4_1_公服级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c4_1_公服级别",
         },
       },
       {
         nvfid: "6-5",
         pnvfid: "6",
-        layer_name: "c230T业级别",
+        layer_name: "c2_3_0_工业级别",
         core: "006005",
         server: {
           nvfid: "456swd78",
-          server_name: "c230T业级别",
+          server_name: "c2_3_0_工业级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c230T业级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c2_3_0_工业级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c2_3_0_工业级别",
         },
       },
       {
         nvfid: "6-6",
         pnvfid: "6",
-        layer_name: "c210商服级别",
+        layer_name: "c2_1_0_商服级别",
         core: "006006",
         server: {
           nvfid: "456swd78",
-          server_name: "c210商服级别",
+          server_name: "c2_1_0_商服级别",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c210商服级别",
-          url: "",
-          dataSourceName: "",
-          datasetName: "",
+          server_name: "c2_1_0_商服级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c2_1_0_商服级别",
         },
       },
       {
         nvfid: "6-7",
         pnvfid: "6",
-        layer_name: "c4路线价",
+        layer_name: "c4_路线价",
         core: "006007",
         server: {
           nvfid: "456swd78",
-          server_name: "c4路线价",
+          server_name: "c4_路线价",
           url: "",
           scene: "",
           layer: "",
         },
         date_server: {
           nvfid: "4526wsd78",
-          server_name: "c4路线价",
+          server_name: "c4_路线价",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c4_路线价",
+        },
+      },
+      {
+        nvfid: "6-8",
+        pnvfid: "6",
+        layer_name: "c2_2_住宅级别",
+        core: "006008",
+        server: {
+          nvfid: "456sswd78",
+          server_name: "c2_2_住宅级别",
           url: "",
-          dataSourceName: "",
-          datasetName: "",
+          scene: "",
+          layer: "",
+        },
+        date_server: {
+          nvfid: "4526sawsd78",
+          server_name: "c2_2_住宅级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c2_2_住宅级别",
+        },
+      },
+      {
+        nvfid: "6-9",
+        pnvfid: "6",
+        layer_name: "c2_4_0_公服级别",
+        core: "006009",
+        server: {
+          nvfid: "456sswd78",
+          server_name: "c2_4_0_公服级别",
+          url: "",
+          scene: "",
+          layer: "",
+        },
+        date_server: {
+          nvfid: "4526sawsd78",
+          server_name: "c2_4_0_公服级别",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "c2_4_0_公服级别",
+        },
+      },
+    ],
+  },
+  {
+    nvfid: "7",
+    pnvfid: "0",
+    layer_name: "土地权属",
+    core: "007",
+    server: {
+      nvfid: "45678",
+      server_name: "土地权属",
+      url: "",
+      scene: "",
+      layer: "",
+    },
+    date_server: {
+      nvfid: "456sd78",
+      server_name: "土地权属",
+      url: "",
+      dataSourceName: "",
+      datasetName: "",
+    },
+    children: [
+      {
+        nvfid: "7-1",
+        pnvfid: "7",
+        layer_name: "国有使用权",
+        core: "007001",
+        server: {
+          nvfid: "456sd78",
+          server_name: "国有使用权",
+          url: "",
+          scene: "",
+          layer: "",
+        },
+        date_server: {
+          nvfid: "456sd78",
+          server_name: "国有使用权",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "国有使用权",
+        },
+      },
+      {
+        nvfid: "7-2",
+        pnvfid: "7",
+        layer_name: "集体使用权",
+        core: "007002",
+        server: {
+          nvfid: "456sd78",
+          server_name: "集体使用权",
+          url: "",
+          scene: "",
+          layer: "",
+        },
+        date_server: {
+          nvfid: "456sd78",
+          server_name: "集体使用权",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "集体使用权",
+        },
+      },
+      {
+        nvfid: "7-3",
+        pnvfid: "7",
+        layer_name: "集体所有权",
+        core: "007003",
+        server: {
+          nvfid: "456sd78",
+          server_name: "集体所有权",
+          url: "",
+          scene: "",
+          layer: "",
+        },
+        date_server: {
+          nvfid: "456sd78",
+          server_name: "集体所有权",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
+          dataSourceName: "sanya",
+          datasetName: "集体所有权",
         },
       },
     ],
@@ -1002,12 +1124,12 @@ window.dict = {
     { label: "未通过", value: "未通过" },
   ],
   //基准地价中项目类型
-  zt_jzdj_ProjectType: [
-    { label: "居住建筑", value: "居住建筑" },
-    { label: "公共建筑", value: "公共建筑" },
-    { label: "工业建筑", value: "工业建筑" },
-    { label: "农业建筑", value: "农业建筑" },
-  ],
+  // zt_jzdj_ProjectType: [
+  //   { label: "居住建筑", value: "居住建筑" },
+  //   { label: "公共建筑", value: "公共建筑" },
+  //   { label: "工业建筑", value: "工业建筑" },
+  //   { label: "农业建筑", value: "农业建筑" },
+  // ],
   //基准地价中土地用途
   zt_jzdj_LandUse: [
     { label: "商服用地", value: "商服用地" },
@@ -1321,7 +1443,15 @@ window.billboardModelLT = {
 /**
  * 征收补偿预估标准
  */
+
+/** 征收补偿预估标准
+  */
 window.ZSBC = {
+  /**
+   * 征地补偿数据服务
+   */
+  dataServiceUrl: 'http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data/featureResults.rjson?returnContent=true&hasGeometry=true"',
+
   /**征地补偿标准 */
   ZDBCList: [
     {
@@ -1335,7 +1465,6 @@ window.ZSBC = {
         /**
          * 土地补偿倍数
          */
-
         TDBCBS: 10,
         /**
          * 土地补偿费
@@ -1364,49 +1493,112 @@ window.ZSBC = {
       value: "1",
       BCBZ: [
         {
+
+          ID: 1,
+          JG: "框架结构",
+          GRADE: 1,
+          BZ: 1350,
+          DES: "层高:3.5m，惨板:钢筋砼8cm厚，楼地面:铺地板砖，基础:钢筋砼基础，梁柱:钢筋砼梁柱，墙体:红砖内外墙，水电:普通水电及卫生设备，墙面:内墙一般涂料，外墙有装饰面，窗:铝合金玻璃窗，门:普通镶板门",
+        },
+        {
+          ID: 2,
           JG: "框架结构",
-          items: [
-            {
-              GRADE: "等级一",
-              BZ: 1350,
-            },
-            {
-              GRADE: "等级二",
-              BZ: 1250,
-            },
-          ],
-          DES: "",
+          GRADE: 2,
+          BZ: 1250,
+          DES: "层高:3m，楼板:钢筋砼8cm厚，地面:水泥砂浆批面，梁柱:钢筋砼梁柱，基础:钢筋砼基础，墙体:红砖内外墙，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
         },
         {
+          ID: 3,
           JG: "混合结构",
-          items: [
-            {
-              GRADE: "等级一",
-              BZ: 1100,
-            },
-            {
-              GRADE: "等级二",
-              BZ: 1050,
-            },
-          ],
-          DES: "",
+          GRADE: 1,
+          BZ: 1100,
+          DES: "层高:3.5m，楼板:钢筋砼8cm厚，楼地面:铺地板砖，墙体:红砖内外墙，基础:地梁，片石基础，墙面:内墙一般涂料、外墙有装饰贴面，水电:普通水电及卫生洁具，窗:铝合金玻璃窗门:普通木门",
         },
         {
+          ID: 4,
+          JG: "混合结构",
+          GRADE: 2,
+          BZ: 1050,
+          DES: "层高:3m，楼板:钢筋砼8cm厚，楼地面:水泥砂浆批面，墙体:红砖内外墙，基础:地梁片石基础，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
+        },
+        {
+          ID: 5,
+          JG: "砖木结构",
+          GRADE: 1,
+          BZ: 850,
+          DES: "檐高:2.8m以上，墙体:红砖内外墙，地面:水泥砂浆批面、基础片石基础，屋面:土瓦屋面，梁料:木梁木，门窗:本门窗，墙面:石灰刷白，其他:普通水电设备",
+        },
+        {
+          ID: 6,
           JG: "砖木结构",
-          items: [
-            {
-              GRADE: "等级一",
-              BZ: 850,
-            },
-            {
-              GRADE: "等级二",
-              BZ: 750,
-              DES: "",
-            },
-          ],
-          DES: "",
-        },
-      ],
+          GRADE: 2,
+          BZ: 750,
+          DES: "檐高2.2m-2.8m，墙体:红砖内外墙，地面:水泥砂浆批面，墙面:石灰刷白，基础:片石基础，屋面:土瓦屋面，梁桁:木料木桁，门窗:木门窗",
+        },
+        {
+          ID: 7,
+          JG: "简易结构",
+          GRADE: 1,
+          BZ: 350,
+          DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:铁皮顶或石棉瓦顶",
+        },
+        {
+          ID: 8,
+          JG: "简易结构",
+          GRADE: 2,
+          BZ: 300,
+          DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:油毡顶",
+        },
+        {
+          ID: 9,
+          JG: "简易结构",
+          GRADE: 3,
+          BZ: 280,
+          DES: "层高:2.2m-3m，墙体:空心砖，屋顶:铁皮顶或石棉瓦顶",
+        },
+        {
+          ID: 10,
+          JG: "简易结构",
+          GRADE: 4,
+          BZ: 200,
+          DES: "层高:2.2m-3m，墙体:空心砖，屋顶:油毡顶",
+        },
+        {
+          ID: 11,
+          JG: "简易结构",
+          GRADE: 5,
+          BZ: 80,
+          DES: "层高:2.2m-3m，墙体:木板、铁皮、竹编等材料墙，屋顶油毡顶",
+        },
+        {
+          ID: 12,
+          JG: "凉棚",
+          GRADE: 1,
+          BZ: 120,
+          DES: "铁皮顶或石棉瓦顶、铁柱、铁架",
+        },
+        {
+          ID: 13,
+          JG: "凉棚",
+          GRADE: 2,
+          BZ: 70,
+          DES: "铁皮顶或石棉瓦顶、木柱、木架",
+        },
+        {
+          ID: 14,
+          JG: "凉棚",
+          GRADE: 3,
+          BZ: 20,
+          DES: "油毡顶、竹片顶、木板顶、木柱、木架",
+        },
+        {
+          ID: 15,
+          JG: "凉棚",
+          GRADE: 4,
+          BZ: 10,
+          DES: "茅草、编叶、柳叶等",
+        }
+      ]
     },
   ],
   /**青苗补偿标准 */
@@ -1424,55 +1616,399 @@ window.ZSBC = {
       },
     },
   ],
+  /**
+   * 征地补偿计算
+   */
+  ZDBCJS: {
+
+    /**
+     * 地类图斑
+     */
+    DLTB: {
+      /**
+       * 地图图斑图层名称
+       */
+      layerName: '地类图斑',
+      /**
+       * 地图图斑数据集
+       */
+      layerDataSource: 'sanya:地类图斑', //[数据集:图层名]
+      /**
+       * 地类名称字段
+       */
+      dlmc: { field: 'DLMC', cnName: '地类名称' },
+      /**
+       * 地类编码字段
+       */
+      dlbm: { field: 'DLBM', cnName: '地类编码' },
+      /**
+       * 面积字段
+       */
+      tbmj: { field: 'TBMJ', cnName: '面积' },
+      /**
+       * 树木分类
+       */
+      smfl: { dlbm: "0301,0302,0303,0304", dlmc: "乔木林地,竹林地,灌木林地,其他林地" },
+      /**
+       * 农作物分类
+       */
+      nzwfl: { dlbm: "0101,0102,0103", dlmc: "水田,水浇地，旱地" },
+      /**
+       * 经济作物分类
+       */
+      jjzwfl: { dlbm: '0201,0202,0203,0204', dlmc: '果园,茶园,橡胶园,其他园地' },
+    },
+    /**
+     * 不动产
+     */
+    BDC: {
+      /**
+       *不动产图层
+       */
+      layerName: '不动产',
+      /**
+       * 不动产数据集
+       */
+      layerDataSource: 'sanya:不动产', //[数据集:图层名]
+      /**
+       * 产权人
+       */
+      cqr: { field: 'CQR', cnName: '产权人' },
+      /**
+      * 房屋结构
+      */
+      fwjg: { field: 'FWJG', cnName: '房屋结构', defaultVal: '混合结构' },
+      /**
+  * 房屋等级
+  */
+      fwdj: { field: 'FWDJ', cnName: '房屋等级', defaultVal: 1 },
+      /**
+       * 占地面积
+       */
+      zdmj: { field: 'ZDMJ', cnName: '占地面积' },
+      /**
+       * 层数
+       */
+      floor: { field: 'Floor', cnName: '层数', defaultVal: 1 },
+      /**
+       * 建筑面积
+       */
+      jzmj: { field: 'JZMJ', cnName: '建筑面积' },
+      /**
+       * 房屋地址
+       */
+      address: { field: 'ADDRESS', cnName: '房屋地址' },
+    }
+  }
 };
 
+
 /**
  * 灯光文件地址
  */
 window.NightLightUrl = {
   //道路流动线
-  dlzxx: "static/data/道路中线_1.json",
+  dlzxx: {
+    url: "static/data/道路中线_1.json",
+    lddxWidth: 5, //流动线底线线宽
+    lddxColor: { r: 0 / 255, g: 0 / 255, b: 0 / 255, a: 0.3 }, //流动线底线颜色
+    ldxWidth: 4, //流动线线宽
+    ldxOutlineColor: { r: 255 / 255, g: 255 / 255, b: 255 / 255, a: 0.3 }, //流动线轮廓颜色
+    ldxOutlineWidth: 3, //流动轮廓线宽
+    ldxOutlineColor: { r: 255 / 255, g: 255 / 255, b: 255 / 255, a: 0.3 }, //流动线轮廓颜色
+    ldxColor: { r: 127 / 255, g: 255 / 255, b: 0 / 255, a: 1 }, //流动线线型填充颜色
+    trailLength: 0.3, //流动线在整条线中占比例
+    period: 4, //尾迹线从起点到终点的运行周期
+  },
   //草坪灯光
-  cpdg: "static/data/BPGYLight.json",
+  cpdg: {
+    url: "static/data/BPGYLight.json",
+    cutoffDistance: 90, //扩散距离
+    LightColor: { r: 209 / 255, g: 209 / 255, b: 147 / 255, a: 1 }, //灯光颜色
+    decay: 1, //衰减
+    intensity: 1, //强度
+  },
   //道路灯光
-  dldg: "static/data/道路.json",
+  dldg: {
+    url: "static/data/道路.json",
+    cutoffDistance: 130, //扩散距离
+    LightColor: { r: 209 / 255, g: 209 / 255, b: 147 / 255, a: 0.5 }, //灯光颜色
+    decay: 2, //衰减
+    intensity: 1, //强度
+  },
   //体育场灯光
-  tycdg: "static/data/体育馆.json",
+  tycdg: {
+    url: "static/data/体育馆.json",
+    cutoffDistance: 150, //扩散距离
+    LightColor: { r: 245 / 255, g: 250 / 255, b: 216 / 255, a: 0.51 }, //灯光颜色
+    decay: 2, //衰减
+    intensity: 1, //强度
+  },
   //地标灯光
-  yshdg: "static/data/地标.json",
+  yshdg: {
+    url: "static/data/地标.json",
+    cutoffDistance: 100, //扩散距离
+    LightColor: { r: 18 / 255, g: 80 / 255, b: 193 / 255, a: 1 }, //灯光颜色
+    decay: 2, //衰减
+    intensity: 1, //强度
+  },
   //城市泛光线
-  csfgx: "static/data/fg.json",
+  csfgx: {
+    url: "static/data/fg.json",
+    fgxColor: { r: 255 / 255, g: 128 / 255, b: 0 / 255, a: 0.9 }, //泛光线颜色
+    fgxWidth: 50, //泛光线宽度
+    fgdxColor: { r: 255 / 255, g: 255 / 255, b: 255 / 255, a: 1 }, //泛光底线颜色
+    fgdxWidth: 5, //泛光底线宽度
+  },
 };
 
 /**
  * 基准地价分析列表
  */
 window.BenchmarkLandPriceList = [
+  // {
+  //   id: "wefw",
+  //   ProjectScope: [],
+  //   ProjectName: "基准地价分析1",
+  //   ProjectType: "居住建筑",
+  //   ConstructionUnit: "建设单位名称",
+  //   analysisDate: "2024-06-01 10:11:21",
+  //   AnalysisStatus: "完成",
+  // },
+];
+//基准地价 规划中的用地性质与地价分析中的土地用途对应关系
+window.landUseNatureRelation = [
   {
-    id: "wefw",
-    ProjectScope: [],
-    ProjectName: "基准地价分析1",
-    ProjectType: "居住建筑",
-    ConstructionUnit: "建设单位名称",
-    analysisDate: "2024-06-01 10:11:21",
-    AnalysisStatus: "完成",
+    tdyt: "商服用地",
+    GHDKType: [{ ydxz: "商服用地", ydxzdl: "09" }],
+    layerinfo: [
+      {
+        layerCore: "006006",
+        tdjbField: "级别_终",
+        ydlxTypeField: "",
+        ydlxPriceField: "集体楼面单价_终",
+      },
+      {
+        layerCore: "006001",
+        tdjbField: "土地级别",
+        ydlxTypeField: "",
+        ydlxPriceField: "楼面单价",
+      },
+    ],
+  },
+  {
+    tdyt: "住宅用地",
+    GHDKType: [{ ydxz: "居住用地", ydxzdl: "07" }],
+    layerinfo: [
+      {
+        layerCore: "006002",
+        tdjbField: "级别_终",
+        ydlxTypeField: "",
+        ydlxPriceField: "集体楼面单价_终",
+      },
+      {
+        layerCore: "006008",
+        tdjbField: "土地级别",
+        ydlxTypeField: "",
+        ydlxPriceField: "楼面单价",
+      },
+    ],
   },
   {
-    id: "wesdsdfw",
-    ProjectScope: [],
-    ProjectName: "基准地价分析2",
-    ProjectType: "居住建筑",
-    ConstructionUnit: "建设单位名称",
-    analysisDate: "2024-06-01 10:11:21",
-    AnalysisStatus: "正在分析",
+    tdyt: "工矿仓储用地",
+    GHDKType: [
+      { ydxz: "工矿用地", ydxzdl: "10" },
+      { ydxz: "仓储用地", ydxzdl: "11" },
+    ],
+    layerinfo: [
+      {
+        layerCore: "006003",
+        tdjbField: "土地级别",
+        ydlxTypeField: "",
+        ydlxPriceField: "楼面单价",
+      },
+      {
+        layerCore: "006005",
+        tdjbField: "级别_终",
+        ydlxTypeField: "",
+        ydlxPriceField: "集体楼面单价_终",
+      },
+    ],
   },
   {
-    id: "wessfdsdfw",
-    ProjectScope: [],
-    ProjectName: "基准地价分析3",
-    ProjectType: "居住建筑",
-    ConstructionUnit: "建设单位名称",
-    analysisDate: "2024-06-01 10:11:21",
-    AnalysisStatus: "异常",
+    tdyt: "公共服务项目用地（一）",
+    GHDKType: [],
+    layerinfo: [],
+    children: [
+      {
+        tdyt: "机关团体用地",
+        GHDKType: [{ ydxz: "机关团体用地", ydxzdl: "0801" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "机关团体用地",
+            ydlxPriceField: "机关_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "机关团体用地",
+            ydlxPriceField: "机关_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "科研用地",
+        GHDKType: [{ ydxz: "科研用地", ydxzdl: "0802" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "教育、科研用地",
+            ydlxPriceField: "教育_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "教育、科研用地",
+            ydlxPriceField: "教育_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "文化用地",
+        GHDKType: [{ ydxz: "文化用地", ydxzdl: "0803" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "文化设施、体育用地",
+            ydlxPriceField: "文化_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "文化设施、体育用地",
+            ydlxPriceField: "文化_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "教育用地",
+        GHDKType: [{ ydxz: "教育用地", ydxzdl: "0804" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "教育、科研用地",
+            ydlxPriceField: "教育_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "教育、科研用地",
+            ydlxPriceField: "教育_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "体育用地",
+        GHDKType: [{ ydxz: "体育用地", ydxzdl: "0805" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "文化设施、体育用地",
+            ydlxPriceField: "文化_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "文化设施、体育用地",
+            ydlxPriceField: "文化_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "医疗卫生用地",
+        GHDKType: [{ ydxz: "医疗卫生用地", ydxzdl: "0806" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "医疗卫生、社会福利用地",
+            ydlxPriceField: "医疗_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "医疗卫生、社会福利用地",
+            ydlxPriceField: "医疗_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "社会福利用地",
+        GHDKType: [{ ydxz: "社会福利用地", ydxzdl: "0807" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "医疗卫生、社会福利用地",
+            ydlxPriceField: "医疗_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "医疗卫生、社会福利用地",
+            ydlxPriceField: "医疗_地价",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    tdyt: "公共服务项目用地（二）",
+    GHDKType: [],
+    layerinfo: [],
+    children: [
+      {
+        tdyt: "公共设施用地",
+        GHDKType: [{ ydxz: "公共设施用地", ydxzdl: "13" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "公园与绿地、公用设施用地",
+            ydlxPriceField: "公园_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "公园与绿地、公用设施用地",
+            ydlxPriceField: "公园_地价",
+          },
+        ],
+      },
+      {
+        tdyt: "绿地与开敞空间用地",
+        GHDKType: [{ ydxz: "绿地与开敞空间用地", ydxzdl: "14" }],
+        layerinfo: [
+          {
+            layerCore: "006004",
+            tdjbField: "土地级别",
+            ydlxTypeField: "公园与绿地、公用设施用地",
+            ydlxPriceField: "公园_地价",
+          },
+          {
+            layerCore: "006009",
+            tdjbField: "级别_终",
+            ydlxTypeField: "公园与绿地、公用设施用地",
+            ydlxPriceField: "公园_地价",
+          },
+        ],
+      },
+    ],
   },
 ];

static/css/index.css

@@ -156,13 +156,22 @@ div::-webkit-scrollbar-track {
 
 /* ---------------中图弹窗---------------- */
 .vl-notify.vl-notify-alert h2.vl-notice-title {
-  line-height: 32px !important;
+  color: white;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding: 0vw 1vw 0vw 0vw;
+  position: relative;
+  line-height: auto !important;
   border-bottom: 0px solid #eee !important;
   background-color: #fff0 !important;
-  background: url(/static/images/popup/modal-title.png) no-repeat !important;
   background-size: 100% 100% !important;
+  background: url(/static/images/popup/title.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
 }
 
+
 .vl-notify.vl-notify-iframe {
   /* background-color: #fff0 !important;
   background: url(/static/images/popup/background.png) no-repeat !important;