screenControl/src/view/breedScreen/index.vue

<template>
  <div style="text-align: center;" class="head-title">养殖溯源可视化大屏</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> -->
  
  <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>
<script setup scoped>
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 = [
  {
      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;
}
.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>