解决冲突合并代码

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,136 +1,12 @@
 <template>
-  <div class="sm-panel" v-show="LayerManageShow">
-    <div class="sm-panel-header">
-      <span>{{ Resource.LayerManage }}</span>
-      <span class="closeBtn" @click="toggleVisibility">&times;</span>
-    </div>
-    <Tabs value="">
-      <TabPane :label="Resource.Resource" name="zyml">
-        <div class="zyml">
-          <el-input
-            :placeholder="Resource.InputPlaceholder"
-            prefix-icon="el-icon-search"
-            v-model="treeSearchText"
-            size="small"
-          >
-          </el-input>
-          <div class="treeDiv">
-            <el-tree
-              @check="handleCheckChange"
-              class="filter-tree"
-              :data="TreeDatas"
-              show-checkbox
-              :props="defaultProps"
-              :filter-node-method="filterNode"
-              ref="tree"
-            >
-              <span class="custom-tree-node" slot-scope="{ node, data }">
-                <span>{{ node.label }}</span>
-                <span>
-                  <Icon
-                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
-                    color="green"
-                    size="18"
-                    class="opBtn"
-                    :title="
-                      data.favorite ? Resource.DelCollect : Resource.AddCollect
-                    "
-                    @click="favoriteHandle(data)"
-                    v-if="data.url != ''"
-                  />
-                </span>
-              </span>
-            </el-tree>
-          </div>
-        </div>
-      </TabPane>
-      <TabPane :label="Resource.LayerOptions" name="tckz">
-        <div class="tckz">
-          <List split size="large">
-            <ListItem v-for="(item, index) in addlayerdata" :key="index">
-              {{ item.title }}
-              <div class="listBtn">
-                <i-switch
-                  v-model="item.visible"
-                  size="small"
-                  @on-change="visibleChange(item, $event)"
-                >
-                  <template #open>
-                    <span></span>
-                  </template>
-                  <template #close>
-                    <span></span>
-                  </template>
-                </i-switch>
-                <Icon
-                  type="md-arrow-round-up"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.MoveUpOneLevel"
-                  @click="raise(item)"
-                  v-if="
-                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
-                  "
-                />
-                <Icon
-                  type="md-arrow-round-down"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.MoveDownOneLevel"
-                  @click="lower(item)"
-                  v-if="
-                    index < addlayerdata.length - 1 &&
-                    (item.type == 'Vector' || item.type == 'IMG')
-                  "
-                />
-                <Icon
-                  type="md-locate"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.location"
-                  @click="location(item)"
-                />
-              </div>
-              <div class="sliderBtn" v-if="item.type != 'Terrain'">
-                <Slider
-                  v-model="item.trans"
-                  @on-change="transSliderChange(item, $event)"
-                ></Slider>
-              </div>
-            </ListItem>
-          </List>
-        </div>
-      </TabPane>
-      <TabPane :label="Resource.Favorite" name="collect">
-        <div class="collect">
-          <List split>
-            <ListItem
-              v-for="(item, index) in favoriteLayerList"
-              :key="index"
-              class="layerlist"
-            >
-              <Checkbox @on-change="checkboxChange(item, $event)">{{
-                item.title
-              }}</Checkbox>
-              <div class="listBtn">
-                <Icon
-                  type="ios-star"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.DelCollect"
-                  @click="favoriteHandle(item)"
-                />
-              </div>
-            </ListItem>
-          </List>
-        </div>
-      </TabPane>
-    </Tabs>
-  </div>
+  <layer-manage-split
+    @visibleChange="visibleChange"
+    @transSliderChange="transSliderChange"
+    @handleCheckChange="handleCheckChange"
+    @location="location"
+    @raise="raise"
+    @lower="lower"
+  ></layer-manage-split>
 </template>
 
 <script>
