更新

src/router/index.js

@@ -27,6 +27,11 @@ const routes = [
                 name: 'logisticsScreen',
                 component: () => import('@/view/logisticsScreen/index.vue'),
             },
+            {
+                path: '/breedScreen',
+                name: 'breedScreen',
+                component: () => import('@/view/breedScreen/index.vue'),
+            },
 
         ]
     },

src/view/breedScreen/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div style="text-align: center;">养殖溯源可视化大屏</div>
+  <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">
+      <el-option v-for="item in townOptions" :key="item.value" :label="item.label" :value="item.value" />
+  </el-select>
+  <button @click="sendFn('refresh'), townCode = ''">刷新</button>
+  <div v-if="nowPages=='index'">
+      <button @click="sendFn('more_order_index')">更多订单</button>
+      <button @click="sendFn('c_car_index', { index: index })" v-for="(item, index) in vehicleList" :key="'car'+index"> {{ item.license }}</button>
+  </div>
+  <div v-else>
+      <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
+      <button @click="sendFn('more_order')">更多订单</button>
+  </div>
+  
+
+  
+
+  
+</template>
+<script setup scoped>
+import { ref, reactive } from "vue"
+import { sendMsg } from "@/api.js"
+import axios from "axios"
+import { vehicleListApi } from "@/api.js"
+
+const nowPages = ref('index');
+
+// 镇列表
+const options = [
+  {
+      value: '510502',
+      label: '江阳区',
+  },
+  {
+      value: '510503',
+      label: '纳溪区',
+  },
+  {
+      value: '510504',
+      label: '龙马潭区',
+  },
+  {
+      value: '510521',
+      label: '泸县',
+  },
+  {
+      value: '510522',
+      label: '合江县 ',
+  },
+  {
+      value: '510524',
+      label: '叙永县 ',
+  }, 
+  {
+      value: '510525',
+      label: '古蔺县 ',
+  },
+]
+// 区列表
+const townOptions = []
+
+const areaCode = ref('510521')
+
+const townCode = ref("")
+
+const changeArea = (e) => {
+  townCode.value = ''
+  getTownList()
+  options.forEach(item => {
+      if (item.value == e) {
+          sendFn('choserArea', { name: item.label, code: item.value })
+      }
+  })
+}
+
+const changeTown = (e) => {
+  console.log(e)
+  townOptions.forEach(item => {
+      if (item.value == e) {
+          sendFn('choseTown', { name: item.label })
+      }
+  })
+
+}
+
+const getTownList = () => {
+  townOptions.splice(0, 99999999)
+  axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
+      .then(function (res) {
+          res.data.data.forEach(item => {
+              townOptions.push({
+                  value: item.code,
+                  label: item.name
+              })
+          })
+
+      })
+}
+
+const vehicleList=ref([])
+const getLandList = async () => {
+  let res = await vehicleListApi({
+      areaCode: areaCode.value,
+      streetCode: townCode.value
+  })
+  vehicleList.value=res.data.list
+
+
+
+}
+  
+
+getTownList()
+getLandList()
+// 发送消息
+const page = ref(1)
+const sendFn = (event, data = '') => {
+  if (data.page) page.value = data.page;
+  sendMsg({ channel: 'user-breed-datav', event, data })
+}
+</script>
+<style lang="scss" scoped>
+button {
+  padding: 10px;
+  margin: 10px;
+}
+</style>

src/view/logisticsScreen/index.vue

@@ -35,30 +35,30 @@ const options = [
         value: '510502',
         label: '江阳区',
     },
-    // {
+    {
-    //     value: '510503',
+        value: '510503',
-    //     label: '纳溪区',
+        label: '纳溪区',
-    // },
+    },
-    // {
+    {
-    //     value: '510504',
+        value: '510504',
-    //     label: '龙马潭区',
+        label: '龙马潭区',
-    // },
+    },
     {
         value: '510521',
         label: '泸县',
     },
-    // {
+    {
-    //     value: '510522',
+        value: '510522',
-    //     label: '合江县 ',
+        label: '合江县 ',
-    // },
+    },
     {
         value: '510524',
         label: '叙永县 ',
     }, 
-    // {
+    {
-    //     value: '510525',
+        value: '510525',
-    //     label: '古蔺县 ',
+        label: '古蔺县 ',
-    // },
+    },
 ]
 // 区列表
 const townOptions = []