土地供应新页面

src/views/cockpitNew1/tdsy.vue

@@ -1,7 +1,25 @@
 <template>
   <div class="tdsy">
     <div class="box1">
-      <div class="title">土地供应</div>
+      <!-- <div class="title">土地供应</div> -->
+      <div class="title">
+        <div>
+          <div class="icon"></div>
+          <span>土地供应</span>
+        </div>
+
+        <div class="selectTab">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
     </div>
     <div class="stateOwnedOrcollective" v-show="stateOwnedOrcollective">
       <div class="content">
@@ -86,6 +104,29 @@ export default {
   data() {
     return {
       stateOwnedOrcollective: false,
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value: "",
     };
   },
   //监听属性 类似于data概念
@@ -123,15 +164,14 @@ export default {
           color: "#64daff",
           fontWeight: "500",
         },
-        x: "center",
-        // y: "35%",
-        y: "center",
-
+        x: "31%",
+        y: "35%",
       };
       const legendType = "center";
 
       const tooltip = {
         show: false,
+        trigger: "none",
         formatter: "{b}:{d}%",
       };
       const color = ["#ca9d51", "#5bbd88", "rgba(0,0,0,0)"];
@@ -153,9 +193,9 @@ export default {
             name: "网络安全设备",
             type: "pie",
             center: ["50%", "50%"], //圆心的位置
-            top: "16%", //单单指的饼图距离上面的距离，top越大饼图越小
-            left: "23%", //单单指的饼图距离左面的距离，会改变饼图的大小
-            radius: ["60%", "100%"], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
+            top: "-14.5%", //单单指的饼图距离上面的距离，top越大饼图越小
+            left: "-13%", //单单指的饼图距离左面的距离，会改变饼图的大小
+            radius: ["38%", "55%"], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
             avoidLabelOverlap: false, //做同心圆用到
             clockwise: true, //顺时针排列
             startAngle: 90, //起始角度 影响不大
@@ -216,7 +256,8 @@ export default {
       var dom = document.getElementById("vertical_echart");
       var myChart = window.echarts.init(dom);
       let option = {
-        backgroundColor: "rgba(0,0,0,1)",
+        backgroundColor: "rgba(0,0,0,0)",
+        // backgroundColor: transparent,
         color: ["rgba(81, 151, 214, 1)", "rgba(16, 67, 118, 1)"],
         title: {},
         legend: {
@@ -235,10 +276,10 @@ export default {
               name: "完成供应项目",
             },
           ],
-          left: 0,
+          left: "15%",
           top: "4%",
           textStyle: {
-            color: "#666",
+            color: "#BCD3E5",
             fontSize: 14,
           },
         },
@@ -262,13 +303,17 @@ export default {
           {
             type: "category",
             data: [
-              "公告管理",
+              "居住用地",
               "公共管理与公共服务用地",
               "商业服务业用地",
-              "工矿用地仓储用地",
+              "工矿用地",
+              "仓储用地",
+              // "工矿用地仓储用地",
               "交通运输用地",
               "公用设施用地",
-              "绿地与开敞空间用地特殊用地",
+              // "绿地与开敞空间用地特殊用地",
+              "绿地与开敞空间用地",
+              "特殊用地",
               "留白用地",
             ],
             axisTick: {
@@ -284,7 +329,7 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff",
+                color: "#BCD3E5",
                 fontSize: 14,
               },
               formatter: function (value) {
@@ -303,22 +348,21 @@ export default {
         yAxis: [
           {
             name: "面积/公顷",
-
             type: "value",
             max: "260",
             axisTick: {
               show: false,
             },
             axisLine: {
-              show: true,
+              show: false,
               lineStyle: {
-                color: "#fff",
+                color: "#BCD3E5",
               },
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff",
+                color: "#BCD3E5",
                 fontSize: 14,
               },
             },
@@ -326,7 +370,7 @@ export default {
             splitLine: {
               show: true,
               lineStyle: {
-                color: "rgba(255,255,255,0.4)",
+                color: "#bcd3e59e",
               },
             },
           },
@@ -335,7 +379,7 @@ export default {
             name: "项目数/个",
             max: "45",
             nameTextStyle: {
-              color: "#fff",
+              color: "#BCD3E5",
             },
             position: "right",
             axisLine: {
@@ -350,7 +394,7 @@ export default {
               show: true,
               formatter: "{value}", //右侧Y轴文字显示
               textStyle: {
-                color: "#fff",
+                color: "#BCD3E5",
                 fontSize: 14,
               },
             },
@@ -399,7 +443,8 @@ export default {
             name: "已供应面积",
             type: "bar",
             stack: "总量",
-            barWidth: "40%",
+            // barWidth: "40%",
+            barWidth: 39,
             data: ["10", "10", "10", "10", "11", "11", "11", "10", "10", "3"],
             itemStyle: {
               normal: {
@@ -408,7 +453,7 @@ export default {
                   //      position: 'top', //在上方显示
                   textStyle: {
                     //数值样式
-                    color: "#333",
+                    color: "#BCD3E5",
                     fontSize: 14,
                   },
                 },
@@ -479,7 +524,7 @@ export default {
 .tdsy {
   border-width: 0px;
   position: absolute;
-  left: 555px;
+  left: 451px;
   top: 68%;
   display: flex;
 
@@ -488,8 +533,10 @@ export default {
     position: absolute;
     left: 0px;
     top: 0px;
-    width: 800px;
-    height: 260px;
+    // width: 800px;
+    // height: 260px;
+    width: 1080px;
+    height: 310px;
     background: inherit;
     background-color: rgba(3, 25, 67, 0.698039215686274);
     border: none;
@@ -498,15 +545,58 @@ export default {
     -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%;
+    // }
+
     .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%;
+      height: 36px;
+      // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+      // font-weight: 700;
+      // font-style: normal;
+      // color: #fff;
+      // padding: 2%;
+      background: no-repeat;
+      background-image: url("/static/images/overview/标题框.png");
+      // background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      .icon {
+        background: no-repeat;
+
+        background-image: url("/static/images/overview/icon_标题框装饰.png");
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        background-position: 14px 7px;
+      }
+
+      span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+        position: relative;
+        bottom: 0.5rem;
+      }
+    }
+
+    .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;
+}
     }
   }
 }
@@ -662,33 +752,39 @@ export default {
     position: relative;
     left: 87%;
     background-color: rgba(112, 182, 3, 1);
-    top: -22%;
+    // top: -22%;
     text-align: center;
     line-height: 40px;
   }
 }
 
 #across_echart {
-  left: -6rem;
+  // left: -6rem;
   top: 2rem;
-  width: 20rem;
-  height: 11rem;
+  width: 15rem;
+  height: 15rem;
+  background: rgba(255, 192, 203, 0.214);
 }
 
 #vertical_echart {
-  left: 13rem;
-  top: -10rem;
-  width: 55.5rem;
-  height: 15rem;
+  left: 20rem;
+  top: -12.9rem;
+  // width: 55.5rem;
+  // height: 15rem;
+  // right:10px;
+  // top: 0px;
+  width: 744px;
+  height: 239px;
+  // background: greenyellow;
 }
 
 .deficiency_echart {
-    width: 9rem;
-    height: 9rem;
-    border: 20px solid #104375;
-    position: absolute;
-    top: 4rem;
-    left: 2rem;
+  width: 9rem;
+  height: 9rem;
+  border: 20px solid #104375;
+  position: absolute;
+  top: 4rem;
+  left: 2rem;
 
   border-radius: 80rem;
 }