Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/App.vue

@@ -1,6 +1,10 @@
 <template>
-  <div id="app">
-    <router-view />
+  <div style="    width: 100%;
+    background: rgb(6, 37, 66);
+    height: 100%;">
+    <div id="app">
+      <router-view />
+    </div>
   </div>
 </template>
 
@@ -10,8 +14,13 @@ export default {
 };
 </script>
 <style lang="scss">
-// #app {
-//   background-image: url("/static/images/overview/驾驶背景遮罩.png");
-
-// }
+#app {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-image:
+    radial-gradient(rgba(54, 130, 198, 0.4) 50%, rgba(28, 61, 104, 0.4) 70%, rgba(32, 54, 77, 0.4) 90%);
+}
 </style>

src/views/cockpitNew1/hysy.vue

@@ -6,7 +6,24 @@
                 <span>海域使用权出让</span>
             </div>
             <div class="content">
+                <div class="icon_info">
 
+                </div>
+                <div class="info_left">
+
+                </div>
+                <div class="info_main">
+
+                </div>
+                <div class="text">
+                    <span>收储项目</span>
+                    <span class="count1">33</span>
+                    <span class="unit">个</span>
+
+                    <span>收储总面积</span>
+                    <span class="count2">213124.45</span>
+                    <span class="unit">公顷</span>
+                </div>
             </div>
             <div id="hysyEchart">
 
