全栈Echarts电商平台数据可视化大屏实战项目

node -v

npm init -y
npm install koa

npm set registry https://registry.npm.taobao.org/

const Koa = require('koa') // 导入构造方法
const app = new Koa() // 通过构造方法，创建实例对象

app.use((ctx, next) => {
  ctx.response.body = 'Hello Echarts'
})

app.listen(9898)

node app.js

app.use(async (ctx, next) => {
  // 刚进入中间件想做的事情
  await next()
  // 内层所有中间件结束之后想做的事情
})

npm init -y
npm install koa

// 服务器的入口文件
// 1.创建KOA的实例对象
const Koa = require('koa')
const app = new Koa()
// 2.绑定中间件
// 绑定第一层中间件
// 绑定第二层中间件
// 绑定第三层中间件
// 3.绑定端口号 9898
app.listen(9898)

// app.js 文件
// 绑定第一层中间件
const respDurationMiddleware = require('./middleware/koa_response_duration') app.use(respDurationMiddleware)


// koa_response_duration.js 文件
// 计算服务器消耗时长的中间件
module.exports = async (ctx, next) => {
// 记录开始时间
const start = Date.now()
// 让内层中间件得到执行
await next()
// 记录结束的时间
const end = Date.now()
// 设置响应头 X-Response-Time
const duration = end - start
// ctx.set 设置响应头
ctx.set('X-Response-Time', duration + 'ms') }

// app.js 文件
// 绑定第二层中间件 const respHeaderMiddleware = require('./middleware/koa_response_header')
app.use(respHeaderMiddleware)

// koa_response_header.js 文件
// 设置响应头的中间件
module.exports = async (ctx, next) => {
  const contentType = 'application/json; charset=utf-8'
  ctx.set('Content-Type', contentType)
  await next()
}

// 获取 URL 请求路径
const url = ctx.request.url

// 根据URL请求路径,拼接出文件的绝对路径
let filePath = url.replace('/api', '')
filePath = '../data' + filePath + '.json'
filePath = path.join(__dirname, filePath)

ctx.response.body

// app.js 文件
// 绑定第三层中间件 const respDataMiddleware = require('./middleware/koa_response_data')
app.use(respDataMiddleware)

// koa_response_data.js 文件
// 处理业务逻辑的中间件,读取某个json文件的数据
const path = require('path')
const fileUtils = require('../utils/file_utils')

module.exports = async (ctx, next) => {
  // 根据url
  const url = ctx.request.url // /api/seller ../data/seller.json
  let filePath = url.replace('/api', '') // /seller
  filePath = '../data' + filePath + '.json' // ../data/seller.json
  filePath = path.join(__dirname, filePath)
  try {
    const ret = await fileUtils.getFileJsonData(filePath)
    ctx.response.body = ret
  } catch (error) {
    const errorMsg = {
      message: '读取文件内容失败, 文件资源不存在',
      status: 404,
    }
    ctx.response.body = JSON.stringify(errorMsg)
  }
  console.log(filePath)
  await next()
}

// file_utils.js 文件
// 读取文件的工具方法
const fs = require('fs')

module.exports.getFileJsonData = (filePath) => {
  // 根据文件的路径, 读取文件的内容
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf-8', (error, data) => {
      if (error) {
        // 读取文件失败
        reject(error)
      } else {
        // 读取文件成功
        resolve(data)
      }
    })
  })
}

app.use(async (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', '*')
  ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE')
  await next()
})

npm install -g @vue/cli

vue create screen

cd screen
npm run serve

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view />
  </div>
</template>

<style lang="less"></style>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/screen',
  },
  {
    path: '/screen',
    component: () => import('@/views/screenPage'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

// 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的
// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件
module.exports = {
  devServer: {
    port: 8999, // 端口号配置
    // open: true // 自动打开浏览器
  },
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      config['performance'] = {
        //打包文件大小配置
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000,
      }
    }
  },
}

// 将全局的echarts对象挂载到Vue的原型对象上
// 在别的组件中使用 this.$echarts
Vue.prototype.$echarts = window.echarts

npm install axios

// 将axios挂载到Vue的原型对象上
// 在别的组件中使用 this.$http
Vue.prototype.$http = axios

<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style lang="less" scoped></style>

<template>
  <div class="com-page">
    <Seller />
  </div>
