screenControl/src/view/tradeScreen/index.vue

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

    <!-- <button @click="sendFn('header7', { id: 510521107, name: '玄潭镇' })">玄潭镇</button> -->
  </div>
  <div v-if="page == 1">

    <!-- <button @click="sendFn('indextopleft', { num: 1 })">地方店铺统计1</button>
        <button @click="sendFn('indextopleft', { num: 2 })">地方店铺统计2</button>
        <button @click="sendFn('indextopleft', { num: 3 })">地方店铺统计3</button>
        <button @click="sendFn('indextopleft', { num: 3 })">商品销售排行</button>
        <button @click="sendFn('indextopleft', { num: 3 })">商品销售排行</button>
        <button @click="sendFn('indextopright-1')">商品销售排行</button>
        <button @click="sendFn('indextopright-2')">店铺销量排行</button>
        <button @click="sendFn('indextopright', { num: 1 })"> 平台用户数量1</button>
        <button @click="sendFn('indextopright', { num: 2 })"> 平台用户数量2</button>
        <button @click="sendFn('indextopright', { num: 3 })"> 平台用户数量3</button> -->





  </div>
  <div v-if="page == 2">

    <!-- <button @click="sendFn('header2-1', { num: 2 })"> 商品分类</button>
        <button @click="sendFn('header2-2', { num: 2 })"> 积分管理</button>
        <button @click="sendFn('header2-2-1', { type: 1 })"> 出售中的商品</button>
        <button @click="sendFn('header2-2-2', { type: 2 })"> 仓库中商品</button>
        <button @click="sendFn('header2-2-3', { type: 6 })"> 待审核商品</button>
        <button @click="sendFn('header2-2-4', { type: 7 })"> 审核未通过商品</button> -->

  </div>
  <div v-if="page == 3">

    <!-- <button @click="sendFn('header3-1')"> 开启的商户</button>
        <button @click="sendFn('header3-2')"> 关闭的商户</button>
        <button @click="sendFn('header3-3', { id: 42 })"> 登录42</button> -->

  </div>
  <div v-if="page == 4">
    <!-- 
        <button @click="sendFn('header4-1')"> 订单列表</button>
        <button @click="sendFn('header4-1-1', { index: 4 })"> 订单详情</button>
        <button @click="sendFn('header4-2')"> 退款单</button>
        <button @click="sendFn('header4-3',)"> 核销订单</button> -->

  </div>
  <div v-if="page == 5">

    <!-- <button @click="sendFn('header5-1')"> 提现记录</button>
        <button @click="sendFn('header5-2', { index: 4 })"> 资金记录</button>
        <button @click="sendFn('header5-3')"> 账单管理</button>
        <button @click="sendFn('header5-3-1',)"> 日账单</button>
        <button @click="sendFn('header5-3-2',)"> 月账单</button>
        <button @click="sendFn('header5-3-3', {time:'2023-11-16'})"> 详情</button>
        <button @click="sendFn('header5-3-4')"> 关闭弹窗</button> -->

  </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>
button {
  padding: 10px;
  margin: 10px;
}
</style>