@@ -39,184 +56,250 @@ export default {
 
             var myChart = window.echarts.init(dom);
 
+            // 柱状图的宽度，y是x的一半
+            const offsetX = 10
+            const offsetY = 5
+            let colorList = ["RGBA(30, 111, 181, 0.8)", "RGBA(149, 101, 24, 0.8)", "RGBA(29, 128, 64, 0.8)", "RGBA(133, 48, 52, 0.8)", "RGBA(121, 62, 147, 0.8)"]
+
+            // 绘制左侧面
+            const CubeLeft = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    // 会canvas的应该都能看得懂，shape是从custom传入的
+                    const xAxisPoint = shape.xAxisPoint
+                    const c0 = [shape.x, shape.y]
+                    const c1 = [shape.x - offsetX, shape.y - offsetY]
+                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
+                    const c3 = [xAxisPoint[0], xAxisPoint[1]]
+                    ctx
+                        .moveTo(c0[0], c0[1])
+                        .lineTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .closePath()
+                }
+            })
+            // 绘制右侧面
+            const CubeRight = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [xAxisPoint[0], xAxisPoint[1]]
+                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
+                    const c4 = [shape.x + offsetX, shape.y - offsetY]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+            // 绘制顶面
+            const CubeTop = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
+                    const c3 = [shape.x, shape.y - offsetX]
+                    const c4 = [shape.x - offsetX, shape.y - offsetY]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+            // // 绘制底面
+            const CubeBottom = echarts.graphic.extendShape({
+                shape: {
+                    x: 10,
+                    y: 10
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
+                    const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
+                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
+                    const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+
+            // 注册图形
+            echarts.graphic.registerShape('CubeLeft', CubeLeft)
+            echarts.graphic.registerShape('CubeRight', CubeRight)
+            echarts.graphic.registerShape('CubeTop', CubeTop)
+            echarts.graphic.registerShape('CubeBottom', CubeBottom)
+            const dataX = ["渔业用海", "工业用海", "造地工程", "旅游娱乐", "交通运输"]
+            const barData = [45, 33, 11, 20, 3]
             let option = {
-                grid: {
-                    top: "65px",
-                    bottom: "50px",
-                    left: "45px",
-                    right: "20px",
+                //你的代码
+                backgroundColor: 'rgba(0,0,0,0)',
+                legend: {
+                    show: false,
+                    right: 30,
+                    top: 10,
+                    itemGap: 30,
+                    itemWidth: 20,
+                    itemHeight: 10,
+                    data: ['时长', '百分比'],
+                    textStyle: {
+                        fontSize: 18,
+                        color: '#ffffff'
+                    }
                 },
-                title: {  //配置标题组件
-                    text: "",  //设置主标题
-                    textStyle: {  //设置主标题文字样式
-                        color: 'green',
+                color: ['#097dc0', '#26D6D7'],
+                tooltip: {
+                    show: false,
+                    trigger: 'axis',
+                    textStyle: {
+                        fontSize: 18 // 字体大小
                     },
-                    left: 20,  //设置适当调整工具框的left位置
-                    top: 3  //设置适当调整工具框的top位置
-                },
-                tooltip: {  //配置提示框组件
-                    trigger: 'axis',     //当鼠标滑过轴线时触发显示于详情
                     axisPointer: {
-                        type: 'cross',//line(直线) || shadow(阴影) || cross(十字准星) || none
-                        label: {
-                            show: true // 鼠标移入X轴文字效果 true || false
-                        }
+                        type: 'shadow'
                     }
                 },
-                legend: {  //配置图例组件
-                    data: ['渔业用海', '工业用海', '造地工程', '旅游娱乐', '交通运输'],
-                    left: 100,  //设置适当调整工具框的left位置
-                    bottom: "200px",  //设置适当调整工具框的top位置
-                    textStyle: {
+                grid: {
+                    top: '30%',
+                    // left: '3%',
+                    right: '3%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: dataX,
+                    axisTick:{
+                        show: false,
+                    },
+                    axisLine: {
+                        show: true,
+                      
+                        lineStyle: {
+                            width: 1,
+                            color: 'rgba(239, 247, 253, .7)'
+                        }
+                    },
+                    axisLabel: {
                         fontSize: 12,
                         color: '#fff',
-                        padding: [5, 0, 0, 2],
-                        rich: {
-                            a: {
-                                verticalAlign: 'middle',
-                            },
-                        },
                     },
-                    icon: 'rect',
-                    itemHeight: 14,
-                    itemWidth: 14,
                 },
-                xAxis: [  //配置X轴坐标系
+                yAxis: [
                     {
-                        //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: "面积/公顷",
+                        type: 'value',
+                        name: '面积/公顷',
+                        nameGap: 30,
                         nameTextStyle: {
-                            color: "#fff",
-                            fontSize: 12,
-                            padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
-                        },
-                        axisLabel: {
-                            color: "#fff",
+                            color: '#ffffff',
+                            fontWeight: 100,
                             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)'
-                                }
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                width: 1,
+                                color: 'rgba(239, 247, 253, .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)" // 线条颜色
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: 'rgba(239, 247, 253, .1)'
                             }
                         },
-                        itemStyle: {
-                            normal: {
-                                areaStyle: {
-                                    //type: 'default',
-                                    color: 'rgba(255, 176, 57, 1)'
-                                }
-                            }
+                        axisTick: {
+                            show: false
                         },
-                        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)'
-                                }
-                            }
+                        axisLabel: {
+                            fontSize: 12,
+                            color: '#E7FCFF'
                         },
-                        data: [350, 332, 331, 334, 390, 320, 340]
+                        min: 0,
+                        // max: Math.ceil(Math.max.apply(null, dataX) / 5) * 5,
+                        // interval: Math.ceil(Math.max.apply(null, dataX) / 5)
                     },
+                ],
+                series: [
                     {
-                        name: '旅游娱乐',
-                        type: 'line',   //设置指定显示为折线
-                        stack: '总量',  //设置堆积
-                        color: 'green',
+                        name: '时长',
+                        type: 'custom',
+                        renderItem: (params, api) => {
+                            const location = api.coord([api.value(0), api.value(1)])
+                            return {
+                                type: 'group',
+                                x: 0,
+                                children: [
+                                    {
+                                        type: 'CubeLeft',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length]
 
-                        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',
+                                        }
+                                    },
+                                    {
+                                        type: 'CubeRight',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length],
 
-                        symbol: "none",
-                        lineStyle: {
-                            normal: {
-                                color: "rgba(137, 81, 157, 1))" // 线条颜色
-                            }
-                        },
-                        itemStyle: {//设置item的样式
-                            normal: {//常规状态
-                                areaStyle: {    //区域样式，仅在折线图中有效
-                                    //type: 'default',
-                                    color: 'rgba(137, 81, 157, 1)'
-                                }
+                                        }
+                                    },
+                                    {
+                                        type: 'CubeTop',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length],
+
+                                        }
+                                    }
+                                ]
                             }
                         },
-                        data: [330, 442, 432, 555, 456, 666, 877, 634, 534, 55, 111]
-                    }
+                        data: barData
+                    },
                 ]