</template>

<script>
  import Seller from '@/components/Seller'

  export default {
    components: {
      Seller,
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style lang="less" scoped></style>

const routes = [
  {
    path: '/sellerPage',
    component: () => import('@/views/sellerPage'),
  },
]

html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.com-page,
.com-container,
.com-chart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  border-radius: 20px;
}

.com-container {
  position: relative;
}

import './assets/css/global.less'

<script>
  import { mapState } from 'vuex'
  import { getThemeValue } from '@/utils/theme_utils'
  export default {
    data() {
      return {
        myChart: null, // echarts实例对象
        allData: null, // 服务器获取的所有数据
      }
    },
    mounted() {
      this.initChart()
      this.getData()
    },
    methods: {
      // 初始化echartsInstance对象
      initChart() {
        this.myChart = this.$echarts.init(this.$refs.seller_ref, this.theme)
      },
      // 获取服务端的数据
      async getData() {
        const { data: ret } = await this.$http.get('seller')
        // console.log("获取后端数据===", ret);
        this.allData = ret
        // 对数据排序
        this.allData.sort((a, b) => {
          return a.value - b.value
        })
        this.updateChart()
      },
      // 更新图表
      updateChart() {
        const sellerName = showData.map((item) => {
          return item.name
        })

        const sellerValue = showData.map((item) => {
          return item.value
        })

        const dataOption = {
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            data: sellerName,
          },
          series: [
            {
              type: 'bar',
              data: sellerValue,
            },
          ],
        }

        this.myChart.setOption(dataOption)
      },
    },
  }
</script>

// src/components/Seller.vue
methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.seller_ref, 'dark');
      // 对图表对象进行鼠标事件的监听
      this.myChart.on("mouseover", () => {
        clearInterval(this.timer);
      });
      this.myChart.on("mouseout", () => {
        this.startInterval();
      });
    }
}

//  src/assets/css/global.less
canvas {
  border-radius: 20px;
}

    // 标题的位置和颜色
    const initOption = {
        title: {
          text: "▎ 商家销售统计",
          textStyle: {
            fontSize: 66,
          },
          left: 20,
          top: 20,
        }
    }

    // 坐标轴的大小
    const initOption = {
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, // 距离包含坐标轴上的文字
        }
    }

    // 工具提示和背景
    const initOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'shadow'
          },
        }
    }

    // 文字显示和位置
    const initOption = {
      series: [
        label: {
          show: true,
          position: "right",
          textStyle: {
            color: '#fff',
          },
        }
      ]
    }

    // 柱宽度和柱圆角的实现
    const initOption = {
        series: [
          {
            barWidth: 66,
                itemStyle: {
                  barBorderRadius: [0, 33, 33, 0],
                },
            }
         ]
    }

    // 柱颜色渐变的实现，线性渐变可以通过 LinearGradient 进行实现
    // LinearGradient 需要传递5个参数, 前四个代表两个点的相对位置，第五个参数代表颜色变化的范围
    // 0, 0, 1, 0 代表的是从左往右的方向
    const initOption = {
        series: [
          {
                itemStyle: {
                  barBorderRadius: [0, 33, 33, 0],
                  // 指明颜色渐变的方向
                  // 指明不同百分比之下颜色的值
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#5052EE", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#AB6EE5", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
            }
         ]
    }

mounted() {
    window.addEventListener("resize", this.screenAdapter);
}

destroyed() {
    // 在组件销毁时，需将监听器注销
    window.removeEventListener("resize", this.screenAdapter);
}

// 当浏览器的大小发生变化时，会调用的方法，来完成屏幕的适配
methods: {
    screenAdapter() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
    }
}

// 标题大小、背景大小、柱宽度、圆角大小
methods: {
    screenAdapter() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
          },
        ],
      };
      this.myChart.setOption(adapterOption);
      // 手动调用图表对象的resize才能生效
      this.myChart.resize();
    }
}

// trendPage.vue // 针对于 /trendPage 这条路径而显示出来的 在这个组件中, 通过子组件注册的方式,
要显示出Trend.vue这个组件
<template>
  <div class="com-page">
    <Trend />
  </div>
</template>

