screenControl/src/view/logisticsScreen/index.vue

<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> -->
    

    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
    <div class="cont" v-if="flag">
        <div class="card" v-for="(item, index) in farmList" :key="index">
            <div class="card-tit">
                {{ item.farm_name }}
            </div>
            <div class="card-cotnet">
                <div>商户姓名: {{ item.master }}</div>
                <div class="login" @click="lookFarmDetail(item)">查看详情</div>
            </div>
        </div>
    </div>
    <areaChose v-else channel="user-logistics-datav" @handTown="handTown"></areaChose>
    <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 areaChose from "@/view/components/areaChose.vue"
import { vehicleListApi } from "@/api.js"
import {useRouter} from "vue-router"
const router = useRouter()

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 handTown = (a, s)=>{

}

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-logistics-datav', event, data })
}
</script>
<style lang="scss" scoped>
.cont {
    height: 500px;
    width: 90vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: auto;

    .card {
        width: 378px;
        height: 223px;
        margin-bottom: 10px;
        background-image: url('/static/img/breedScreen/bg.png');
        background-size: 100% 100%;
        font-size: 16px;
        padding: 10px;
        color: white;
        position: relative;

        .card-tit {
            color: #00D6DD;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .card-cotnet {
            margin-top: 50px;

            .login {
                width: 170px;
                height: 34px;
                text-align: center;
                line-height: 34px;
                background-image: url('/static/img/tradeScreen/DL.png');
                background-size: 100% 100%;
                margin-top: 20px;
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
        }

    }

    // background-color: red;
}

.cont::-webkit-scrollbar {
    width: 10px;
    background-color: #153041;
}

.cont::-webkit-scrollbar-track {
    background-color: #153041;
}

::-webkit-scrollbar-thumb {
    background-color: #084D89;
    border-radius: 5px;
}

.back-btn {
    width: 86.21px;
    height: 31px;
    position: absolute;
    top: 70px;
    left: 60.96px;
    z-index: 9;

}

.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>