更新

src/view/breedScreen/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="text-align: center;">养殖溯源可视化大屏</div>
+  <div style="text-align: center;" class="head-title">养殖溯源可视化大屏</div>
-  <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
+  <!-- <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
   </el-select>
   <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
@@ -14,10 +14,27 @@
   <div v-else>
       <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
       <button @click="sendFn('more_order')">更多订单</button>
-  </div>
+  </div> -->
-  
-
   
+  <div style="height: 100vh;">
+            <div class="menu" v-if="flag">
+                <div class="menu-li sy"></div>
+                <div class="menu-li sc"></div>
+                <div class="menu-li sc"></div>
+                <div class="menu-li sc"></div>
+                <div class="menu-li sc"></div>
+            </div>
+            <div v-if="!flag">
+                <areaChose channel="user-breed-datav"></areaChose>
+            </div>
+        </div>
+  <div class="area" @click="flag=!flag">
+            <div class="area-top">
+                <div class="town">江陽區</div>
+                <div class="town">江陽區</div>
+            </div>
+            <div class="area-bottom"></div>
+   </div>
 
   
 </template>
@@ -26,8 +43,10 @@ import { ref, reactive } from "vue"
 import { sendMsg } from "@/api.js"
 import axios from "axios"
 import { vehicleListApi } from "@/api.js"
+import areaChose from "@/view/components/areaChose.vue"
 
 const nowPages = ref('index');
+const flag=ref(true)
 
 // 镇列表
 const options = [
@@ -128,4 +147,42 @@ button {
   padding: 10px;
   margin: 10px;
 }
+.head-title{
+    color: #fff;
+    font-size: 20px;
+    padding-top: 5vh;
+}
+.area {
+    position: absolute;
+    font-size: 20px;
+    color: white;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 558px;
+
+    .area-top {
+        display: flex;
+        justify-content: space-around;
+
+        .town {
+            background-image: url('/static/img/tradeScreen/areaA.png');
+            background-size: 100% 100%;
+            width: 160.12px;
+            height: 30.94px;
+            text-align: center;
+            line-height: 10px;
+        }
+
+
+    }
+}
+
+.area-bottom {
+    background-image: url('/static/img/tradeScreen/areaB.png');
+    width: 558px;
+    height: 57px;
+    background-size: 100% 100%;
+    transform: translateY(-20px);
+}
 </style>

src/view/components/areaChose.vue

@@ -5,13 +5,14 @@
                 item.label }} </div>
         </div>
         <div class="town-list">
-            <div class="town-list-li" v-for="(item,index) in townLists" :key="index">{{ item.name }}</div>
+            <div class="town-list-li" v-for="(item,index) in townLists" :key="index" @click="handTown(index)">{{ item.name }}</div>
         </div>
     </div>
 </template>
 <script setup>
 import { ref, reactive } from "vue"
 import { apigetTownLists } from "@/api.js"
+import { sendMsg } from "@/api.js"
 // 镇列表
 const options = reactive([
     {
@@ -47,16 +48,49 @@ const townLists = ref([])
 
 // 选择区/县
 const handChose = (index) => {
-    actIndex.value = index
+    actIndex.value = index;
-    getTownListsFn(options[index].value)
+    getTownListsFn(options[index].value);
+    options.forEach(item => {
+      if (item.value == options[index].value) {
+          sendFn('choserArea', { name: item.label, code: item.value })
+      }
+    })
+}
+
+const handTown = (index)=>{
+    console.log(townLists.value[index]);
+    // townLists.value.forEach(item => {
+    //   if (item.value == townLists[index].value) {
+    //       sendFn('choseTown', { name: item.label, code: item.value })
+    //   }
+    // })
+    townLists.value.forEach(item => {
+      if (item.code == townLists.value[index].code) {
+          sendFn('choseTown', { name: item.name })
+      }
+    })
 }
 
 const getTownListsFn = async (area_code = 510502) => {
     let res = await apigetTownLists({ area_code })
-    townLists.value = res.data
+    townLists.value = res.data;
 }
 
 getTownListsFn()
+
+const props = defineProps({
+    channel: {
+        type: String,
+        default: ()=>'user-3'
+    }
+})
+// 发送消息
+const page = ref(1)
+const sendFn = (event, data = '') => {
+  if (data.page) page.value = data.page;
+  sendMsg({ channel: props.channel, event, data })
+}
+
 </script>