<script>
  import Trend from '@/components/Trend'

  export default {
    components: {
      Trend,
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style lang="less" scoped></style>

// Trend.vue
<template>
  <div class="com-container">
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myChart: null,
        allData: null,
      }
    },
    created() {},
    mounted() {
      this.initChart()
      this.getData()
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter)
    },
    methods: {
      initChart() {
        this.myChart = this.$echarts.init(this.$refs.trend_ref, 'dark')
        const initOption = {}
        this.myChart.setOption(initOption)
      },
      async getData() {
        const { data: ret } = await this.$http.get('trend')
        this.allData = ret
        this.updateChart()
      },
      updateChart() {
        const dataOption = {}
        this.myChart.setOption(dataOption)
      },
      screenAdapter() {
        const adapterOption = {}
        this.myChart.setOption(adapterOption)
        this.myChart.resize()
      },
    },
  }
</script>

<style lang="less" scoped></style>

// router/index.js
const routes = [
  {
    path: '/trendPage',
    component: () => import('@/views/trendPage'),
  },
]

    // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
    async getData() {
      const { data: ret } = await this.$http.get("trend");
      this.allData = ret;
      this.updateChart();
    }

    updateChart() {
      // 类目轴数据
      const timeArr = this.allData.common.month;
      // y轴数据 series下的数据
      // map代表地区销量趋势
      // seller代表商家销量趋势
      // commodity代表商品销量趋势
      const valueArr = this.allData.map.data;
      // 图表数据, 一个图表中显示5条折线图
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          smooth: true,
          stack: 'map' // stack值相同, 可以形成堆叠图效果
        };
      });
      // 图例数据
      const legendArr = valueArr.map((item) => {
        return item.name;
      });
      const dataOption = {
        xAxis: {
          data: timeArr,
        },
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.myChart.setOption(dataOption);
    }

const initOption = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
  },
}

    initChart() {
      this.myChart = this.$echarts.init(this.$refs.trend_ref, 'dark');
    }

const initOption = {
  // 坐标轴大小和位置
  grid: {
    left: '3%',
    top: '30%',
    right: '4%',
    bottom: '1%',
    containLabel: true,
  },
  // 工具提示
  tooltip: {
    trigger: 'axis',
  },
  // 图例位置和形状
  legend: {
    left: 20,
    top: '15%',
    icon: 'circle',
  },
}

    updateChart() {
          // 半透明颜色值
          const colorArr1 = [
            "rgba(73, 146, 255, .5)",
            "rgba(124, 255, 178, .5)",
            "rgba(253, 221, 96, .5)",
            "rgba(255, 110, 118, .5)",
            "rgba(88, 217, 249, .5)",
          ];
          // 全透明颜色值
          const colorArr2 = [
            "rgba(73, 146, 255, 0)",
            "rgba(124, 255, 178, 0)",
            "rgba(253, 221, 96, 0)",
            "rgba(255, 110, 118, 0)",
            "rgba(88, 217, 249, 0)",
          ];
          const seriesArr = valueArr.map((item, index) => {
            return {
              // 区域面积只需要给series的每一个对象增加一个 areaStyle 即可
              areaStyle: {
                // 颜色渐变可以通过 LinearGradient 进行设置, 颜色渐变的方向从上往下
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorArr1[index],
                  },
                  {
                    offset: 1,
                    color: colorArr2[index],
                  },
                ]),
              },
            };
          });
        }

<script>
  export default {
    data() {
      return {
        titleFontSize: 0,
      }
    },
    methods: {
      screenAdapter() {
        this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6
      },
    },
  }
</script>

<template>
  <div class="com-container">
    <div class="title" :style="comStyle">
      <span>{{ '▎ ' + showTitle }}</span>
      <span
        class="iconfont icon-arrow-down title-icon"
        :style="comStyle"
        @click="showChoice = !showChoice"
      ></span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        titleFontSize: 0,
      }
    },
    computed: {
      // 设置给标题的样式
      comStyle() {
        return {
          fontSize: this.titleFontSize + 'px',
        }
      },
    },
  }
</script>

methods: {
    screenAdapter() {
      this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize,
          textStyle: {
            fontSize: this.titleFontSize / 2,
          },
        },
      };
      this.myChart.setOption(adapterOption);
      this.myChart.resize();
    }
}

    npm install ws -S