-            };
+            }
+
             myChart.setOption(option);
         },
     },
@@ -282,15 +365,78 @@ export default {
     background: no-repeat;
     width: 100%;
     height: 44px;
-    border: 1px solid red;
-    // background-image: url("/static/images/overview/info.jpg");
+    position: relative;
+    // background-image: url("/static/images/overview/info_all.png");
+    // background-size: 98% 87%;
+
+    .text {
+        position: relative;
+        left: 3.5rem;
+        top: 0.5rem;
+        font-size: 15px;
+        font-weight: 600;
+
+        .unit {
+            margin-right: 3rem;
+        }
+
+        .count1 {
+            color: RGBA(250, 160, 18, 1);
+        }
+
+        .count2 {
+            color: RGBA(100, 218, 255, 1);
+        }
+    }
+}
+
+.icon_info {
+    background: no-repeat;
+
+    // background-image: url("/static/images/overview/icon_info.png");
+    background-image: url("/static/images/overview/icon信息.png");
+
+    display: inline-block;
+    width: 2rem;
+    height: 3rem;
+    position: absolute;
+    left: 1.23rem;
+    top: 0.5rem;
+}
+
+.info_left {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_left.png");
+    // background-image: url("/static/images/overview/左侧主信息.png");
+
+    display: inline-block;
+    width: 10rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 2rem;
+}
+
+.info_main {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_main.png");
+    // background-image: url("/static/images/overview/右侧附属信息.png");
+
+    display: inline-block;
+    width: 13rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 12rem;
 }
 
 #hysyEchart {
-    left: 1rem;
-    top: 1rem;
-    width: 32rem;
-    height: 14rem;
+    left: -2rem;
+    top: 0.5rem;
+    width: 28rem;
+    height: 11.5rem;
 }
 
 .box {

src/views/cockpitNew1/tdsc.vue

@@ -5,7 +5,24 @@
       <span>土地收储</span>
     </div>
     <div class="content">
+      <div class="icon_info">
 
+      </div>
+      <div class="info_left">
+
+      </div>
+      <div class="info_main">
+
+      </div>
+      <div class="text">
+        <span>收储项目</span>
+        <span class="count1">33</span>
+        <span class="unit">个</span>
+
+        <span>收储总面积</span>
+        <span class="count2">213124.45</span>
+        <span class="unit">公顷</span>
+      </div>
     </div>
     <div id="tdsc_echart">
 
@@ -38,10 +55,7 @@ export default {
     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: {
@@ -61,7 +75,6 @@ export default {
           orient: legendType === 'center' ? '' : 'vertical',
           bottom: "80%",
           right: legendType === 'center' ? 'center' : '2%',
-          // data: ['2023/06/08', '2023/10/07','2023/10/11'],
           data: ['征收', '回收', '收购'],
 
           itemWidth: 12,
@@ -91,15 +104,15 @@ export default {
             verticalAlign: 'top',
           },
           axisLine: {
-            show: false,
-          },
-          axisTick: {
             show: true,
+
             lineStyle: {
-              show: true,
-              color: '#0B3561',
-              width: 2,
-            },
+              width: 1,
+              color: 'rgba(239, 247, 253, .7)'
+            }
+          },
+          axisTick: {
+            show: false,
           },
         },
         yAxis: [
@@ -123,10 +136,10 @@ export default {
               show: false,
             },
             splitLine: {
+              show: true,
               lineStyle: {
-                type: 'solid',
-                color: '#0B3561',
-              },
+                color: 'rgba(239, 247, 253, .1)'
+              }
             },
           },
         ],
