kengee-data-screen/src/utils/inject.js

import {dicts} from "@/utils/dicts";
import axios from 'axios'
import Vue from 'vue'

window.axios = axios
const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen"
const libs = [
  `${KENGEE_CDN_BASE}/js/pinyin.min.js`,
  `${KENGEE_CDN_BASE}/js/dayjs.min.js`,
  `${KENGEE_CDN_BASE}/js/Tween.js`,
  `${KENGEE_CDN_BASE}/js/three/three.min.js`,
  `${KENGEE_CDN_BASE}/js/d3-array.min.js`,
  `${KENGEE_CDN_BASE}/js/d3-geo.min.js`,
  '/presource/datascreen/js/ezuikit-flv/ezuikit.js',
  '/presource/datascreen/js/clappr.min.js',
  '/presource/datascreen/js/simplebar/simplebar.min.js',
]
const css = [
  "/presource/datascreen/js/simplebar/simplebar.css"
]
window.$loadScript = (type = 'js', url, dom = "body") => {
  let flag = false;
  return new Promise((resolve) => {
    const head = dom == 'head' ? document.getElementsByTagName('head')[0] : document.body;
    for (let i = 0; i < head.children.length; i++) {
      let ele = head.children[i]
      if ((ele.src || '').indexOf(url) !== -1) {
        flag = true;
        resolve();
      }
    }
    if (flag) return;
    let script;
    if (type === 'js') {
      script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
    } else if (type === 'css') {
      script = document.createElement('link');
      script.rel = 'stylesheet';
      script.type = 'text/css';
      script.href = url;
    }
    head.appendChild(script);
    script.onload = function () {
      resolve();
    };
  });
};
window.$glob = {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJoLXVzZXItaWQiOiIxODA4MDM2NzI3NzQzNDU1MjMyIiwiaC1yb2xlLWlkIjoiMTgwODAzNjg5NDQxMjUxMzI4MCIsImV4cCI6MTc1MTQ0NDg0MywibmJmIjoxNzE5OTA4ODQzfQ.Wi6wzArP79mFj3XEzSendOfWHJc1mNuSAlAC1W4zMzI"}
window.$dicts = dicts
window.$waitFor = (target, t = 500) => new Promise(resolve => {
  const interval = setInterval(() => {
    if (target) {
      clearInterval(interval)
      resolve(target)
    }
  }, t)
  if (target) {
    clearInterval(interval)
    resolve(target)
  }
})
window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear-gradient(-45deg, ${color} 0, ${color} 10%, transparent 10%, transparent 50%,${color} 50%, ${color} 60%, transparent 60%, transparent);background-size: 10px 10px;`

Vue.prototype.$marketBoard = Vue.observable({
  screenId: '5b1849ac-4fc3-451a-844c-3362b47341ef',
  search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}
})
Vue.prototype.$multipleStoreBoard = Vue.observable({
  search: {"groupCodeList": [], "hourNum": "", type: "1"}
})
Vue.prototype.$storeBoard = Vue.observable({
  currentDate: "20240705",
  dialog: false,
  aroundStock: [],
  query: {},
  search: {}
})
Vue.component("HlsPlayer", {
  render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
  props: {
    id: {default: ""},
    url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    const {Clappr, EzuikitFlv, EZUIKit} = window
    if (EzuikitFlv && this.url) {
      const {id} = this.$props
      this.$el.id = id
      this.player = new EzuikitFlv({
        container: id,
        url: this.url,
        decoder: "/presource/datascreen/js/ezuikit-flv/decoder.js"
      })
      this.player.play()
    }
    // if (EZUIKit && this.url) {
    //   const {id} = this.$props
    //   this.$el.id = id
    //   this.player = new EZUIKit.EZUIKitPlayer({
    //     id, // 视频容器ID
    //     width: '100%', // 播放器宽度，播放器高度会按比例缩放
    //     height: '100%',
    //     accessToken: 'at.c1lrqlq7ae1hj18tbpe9q8ip4hhrbfcw-7ax2lsg0rz-06anrcm-tcd5wjaz9',
    //     url: 'ezopen://open.ys7.com/BA9983755/1.live',
    //   })
    //   this.player.play()
    // }

    // if (Clappr && this.url) {
    //   this.player = new Clappr.Player({
    //     mute: true, //静音为true
    //     width: '100%',
    //     height: '100%',
    //     source: this.url,
    //     autoPlay: true,
    //     disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
    //     hideMediaControl: true, //禁用媒体控制自动隐藏
    //     hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
    //     hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
    //     exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
    //     mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
    //   })
    //   this.player.attachTo(this.$el)
    // }
  },
  beforeDestroy() {
    this.player?.destroy()
  }
})
Vue.component("scrollTable", {
  props: {
    tableData: {default: () => []},
    columns: {default: () => []},
    config: {default: () => ({})}
  },
  data() {
    return {
      timer: null,
      scroll: null
    }
  },
  render(h) {
    const {config, tableData, columns} = this.$props
    return h('el-table', {
        props: {
          headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0,
          ...config, data: tableData, height: '100%'
        }, class: 'scrollTable'
      },
      columns.map(col => h("tableColumn", {props: {column: col}}))
    )
  },
  methods: {
    initScroll() {
      const {SimpleBar} = window
      const dom = this.$el.querySelector('.el-table__body-wrapper')
      this.scroll = new SimpleBar(dom)
      dom.addEventListener('mouseover', this.stopAutoScroll)
      dom.addEventListener('mouseout', this.autoScroll)
      // this.scroll.refresh();
    },
    autoScroll() {
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        const dom = this.$el.querySelector('.simplebar-content-wrapper')
        const max = dom.scrollHeight - dom.clientHeight
        if (dom.scrollTop + 30 >= max) dom.scrollTop = 0
        else dom.scrollTop += 30
      }, 1000)
    },
    stopAutoScroll() {
      if (this.timer) clearInterval(this.timer)
    }
  },
  mounted() {
    this.initScroll()
    this.autoScroll()
  },
  beforeDestroy() {
    this.stopAutoScroll()
    this.scroll?.destroy()
    const dom = this.$el.querySelector('.el-table__body-wrapper')
    dom.removeEventListener("mouseover", this.stopAutoScroll)
    dom.removeEventListener("mouseout", this.autoScroll)
  }
})
Vue.component("tableColumn", {
  props: {
    column: {default: () => ({})}
  },
  render(h) {
    const config = this.$props.column
    return h('el-table-column', {props: {...config, label: `${config.label}` || "-"}},
      config.children?.map(col => h("tableColumn", {props: {column: col}})) || h('template', {
        slotScope: {
          default: ({row}) => {
            config.custom ? h('div', {style: {color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}}, '周边库存情况') :
              h('span', row[config.prop] || '')
          }
        }
      }))
  },
})


export default Promise.all([
  import("./fetch"),
  ...libs.map(url => $loadScript('js', url)),
  ...css.map(url => $loadScript('css', url))
])