const WebSocket = require('ws')
// 创建websocket服务端的对象，绑定端口号为9998
const wss = new WebSocket.Server({
  port: 9998,
})

wss.on('connection', (client) => {
  console.log('有客户端连接...')
  client.on('message', (msg) => {
    console.log('客户端发送数据过来了')
    // 发送数据给客户端
    client.send('hello socket')
  })
})

const webSocketService = require('./service/web_socket_service')
// 开启服务端的监听，监听客户端的连接
// 当某一个客户端连接成功之后，就会对这个客户端进行message事件的监听
webSocketService.listen()

    {
      "action": "getData",
      "socketType": "trendData",
      "chartName": "trend",
      "value": ""
    }
    // 或者
    {
      "action": "fullScreen",
      "socketType": "fullScreen",
      "chartName": "trend",
      "value": true
    }
    // 或者
    {
      "action": "themeChange",
      "socketType": "themeChange",
      "chartName": "",
      "value": "dark"
    }

    {
        "action": "getData",
        "socketType": "trendData",
        "chartName": "trend",
        "value": "",
        "data": "从文件读取出来的json文件的内容"
    }
    // 或者
    {
        "action": "fullScreen",
        "socketType": "fullScreen",
        "chartName": "trend",
        "value": true
    }
    // 或者
     {
        "action": "themeChange",
        "socketType": "themeChange",
        "chartName": "",
        "value": "dark"
    }

const path = require('path')
const fileUtils = require('../utils/file_utils')
const WebSocket = require('ws')
// 创建websocket服务端的对象，绑定端口号为9998
const wss = new WebSocket.Server({
  port: 9998,
})

module.exports.listen = () => {
  // 对客户端的连接事件进行监听
  // client代表是客户端的连接socket对象
  wss.on('connection', (client) => {
    console.log('有客户端连接成功...')
    // 对客户端的连接对象进行message事件的监听
    // msg由客户端发送给服务端的数据
    client.on('message', async (msg) => {
      console.log('客户端发送数据给服务端===', msg)
      let payload = JSON.parse(msg)
      const action = payload.action
      if (action === 'getData') {
        let filePath = '../data/' + payload.chartName + '.json'
        // trend seller map rank hot stock
        // payload.chartName
        filePath = path.join(__dirname, filePath)
        const ret = await fileUtils.getFileJsonData(filePath)
        // 需要在服务端获取到数据的基础之上，增加一个data的字段
        // data所对应的值，就是某个json文件的内容
        payload.data = ret
        client.send(JSON.stringify(payload))
      } else {
        // 原封不动的将所接收到的数据转发给每一个处于连接状态的客户端
        // wss.clients 所有客户端的连接
        wss.clients.forEach((client) => {
          client.send(msg)
        })
      }
      // 服务端向客户端发送数据
      // client.send('hello socket form backend');
    })
  })
}

export default class SocketService {
  // 单例模式

  static instance = null
  static get Instance() {
    if (!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }
}

    // 实例属性ws和服务端连接的socket对象
    ws = null;

    // 定义连接服务器的方法
    connect () {
        // 连接服务器
        if (!window.WebSocket) {
          return console.log('您的浏览器不支持websocket');
        }
        this.ws = new WebSocket(`ws://106.55.168.13:9998/ws/webSocket`);
    }

    connect() {
      if (!window.WebSocket) {
        return console.log('您的浏览器不支持 WebSocket!')
      }
      this.ws = new WebSocket('ws://localhost:9998')
      // 监听连接成功
      this.ws.onopen = () => {
        console.log('WebSocket 连接成功')
      }
      // 服务器连接不成功，服务器关闭了连接
      this.ws.onclose = e => {
        console.log('服务器关闭了连接')
      }
      // 监听接收消息
      this.ws.onmessage = msg => {
        console.log('WebSocket 接收到数据')
      }
    }

export default class SocketService {
  // 业务类型和回调函数的对于关系
  callBackMapping = {}
  /*** socketType
   * trendData sellerData mapData rankData hotData stockData
   * fullScreen
   * themeChange
   * callBack
   * 回调函数
   */
  registerCallBack(socketType, callBack) {
    // 往 callBackMap中存放回调函数
    this.callBackMapping[socketType] = callBack
  }
  unRegisterCallBack(socketType) {
    this.callBackMapping[socketType] = null
  }
}