@@ -139,66 +15,46 @@ export default {
   name: "LayerManage",
   data() {
     return {
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
       modellayerlist: [],
       vectorlayerlist: [],
       username: "admin",
-      treeSearchText: "",
+      // treeSearchText: "",
       addlayerdata: [],
       sceneLayers: {},
-      favoriteLayerList: [],
+      // favoriteLayerList: [],
       sharedState: store.state,
       //   flag: false,
       //   s3mLen: 0,
-      hid: true,
+      // hid: true,
       layerparams: {},
-      ImgHid: false, //影响图层移动默认不显示
-      S3MLayersObj: {
-        title: Resource.s3mLayer,
-        expand: true,
-        checked: true,
-        type: "S3M",
-        children: [],
-      },
-      imgLayersObj: {
-        title: Resource.imageryLayer,
-        expand: true,
-        checked: true,
-        type: "IMG",
-        children: [],
-      },
-      TerrainLayersObj: {
-        title: Resource.terrainLayer,
-        expand: true,
-        checked: true,
-        type: "TERRAIN",
-        children: [],
-      },
-
-      TreeDatas: [
-        {
-          title: Resource.layerList,
-          expand: true,
-          //   selected: true,
-          //   contextmenu: true,
-          children: [],
-          type: "ROOT",
-        },
-      ],
+      // ImgHid: false, //影响图层移动默认不显示
+      // S3MLayersObj: {
+      //   title: Resource.s3mLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "S3M",
+      //   children: [],
+      // },
+      // imgLayersObj: {
+      //   title: Resource.imageryLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "IMG",
+      //   children: [],
+      // },
+      // TerrainLayersObj: {
+      //   title: Resource.terrainLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "TERRAIN",
+      //   children: [],
+      // },
       contextData: null,
-      hideS3mNames: [],
-      hideImgNames: [],
-      hideTerrainNames: [],
       S3MList:[],
+
     };
   },
   computed: {
-    LayerManageShow: function () {
-      return this.sharedState.toolBar[0];
-    },
     imgLayers: function () {
       return this.sharedState.imgLayerManage;
     },
@@ -218,33 +74,6 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    favoriteHandle(data) {
-      if (data.favorite) {
-        data.favorite = null;
-        for (let i = 0; i < this.favoriteLayerList.length; i++) {
-          if (this.favoriteLayerList[i].id == data.id) {
-            this.favoriteLayerList.splice(i, 1);
-          }
-        }
-      } else {
-        data.favorite = this.username;
-        this.favoriteLayerList.push(data);
-      }
-      Collect(this.username, data.id)
-        .then((res) => {
-          if (res.statuscode == 200) {
-            this.$message({
-              message: "操作成功",
-              type: "success",
-            });
-          } else {
-            this.$message.error(res.message);
-          }
-        })
-        .catch((e) => {
-          this.$message.error(e);
-        });
-    },
     favorite(data) {
       console.log(data);
     },
@@ -360,7 +189,7 @@ export default {
     add3DTiles(obj) {
       let tileset = new Cesium.Cesium3DTileset({
         url: obj.url + "?id=" + obj.id,
-        skipLevelOfDetail: true
+        skipLevelOfDetail: true,
       });
       this.sceneLayers[obj.title] = tileset;
       let thisLayer = viewer.scene.primitives.add(tileset);
@@ -386,7 +215,7 @@ export default {
             this.flyTo(sceneName);
           }
           if (obj.title == "分层分户") {
-            store.setLayerList(layers[0][0])
+            store.setLayerList(layers[0][0]);
             layers[0][0].setQueryParameter({
               url: "https://www.supermapol.com/realspace/services/data-HeBing8HaoLou/rest/data",
               dataSourceName: "Model_8_old",
@@ -565,28 +394,9 @@ export default {
       store.setModelLayerList(this.modellayerlist);
     },
 
-    //获取后台资源目录树结构
-    getResourceTree() {
-      GetResourceTree().then((res) => {
-        if (res.statuscode == 200) {
-          this.TreeDatas = res.data;
-          store.state.tempResourceTree = res.data
-        } else {
-          console.log(e);
-        }
-      });
-    },
+ 
 
-    //获取后台资源目录树结构
-    getFavoriteLayers() {
-      GetMyCollect().then((res) => {
-        if (res.statuscode == 200) {
-          this.favoriteLayerList = res.data;
-        } else {
-          console.log(e);
-        }
-      });
-    },
+ 
 
     //图层定位
     location(obj) {
@@ -687,14 +497,9 @@ export default {
   },
 
   mounted() {
-    this.getResourceTree();
-    this.getFavoriteLayers();
   },
 
   watch: {
-    treeSearchText(val) {
-      this.$refs.tree.filter(val);
-    },
   },
 };
 </script>

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="sm-panel" v-if="LayerManageShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.LayerManage }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
+    <Tabs value="">
+      <TabPane :label="Resource.Resource" name="zyml">
+        <div class="zyml">
+          <el-input
+            :placeholder="Resource.InputPlaceholder"
+            prefix-icon="el-icon-search"
+            v-model="treeSearchText"
+            size="small"
+          >
+          </el-input>
+          <div class="treeDiv">
+            <el-tree
+              @check="handleCheckChange"
+              class="filter-tree"
+              :data="TreeDatas"
+              show-checkbox
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              ref="tree"
+            >
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <span>{{ node.label }}</span>
+                <span>
+                  <Icon
+                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
+                    color="green"
+                    size="18"
+                    class="opBtn"
+                    :title="
+                      data.favorite ? Resource.DelCollect : Resource.AddCollect
+                    "
+                    @click="favoriteHandle(data)"
+                    v-if="data.url != ''"
+                  />
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane
+        :label="Resource.LayerOptions"
+        name="tckz"
+        v-if="!$props.splitId"
+      >
+        <div class="tckz">
+          <List split size="large">
+            <ListItem v-for="(item, index) in addlayerdata" :key="index">
+              {{ item.title }}
+              <div class="listBtn">
+                <i-switch
+                  v-model="item.visible"
+                  size="small"
+                  @on-change="visibleChange(item, $event)"
+                >
+                  <template #open>
+                    <span></span>
+                  </template>
+                  <template #close>
+                    <span></span>
+                  </template>
+                </i-switch>
+                <Icon
+                  type="md-arrow-round-up"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.MoveUpOneLevel"
+                  @click="raise(item)"
+                  v-if="
+                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                />
+                <Icon
+                  type="md-arrow-round-down"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.MoveDownOneLevel"
+                  @click="lower(item)"
+                  v-if="
+                    index < addlayerdata.length - 1 &&
+                    (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                />
+                <Icon
+                  type="md-locate"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.location"
+                  @click="location(item)"
+                />
+              </div>
+              <div class="sliderBtn" v-if="item.type != 'Terrain'">
+                <Slider
+                  v-model="item.trans"
+                  @on-change="transSliderChange(item, $event)"
+                ></Slider>
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
+      <TabPane :label="Resource.Favorite" name="collect">
+        <div class="collect">
+          <List split>
+            <ListItem
+              v-for="(item, index) in favoriteLayerList"
+              :key="index"
+              class="layerlist"
+            >
+              <Checkbox @on-change="checkboxChange(item, $event)">{{
+                item.title
+              }}</Checkbox>
+              <div class="listBtn">
+                <Icon
+                  type="ios-star"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.DelCollect"
+                  @click="favoriteHandle(item)"
+                />
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<script>
+import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
+export default {
+  name: "LayerManageSplit",
+  props: {
+    splitId: {
+      type: Number,
+      default: false,
+    },
+    isshow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      treeSearchText: "",
+      addlayerdata: [],
+      favoriteLayerList: [],
+      sharedState: store.state,
+      TreeDatas: [
+        {
+          title: Resource.layerList,
+          expand: true,
+          //   selected: true,
+          //   contextmenu: true,
+          children: [],
+          type: "ROOT",
+        },
+      ],
+    };
+  },
+  computed: {
+    LayerManageShow: function () {
+      return this.$props.splitId
+        ? this.$props.isshow
+        : this.sharedState.toolBar[0];
+    },
+  },
+
+  methods: {
+    toggleVisibility() {
+      this.$props.splitId ? this.$emit("close") : store.setToolBarAction(0);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    favoriteHandle(data) {
+      // this.$emit("favoriteHandle", data);
+      if (data.favorite) {
+        data.favorite = null;
+        for (let i = 0; i < this.favoriteLayerList.length; i++) {
+          if (this.favoriteLayerList[i].id == data.id) {
+            this.favoriteLayerList.splice(i, 1);
+          }
+        }
+      } else {
+        data.favorite = this.username;
+        this.favoriteLayerList.push(data);
+      }
+      Collect(this.username, data.id).then((res) => {
+        if (res.statuscode == 200) {
+          this.$message({
+            message: "操作成功",
+            type: "success",
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    favorite(data) {
+      console.log(data);
+    },
+    checkboxChange(obj, checked, a) {
+      obj.checked = checked;
+      this.handleCheckChange(obj, checked);
+    },
+    visibleChange(obj, visible, a) {
+      this.$emit("visibleChange", obj, visible, a);
+    },
+    transSliderChange(obj, v, a) {
+      this.$emit("transSliderChange", obj, v, a);
+    },
+    // 复选框改变
+    handleCheckChange(obj, checked) {
+      this.$emit("handleCheckChange", obj, checked);
+    },
+
+    //获取后台资源目录树结构
+    getResourceTree() {
+      GetResourceTree().then((res) => {
+        if (res.statuscode == 200) {
+          this.TreeDatas = res.data;
+          store.state.tempResourceTree = res.data;
+        } else {
+          console.log(e);
+        }
+      });
+    },
+
+    //获取后台资源目录树结构
+    getFavoriteLayers() {
+      GetMyCollect().then((res) => {
+        if (res.statuscode == 200) {
+          this.favoriteLayerList = res.data;
+        } else {
+          console.log(e);
+        }
+      });
+    },
+    //图层定位
+    location(obj) {
+      this.$emit("location", obj);
+    },
+    //影像图层操作
+    raise(obj) {
+      this.$emit("raise", obj);
+    },
+    lower(obj) {
+      this.$emit("lower", obj);
+    },
+  },
+
+  mounted() {
+    this.getResourceTree();
+    this.getFavoriteLayers();
+  },
+
+  watch: {
+    treeSearchText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./LayerManage.scss";
+</style>

src/components/Viewer/smViewer.vue

@@ -7,6 +7,7 @@
     <compass></compass>
     <china-epidemic-map></china-epidemic-map>
     <world-epidemic-map></world-epidemic-map> -->
+    <split-screen></split-screen>
   </div>
 </template>
 

src/components/index.js

@@ -32,6 +32,7 @@ import sceneCamera from "./sceneAtttribute/camera/index";
 import sceneLight from "./sceneAtttribute/light/index";
 import ParticleSystem from "./sceneAtttribute/ParticleSystem/index";
 import otherOptions from "./sceneAtttribute/otherOptions/index";
+import splitScreen from "./sceneAtttribute/splitScreen/index";
 
 // 裁剪部分组件
 import ClipBox from "./Clip/ClipBox/index.js";
@@ -80,6 +81,7 @@ import WorldEpidemicMap from "./hotSpot/WorldEpidemicMap/index";
 
 //组合组件
 import LayerManage from "./Combinations/LayerManage/index"
+import LayerManageSplit from "./Combinations/LayerManage/LayerManageSplit.vue"
 import addLayers from "./Combinations/addLayersCombination/index";
 import addBaseLayer from "./Combinations/addBaseLayer/index";
 import TerrainAnalysis from "./Combinations/terrainCombination/index";
@@ -138,6 +140,8 @@ const components = [
     // serviceAreaAnalysis,
     // 组合
     LayerManage,
+    LayerManageSplit,
+    splitScreen,
     addLayers,
     TerrainAnalysis,
     ClipAnalysis,

src/components/sceneAtttribute/splitScreen/index.js

@@ -0,0 +1,2 @@
+import splitScreen from './splitScreen.vue';
+export default splitScreen;

src/components/sceneAtttribute/splitScreen/splitScreen.vue

@@ -0,0 +1,85 @@
+
+<template>
+  <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
+    <div
+      v-for="i in value"
+      :key="i"
+      class="splitScreen"
+      :class="{
+        w50:
+          type == 'HORIZONTAL' ||
+          type == 'QUAD' ||
+          (type == 'TRIPLE' && i != 3),
+        h50: type == 'VERTICAL' || type == 'QUAD' || type == 'TRIPLE',
+      }"
+    >
+      <li
+        class="sm-btn sm-tool-btn"
+        title="资源目录"
+        @click="$set(layers, i, !layers[i])"
+      >
+        <span class="iconfont icontuceng"></span>
+      </li>
+      <layer-manage-split
+        :splitId="i"
+        :isshow="layers[i]"
+        @close="$set(layers, i, false)"
+        @handleCheckChange="handleCheckChange"
+      ></layer-manage-split>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "splitScreen",
+  data() {
+    return {
+      layers: [],
+    };
+  },
+  computed: {
+    type() {
+      return store.state.splitType;
+    },
+    value() {
+      switch (store.state.splitType) {
+        case "HORIZONTAL":
+        case "VERTICAL":
+          return 2;
+        case "TRIPLE":
+          return 3;
+        case "QUAD":
+          return 4;
+        default:
+          break;
+      }
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.splitScreen {
+  float: left;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .sm-btn {
+    position: absolute;
+    top: 20px;
+    background-color: transparent;
+    // font-size: 30px;
+    z-index: 100;
+  }
+}
+
+.w50 {
+  width: 50%;
+}
+.h50 {
+  height: 50%;
+}
+</style>
+

src/main.js

@@ -29,6 +29,7 @@ import store2 from "@/store/store.js" // 局部变量状态管理
 window.store = store2;
 
 import store from './store'
+import './utils/rem'
 
 // 工具配置
 import Resource from "./common/js/language" //语言选择

src/router/index.js

@@ -52,6 +52,12 @@ export const constantRoutes = [{
         component: () =>
             import('@/views/viewer.vue'),
         hidden: true
+    }
+    , {
+        path: '/overview1',
+        component: () =>
+            import('@/views/viewer1.vue'),
+        hidden: true
     }, {
         path: '/checkmodel',
         component: () =>

src/store/store.js

@@ -31,7 +31,10 @@ var store2 = {
         modellayerlist: [],
         chooseLayer: [],
         flattenNames:[],//存储压平的名称数组
-        S3MList:[]
+        S3MList:[],
+        splitType: 'NONE',//分屏类型
+        sceneLayerlist: [],
+        flattenNames: [],//存储压平的名称数组
     },
     setisInitViewer(newValue) {
         this.state.isInitViewer = newValue;
@@ -43,6 +46,9 @@ var store2 = {
     setVectorLayerList(newValue) {
         this.state.vectorlayerlist = newValue;
     },
+    setSceneLayersList(newValue) {
+        this.state.sceneLayerlist = newValue;
+    },
     setLayerList(newValue) {//分层分户
         this.state.chooseLayer = newValue;
     },
@@ -95,6 +101,9 @@ var store2 = {
     setSceneAtttribute(newValue) {
         this.state.sceneAtttribute = newValue;
     },
+    setsplitType(newValue) {
+        this.state.splitType = newValue;
+    },
     setClipAction(newValue) {
         this.state.clip = newValue;
     },

src/utils/rem.js

@@ -0,0 +1,17 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16;
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = document.documentElement.clientWidth / 1920;
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize =
+    baseSize * Math.min(scale, 2) + "px";
+}
+// 初始化
+setRem();
+// 改变浏览器窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem();
+};

src/views/cockpitNew1/gdbh.vue

@@ -0,0 +1,411 @@
+<template>
+    <div class="gdbh">
+        <div class="box_gdbh">
+            <div class="title">耕地保护</div>
+            <div class="centent">
+                <div class="item">
+                    <p class="text">
+                        <span>·</span>
+                        地保有量
+                        <span>354.56</span>
+                        KM2
+                    </p>
+                    <p>
+                        <span>·</span>
+                        永久基本农田
+                        <span>354.56</span>
+                        KM2
+                    </p>
+                </div>
+                <div class="item">
+                    <p class="text">
+                        <span>·</span>
+                        地保有量
+                        <span>354.56</span>
+                        KM2
+                    </p>
+                    <p>
+                        <span>·</span>
+                        永久基本农田
+                        <span>354.56</span>
+                        KM2
+                    </p>
+                </div>
+            </div>
+            <div id="gdbh_echart">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    methods: {
+        getRenKou() {
+            var dom = document.getElementById('gdbh_echart');
+            var myChart = window.echarts.init(dom);
+
+            let data = [
+                { name: '水田', value: 30 },
+                { name: '水浇地', value: 40 },
+                { name: '旱地', value: 50 },
+                // { name: '住宿', value: 24 },
+            ]
+            for (var i = 0; i < data.length; i++) {
+                for (var j = i + 1; j < data.length; j++) {
+                    //如果第一个比第二个大，就交换他们两个位置
+                    if (data[i].value < data[j].value) {
+                        var temp = data[i];
+                        data[i] = data[j];
+                        data[j] = temp;
+                    }
+                }
+            }
+            let pm = []
+            for (var i = 0; i < data.length; i++) {
+                let k = i + 1
+                pm.push('NO.' + k)
+            }
+            data.forEach(function (value, index, obj) {
+                value.pm = pm[index]
+            })
+            // console.log('ssss', data)
+            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
+            const chartData = data.map((item, index) => ({
+                value: item.value,
+                name: item.name,
+                pm: item.pm,
+                itemStyle: {
+                    shadowBlur: 20,
+                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
+                    shadowOffsetx: 25,
+                    shadowOffsety: 20,
+                    color: colors[index % colors.length],
+                },
+            }))
+            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
+            const gap = (1 * sum) / 100
+            const pieData1 = []
+            const gapData = {
+                name: '',
+                value: gap,
+                itemStyle: {
+                    color: 'transparent',
+                },
+            }
+            let totalRatio = []
+            // let totalPercent = 0
+            for (let i = 0; i < chartData.length; i++) {
+                // 计算占比
+                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
+                // 累加占比到总占比中
+                // totalRatio.push(ratio*100)
+                let ratio = (chartData[i].value / sum) * 100
+                let percent = Math.round(ratio)
+                totalRatio.push(percent)
+                // totalPercent += percent
+                // 第一圈数据
+                pieData1.push({
+                    ...chartData[i],
+                })
+                pieData1.push(gapData)
+            }
+            // 补充最后一项占比百分比保证之和为100%
+            // totalRatio[0].value += 100 - totalPercent
+            let option = {
+                backgroundColor: 'rgba(1,1,1,0)',
+
+                title: {
+                    show: true,
+                    // text: sum
+                    text: '耕地来源',
+                    x: '49%',
+                    y: '32%',
+                    itemGap: 6,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 11,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    subtextStyle: {
+                        color: '#fff',
+                        fontSize: 8,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    textAlign: 'center',
+                },
+
+                // 图例
+                legend: {
+                    show: true,
+                    orient: 'horizontal',
+                    icon: 'rect',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 10,
+                    },
+                    top: '70%',
+                    // left: '20%',
+                    itemGap: 14,
+                    itemHeight: 14,
+                    itemWidth: 14,
+                    data: chartData,
+                    formatter: function (name) {
+                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
+                        // if (selectedItem) {
+                        //     const { value } = selectedItem;
+                        //     const { pm } = selectedItem;
+                        //     console.log('dddd', selectedItem)
+                        //     const p = ((value / sum) * 100).toFixed(2);
+                        //     const area = `${value}m²`;
+                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
+
+                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
+                        // } else {
+                        //     console.log(name);
+
+                        //     return name;
+                        // }
+
+                        if (selectedItem) {
+                            return name;
+
+                        }
+                    },
+                },
+                series: [
+                    // 中间圆环
+                    {
+                        name: '',
+                        type: 'pie',
+                        roundCap: true,
+                        radius: ['36%', '52%'],
+                        center: ['50%', '35%'],
+                        data: pieData1,
+                        labelLine: {
+                            length: 8,
+                            length2: 16,
+                            lineStyle: {
+                                width: 1,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            fontFamily: 'ysbth',
+                            position: 'outside',
+                            padding: [0, -4, 0, -4],
+                            formatter(params) {
+                                if (params.name === '') {
+                                    return ''
+                                }
+                                return `${params.percent.toFixed(0)}% `
+                            },
+                            color: '#fff',
+                            fontSize: '14px',
+                            lineHeight: 10,
+                        },
+                        emphasis: {
+                            // 鼠标移入时显示
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                    // 最里面圆环
+                    {
+                        type: 'pie',
+                        radius: ['28%', '30%'],
+                        center: ['50%', '35%'],
+                        animation: false,
+                        hoverAnimation: false,
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                        label: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            color: '#3BC5EF',
+                        },
+                    },
+                    // 最里面圆环内的背景圆
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: '28%',
+                        animation: false,
+                        hoverAnimation: false,
+                        center: ['50%', '35%'],
+                        itemStyle: {
+                            labelLine: {
+                                show: false,
+                            },
+                            color: {
+                                type: 'radial',
+                                x: 0.5,
+                                y: 0.5,
+                                r: 1,
+                                colorStops: [
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(50,171,241, 0)',
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(50,171,241, .4)',
+                                    },
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(55,70,130, 0)',
+                                    },
+                                ],
+                                global: false, // 缺省为 false
+                            },
+                            shadowBlur: 60,
+                        },
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                    },
+                    // 最外面的圆环
+                    {
+                        type: 'pie',
+                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
+                        radius: ['53%', '54%'],
+                        center: ['50%', '35%'],
+                        label: {
+                            show: false,
+                        },
+                        select: {
+                            display: false,
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                        data: totalRatio,
+                    },
+                ],
+            }
+
+            myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.getRenKou();
+    },
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style lang="scss" scoped>
+.gdbh {
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 20px;
+    display: -ms-flexbox;
+    display: flex;
+
+    .box_gdbh {
+        font-family: 'Arial Normal', 'Arial';
+        font-weight: 400;
+        font-style: normal;
+        font-size: 13px;
+        letter-spacing: normal;
+        color: #333333;
+        text-align: center;
+        line-height: normal;
+        text-transform: none;
+        border-width: 0px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 535px;
+        height: 260px;
+        background: inherit;
+        background-color: rgba(3, 25, 67, 0.698039215686274);
+        border: none;
+        border-radius: 0px;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+
+        .title {
+            border-width: 0px;
+            width: 100%;
+            height: 40px;
+            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+            font-weight: 700;
+            font-style: normal;
+            color: #00FFFF;
+            padding: 2%;
+            text-align: justify;
+        }
+
+        #gdbh_echart {
+            width: 280px;
+            height: 230px;
+
+            position: relative;
+            left: 54%;
+            top: -75%;
+        }
+
+        .centent {
+            // border: #00FFFF 1px solid;
+            width: 280px;
+            height: 185px;
+            position: relative;
+            left: 6%;
+
+            .item {
+                // border: #00FFFF 1px solid;
+                height: 40%;
+                margin-bottom: 10%;
+                background-color: #283f6d;
+                text-align: left;
+                padding-left: 7%;
+                padding-top: 4%;
+
+                p {
+                    font-size: 14px;
+                    color: #fff;
+                    margin-bottom: 4%;
+                }
+
+                span {
+                    color: #00FFFF;
+                    font-weight: 1000;
+
+                }
+            }
+        }
+    }
+}
+</style>

src/views/cockpitNew1/hysy.vue

@@ -0,0 +1,280 @@
+<template>
+    <div class="hysy">
+        <div class="box">
+            <div class="title"> 海域使用权出让</div>
+
+            <div id="hysyEchart">
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() {
+    }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    methods: {
+        getRenKou() {
+            var dom = document.getElementById('hysyEchart');
+
+            var myChart = window.echarts.init(dom);
+
+            let option = {
+                grid: {
+                    top: "65px",
+                    bottom: "50px",
+                    left: "45px",
+                    right: "20px",
+                },
+                title: {  //配置标题组件
+                    text: "",  //设置主标题
+                    textStyle: {  //设置主标题文字样式
+                        color: 'green',
+                    },
+                    left: 20,  //设置适当调整工具框的left位置
+                    top: 3  //设置适当调整工具框的top位置
+                },
+                tooltip: {  //配置提示框组件
+                    trigger: 'axis',     //当鼠标滑过轴线时触发显示于详情
+                    axisPointer: {
+                        type: 'cross',//line(直线) || shadow(阴影) || cross(十字准星) || none
+                        label: {
+                            show: true // 鼠标移入X轴文字效果 true || false
+                        }
+                    }
+                },
+                legend: {  //配置图例组件
+                    data: ['渔业用海', '工业用海', '造地工程', '旅游娱乐', '交通运输'],
+                    left: 100,  //设置适当调整工具框的left位置
+                    bottom: "200px",  //设置适当调整工具框的top位置
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#fff',
+                        padding: [5, 0, 0, 2],
+                        rich: {
+                            a: {
+                                verticalAlign: 'middle',
+                            },
+                        },
+                    },
+                    icon: 'rect',
+                    itemHeight: 14,
+                    itemWidth: 14,
+                },
+                xAxis: [  //配置X轴坐标系
+                    {
+                        //type: 'category',
+                        boundaryGap: false,
+                        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+                        axisLabel: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                    }
+                ],
+                yAxis: [  //配置Y轴坐标系
+                    {
+                        name: "面积/公顷",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: 12,
+                            padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+                        },
+                        axisLabel: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                        type: "value",
+                    }
+                ],
+                series: [  //配置数据系列。注意：将所有areaStyle去掉，则变成堆积折线图
+                    {
+                        name: '渔业用海',
+                        type: 'line',   //设置指定显示为折线
+                        stack: '总量',  //smooth:true,
+                        color: 'rgb(0,0,0)',
+                        symbol: "none",
+                        lineStyle: {
+                            normal: {
+                                color: "rgba(65, 139, 212, 1)" // 线条颜色
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                areaStyle: {
+                                    //type: 'default',
+                                    color: 'rgba(65, 139, 212, 1)'
+                                }
+                            }
+                        },
+                        data: [434, 345, 456, 222, 333, 444, 432]
+                    },
+                    {
+                        name: '工业用海',
+                        type: 'line',   //设置指定显示为折线
+                        stack: '总量',  //设置堆积
+                        color: 'blue',
+                        symbol: "none",
+                        lineStyle: {
+                            normal: {
+                                color: "rgba(255, 176, 57, 1)" // 线条颜色
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                areaStyle: {
+                                    //type: 'default',
+                                    color: 'rgba(255, 176, 57, 1)'
+                                }
+                            }
+                        },
+                        data: [420, 282, 391, 344, 390, 530, 410]
+                    },
+                    {
+                        name: '造地工程',
+                        type: 'line',   //设置指定显示为折线
+                        stack: '总量',  //设置堆积
+                        color: 'red',
+                        symbol: "none",
+                        lineStyle: {
+                            normal: {
+                                color: "rgba(92, 185, 129, 1)" // 线条颜色
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                areaStyle: {
+                                    //type: 'default',
+                                    color: 'rgba(92, 185, 129, 1)'
+                                }
+                            }
+                        },
+                        data: [350, 332, 331, 334, 390, 320, 340]
+                    },
+                    {
+                        name: '旅游娱乐',
+                        type: 'line',   //设置指定显示为折线
+                        stack: '总量',  //设置堆积
+                        color: 'green',
+
+                        symbol: "none",
+                        lineStyle: {
+                            normal: {
+                                color: "rgba(255, 98, 96, 1)" // 线条颜色
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                areaStyle: {
+                                    //type: 'default',
+                                    color: 'rgba(255, 98, 96, 1)'
+                                }
+                            }
+                        },
+                        data: [420, 222, 333, 442, 230, 430, 430]
+                    },
+                    {
+                        name: '交通运输',
+                        type: 'line',   //设置指定显示为折线
+                        stack: '总量',  //设置堆积
+                        color: '#FA8072',
+
+                        symbol: "none",
+                        lineStyle: {
+                            normal: {
+                                color: "rgba(137, 81, 157, 1))" // 线条颜色
+                            }
+                        },
+                        itemStyle: {//设置item的样式
+                            normal: {//常规状态
+                                areaStyle: {    //区域样式，仅在折线图中有效
+                                    //type: 'default',
+                                    color: 'rgba(137, 81, 157, 1)'
+                                }
+                            }
+                        },
+                        data: [330, 442, 432, 555, 456, 666, 877, 634, 534, 55, 111]
+                    }
+                ]
+            };
+            myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.getRenKou();
+    },
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+
+
+
+<style lang="scss"  scoped>
+.hysy {
+    border-width: 0px;
+    position: absolute;
+    left: 9px;
+    top: 68%;
+    /* width: 534px;
+    height: 316px; */
+    display: flex;
+}
+
+.box {
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 534px;
+    height: 260px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+
+.title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #00FFFF;
+    padding: 2%;
+}
+
+
+
+
+#hysyEchart {
+    left: 1rem;
+    top: 1rem;
+    width: 32rem;
+    height: 14rem;
+}
+</style>

src/views/cockpitNew1/jsyd.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="jsyd">
+    <div class="title">建设用地规划指标</div>
+    <div class="content">
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>在变控规</p>
+          <span>64</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已入库控规</p>
+          <span>45</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>建设用地总指标</p>
+          <span>39</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>新增建设用地</p>
+          <span>123</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已使用指标</p>
+          <span>299</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>剩余指标
+
+          </p>
+          <span>66</span>公顷
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  mounted() { }, //生命周期 - 挂在完成
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { },//生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  lang="scss"  scoped>
+.jsyd {
+  border-width: 0px;
+  position: relative;
+  left: 9px;
+  top: 20px;
+  width: 535px;
+  height: 260px;
+  background: inherit;
+  background-color: rgba(3, 25, 67, 0.698039215686274);
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #00FFFF;
+  padding: 2%;
+}
+
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 5%;
+  width: 400px;
+  height: 190px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  background-color: rgba(104, 244, 251, 0.215686);
+  display: inline-block;
+  height: 50px
+}
+
+.icon2 {
+  background: no-repeat 50%;
+  background-image: url("/static/images/cockpitNew/u296.svg");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 100px;
+
+  p {
+    font-kerning: normal;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  span {
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #68F4FB;
+  }
+}
+
+.value {
+  display: inline-block;
+
+  // border: #00FFFF 1px solid;
+  width: 50px;
+
+}
+</style>

src/views/cockpitNew1/stxf.vue

@@ -0,0 +1,374 @@
+<template>
+    <div class="stxf">
+        <div class="box">
+            <div class="title">生态修复</div>
+            <div class="item">
+                <p class="text">
+                    <span>·</span>
+
+                    综合整治项目
+                    <span>66</span>
+                    个
+                </p>
+                <p class="text">
+                    <span>·</span>
+                    土地整治面积
+                    <span>354.56</span>
+                    KM2
+                </p>
+            </div>
+            <div id="stxf_echart">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    methods: {
+        getRenKou() {
+            var dom = document.getElementById('stxf_echart');
+            var myChart = window.echarts.init(dom);
+
+            let data = [
+                { name: '农用地整理项目', value: 30 },
+                { name: '建设用地整理项目', value: 40 },
+                { name: '生态修复项目', value: 50 },
+                // { name: '住宿', value: 24 },
+            ]
+            for (var i = 0; i < data.length; i++) {
+                for (var j = i + 1; j < data.length; j++) {
+                    //如果第一个比第二个大，就交换他们两个位置
+                    if (data[i].value < data[j].value) {
+                        var temp = data[i];
+                        data[i] = data[j];
+                        data[j] = temp;
+                    }
+                }
+            }
+            let pm = []
+            for (var i = 0; i < data.length; i++) {
+                let k = i + 1
+                pm.push('NO.' + k)
+            }
+            data.forEach(function (value, index, obj) {
+                value.pm = pm[index]
+            })
+            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
+            const chartData = data.map((item, index) => ({
+                value: item.value,
+                name: item.name,
+                pm: item.pm,
+                itemStyle: {
+                    shadowBlur: 20,
+                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
+                    shadowOffsetx: 25,
+                    shadowOffsety: 20,
+                    color: colors[index % colors.length],
+                },
+            }))
+            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
+            const gap = (1 * sum) / 100
+            const pieData1 = []
+            const gapData = {
+                name: '',
+                value: gap,
+                itemStyle: {
+                    color: 'transparent',
+                },
+            }
+            let totalRatio = []
+            // let totalPercent = 0
+            for (let i = 0; i < chartData.length; i++) {
+                // 计算占比
+                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
+                // 累加占比到总占比中
+                // totalRatio.push(ratio*100)
+                let ratio = (chartData[i].value / sum) * 100
+                let percent = Math.round(ratio)
+                totalRatio.push(percent)
+                // totalPercent += percent
+                // 第一圈数据
+                pieData1.push({
+                    ...chartData[i],
+                })
+                pieData1.push(gapData)
+            }
+            // 补充最后一项占比百分比保证之和为100%
+            // totalRatio[0].value += 100 - totalPercent
+            let option = {
+                backgroundColor: 'rgba(1,1,1,0)',
+                title: {
+                    show: true,
+                    // text: sum
+                    text: '项目类型',
+                    x: '49%',
+                    y: '32%',
+                    itemGap: 6,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 11,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    subtextStyle: {
+                        color: '#fff',
+                        fontSize: 8,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    textAlign: 'center',
+                },
+
+                // 图例
+                legend: {
+                    show: true,
+                    orient: 'vertical',
+                    icon: 'rect',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 10,
+                    },
+                    top: '15%',
+                    left: '63%',
+                    itemGap: 14,
+                    itemHeight: 14,
+                    itemWidth: 14,
+                    data: chartData,
+                    formatter: function (name) {
+                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
+                        // if (selectedItem) {
+                        //     const { value } = selectedItem;
+                        //     const { pm } = selectedItem;
+                        //     const p = ((value / sum) * 100).toFixed(2);
+                        //     const area = `${value}m²`;
+                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
+
+                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
+                        // } else {
+
+                        //     return name;
+                        // }
+
+                        if (selectedItem) {
+                            return name + selectedItem.value + "个";
+
+                        }
+                    },
+                },
+                series: [
+                    // 中间圆环
+                    {
+                        name: '',
+                        type: 'pie',
+                        roundCap: true,
+                        radius: ['36%', '52%'],
+                        center: ['50%', '35%'],
+                        data: pieData1,
+                        labelLine: {
+                            length: 8,
+                            length2: 16,
+                            lineStyle: {
+                                width: 1,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            fontFamily: 'ysbth',
+                            position: 'outside',
+                            padding: [0, -4, 0, -4],
+                            formatter(params) {
+                                if (params.name === '') {
+                                    return ''
+                                }
+                                return `${params.percent.toFixed(0)}% `
+                            },
+                            color: '#fff',
+                            fontSize: '14px',
+                            lineHeight: 10,
+                        },
+                        emphasis: {
+                            // 鼠标移入时显示
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                    // 最里面圆环
+                    {
+                        type: 'pie',
+                        radius: ['28%', '30%'],
+                        center: ['50%', '35%'],
+                        animation: false,
+                        hoverAnimation: false,
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                        label: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            color: '#3BC5EF',
+                        },
+                    },
+                    // 最里面圆环内的背景圆
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: '28%',
+                        animation: false,
+                        hoverAnimation: false,
+                        center: ['50%', '35%'],
+                        itemStyle: {
+                            labelLine: {
+                                show: false,
+                            },
+                            color: {
+                                type: 'radial',
+                                x: 0.5,
+                                y: 0.5,
+                                r: 1,
+                                colorStops: [
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(50,171,241, 0)',
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(50,171,241, .4)',
+                                    },
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(55,70,130, 0)',
+                                    },
+                                ],
+                                global: false, // 缺省为 false
+                            },
+                            shadowBlur: 60,
+                        },
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                    },
+                    // 最外面的圆环
+                    {
+                        type: 'pie',
+                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
+                        radius: ['53%', '54%'],
+                        center: ['50%', '35%'],
+                        label: {
+                            show: false,
+                        },
+                        select: {
+                            display: false,
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                        data: totalRatio,
+                    },
+                ],
+            }
+
+            myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.getRenKou();
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 D移除时调用。
+};
+</script>
+<style lang="scss" scoped>
+.stxf {
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 35%;
+    display: flex;
+}
+
+.title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #00FFFF;
+    padding: 2%;
+    text-align: justify;
+}
+
+.box {
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    letter-spacing: normal;
+    color: #333333;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 535px;
+    height: 260px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+}
+
+#stxf_echart {
+    width: 580px;
+    height: 230px;
+    position: relative;
+    left: -28%;
+    top: 7%;
+}
+
+.item {
+
+    p {
+        font-size: 14px;
+        color: #fff;
+        display: inline-block;
+        margin-top: 3%;
+        margin-right: 3%;
+    }
+
+    span {
+        color: #00FFFF;
+        font-weight: 1000;
+
+    }
+}
+</style>

src/views/cockpitNew1/tdsc.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="tdsc">
+    <div class="title">土地收储</div>
+    <div class="content">
+      <!-- <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>在变控规</p>
+          <span>66</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已入库控规 </p>
+          <span>66</span>个
+
+        </div>
+      </div> -->
+
+    </div>
+    <div id="tdsc_echart">
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() {
+  }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  methods: {
+    initEchart() {
+      var dom = document.getElementById('tdsc_echart');
+      var myChart = window.echarts.init(dom);
+
+      // const legendType = 'center'
+      const legendType = 'center'
+
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: {
+          containLabel: true,
+          bottom: '1%',
+          top: '40%',
+          left: '5%',
+          right: legendType === 'center' ? '5%' : '25%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          orient: legendType === 'center' ? '' : 'vertical',
+          bottom: "80%",
+          right: legendType === 'center' ? 'center' : '2%',
+          // data: ['2023/06/08', '2023/10/07','2023/10/11'],
+          data: ['征收', '回收', '收购'],
+
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 40,
+          icon: "rect",
+          textStyle: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [5, 0, 0, 2],
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+          },
+
+        },
+        xAxis: {
+          triggerEvent: true,
+          data: ['崖州区', '崖州区', '崖州区', '崖州区'],
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            color: '#fff',
+            align: 'center',
+            verticalAlign: 'top',
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              show: true,
+              color: '#0B3561',
+              width: 2,
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: "面积/公顷",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              fontSize: 10,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#0B3561',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '征收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#3b93e3', '#186bb8'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '回收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+
+                  let colorItem = ['#efc943', '#ec9a1b'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '收购',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#4ee1ac', '#12a972'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [102, 130, 80, 100],
+          },
+        ],
+      }
+
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.initEchart();
+  },
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { },//生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  lang="scss"  scoped>
+.tdsc {
+  border-width: 0px;
+  position: absolute;
+  left: 9px;
+  top: 35%;
+  width: 534px;
+  height: 260px;
+  border-width: 0px;
+  background: inherit;
+  background-color: rgba(3, 25, 67, 0.698039215686274);
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #00FFFF;
+  padding: 2%;
+}
+
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 5%;
+  width: 400px;
+  height: 190px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  background-color: rgba(104, 244, 251, 0.215686);
+  display: inline-block;
+  height: 50px
+}
+
+.icon2 {
+  background: no-repeat 50%;
+  background-image: url("/static/images/cockpitNew/u296.svg");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 100px;
+
+  p {
+    font-kerning: normal;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  span {
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #68F4FB;
+  }
+}
+
+#tdsc_echart {
+  left: 1rem;
+  top: 2rem;
+  width: 32rem;
+  height: 11rem;
+}
+
+.legend {
+
+
+
+
+  background: no-repeat -10% 69%;
+  background-size: 65%;
+  // background-image: url(/static/images/cockpitNew/legend.png);
+  background-image: url("/static/images/cockpitNew/legend.png");
+
+  position: absolute;
+  top: 46%;
+  left: 31%;
+  width: 520px;
+  height: 132px;
+
+}
+</style>

src/views/cockpitNew1/tdsy.vue

@@ -0,0 +1,527 @@
+<template>
+    <div class="tdsy">
+        <div class="box1">
+            <div class="title">
+                土地供应
+                <div class="buttons">
+                    <!-- <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
+                        国有建设用地
+                    </div>
+                    <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
+                        集体经营性土地
+                    </div> -->
+                    <div class="stateOwnedButton tdgyButton">
+                        国有建设用地
+                    </div>
+                    <div class="stateOwnedButton tdgyButton">
+                        集体经营性土地
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="stateOwnedOrcollective" v-show="stateOwnedOrcollective">
+            <div class="content">
+                <div class="item">
+                    <div class="icon">
+                        <div class="icon2">
+
+                        </div>
+                    </div>
+                    <div class="text">
+                        <p>在变控规</p>
+                        <span>66</span>个
+
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="icon">
+                        <div class="icon2">
+
+                        </div>
+                    </div>
+                    <div class="text">
+                        <p>已入库控规 </p>
+                        <span>66</span>个
+
+                    </div>
+                </div>
+
+            </div>
+            <div id="tdsyEchart">
+
+            </div>
+            <div class="legend">
+
+            </div>
+            <div class="list">
+                <div class="list_item">
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
+
+                    <div class="buttons">
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
+
+                    </div>
+                    <div class="state">
+                        已上市
+                    </div>
+                </div>
+                <div class="list_item">
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
+
+                    <div class="buttons">
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
+
+                    </div>
+                    <div class="state">
+                        已上市
+                    </div>
+                </div>
+                <div class="list_item">
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
+
+                    <div class="buttons">
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
+
+                    </div>
+                    <div class="state">
+                        已上市
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+
+        <div v-show="!stateOwnedOrcollective">
+            <div class="deficiency_echart">
+
+            </div>
+            <div id="across_echart">
+
+            </div>
+            <!-- <div class="echartInfo">
+                <p>计划供应项目 <span>123</span>个</p>
+            </div> -->
+            <div id="verticalEchart">
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {
+            stateOwnedOrcollective: false
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() {
+    }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    methods: {
+
+        switchStateOwnedButton() {
+            this.stateOwnedOrcollective = !this.stateOwnedOrcollective
+        },
+
+        init_across_echart() {
+
+            var dom = document.getElementById('across_echart');
+            var myChart = window.echarts.init(dom);
+            console.log(myChart, "myChart");
+
+            //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
+            const backgroundColor = 'rgba(0,0,0,0)';
+            const title = {
+                text: '计划供应面积',
+                subtext: '613103.45\n公倾',
+                backgroundColor: 'rgba(0,0,0,0)',
+                textStyle: {
+                    color: "#fff",
+                    fontFamily: 'Arial',
+                    fontSize: 10,
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                },
+                subtextStyle: {
+                    fontSize: 12,
+                    color: "#64daff",
+                    fontWeight: '500',
+
+                },
+                x: 'center',
+                y: '35%',
+            }
+            const legendType = 'center'
+
+
+            const tooltip = {
+                show: false,
+                formatter: '{b}:{d}%',
+            };
+            const color = ['#ca9d51', '#5bbd88', 'rgba(0,0,0,0)'];
+            let option = {
+                backgroundColor,
+                color,
+                title,
+                tooltip,
+
+                grid: {
+                    // top: '1%',//生成的echarts图片和顶部的距离
+                    bottom: '90px',//echarts图片和底部的距离
+                    // left: '1%',//echarts图片和左边的距离
+                    // right: '2%',//echarts图片和右边的间距,
+                    containLabel: true//当containLabel:为ture时，以上设置生效
+                },
+                series: [
+                    {
+                        name: '网络安全设备',
+                        type: 'pie',
+                        center: ['50%', '50%'], //圆心的位置
+                        top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
+                        left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
+                        radius: ['65%', '80%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
+                        avoidLabelOverlap: false, //做同心圆用到
+                        clockwise: true, //顺时针排列
+                        startAngle: 90, //起始角度 影响不大
+                        //roseType:"", // 实心圆 不能出现roseType这个属性
+
+                        label: {
+                            show: false, //false不显示饼图上的标签
+                            position: 'center', //inside（在饼图上显示）,outside(默认就会出现引导线) center
+                            formatter: '{b}:{c}',
+                            normal: {
+                                position: 'inside', // 在内部显示，outseide 是在外部显示
+                                alignTo: 'labelLine',
+                                textStyle: {
+                                    fontWeight: 200,
+                                    fontSize: 12,   //文字的字体大小
+                                    color: '#fff'
+                                },
+                                formatter: function (params) {
+                                    console.log(params)
+                                    // return '{point|}{white|' + params.name + '}{blue|' + params.percent + '%}\n{yellow|' + params.value + '}';
+                                    return params.value + '%';
+
+                                },
+                            },
+                        },
+                        itemStyle: {
+                            //每个扇形的设置
+                            borderColor: 'rgba(0,0,0,0)', //扇形边框颜色
+                            borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
+
+                        },
+                        data: [
+                            { value: 35, name: 'IDS' },
+                            { value: 25, name: ' WAF' },
+                            { value: 30, name: '' },
+                        ],
+                        // .sort((a, b) => b.value - a.value), //数组从大到小排序
+
+                        emphasis: {
+                            scale: true,
+                            scaleSize: 20,
+                            //同心圆单独加上的
+                            label: {
+                                show: true,
+                                fontSize: 24,
+                                fontWeight: 'bold'
+                            },
+                            //启用鼠标放上去放大效果，这个挺好的
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                            },
+                        },
+                    },
+                ],
+            };
+            myChart.setOption(option);
+
+        }
+
+
+    },
+    mounted() {
+        this.init_across_echart();
+      
+    },
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+
+
+
+
+<style lang="scss"  scoped>
+.tdsy {
+    border-width: 0px;
+    position: absolute;
+    left: 555px;
+    top: 68%;
+    display: flex;
+
+    .box1 {
+        border-width: 0px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 800px;
+        height: 260px;
+        background: inherit;
+        background-color: rgba(3, 25, 67, 0.698039215686274);
+        border: none;
+        border-radius: 0px;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+
+
+
+        .title {
+            border-width: 0px;
+            width: 100%;
+            height: 40px;
+            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+            font-weight: 700;
+            font-style: normal;
+            color: #00FFFF;
+            padding: 2%;
+        }
+    }
+}
+
+
+
+.content {
+    // border: #00FFFF 1px solid;
+    position: absolute;
+    left: 5%;
+    width: 400px;
+    height: 190px;
+    top: 18%;
+}
+
+.item {
+    width: 45%;
+    height: 30%;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+    width: 50px;
+    padding: 1.5%;
+    border-radius: 8px;
+    background-color: rgba(104, 244, 251, 0.215686);
+    display: inline-block;
+    height: 50px
+}
+
+.icon2 {
+    background: no-repeat 50%;
+    background-image: url("/static/images/cockpitNew/u296.svg");
+    /* border: #00FFFF 1px solid; */
+    width: 45px;
+    height: 45px;
+    display: inline-block;
+
+}
+
+.text {
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+    width: 100px;
+
+    p {
+        font-kerning: normal;
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        font-size: 14px;
+        color: #FFFFFF;
+    }
+
+    span {
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        color: #68F4FB;
+    }
+}
+
+#tdsyEchart {
+
+    width: 280px;
+    height: 230px;
+    position: relative;
+    left: -35px;
+    top: 95px;
+}
+
+.legend {
+
+    background: no-repeat;
+    background-size: 27%;
+    background-image: url("/static/images/cockpitNew/tdsyLegend.png");
+
+    position: absolute;
+    top: 42%;
+    left: 69%;
+    width: 520px;
+    height: 132px;
+
+}
+
+.buttons {
+    display: inline-block;
+    position: absolute;
+    right: 30px;
+}
+
+.tdgyButton {
+    display: inline-block;
+    color: #AAAAAA;
+    font-size: 12px;
+    font-weight: 400;
+    border: 1px solid #AAAAAA;
+    border-radius: 4px;
+    padding: 2px;
+}
+
+.list {
+    position: absolute;
+    left: 137%;
+    top: 25%;
+}
+
+.list_item {
+    position: relative;
+    left: 0px;
+    top: 0px;
+    width: 384px;
+    height: 55px;
+    background: inherit;
+    background-color: #283f6d;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #80ffff;
+    border-left: 0px;
+    border-top: 0px;
+    border-right: 0px;
+    border-bottom: 0px;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-size: 13px;
+    color: #FFFFFF;
+    margin-bottom: 10px;
+
+    .item_label {
+        border: #00FFFF;
+        position: relative;
+        left: 3%;
+        top: 10%;
+        height: 20px;
+        line-height: 12px;
+    }
+
+    .groupName {
+        position: relative;
+        top: -5px;
+        left: 1%;
+    }
+
+    .icon {
+        background-image: url("/static/images/cockpitNew/u371.svg");
+        width: 19px;
+        height: 19px;
+    }
+
+    .buttons {
+        display: inline-block;
+        position: absolute;
+        left: 35px;
+        top: 29px;
+    }
+
+    .lableValue {
+
+        display: inline-block;
+        border: 1px solid #80FFFF;
+        color: #80FFFF;
+        width: 20%;
+        text-align: center;
+    }
+
+    .state {
+        height: 40px;
+        width: 45px;
+        position: relative;
+        left: 87%;
+        background-color: rgba(112, 182, 3, 1);
+        top: -22%;
+        text-align: center;
+        line-height: 40px;
+    }
+}
+
+#across_echart {
+    left: -6rem;
+    top: 2rem;
+    width: 20rem;
+    height: 11rem
+}
+
+.deficiency_echart {
+    width: 9.5rem;
+    height: 9.5rem;
+    border: 15px solid #104375;
+    position: absolute;
+    top: 3.6rem;
+    left: 1rem;
+
+    border-radius: 80rem;
+
+}
+</style>

src/views/cockpitNew1/wpjg.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="wpjg">
+        <div class="box">
+            <div id="wpjp_echart">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    methods: {
+        getRenKou() {
+            var dom = document.getElementById('wpjp_echart');
+            var myChart = window.echarts.init(dom);
+
+            let data = [
+                { name: '疑似新增建设', value: 30 },
+                { name: '耕地变化', value: 40 },
+                { name: '建设和设施农用地变化', value: 50 },
+                { name: '非耕农用地变化', value: 24 },
+                { name: '耕地变化', value: 24 },
+                { name: '新增围填海', value: 24 },
+            ]
+            for (var i = 0; i < data.length; i++) {
+                for (var j = i + 1; j < data.length; j++) {
+                    //如果第一个比第二个大，就交换他们两个位置
+                    if (data[i].value < data[j].value) {
+                        var temp = data[i];
+                        data[i] = data[j];
+                        data[j] = temp;
+                    }
+                }
+            }
+            let pm = []
+            for (var i = 0; i < data.length; i++) {
+                let k = i + 1
+                pm.push('NO.' + k)
+            }
+            data.forEach(function (value, index, obj) {
+                value.pm = pm[index]
+            })
+            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
+            const chartData = data.map((item, index) => ({
+                value: item.value,
+                name: item.name,
+                pm: item.pm,
+                itemStyle: {
+                    shadowBlur: 20,
+                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
+                    shadowOffsetx: 25,
+                    shadowOffsety: 20,
+                    color: colors[index % colors.length],
+                },
+            }))
+            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
+            const gap = (1 * sum) / 100
+            const pieData1 = []
+            const gapData = {
+                name: '',
+                value: gap,
+                itemStyle: {
+                    color: 'transparent',
+                },
+            }
+            let totalRatio = []
+            // let totalPercent = 0
+            for (let i = 0; i < chartData.length; i++) {
+                // 计算占比
+                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
+                // 累加占比到总占比中
+                // totalRatio.push(ratio*100)
+                let ratio = (chartData[i].value / sum) * 100
+                let percent = Math.round(ratio)
+                totalRatio.push(percent)
+                // totalPercent += percent
+                // 第一圈数据
+                pieData1.push({
+                    ...chartData[i],
+                })
+                pieData1.push(gapData)
+            }
+            // 补充最后一项占比百分比保证之和为100%
+            // totalRatio[0].value += 100 - totalPercent
+            let option = {
+                backgroundColor: 'rgba(1,1,1,0)',
+                title: {
+                    show: true,
+                    // text: sum
+                    text: '变化类型',
+                    x: '49%',
+                    y: '32%',
+                    itemGap: 6,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 11,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    subtextStyle: {
+                        color: '#fff',
+                        fontSize: 8,
+                        fontWeight: '400',
+                        lineHeight: 8,
+                    },
+                    textAlign: 'center',
+                },
+
+                // 图例
+                legend: {
+                    show: true,
+                    orient: 'vertical',
+                    icon: 'rect',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 10,
+                    },
+                    top: '5%',
+                    left: '70%',
+                    itemGap: 14,
+                    itemHeight: 14,
+                    itemWidth: 14,
+                    data: chartData,
+                    formatter: function (name) {
+                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
+                        // if (selectedItem) {
+                        //     const { value } = selectedItem;
+                        //     const { pm } = selectedItem;
+                        //     const p = ((value / sum) * 100).toFixed(2);
+                        //     const area = `${value}m²`;
+
+                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
+                        // } else {
+                        //     console.log(name);
+
+                        //     return name;
+                        // }
+
+                        if (selectedItem) {
+
+                            return name + selectedItem.value + "个";
+
+                        }
+                    },
+                },
+                series: [
+                    // 中间圆环
+                    {
+                        name: '',
+                        type: 'pie',
+                        roundCap: true,
+                        radius: ['36%', '52%'],
+                        center: ['50%', '35%'],
+                        data: pieData1,
+                        labelLine: {
+                            length: 8,
+                            length2: 16,
+                            lineStyle: {
+                                width: 1,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            fontFamily: 'ysbth',
+                            position: 'outside',
+                            padding: [0, -4, 0, -4],
+                            formatter(params) {
+                                if (params.name === '') {
+                                    return ''
+                                }
+                                return `${params.percent.toFixed(0)}% `
+                            },
+                            color: '#fff',
+                            fontSize: '14px',
+                            lineHeight: 10,
+                        },
+                        emphasis: {
+                            // 鼠标移入时显示
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                    // 最里面圆环
+                    {
+                        type: 'pie',
+                        radius: ['28%', '30%'],
+                        center: ['50%', '35%'],
+                        animation: false,
+                        hoverAnimation: false,
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                        label: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            color: '#3BC5EF',
+                        },
+                    },
+                    // 最里面圆环内的背景圆
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: '28%',
+                        animation: false,
+                        hoverAnimation: false,
+                        center: ['50%', '35%'],
+                        itemStyle: {
+                            labelLine: {
+                                show: false,
+                            },
+                            color: {
+                                type: 'radial',
+                                x: 0.5,
+                                y: 0.5,
+                                r: 1,
+                                colorStops: [
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(50,171,241, 0)',
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(50,171,241, .4)',
+                                    },
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(55,70,130, 0)',
+                                    },
+                                ],
+                                global: false, // 缺省为 false
+                            },
+                            shadowBlur: 60,
+                        },
+                        data: [
+                            {
+                                value: 100,
+                            },
+                        ],
+                    },
+                    // 最外面的圆环
+                    {
+                        type: 'pie',
+                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
+                        radius: ['53%', '54%'],
+                        center: ['50%', '35%'],
+                        label: {
+                            show: false,
+                        },
+                        select: {
+                            display: false,
+                        },
+                        tooltip: {
+                            show: false,
+                        },
+                        data: totalRatio,
+                    },
+                ],
+            }
+
+            myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.getRenKou();
+    },
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style lang="scss" scoped>
+.wpjg {
+
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 68%;
+    display: -ms-flexbox;
+    display: flex;
+
+    .box {
+        font-family: 'Arial Normal', 'Arial';
+        font-weight: 400;
+        font-style: normal;
+        font-size: 13px;
+        letter-spacing: normal;
+        color: #333333;
+        text-align: center;
+        line-height: normal;
+        text-transform: none;
+        border-width: 0px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 535px;
+        height: 260px;
+        background: inherit;
+        background-color: rgba(3, 25, 67, 0.698039215686274);
+        border: none;
+        border-radius: 0px;
+        box-shadow: none;
+        background-repeat: no-repeat;
+        background-size: 100% 47%;
+        background-image: url("/static/images/cockpitNew/wpjg.png");
+
+
+        #wpjp_echart {
+            width: 580px;
+            height: 230px;
+            position: relative;
+            left: -28%;
+            top: 40%;
+        }
+
+
+    }
+}
+</style>

src/views/viewer1.vue

@@ -0,0 +1,70 @@
+<template>
+    <div v-show="flag">
+        <JSYD />
+        <TDSC />
+        <HYSY />
+        <TDSY />
+        <GDBH />
+        <STXF />
+        <WPJG />
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+// import JSYD from './homepage/jsyd.vue';
+import JSYD from './cockpitNew1/jsyd';
+import TDSC from './cockpitNew1/tdsc';
+import HYSY from './cockpitNew1/hysy';
+import TDSY from './cockpitNew1/tdsy';
+import GDBH from './cockpitNew1/gdbh';
+import STXF from './cockpitNew1/stxf';
+import WPJG from './cockpitNew1/wpjg';
+import { cockpitInfo } from '@/api/cockpit'
+
+export default {
+    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
+    data() {
+        return {
+            flag: true
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        switch() {
+            this.flag = !this.flag;
+
+        }
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    async mounted() {
+
+        // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
+        // let data = await cockpitInfo(obj);
+
+
+
+        // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
+        // let data1 = await cockpitInfo(obj1);
+
+        // console.log(data, "asda");
+        // console.log(data1, "asda");
+
+
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped></style>