@@ -277,7 +290,7 @@ export default {
             show: false,
           },
           axisTick: {
-            show: true,
+            show: false,
             lineStyle: {
               show: true,
               color: '#0B3561',
@@ -467,8 +480,29 @@ export default {
   background: no-repeat;
   width: 100%;
   height: 44px;
-  border: 1px solid red;
-  // background-image: url("/static/images/overview/info.jpg");
+  position: relative;
+  // background-image: url("/static/images/overview/info_all.png");
+  // background-size: 98% 87%;
+
+  .text {
+    position: relative;
+    left: 3.5rem;
+    top: 0.5rem;
+    font-size: 15px;
+    font-weight: 600;
+
+    .unit {
+      margin-right: 3rem;
+    }
+
+    .count1 {
+      color: RGBA(250, 160, 18, 1);
+    }
+
+    .count2 {
+      color: RGBA(100, 218, 255, 1);
+    }
+  }
 }
 
 #tdsc_echart {
@@ -485,4 +519,46 @@ export default {
   width: 32rem;
   height: 11rem;
 }
+
+.icon_info {
+  background: no-repeat;
+
+  // background-image: url("/static/images/overview/icon_info.png");
+  background-image: url("/static/images/overview/icon信息.png");
+
+  display: inline-block;
+  width: 2rem;
+  height: 3rem;
+  position: absolute;
+  left: 1.23rem;
+  top: 0.5rem;
+}
+
+.info_left {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_left.png");
+  // background-image: url("/static/images/overview/左侧主信息.png");
+
+  display: inline-block;
+  width: 10rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 2rem;
+}
+
+.info_main {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_main.png");
+  // background-image: url("/static/images/overview/右侧附属信息.png");
+
+  display: inline-block;
+  width: 13rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 12rem;
+}
 </style>

src/views/cockpitNew1/tdsy.vue

@@ -9,7 +9,7 @@
         </div>
 
         <div class="selectTab">
-          <el-select v-model="value" placeholder="请选择">
+          <el-select v-model="value" placeholder="请选择" @change="changeCharts">
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -88,7 +88,7 @@
     </div>
 
     <div v-show="!stateOwnedOrcollective">
-      <div class="deficiency_echart"></div>
+      <!-- <div class="deficiency_echart"></div> -->
       <div id="across_echart"></div>
 
       <div id="vertical_echart"></div>
@@ -106,27 +106,15 @@ export default {
       stateOwnedOrcollective: false,
       options: [
         {
-          value: "选项1",
-          label: "黄金糕",
+          value: "国有建设用地",
+          label: "国有建设用地",
         },
         {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
+          value: "集体供应性土地",
+          label: "集体供应性土地",
         },
       ],
-      value: "",
+      value: "国有建设用地",
     };
   },
   //监听属性 类似于data概念
@@ -138,6 +126,14 @@ export default {
   created() {}, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() {}, //生命周期 - 挂载之前
   methods: {
+    changeCharts(evt){
+console.log(evt);
+this.value = evt
+this.stateOwnedOrcollective = !this.stateOwnedOrcollective
+// if (condition) {
+  
+// }
+    },
     switchStateOwnedButton() {
       this.stateOwnedOrcollective = !this.stateOwnedOrcollective;
     },
@@ -146,110 +142,194 @@ export default {
       var dom = document.getElementById("across_echart");
       var myChart = window.echarts.init(dom);
 
-      //做环形图的本质是 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",
+      var dataList = [
+        {
+          value: 310,
+          name: "已出让",
         },
-        subtextStyle: {
-          fontSize: 12,
-          color: "#64daff",
-          fontWeight: "500",
+        {
+          value: 234,
+          name: "已划拨",
         },
-        x: "31%",
-        y: "35%",
-      };
-      const legendType = "center";
+        {
+          value: 135,
+          name: "未供应",
+        },
+      ];
+      var color2 = [
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#FC8053",
+              },
+              {
+                offset: 1,
+                color: "#F2CAA4",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#6EDC8D ",
+              },
+              {
+                offset: 1,
+                color: "#5BBD88",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              // {
+              //   offset: 0,
+              //   color: "#f888b1",
+              // },
+              // {
+              //   offset: 1,
+              //   color: "#fbe6ee",
+              // },
+              {
+                offset: 0,
+                color: "#5583e7",
+              },
+              {
+                offset: 1,
+                color: "#36dddb",
+              },
+            ],
+            global: false,
+          },
+        },
+      ];
+      var dataAll = 0;
+      dataList.forEach((item, index) => {
+        item.itemStyle = color2[index];
+        dataAll += item.value;
+      });
 
-      const tooltip = {
-        show: false,
-        trigger: "none",
-        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时，以上设置生效
+        backgroundColor: "rgba(0,0,0,0)",
+        legend: {
+          orient: "horizontal",
+          left: "center",
+          bottom: "1%",
+          // selectedMode: 'multiple',
+          padding: [0, 0, 0, 0], //调节legend的位置
+          data: ["类型", "已出让", "已划拨", "未供应"],
+          icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+          itemWidth: 12, // 设置宽度
+          itemHeight: 12, // 设置高度
+          itemGap: 10, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 14,
+          },
         },
+        graphic: [
+          {
+            type: "group",
+            top: "middle",
+            left: "center",
+            id: "data",
+            children: [
+              {
+                type: "text",
+                id: "current",
+                top: 100,
+                style: {
+                  text: dataAll,
+                  font: 'bolder 18px "Microsoft YaHei", sans-serif',
+                  fill: "#64DAFF ",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "all",
+                top: 80,
+                style: {
+                  text: "计划供应",
+                  font: 'bolder 14px "Microsoft YaHei", sans-serif',
+                  fill: "#ECF6FF",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "gq",
+                top: 120,
+                style: {
+                  text: "公顷",
+                  font: 'bolder 12px "Microsoft YaHei", sans-serif',
+                  fill: "#4FABCF",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+        ],
         series: [
           {
-            name: "网络安全设备",
+            name: "公顷",
             type: "pie",
-            center: ["50%", "50%"], //圆心的位置
-            top: "-14.5%", //单单指的饼图距离上面的距离，top越大饼图越小
-            left: "-13%", //单单指的饼图距离左面的距离，会改变饼图的大小
-            radius: ["38%", "55%"], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
-            avoidLabelOverlap: false, //做同心圆用到
-            clockwise: true, //顺时针排列
-            startAngle: 90, //起始角度 影响不大
-            //roseType:"", // 实心圆 不能出现roseType这个属性
-
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
             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) {
-                  // return '{point|}{white|' + params.name + '}{blue|' + params.percent + '%}\n{yellow|' + params.value + '}';
-                  return params.value + "%";
+                show: false, //是否展示数据
+                position: "inner", // 数值显示在内部
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: 400,
+                formatter: (params) => {
+                  // console.log(params);
+                  return params.percent + "%";
                 },
+                rich: {},
               },
             },
-            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,
+                fontSize: "16",
                 fontWeight: "bold",
               },
-              //启用鼠标放上去放大效果，这个挺好的
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
             },
+            labelLine: {
+              show: false,
+              // length: 48,
+            },
+            data: dataList,
           },
         ],
       };
+
       myChart.setOption(option);
     },
     init_vertical_echart() {
@@ -276,17 +356,18 @@ export default {
               name: "完成供应项目",
             },
           ],
-          left: "15%",
+          left: "13%",
           top: "4%",
+          itemGap: 5, // 设置间距
           textStyle: {
             color: "#BCD3E5",
-            fontSize: 14,
+            fontSize: 12,
           },
         },
         grid: {
           left: "2%",
           right: "4%",
-          bottom: "6%",
+          bottom: "10%",
           top: "16%",
           containLabel: true,
         },
