完成

Author: githyw

src/assets/img/header_border_dark.png

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        {{nowDate}}{{nowWeek}} {{nowTime}}
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "time",
+    data(){
+      return {
+        nowDate: "",    // 当前日期
+        nowTime: "",    // 当前时间
+        nowWeek: ""     // 当前星期
+      }
+    },
+    destroyed() {
+      if (this.timer) {  // 注意在vue实例销毁前，清除我们的定时器
+        clearInterval(this.timer);
+      }
+    },
+    methods:{
+      dealWithTime(data) { // 获取当前时间
+        let formatDateTime;
+        let Y = data.getFullYear();
+        let M = data.getMonth() + 1;
+        let D = data.getDate();
+        let H = data.getHours();
+        let Min = data.getMinutes();
+        let S = data.getSeconds();
+        let W = data.getDay();
+        H = H < 10 ? "0" + H : H;
+        Min = Min < 10 ? "0" + Min : Min;
+        S = S < 10 ? "0" + S : S;
+        switch (W) {
+          case 0:
+            W = "日";
+            break;
+          case 1:
+            W = "一";
+            break;
+          case 2:
+            W = "二";
+            break;
+          case 3:
+            W = "三";
+            break;
+          case 4:
+            W = "四";
+            break;
+          case 5:
+            W = "五";
+            break;
+          case 6:
+            W = "六";
+            break;
+          default:
+            break;
+        }
+        this.nowDate = Y + "年" + M + "月" + D + "日 ";
+        this.nowWeek = "周" + W ;
+        this.nowTime = H + ":" + Min + ":" + S;
+      },
+    },
+    mounted() {
+      this.dealWithTime(new Date())
+      this.timer = setInterval(()=> {
+        this.dealWithTime(new Date()) // 修改数据date
+      }, 500)
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

src/assets/img/header_border_light.png

@@ -4,10 +4,14 @@ import router from './router'
 import store from './store'
 import axios from 'axios'
 import echarts from 'echarts'
+import SocketService from './utils/socket_service'
 import './assets/font/iconfont.css'
 import './assets/css/jlobal.less'
+import 'assets/theme/vintage'
 
+SocketService.Instance.connect()
 axios.defaults.baseURL = 'http://localhost:8888/api/'
+Vue.prototype.$socket = SocketService.Instance
 Vue.prototype.$http = axios
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echarts

src/assets/img/logo_dark.png

@@ -0,0 +1,21 @@
+import axios from 'axios'
+
+export function request(config) {
+  const instance = axios.create({
+    baseURL: 'http://haoyingwang.3vfree.net/',
+    timeout:5000
+  })
+  instance.interceptors.request.use(config => {
+    return config
+  }, err => {
+    console.log(err);
+  })
+  instance.interceptors.response.use(
+    res => {
+      return res.data
+    }, err => {
+      console.log(err);
+    }
+  )
+  return instance(config)
+}

src/assets/img/logo_light2.png

@@ -0,0 +1,2 @@
+import { request } from './request'
+

src/assets/img/qiehuan_dark.png

@@ -4,6 +4,9 @@ const Home = () =>import('../views/Home/Home')
 const SellerPage = () => import('../views/Seller/SellerPage')
 const TrendPage = ()=> import('../views/Trend/TrendPage')
 const MapPage = () => import('../views/Map/MapPage')
+const RankPage = () => import('../views/Rank/RankPage')
+const HotPage = () => import('../views/Hot/HotPage')
+const StockPage = () => import('../views/Stock/StockPage')
 
 Vue.use(VueRouter)
 
@@ -32,6 +35,21 @@ const routes = [
     name: 'MapPage',
     component: MapPage
   },
+  {
+    path: '/RankPage',
+    name: 'RankPage',
+    component: RankPage
+  },
+  {
+    path: '/HotPage',
+    name: 'HotPage',
+    component: HotPage
+  },
+  {
+    path: '/StockPage',
+    name: 'StockPage',
+    component: StockPage
+  },
 
 ]
 

