screenControl/src/view/tradeScreen/index.vue

<template>
    <div style="height: 100vh;">
        <div class="menu">
            <!-- <img src="/static/img/tradeScreen/SY.png"  alt=""> -->
            <!-- <img src="" alt=""> -->
            <!-- <el-image style="width: 10px; height: 10px" src="/static/img/tradeScreen/SY.png" :fit="fit" /> -->
            <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 class="area">
            <!-- <span>江陽區</span>
            <span>那成接納</span> -->
            <div class="area-top">
                <div class="town">江陽區</div>
                <div class="town">江陽區</div>
            </div>
            <div class="area-bottom"></div>
        </div>
    </div>



    <!-- <div style="text-align: center;">数据之眼可视化大屏</div>
  <div>
    <button @click="sendFn('header1', { page: 1 })">首页</button>
    <button @click="sendFn('header2', { page: 2 })">商品</button>
    <button @click="sendFn('header3', { page: 3 })">商户</button>
    <button @click="sendFn('header4', { page: 4 })">订单</button>
    <button @click="sendFn('header5', { page: 5 })">财务</button>
    <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>
  </div>
  <div v-if="page == 1">
  </div> -->
</template>

<script setup scoped>
import { ref, reactive } from "vue"
import { sendMsg } from "@/api.js"
import axios from "axios"

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) => {
    getTownList()
    options.forEach(item => {
        if (item.value == e) {
            sendFn('choserArea', { name: item.label, code: item.value })
        }
    })
}

const changeTown = (e) => {
    townOptions.forEach(item => {
        if (item.value == e) {
            sendFn('header7', { id: item.value, name: item.label })
            // 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 page = ref(1)



const sendFn = (event, data = '') => {
    if (data.page) page.value = data.page;
    sendMsg({ channel: 'user-2', event, data })
}

</script>
<style lang="scss" scoped>
.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

}

.menu-li {
    width: 185.56px;
    height: 213.05px;
    background-size: 100% 100%;

}

.sy {
    background-image: url('/static/img/tradeScreen/SC.png');
}

.sc {
    background-image: url('/static/img/tradeScreen/SC.png');

}

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