ydjc 界面

src/views/cockpit/wpjg.vue

@@ -658,6 +658,7 @@ export default {
     color: #64daff;
     line-height: 16px;
     text-align: left;
+    font-size: 12px;
   }
 }
 

src/views/cockpit/ydjc.vue

@@ -2,13 +2,45 @@
     <div class="ydjc">
         <Title title='用地监管'></Title>
         <div class="selectTab">
-
-            <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
+            <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
             </el-select>
         </div>
-
+        <!-- 临时用地(期限检测) -->
+        <div v-show="value == options[0].value">
+            <div class="stacontent_ydjc">
+                <div class="item">
+                    <span class="dlabel">临时用地面积：</span>
+                    <span class="dvalue">21.24公顷</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 临时用地项目数：</span>
+                    <span class="dvalue">543个</span>
+                </div>
+            </div>
+        </div>
+        <!-- 临时用地(复垦监测) -->
+        <div v-show="value == options[1].value">
+            <div class="stacontent_ydjc">
+                <div class="item">
+                    <span class="dlabel">应复垦面积：</span>
+                    <span class="dvalue">21.24公顷</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 已复垦面积：</span>
+                    <span class="dvalue">21.24公顷</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 复垦率：</span>
+                    <span class="dvalue">10.67%</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 超期未复垦率：</span>
+                    <span class="dvalue">11.00%</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -21,15 +53,13 @@ export default {
     components: { DiscountedAColumnar, Title },
     data() {
         return {
-            activeName: 'first',
-            radio: 'cut',
-            left_value: 'lsyd_qxjc',
             options: [
                 { value: "lsyd_qxjc", label: "临时用地(期限检测)" },
                 { value: "lsyd_fkjc", label: "临时用地(复垦监测)" },
 
                 { value: "nzyd", label: "农转用地" },
             ],
+            value: 'lsyd_qxjc'
         };
     },
     //监听属性 类似于data概念
@@ -43,7 +73,10 @@ export default {
     }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     methods: {
+        changeChartsLeft(e) {
+            console.log('e: ', e);
 
+        }
     },
     mounted() {
         const that = this;
@@ -165,4 +198,42 @@ export default {
     border-bottom-color: #163253;
     top: 0;
 }
+
+
+
+.stacontent_ydjc {
+    width: 100%;
+    height: 24px;
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+
+    .item {
+        width: 49%;
+        height: 30%;
+        display: inline-block;
+        // border: #00FFFF 1px solid;
+    }
+
+    .cursor {
+        cursor: pointer;
+    }
+
+    .dlabel {
+        font-family: HarmonyOS Sans Naskh Arabic UI, HarmonyOS Sans Naskh Arabic UI;
+        font-weight: 400;
+        font-size: 14px;
+        color: #bcd3e5;
+        line-height: 24px;
+        text-align: left;
+    }
+
+    .dvalue {
+        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+        font-weight: bold;
+        color: #64daff;
+        line-height: 16px;
+        text-align: left;
+        font-size: 12px;
+    }
+}
 </style>