src/assets/img/qiehuan_light.png

@@ -5,8 +5,16 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    theme:'chalk'
   },
   mutations: {
+    changeTheme(state){
+      if(state.theme === 'chalk'){
+        state.theme = 'vintage'
+      }else{
+        state.theme = 'chalk'
+      }
+    }
   },
   actions: {
   },

src/components/common/time.vue

@@ -0,0 +1,44 @@
+const name2pinyin = {
+  安徽: 'anhui',
+  陕西: 'shanxi1',
+  澳门: 'aomen',
+  北京: 'beijing',
+  重庆: 'chongqing',
+  福建: 'fujian',
+  甘肃: 'gansu',
+  广东: 'guangdong',
+  广西: 'guangxi',
+  贵州: 'guizhou',
+  海南: 'hainan',
+  河北: 'hebei',
+  黑龙江: 'heilongjiang',
+  河南: 'henan',
+  湖北: 'hubei',
+  湖南: 'hunan',
+  江苏: 'jiangsu',
+  江西: 'jiangxi',
+  吉林: 'jilin',
+  辽宁: 'liaoning',
+  内蒙古: 'neimenggu',
+  宁夏: 'ningxia',
+  青海: 'qinghai',
+  山东: 'shandong',
+  上海: 'shanghai',
+  山西: 'shanxi',
+  四川: 'sichuan',
+  台湾: 'taiwan',
+  天津: 'tianjin',
+  香港: 'xianggang',
+  新疆: 'xinjiang',
+  西藏: 'xizang',
+  云南: 'yunnan',
+  浙江: 'zhejiang'
+}
+
+export function getProvinceMapInfo (arg) {
+  const path = `map/province/${name2pinyin[arg]}.json`
+  return {
+    key: name2pinyin[arg],
+    path: path
+  }
+}

src/main.js

@@ -0,0 +1,70 @@
+export default class SocketService{
+
+  static instanct = null
+  static get Instance(){
+    if(!this.instanct){
+      this.instanct = new SocketService()
+    }
+    return this.instanct
+  }
+
+  ws = null
+  callBackMapping = {}
+  connected = false
+  sendRetryCount = 0
+  connectRetryCount = 0
+
+  connect(){
+    if(!window.WebSocket){
+      return console.log('您的浏览器不支持WebSocket')
+    }
+    this.ws = new WebSocket('ws://localhost:9998')
+
+    this.ws.onopen = () =>{
+      this.connectRetryCount = 0
+      console.log('连接服务器成功')
+      this.connected = true
+    }
+    this.ws.onclose = () =>{
+      this.connected = false
+      console.log('连接服务器失败')
+      this.connectRetryCount++
+      setTimeout(()=>{
+        this.connect()
+      },this.connectRetryCount * 500)
+    }
+    this.ws.onmessage = msg =>{
+      console.log('从服务器获得数据')
+      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'){
+
+        }
+      }
+    }
+  }
+  registerCallBack ( socketType,callBack ){
+    this.callBackMapping[socketType] = callBack
+  }
+  unRegisterCallBack(socketType){
+    this.callBackMapping[socketType] = null
+  }
+  send(data){
+    this.sendRetryCount = 0
+    if(this.connected){
+      this.ws.send(JSON.stringify(data))
+    }else{
+      this.sendRetryCount++
+      setTimeout(()=>{
+        this.send(data)
+      },this.sendRetryCount * 500)
+    }
+  }
+}

src/network/request.js

@@ -0,0 +1,20 @@
+const theme = {
+  chalk:{
+    backgroundColor:'#161522',
+    titleColor:'#ffffff',
+    themeSrc:'qiehuan_dark.png',
+    headerBorderSrc:'header_border_dark.png'
+  },
+  vintage:{
+    backgroundColor: '#eeeeee',
+    titleColor: '#000000',
+    themeSrc:'qiehuan_light.png',
+    headerBorderSrc:'header_border_light.png'
+
+  }
+
+}
+
+export function getThemeValue(themeName) {
+  return theme[themeName]
+}