    // 在 main.js 中连接服务器端
    import SocketService from '@/utils/socket_service' SocketService.Instance.connect()

    // 将 SocketService 实例对象挂载到 Vue 的原型对象上
    Vue.prototype.$socket = SocketService.Instance

export default class SocketService {
  send(data) {
    console.log('发送数据给服务器:')
    this.ws.send(JSON.stringify(data))
  }
}

mounted() {
    // 当socket来数据的时候, 会调用getData这个函数
    this.$socket.registerCallBack('trendData', this.getData)
    // 往 socket 发送数据, 目的是想让服务端传输销量趋势这个模块的数据
    this.initChart();
    // this.getData();
    // 发送数据给服务端，告诉服务端，前端现在需要数据
    this.$socket.send({
      action: "getData",
      socketType: "trendData",
      chartName: "trend",
      value: ""
    })
}
// action的值不变，都是getData
// socketType的可选值有：trendData,sellerData,mapData,rankData,hotData,stockData
// chartName的可选值有: trend,seller,map,rank,hot,stock

destroyed () {
    this.$socket.unRegisterCallBack('trendData')
}

    // 标识是否连接成功
    connected = false;

    // 记录重试的次数
    sendRetryCount = 0;

    // 发送数据的方法
    send (data) {
        // 判断现在是否有连接成功
        if (this.connected) {
          this.sendRetryCount = 0;
          this.ws.send(JSON.stringify(data));
        } else {
          this.sendRetryCount++;
          setTimeout(() => {
            this.send(data);
          }, this.sendRetryCount * 500)
        }
    }

    // 定义连接服务器的方法
    connect () {
        // 连接成功的事件
        this.ws.onopen = () => {
          console.log('连接服务端成功');
          this.connected = true;
          this.connectRetryCount = 0;
        }
    }

    // 定义连接服务器的方法
    connect () {
        // 得到服务端发送过来的数据
        this.ws.onmessage = msg => {
          // console.log('从服务端获取到的数据===', msg);
          // 真正服务端发送过来的原始数据时在msg中的data字段
          const recvData = JSON.parse(msg.data);
          const socketType = recvData.socketType;
          // 判断回调函数是否存在
          if (this.callBackMapping[socketType]) {
            const action = recvData.action
            if (action === 'getData') {
              const realData = JSON.parse(recvData.data);
              this.callBackMapping[socketType].call(this, realData);
            } else if (action === 'fullScreen') {
              this.callBackMapping[socketType].call(this, recvData);
            } else if (action === 'themeChange') {
              this.callBackMapping[socketType].call(this, recvData);
            }
          }
        }
    }

    connect() {
        // 监听连接成功
        this.ws.onopen = () => {
          // 连接成功之后, 重置重连次数
          this.connectRetryCount = 0;
        }
        // 连接服务端失败
        // 当连接成功之后，服务端关闭的情况
        this.ws.onclose = () => {
          console.log('连接服务端失败');
          this.connected = false;
          this.connectRetryCount++;
          setTimeout(() => {
            this.connect();
          }, this.connectRetryCount * 500)
        }
    }

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/screen',
  },
  {
    path: '/screen',
    component: () => import('@/views/screenPage'),
  },
]