@@ -328,6 +409,7 @@ export default {
 
             axisLabel: {
               show: true,
+              rotate: 35, //35度角倾斜显示
               textStyle: {
                 color: "#BCD3E5",
                 fontSize: 14,
@@ -535,8 +617,8 @@ export default {
     top: 0px;
     // width: 800px;
     // height: 260px;
-    width: 1080px;
-    height: 310px;
+    width: 50rem;
+    height: 18rem;
     background: inherit;
     background-color: rgba(3, 25, 67, 0.698039215686274);
     border: none;
@@ -591,12 +673,24 @@ export default {
 
     .selectTab {
       /deep/ .el-input__inner {
-    // padding-right: 30px;
-width: 128px !important;
-height: 24px !important;
-line-height: 24px;
-    background-image: url("/static/images/overview/selectBg.png") !important;
-}
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-size: 100% 100%;
+      }
+      /deep/ .el-input__icon {
+        line-height: 1;
+      }
+      /deep/ .el-input__suffix{
+        right: -2px;
+      }
     }
   }
 }
@@ -759,22 +853,23 @@ line-height: 24px;
 }
 
 #across_echart {
+  position: relative;
   // left: -6rem;
-  top: 2rem;
+  top: 2.1rem;
   width: 15rem;
   height: 15rem;
-  background: rgba(255, 192, 203, 0.214);
+  // background: rgba(255, 192, 203, 0.214);
 }
 
 #vertical_echart {