// screenPage.vue
<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="" />
      </div>
      <span class="logo">
        <img :src="logoSrc" alt="" />
      </span>
      <span class="title">电商平台数据大屏实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme" />
        <span class="datetime">{{ timeValue }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <!-- 销量趋势图表 -->
          <Trend ref="trend" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('trend')"
              :class="[
                'iconfont',
                fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('seller')"
              :class="[
                'iconfont',
                fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <!-- 商家分布图表 -->
          <map ref="map" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('map')"
              :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('rank')"
              :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <hot ref="hot" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('hot')"
              :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('stock')"
              :class="[
                'iconfont',
                fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  import Hot from '@/components/Hot.vue'
  import Map from '@/components/Map.vue'
  import Rank from '@/components/Rank.vue'
  import Seller from '@/components/Seller.vue'
  import Stock from '@/components/Stock.vue'
  import Trend from '@/components/Trend.vue'
  import { mapState } from 'vuex'
  import { getThemeValue } from '@/utils/theme_utils'
  export default {
    components: {
      Hot,
      Map,
      Rank,
      Seller,
      Stock,
      Trend,
    },
    data() {
      return {
        // 定义每一个图表的全屏状态
        fullScreenStatus: {
          trend: false,
          seller: false,
          map: false,
          rank: false,
          hot: false,
          stock: false,
        },
        timer: null,
        timeValue: '',
      }
    },
    created() {
      // 注册接收到数据的回调函数
      this.$socket.registerCallBack('fullScreen', this.recvData)
      this.$socket.registerCallBack('themeChange', this.recvThemeChange)
    },
    destroyed() {
      this.$socket.unRegisterCallBack('fullScreen')
      this.$socket.unRegisterCallBack('themeChange')
      clearInterval(this.timer)
    },
    mounted() {
      this.displayTime()
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.displayTime()
      }, 1000)
    },
    methods: {
      displayTime() {
        //获取系统当前的年、月、日、小时、分钟、毫秒
        let date, year, month, day, h, m, s
        date = new Date()
        year = date.getFullYear()
        month = date.getMonth() + 1
        day = date.getDate()
        h = date.getHours()
        m = date.getMinutes()
        s = date.getSeconds()
        month = month < 10 ? '0' + month : month
        day = day < 10 ? '0' + day : day
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        return (this.timeValue = year + '-' + month + '-' + day + '  ' + h + ':' + m + ':' + s)
      },
      changeSize(chartName) {
        console.log(chartName)
        // 将数据发送给服务端
        const targetValue = !this.fullScreenStatus[chartName]
        this.$socket.send({
          action: 'fullScreen',
          socketType: 'fullScreen',
          chartName: chartName,
          value: targetValue,
        })
      },
      // 接收到全屏数据之后的处理
      recvData(data) {
        // 取出是哪一个图表需要进行切换
        const chartName = data.chartName
        // 取出, 切换成什么状态
        const targetValue = data.value
        this.fullScreenStatus[chartName] = targetValue
        this.$nextTick(() => {
          this.$refs[chartName].screenAdapter()
        })
      },
      handleChangeTheme() {
        // 修改VueX中数据
        this.$socket.send({
          action: 'themeChange',
          socketType: 'themeChange',
          chartName: '',
          value: '',
        })
      },
      recvThemeChange() {
        this.$store.commit('changeTheme')
      },
    },
    computed: {
      logoSrc() {
        return '/static/img/' + getThemeValue(this.theme).logoSrc
      },
      headerSrc() {
        return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
      },
      themeSrc() {
        return '/static/img/' + getThemeValue(this.theme).themeSrc
      },
      containerStyle() {
        return {
          backgroundColor: getThemeValue(this.theme).backgroundColor,
          color: getThemeValue(this.theme).titleColor,
        }
      },
      ...mapState(['theme']),
    },
  }
</script>

<style lang="less" scoped>
  // 全屏样式的定义
  .fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 9999;
  }

  .screen-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: #2e2e2f;
    color: #fff;
    box-sizing: border-box;
  }
  .screen-header {
    width: 100%;
    font-size: 20px;
    position: relative;
    > div {
      img {
        width: 100%;
      }
    }
    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
    .title-right {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-80%);
    }
    .qiehuan {
      width: 28px;
      height: 21px;
      cursor: pointer;
    }
    .datetime {
      font-size: 15px;
      margin-left: 10px;
    }
    .logo {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-80%);
      img {
        height: 35px;
        width: 154px;
      }
    }
  }
  .screen-body {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 10px;
    .screen-left {
      height: 100%;
      width: 27.6%;
      #left-top {
        height: 53%;
        position: relative;
      }
      #left-bottom {
        height: 31%;
        margin-top: 25px;
        position: relative;
      }
    }
    .screen-middle {
      height: 100%;
      width: 41.5%;
      margin-left: 1.6%;
      margin-right: 1.6%;
      #middle-top {
        width: 100%;
        height: 56%;
        position: relative;
      }
      #middle-bottom {
        margin-top: 25px;
        width: 100%;
        height: 28%;
        position: relative;
      }
    }
    .screen-right {
      height: 100%;
      width: 27.6%;
      #right-top {
        height: 46%;
        position: relative;
      }
      #right-bottom {
        height: 38%;
        margin-top: 25px;
        position: relative;
      }
    }
  }
  .resize {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }
</style>