-  left: 20rem;
+  left: 14rem;
   top: -12.9rem;
-  // width: 55.5rem;
-  // height: 15rem;
+  width: 36rem !important;
+  height: 15rem;
   // right:10px;
   // top: 0px;
-  width: 744px;
-  height: 239px;
+  // width: 744px;
+  // height: 239px;
   // background: greenyellow;
 }
 

src/views/map3d.vue

@@ -78,7 +78,11 @@
       <router-view ref="routeViewRef"></router-view>
     </div>
     <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
+    <!-- <div class="masking_top">
+      <div class="top_left"></div>
+      <div class="top_right"></div>
 
+    </div>
     <div class="masking_left"></div>
     <div class="masking_bottom"></div>
     <div class="masking_right"></div>
@@ -88,6 +92,8 @@
         style="width: 100%; height: 100%; position: absolute"
       ></iframe>
     </el-drawer>
+    <div class="masking_right"></div> -->
+
   </div>
 </template>
 
@@ -269,10 +275,30 @@ export default {
   align-items: center;
   background-image: url("/static/images/overview/title_new.png");
 
-  // background-image: url("/static/images/overview/masking_top.png");
   background-size: 100% 100%;
 }
 
+.masking_top {
+  height: 60px;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  background: no-repeat;
+
+  // // background-image: url("/static/images/overview/masking_top.png");
+  // .top_left {
+  //   height: 100%;
+  //   width: 29%;
+  //   background: -webkit-linear-gradient(left, RGBA(11, 32, 61, 1), RGBA(8, 40, 60, 1));
+  // }
+
+  // .top_right {
+  //   background: -webkit-linear-gradient(right, RGBA(8, 40, 60, 1), RGBA(11, 32, 61, 1));
+
+  // }
+
+}
+
 .masking_left {
   width: 415px;
   height: 100%;
@@ -297,7 +323,10 @@ export default {
   height: 100%;
   background: no-repeat;
   background-image: url("/static/images/overview/masking_right.png");
-
+  position: fixed;
+  right: -1rem;
+  top: 1rem;
+  z-index: 1;
 }
 
 .systemTitle {
@@ -396,6 +425,8 @@ export default {
   background-color: rgba(4, 16, 36, 0) !important;
   position: fixed;
   left: 14.5rem;
+  top: 1rem;
+  font-weight: 700;
 
   .el-menu--horizontal>.el-menu-item.is-active,
   .el-menu-item.is-active,
@@ -411,16 +442,17 @@ export default {
   height: 100%;
   background-color: transparent;
   position: fixed;
-  right: 22.3rem;
-  top: 1.3rem;
+  right: 21.9rem;
+  top: 1.1rem;
   background-color: rgba(4, 16, 36, 0) !important;
+  font-weight: 700;
 
   .el-menu-item {
     background-image: url("/static/images/overview/right_mune_button.png");
     background-size: 100% 100%;
     float: left;
-    height: 37px;
-    line-height: 43px !important;
+    height: 34px;
+    line-height: 34px !important;
     margin: 0;
     border: none;
     color: white;
@@ -470,8 +502,8 @@ export default {
 .is-opend {
   background-image: url("/static/images/overview/left_mune_button.png");
   background-size: 100% 100%;
-  height: 37px;
-  line-height: 43px !important;
+  height: 34px;
+  line-height: 34px !important;
   margin: 0;
   border: none;
   color: white;
@@ -512,10 +544,11 @@ export default {
 /deep/ .el-menu-item,
 /deep/ .el-submenu__title,
 /deep/ .is-opened {
-  height: 37px !important;
-  line-height: 43px !important;
+  height: 34px !important;
+  line-height: 34px !important;
   color: white !important;
   background-color: transparent !important;
   border: none !important;
   text-align: center !important;
-}</style>
+}
+</style>

src/views/viewer1.vue

@@ -25,10 +25,12 @@ import datePicker from './cockpitNew1/datePicker.vue';
 import { cockpitInfo } from '@/api/cockpit'
 import xzqh from "../../static/data/460200_full.json";
 export default {
-    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG ,datePicker},
+    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker },
     data() {
         return {
-            flag: true
+            flag: true,
+            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
+            xzqh_color: "rgba(10, 95, 152, 0.5)",
         };
     },
     //监听属性 类似于data概念
@@ -41,10 +43,11 @@ export default {
             this.flag = !this.flag;
 
         },
-        deteChange(date){
+        deteChange(date) {
 
         },
         pick_xzqh() {
+            const that = this;
             const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
             handler.setInputAction(event => {
                 let pickObj = viewer.scene.pick(event.position);
@@ -83,14 +86,16 @@ export default {
                             const address = pickObj.id.properties.adcode.getValue();
                             const center = pickObj.id.properties.centroid.getValue();
 
-                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString("rgba(19, 119, 176, 0.6)");
+                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
+                            pickObj.id.polygon.extrudedHeight = 850;
 
                             viewer.entities.values.forEach((res) => {
 
                                 if (res.properties.name._value != name) {
                                     // console.log(res.properties.name._value, "其他的");
                                     // console.log(res);
-                                    res.polygon._material.color = Cesium.Color.fromCssColorString("rgba(10, 95, 152, 0.6)")
+                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
+                                    res.polygon.extrudedHeight = 450;
 
                                 }
                             })
@@ -109,6 +114,7 @@ export default {
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
         },
         init_xzqh() {
+            const that = this;
             xzqh.features.forEach((res) => {
 
                 const twoDArray = res.geometry.coordinates[0][0];
@@ -120,8 +126,8 @@ export default {
                     position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
                     text: res.properties.name,
                     label: {
-                        scale: 1,
-                        font: "bolder 18px sans-serif",
+                        scale: 1.5,
+                        font: "bolder 16px sans-serif",
                         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                         text: res.properties.name,//图标名称
                         fillColor: Cesium.Color.fromCssColorString("#ffffff"),
@@ -133,7 +139,7 @@ export default {
                         image: "./static/images/overview/htq-f.png",
                         height: 60,
                         // 宽度（以像素为单位）
-                        width: 100,
+                        width: 150,
                         // 相对于坐标的垂直位置
                         // verticalOrigin: Cesium.VerticalOrigin.CENTER,
                         // // 相对于坐标的水平位置
@@ -155,7 +161,7 @@ export default {
                             positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
                         },
                         outline: false,
-                        material: Cesium.Color.fromCssColorString("rgba(10, 95, 152, 0.6)"),
+                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
                         height: 100,
                         extrudedHeight: 450,