完成产品档案，分割登记，羊皮登记，羊血登记，羊杂登记，配送管理，门店管理，产品追溯

package.json

@@ -10,10 +10,8 @@
   "dependencies": {
     "cnpm": "^6.1.1",
     "core-js": "^3.3.2",
-    "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "vue": "^2.6.10",
-    "vue-echarts": "^5.0.0-beta.0",
     "vue-module-loader": "^1.0.3",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"

src/main.js

@@ -10,43 +10,8 @@ import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 import './assets/css/reset.scss'
 
-import echarts from "echarts";
-Vue.prototype.$echarts = echarts;
-
-/* 按需导入 */
-// import echarts from 'echarts/lib/echarts'
-//  // 引入折线图/柱状图等组件
-// import 'echarts/lib/chart/line'
-// import 'echarts/lib/chart/bar'
-// import 'echarts/lib/component/title'
-// import 'echarts/lib/component/toolbox'
-// import 'echarts/lib/component/markPoint' // 最值
-// import 'echarts/lib/component/markLine' // 平均值
-// import 'echarts/lib/component/legendScroll'
-// Vue.prototype.$echarts = echarts
-
-
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
-/* 
-Element-UI用到的图标 
-import {
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  Button,
-  ButtonGroup,
-  Form,
-  FormItem,
-  Icon,
-  Row,
-  Col,
-  Select,
-  Option
-} from 'element-ui';
-*/
 
 const app = new Vue({
   router,

src/router/routes.js

@@ -9,10 +9,16 @@ import productTest from '@/views/slaughterManagment/productTest.vue'
 import sell from '@/views/slaughterManagment/sell.vue'
 import costAccounting from '@/views/slaughterManagment/costAccounting.vue'
 import refrigerationStorage from '@/views/slaughterManagment/refrigerationStorage.vue'
-
 /* 产品制作智能监控 */
-
+import productInfo from '@/views/productManagement/productInfo.vue'
+import sheepskinLog from '@/views/productManagement/sheepskinLog.vue'
+import goatBloodLog from '@/views/productManagement/goatBloodLog.vue'
+import goatHasletLog from '@/views/productManagement/goatHasletLog.vue'
 /* 鲜肉储运智能管控 */
+import dispatching from '@/views/storeTransportation/dispatching.vue'
+import transportation from '@/views/storeTransportation/transportation.vue'
+import shopStore from '@/views/storeTransportation/shopStore.vue'
+
 
 /* 模板 */
 import Aa from '../views/template/Aa.vue'
@@ -69,6 +75,42 @@ export default [
 				name: 'refrigerationStorage',
 				component: refrigerationStorage
 			},
+			/* 产品制作智能监控 */
+			{
+				path: 'productInfo',
+				name: 'productInfo',
+				component: productInfo
+			},
+			{
+				path: 'sheepskinLog',
+				name: 'sheepskinLog',
+				component: sheepskinLog
+			},
+			{
+				path: 'goatBloodLog',
+				name: 'goatBloodLog',
+				component: goatBloodLog
+			},
+			{
+				path: 'goatHasletLog',
+				name: 'goatHasletLog',
+				component: goatHasletLog
+			},
+			{
+				path: 'dispatching',
+				name: 'dispatching',
+				component: dispatching
+			},
+			{
+				path: 'transportation',
+				name: 'transportation',
+				component: transportation
+			},
+			{
+				path: 'shopStore',
+				name: 'shopStore',
+				component: shopStore
+			},
 			
 			
 			// 模板

src/views/Home/mencCofig.js

@@ -59,27 +59,27 @@ export const menuData = [
             {
                 optionName: '产品档案',
                 index: '2-1',
-                routerName: "PSY"
+                routerName: "productInfo"
             },
             {
                 optionName: '分割登记',
                 index: '2-2',
-                routerName: "Crop"
+                routerName: "packinghouse"
             },
             {
                 optionName: '羊皮登记',
                 index: '2-3',
-                routerName: "Crop"
+                routerName: "sheepskinLog"
             },
             {
                 optionName: '羊血登记',
                 index: '2-4',
-                routerName: "Crop"
+                routerName: "goatBloodLog"
             },
             {
                 optionName: '羊杂登记',
                 index: '2-5',
-                routerName: "Crop"
+                routerName: "goatHasletLog"
             },
             
         ]
@@ -94,22 +94,22 @@ export const menuData = [
             {
                 optionName: '编码管理',
                 index: '3-1',
-                routerName: "GroupRecord"
+                routerName: "sheepskinLog"
             },
             {
                 optionName: '配送管理',
                 index: '3-2',
-                routerName: "aa"
+                routerName: "dispatching"
             },
             {
                 optionName: '运输管理',
                 index: '3-3',
-                routerName: "aa"
+                routerName: "transportation"
             },
             {
                 optionName: '门店管理',
                 index: '3-4',
-                routerName: "aa"
+                routerName: "shopStore"
             },
             {
                 optionName: '产品追溯',

src/views/common/rtsp-player/index.vue

@@ -1,115 +0,0 @@
-<template>
-    <div>
-        <video id="video" style="width: 100%"></video>
-        <canvas id="canvas" style="display: none"></canvas>
-        <canvas id="draw" style="display: none"></canvas>
-    </div>
-</template>
-
-<script>
-import Player from "./libs/player";
-
-export default {
-    name: "index",
-    props: ["rtspData"],
-    data() {
-        return {
-            options: {
-                video: null,
-                canvas: null,
-                drawer: null,
-                wsUrl: null,
-                rtspUrl: null
-            },
-            player: null
-        };
-    },
-    watch: {
-        rtspData: {
-            handler(nv, ov) {
-                console.log("新值1->", nv);
-                if (
-                    nv != null &&
-                    nv.rtsp &&
-                    nv.ws &&
-                    /rtsp:\/\/.+/.test(nv.rtsp) &&
-                    /ws:\/\/.+/.test(nv.ws)
-                ) {
-                    console.log("新值2->", nv);
-                    this.options.wsUrl = nv.ws;
-                    this.options.rtspUrl = nv.rtsp;
-
-                    if (
-                        this.options.video &&
-                        this.options.wsUrl &&
-                        this.options.rtspUrl
-                    ) {
-                        console.log("---watch player---");
-                        this.createPlayer();
-                    }
-                }
-            },
-            immediate: true
-        }
-    },
-    mounted() {
-        console.log("--mounted--");
-        this.options.video = document.getElementById("video");
-        this.options.canvas = document.getElementById("canvas");
-        this.options.drawer = document.getElementById("draw");
-        //this.player.connect()
-        if (this.options.rtspUrl && this.options.wsUrl) {
-            console.log("---mounted player---");
-            //直接播放
-            this.createPlayer();
-        }
-    },
-    destroyed() {
-        if (this.player) this.player.close();
-    },
-    methods: {
-        createPlayer() {
-            if (this.player != null) this.player.close();
-            this.player = new Player(this.options);
-            this.player.init(this);
-            this.player.on("error", function() {
-                console.log("连接失败");
-            });
-            this.player.on("noStream", function() {
-                console.log("noStream");
-                this.player.close();
-                this.player = null;
-                this.player = new Player(this.options);
-                this.player.init();
-                this.player.connect();
-            });
-
-            this.player.on("canplay", function() {
-                //player.close();
-            });
-
-            this.player.on("initialCompleted", function() {
-                // let data = [[
-                //     {x: 2861, y: 4395},
-                //     {x: 6403, y: 4013},
-                //     {x: 3260, y: 7986},
-                //     {x: 640, y: 6252}
-                // ]];
-                // console.log('initialCompleted')
-                // player.setROI(data);
-            });
-
-            this.player.on("ROIFinished", function() {
-                console.log("ROIFinished");
-            });
-            this.player.connect();
-        },
-        close() {
-            player.close();
-        }
-    }
-};
-</script>
-
-<style scoped>
-</style>

src/views/common/rtsp-player/libs/MP4Remux.js

@@ -1,573 +0,0 @@
-let _dtsBase;
-let _types = [];
-let datas = {};
-
-_types = {
-    avc1: [], avcC: [], btrt: [], dinf: [],
-    dref: [], esds: [], ftyp: [], hdlr: [],
-    mdat: [], mdhd: [], mdia: [], mfhd: [],
-    minf: [], moof: [], moov: [], mp4a: [],
-    mvex: [], mvhd: [], sdtp: [], stbl: [],
-    stco: [], stsc: [], stsd: [], stsz: [],
-    stts: [], tfdt: [], tfhd: [], traf: [],
-    trak: [], trun: [], trex: [], tkhd: [],
-    vmhd: [], smhd: []
-};
-
-class MP4Remux {
-    constructor() {
-
-    }
-
-    init() {
-        for (let name in _types) {
-            _types[name] = [
-                name.charCodeAt(0),
-                name.charCodeAt(1),
-                name.charCodeAt(2),
-                name.charCodeAt(3)
-            ];
-        }
-
-        _dtsBase = 0;
-
-        datas.FTYP = new Uint8Array([
-            0x69, 0x73, 0x6F, 0x6D, // major_brand: isom
-            0x0, 0x0, 0x0, 0x1,  // minor_version: 0x01
-            0x69, 0x73, 0x6F, 0x6D, // isom
-            0x61, 0x76, 0x63, 0x31  // avc1
-        ]);
-
-        datas.STSD_PREFIX = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x01  // entry_count
-        ]);
-
-        datas.STTS = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x00  // entry_count
-        ]);
-
-        datas.STSC = datas.STCO = datas.STTS;
-
-        datas.STSZ = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x00, // sample_size
-            0x00, 0x00, 0x00, 0x00  // sample_count
-        ]);
-
-        datas.HDLR_VIDEO = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x00, // pre_defined
-            0x76, 0x69, 0x64, 0x65, // handler_type: 'vide'
-            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
-            0x00, 0x00, 0x00, 0x00,
-            0x00, 0x00, 0x00, 0x00,
-            0x56, 0x69, 0x64, 0x65,
-            0x6F, 0x48, 0x61, 0x6E,
-            0x64, 0x6C, 0x65, 0x72, 0x00 // name: VideoHandler
-        ]);
-
-        datas.HDLR_AUDIO = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x00, // pre_defined
-            0x73, 0x6F, 0x75, 0x6E, // handler_type: 'soun'
-            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
-            0x00, 0x00, 0x00, 0x00,
-            0x00, 0x00, 0x00, 0x00,
-            0x53, 0x6F, 0x75, 0x6E,
-            0x64, 0x48, 0x61, 0x6E,
-            0x64, 0x6C, 0x65, 0x72, 0x00 // name: SoundHandler
-        ]);
-
-        datas.DREF = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x01, // entry_count
-            0x00, 0x00, 0x00, 0x0C, // entry_size
-            0x75, 0x72, 0x6C, 0x20, // type 'url '
-            0x00, 0x00, 0x00, 0x01  // version(0) + flags
-        ]);
-
-        // Sound media header
-        datas.SMHD = new Uint8Array([
-            0x00, 0x00, 0x00, 0x00, // version(0) + flags
-            0x00, 0x00, 0x00, 0x00  // balance(2) + reserved(2)
-        ]);
-
-        // video media header
-        datas.VMHD = new Uint8Array([
-            0x00, 0x00, 0x00, 0x01, // version(0) + flags
-            0x00, 0x00,             // graphicsmode: 2 bytes
-            0x00, 0x00, 0x00, 0x00, // opcolor: 3 * 2 bytes
-            0x00, 0x00
-        ]);
-    }
-
-    initSegment(meta) {
-        let ftyp = box(_types.ftyp, datas.FTYP);
-        let moov = Moov(meta);
-        let seg = new Uint8Array(ftyp.byteLength + moov.byteLength);
-        seg.set(ftyp, 0);
-        seg.set(moov, ftyp.byteLength);
-        return seg;
-    }
-
-    mediaSegment(sequenceNumber, track, data) {
-        let moof = Moof(sequenceNumber, track);
-        let frameData = mdat(data);
-        let seg = new Uint8Array(moof.byteLength + frameData.byteLength);
-        seg.set(moof, 0);
-        seg.set(frameData, moof.byteLength);
-        return seg
-    }
-}
-
-//组装initSegment
-
-function Moov(meta) {
-    let mvhd = Mvhd(meta.timescale, meta.duration);
-    let trak = Trak(meta);
-    let mvex = Mvex(meta);
-
-    return box(_types.moov, mvhd, trak, mvex);
-}
-
-//组装moov
-function Mvhd(timescale, duration) {
-    return box(_types.mvhd, new Uint8Array([
-        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
-        0x00, 0x00, 0x00, 0x00,    // creation_time
-        0x00, 0x00, 0x00, 0x00,    // modification_time
-        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
-        (timescale >>> 16) & 0xFF,
-        (timescale >>>  8) & 0xFF,
-        (timescale) & 0xFF,
-        (duration >>> 24) & 0xFF,  // duration: 4 bytes
-        (duration >>> 16) & 0xFF,
-        (duration >>>  8) & 0xFF,
-        (duration) & 0xFF,
-        0x00, 0x01, 0x00, 0x00,    // Preferred rate: 1.0
-        0x01, 0x00, 0x00, 0x00,    // PreferredVolume(1.0, 2bytes) + reserved(2bytes)
-        0x00, 0x00, 0x00, 0x00,    // reserved: 4 + 4 bytes
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x01, 0x00, 0x00,    // ----begin composition matrix----
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x01, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x40, 0x00, 0x00, 0x00,    // ----end composition matrix----
-        0x00, 0x00, 0x00, 0x00,    // ----begin pre_defined 6 * 4 bytes----
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,    // ----end pre_defined 6 * 4 bytes----
-        0xFF, 0xFF, 0xFF, 0xFF     // next_track_ID
-    ]));
-}
-
-function Trak(meta) {
-    return box(_types.trak, Tkhd(meta), Mdia(meta));
-}
-
-function Mvex(meta) {
-    return box(_types.mvex, trex(meta));
-}
-
-//组装trak
-function Tkhd(meta) {
-    let trackId = meta.id;
-    let duration = meta.duration;
-    let width = meta.width;
-    let height = meta.height;
-
-    return box(_types.tkhd, new Uint8Array([
-        0x00, 0x00, 0x00, 0x07,   // version(0) + flags
-        0x00, 0x00, 0x00, 0x00,   // creation_time
-        0x00, 0x00, 0x00, 0x00,   // modification_time
-        (trackId >>> 24) & 0xFF,  // track_ID: 4 bytes
-        (trackId >>> 16) & 0xFF,
-        (trackId >>>  8) & 0xFF,
-        (trackId) & 0xFF,
-        0x00, 0x00, 0x00, 0x00,   // reserved: 4 bytes
-        (duration >>> 24) & 0xFF, // duration: 4 bytes
-        (duration >>> 16) & 0xFF,
-        (duration >>>  8) & 0xFF,
-        (duration) & 0xFF,
-        0x00, 0x00, 0x00, 0x00,   // reserved: 2 * 4 bytes
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,   // layer(2bytes) + alternate_group(2bytes)
-        0x00, 0x00, 0x00, 0x00,   // volume(2bytes) + reserved(2bytes)
-        0x00, 0x01, 0x00, 0x00,   // ----begin composition matrix----
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x01, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x00, 0x00, 0x00, 0x00,
-        0x40, 0x00, 0x00, 0x00,   // ----end composition matrix----
-        (width >>> 8) & 0xFF,     // width and height
-        (width) & 0xFF,
-        0x00, 0x00,
-        (height >>> 8) & 0xFF,
-        (height) & 0xFF,
-        0x00, 0x00
-    ]));
-}
-
-function Mdia(meta) {
-    return box(_types.mdia, mdhd(meta), hdlr(meta), minf(meta));
-}
-
-//组装mdia
-function mdhd(meta) {
-    let timescale = meta.timescale;
-    let duration = meta.duration;
-
-    return box(_types.mdhd, new Uint8Array([
-        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
-        0x00, 0x00, 0x00, 0x00,    // creation_time
-        0x00, 0x00, 0x00, 0x00,    // modification_time
-        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
-        (timescale >>> 16) & 0xFF,
-        (timescale >>>  8) & 0xFF,
-        (timescale) & 0xFF,
-        (duration >>> 24) & 0xFF,  // duration: 4 bytes
-        (duration >>> 16) & 0xFF,
-        (duration >>>  8) & 0xFF,
-        (duration) & 0xFF,
-        0x55, 0xC4,                // language: und (undetermined)
-        0x00, 0x00                 // pre_defined = 0
-    ]));
-}
-
-function hdlr(meta) {
-    let data = null;
-
-    if (meta.type === 'audio') {
-        data = datas.HDLR_AUDIO;
-    } else {
-        data = datas.HDLR_VIDEO;
-    }
-
-    return box(_types.hdlr, data);
-}
-
-function minf(meta) {
-    let xmhd = null;
-
-    if (meta.type === 'audio') {
-        xmhd = box(_types.smhd, datas.SMHD);
-    } else {
-        xmhd = box(_types.vmhd, datas.VMHD);
-    }
-
-    return box(_types.minf, xmhd, dinf(), stbl(meta));
-}
-
-//组装minf
-function dinf() {
-    return box(_types.dinf, box(_types.dref, datas.DREF));
-}
-
-function stbl(meta) {
-    let result = box(_types.stbl,   // type: stbl
-        stsd(meta),                   // Sample Description Table
-        box(_types.stts, datas.STTS), // Time-To-Sample
-        box(_types.stsc, datas.STSC), // Sample-To-Chunk
-        box(_types.stsz, datas.STSZ), // Sample size
-        box(_types.stco, datas.STCO)  // Chunk offset
-    );
-
-    return result;
-}
-
-//组装stbl
-function stsd(meta) {
-    if (meta.type === 'audio') {
-        return box(_types.stsd, datas.STSD_PREFIX, mp4a(meta));
-    } else {
-        return box(_types.stsd, datas.STSD_PREFIX, avc1(meta));
-    }
-}
-
-//组装stsd
-function mp4a(meta) {
-    let channelCount = meta.channelCount;
-    let sampleRate = meta.audioSampleRate;
-
-    let data = new Uint8Array([
-        0x00, 0x00, 0x00, 0x00,    // reserved(4)
-        0x00, 0x00, 0x00, 0x01,    // reserved(2) + data_reference_index(2)
-        0x00, 0x00, 0x00, 0x00,    // reserved: 2 * 4 bytes
-        0x00, 0x00, 0x00, 0x00,
-        0x00, channelCount,        // channelCount(2)
-        0x00, 0x10,                // sampleSize(2)
-        0x00, 0x00, 0x00, 0x00,    // reserved(4)
-        (sampleRate >>> 8) & 0xFF, // Audio sample rate
-        (sampleRate) & 0xFF,
-        0x00, 0x00
-    ]);
-
-    return box(_types.mp4a, data, esds(meta));
-}
-
-function avc1(meta) {
-    let width = meta.width;
-    let height = meta.height;
-
-    let sps = meta.sps || [], pps = meta.pps || [], sequenceParameterSets = [], pictureParameterSets = [];
-    for (let i = 0; i < sps.length; i++) {
-        sequenceParameterSets.push((sps[i].byteLength & 65280) >>> 8);
-        sequenceParameterSets.push(sps[i].byteLength & 255);
-        sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i]))
-    }
-    for (let i = 0; i < pps.length; i++) {
-        pictureParameterSets.push((pps[i].byteLength & 65280) >>> 8);
-        pictureParameterSets.push(pps[i].byteLength & 255);
-        pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]))
-    }
-
-    //Todo: 待测，如果视频有问题，修改这里
-    // let data = new Uint8Array([
-    //     0x00, 0x00, 0x00, 0x00, // reserved(4)
-    //     0x00, 0x00, 0x00, 0x01, // reserved(2) + data_reference_index(2)
-    //     0x00, 0x00, 0x00, 0x00, // pre_defined(2) + reserved(2)
-    //     0x00, 0x00, 0x00, 0x00, // pre_defined: 3 * 4 bytes
-    //     0x00, 0x00, 0x00, 0x00,
-    //     0x00, 0x00, 0x00, 0x00,
-    //     (width >>> 8) & 0xFF,   // width: 2 bytes
-    //     (width) & 0xFF,
-    //     (height >>> 8) & 0xFF,  // height: 2 bytes
-    //     (height) & 0xFF,
-    //     0x00, 0x48, 0x00, 0x00, // horizresolution: 4 bytes
-    //     0x00, 0x48, 0x00, 0x00, // vertresolution: 4 bytes
-    //     0x00, 0x00, 0x00, 0x00, // reserved: 4 bytes
-    //     0x00, 0x01,             // frame_count
-    //     0x0A,                   // strlen
-    //     0x78, 0x71, 0x71, 0x2F, // compressorname: 32 bytes
-    //     0x66, 0x6C, 0x76, 0x2E,
-    //     0x6A, 0x73, 0x00, 0x00,
-    //     0x00, 0x00, 0x00, 0x00,
-    //     0x00, 0x00, 0x00, 0x00,
-    //     0x00, 0x00, 0x00, 0x00,
-    //     0x00, 0x00, 0x00, 0x00,
-    //     0x00, 0x00, 0x00,
-    //     0x00, 0x18,             // depth
-    //     0xFF, 0xFF              // pre_defined = -1
-    // ]);
-
-    let data = new Uint8Array(
-        [0, 0, 0, 0,
-            0, 0, 0, 1,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            (65280 & width) >> 8,
-            255 & width,
-            (65280 & height) >> 8,
-            255 & height,
-            0, 72, 0, 0,
-            0, 72, 0, 0,
-            0, 0, 0, 0,
-            0, 1, 19, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 0,
-            0, 0, 0, 24, 17, 17]);
-
-    return box(_types.avc1, data, box(_types.avcC, new Uint8Array([1, meta.profileIdc, meta.profileCompatibility, meta.levelIdc, 255].concat([sps.length]).concat(sequenceParameterSets).concat([pps.length]).concat(pictureParameterSets))));
-}
-
-//组装mp4a
-function esds(meta) {
-    let config = meta.config;
-    let configSize = config.length;
-    let data = new Uint8Array([
-        0x00, 0x00, 0x00, 0x00, // version 0 + flags
-
-        0x03,                   // descriptor_type
-        0x17 + configSize,      // length3
-        0x00, 0x01,             // es_id
-        0x00,                   // stream_priority
-
-        0x04,                   // descriptor_type
-        0x0F + configSize,      // length
-        0x40,                   // codec: mpeg4_audio
-        0x15,                   // stream_type: Audio
-        0x00, 0x00, 0x00,       // buffer_size
-        0x00, 0x00, 0x00, 0x00, // maxBitrate
-        0x00, 0x00, 0x00, 0x00, // avgBitrate
-
-        0x05                    // descriptor_type
-    ].concat(
-        [configSize]
-    ).concat(
-        config
-    ).concat(
-        [0x06, 0x01, 0x02]      // GASpecificConfig
-    ));
-
-    return box(_types.esds, data);
-}
-
-//组装mvex
-function trex(meta) {
-    var trackId = meta.id;
-    var data = new Uint8Array([
-        0x00, 0x00, 0x00, 0x00,  // version(0) + flags
-        (trackId >>> 24) & 0xFF, // track_ID
-        (trackId >>> 16) & 0xFF,
-        (trackId >>>  8) & 0xFF,
-        (trackId) & 0xFF,
-        0x00, 0x00, 0x00, 0x01,  // default_sample_description_index
-        0x00, 0x00, 0x00, 0x00,  // default_sample_duration
-        0x00, 0x00, 0x00, 0x00,  // default_sample_size
-        0x00, 0x01, 0x00, 0x01   // default_sample_flags
-    ]);
-
-    return box(_types.trex, data);
-}
-
-//组装mediaSegment
-function Moof(sequenceNumber, track) {
-    return box(_types.moof, mfhd(sequenceNumber), traf(track));
-}
-
-function mdat(data) {
-    return box(_types.mdat, data);
-}
-
-//组装moof
-function mfhd(sequenceNumber) {
-    var data = new Uint8Array([
-        0x00, 0x00, 0x00, 0x00,
-        (sequenceNumber >>> 24) & 0xFF, // sequence_number: int32
-        (sequenceNumber >>> 16) & 0xFF,
-        (sequenceNumber >>>  8) & 0xFF,
-        (sequenceNumber) & 0xFF
-    ]);
-
-    return box(_types.mfhd, data);
-}
-
-function traf(track) {
-    //console.log(track)
-    var trackFragmentHeader = null, trackFragmentDecodeTime = null, trackFragmentRun = null, dataOffset = null;
-    trackFragmentHeader = box(_types.tfhd, new Uint8Array([0, 2, 0, 0, 0, 0, 0, 1]));
-    trackFragmentDecodeTime = box(_types.tfdt,
-        new Uint8Array([
-            0, 0, 0, 0,
-            track.baseMediaDecodeTime >>> 24 & 255,
-            track.baseMediaDecodeTime >>> 16 & 255,
-            track.baseMediaDecodeTime >>> 8 & 255,
-            track.baseMediaDecodeTime & 255
-        ]));
-    dataOffset = 16 + 16 + 8 + 16 + 8 + 8;
-    trackFragmentRun = trun(track, dataOffset);
-    return box(_types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun)
-}
-
-//组装traf
-function trun(track, offset) {
-    if (track.type === "audio") {
-        return audioTrun(track, offset)
-    }
-    return videoTrun(track, offset)
-}
-
-//组装trun
-function videoTrun(track, _offset) {
-    var bytes = null, samples = null, sample = null, i = 0;
-    var offset = _offset;
-    samples = track.samples || [];
-    if (samples[0].frameDuration === null) {
-        offset += 8 + 12 + 4 + 4 * samples.length;
-        bytes = trunHeader(samples, offset);
-        for (i = 0; i < samples.length; i++) {
-            sample = samples[i];
-            bytes = bytes.concat([(sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
-        }
-    } else {
-        offset += 8 + 12 + 4 + 4 * samples.length + 4 * samples.length;
-        bytes = trunHeader1(samples, offset);
-        for (i = 0; i < samples.length; i++) {
-            sample = samples[i];
-            bytes = bytes.concat([(sample.frameDuration & 4278190080) >>> 24, (sample.frameDuration & 16711680) >>> 16, (sample.frameDuration & 65280) >>> 8, sample.frameDuration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
-        }
-    }
-    return box(_types.trun, new Uint8Array(bytes))
-}
-
-function audioTrun(track, _offset) {
-    var bytes = null, samples = null, sample = null, i = 0;
-    var offset = _offset;
-    samples = track.samples || [];
-    offset += 8 + 12 + 8 * samples.length;
-    bytes = trunHeader(samples, offset);
-    for (i = 0; i < samples.length; i++) {
-        sample = samples[i];
-        bytes = bytes.concat([(sample.duration & 4278190080) >>> 24, (sample.duration & 16711680) >>> 16, (sample.duration & 65280) >>> 8, sample.duration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
-    }
-    return box(_types.trun, new Uint8Array(bytes))
-}
-
-//组装videoTurn
-function trunHeader(samples, offset) {
-    return [0, 0, 2, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
-}
-
-function trunHeader1(samples, offset) {
-    return [0, 0, 3, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
-}
-
-/**
- *
- * @param type
- * @returns {Uint8Array}
- */
-function box(type, ...items) {
-    let size = 8;
-    //Todo: 测试一下这里
-    //let arrs = Array.prototype.slice.call(arguments, 1);
-    let arrs = [];
-    arrs.push(...items);
-    for (let i = 0; i < arrs.length; i++) {
-        size += arrs[i].byteLength;
-    }
-
-    let data = new Uint8Array(size);
-    let pos = 0;
-
-    // set size
-    data[pos++] = size >>> 24 & 0xFF;
-    data[pos++] = size >>> 16 & 0xFF;
-    data[pos++] = size >>> 8 & 0xFF;
-    data[pos++] = size & 0xFF;
-
-    // set type
-    data.set(type, pos);
-    pos += 4;
-
-    // set data
-    for (let i = 0; i < arrs.length; i++) {
-        data.set(arrs[i], pos);
-        pos += arrs[i].byteLength;
-    }
-
-    return data;
-}
-
-// let mp4Remux = new MP4Remux();
-// mp4Remux.init();
-
-export default MP4Remux;

src/views/common/rtsp-player/libs/MediaSource.js

@@ -1,414 +0,0 @@
-
-
-function VideoMediaSource(element) {
-    let videoElement = null;
-    let codecInfo = null;
-
-    let mediaSource = null;
-    let sourceBuffer = null;
-
-    let initSegmentData = null;
-
-    let ctrlDelayFlag = false;
-    let delay = 4;
-    const DELAY = 0.5;
-    let waitingCount = 0;
-    let time = 0;
-
-    let segmentWaitDecode = [];
-
-    let firstTimeStamp = null;
-    let isFirstTimeStamp = false;
-
-
-    let onDurationChangeCallback = null;
-    let onCanplayCallback = null;
-    let startPlay = false;
-
-    function constructor(element) {
-        videoElement = element;
-    }
-
-    constructor.prototype = {
-        init() {
-            videoElement.controls = false;
-            videoElement.autoplay = 'autoplay';
-            //videoElement.preload = "auto";
-            videoElement.muted = true;
-
-            addVideoEventListener(videoElement);
-
-            appendInitSegment();
-        },
-
-        setMediaSegment(mediaSegment) {
-            appendNextMediaSegment(mediaSegment)
-        },
-
-        setFirstTimeStamp(time) {
-            if(!isFirstTimeStamp) {
-                console.log('set firstTimeStamp:', time)
-                firstTimeStamp = time;
-                isFirstTimeStamp = true;
-            }
-        },
-
-        setDurationChangeCallBack(callback) {
-            onDurationChangeCallback = callback;
-        },
-
-        set CodecInfo(CodecInfo) {
-            codecInfo = CodecInfo;
-        },
-
-        get CodecInfo() {
-            return codecInfo;
-        },
-
-        set InitSegment(data) {
-            initSegmentData = data;
-        },
-
-        get InitSegment() {
-            return initSegmentData;
-        },
-
-        onCanplayCallback(callback) {
-            onCanplayCallback = callback;
-        },
-
-        close() {
-            videoElement.pause();
-            removeEventListener();
-            mediaSource.removeSourceBuffer(sourceBuffer);
-            mediaSource.endOfStream();
-            sourceBuffer = null;
-            mediaSource = null;
-            videoElement = null;
-        }
-    }
-
-    return new constructor(element);
-
-    function appendInitSegment() {
-        if(mediaSource == null || mediaSource.readyState === 'end') {
-            mediaSource = new MediaSource();
-            addMediaSourceEventListener(mediaSource);
-            videoElement.src = window.URL.createObjectURL(mediaSource);
-            //console.log('new MediaSource');
-            return;
-        }
-
-        //console.log('appendInitSegment start');
-        if(mediaSource.sourceBuffers.length === 0) {
-            mediaSource.duration = 0;
-            let codecs = 'video/mp4;codecs="avc1.' + codecInfo + '"';
-            if(!MediaSource.isTypeSupported(codecs)) {
-                //console.log('要播放视频格式 video/mp4;codecs="avc1.64002a", video/mp4;codecs="avc1.64002a"，您还需要安装一个额外的微软组件，参见 https://support.mozilla.org/kb/fix-video-audio-problems-firefox-windows')
-                console.log('not support ' + codecs)
-                return;
-            }
-            sourceBuffer = mediaSource.addSourceBuffer(codecs);
-            addSourceBufferEventListener(sourceBuffer);
-        }
-
-        let initSegment = initSegmentData;
-        if(initSegment == null) {
-            mediaSource.endOfStream();
-            console.log('no initSegmentData');
-        }
-        //console.log(sourceBuffer)
-        sourceBuffer.appendBuffer(initSegment);
-        //console.log(sourceBuffer)
-        // saveAs(new File(initSegment, "test"));
-        //  Savesegments.set(initSegment, 0);
-        //  segmentsLength += initSegment.length;
-        //  segmentsNum --;
-        console.log('appendInitSegment end')
-        checkDelay();
-    }
-
-    function appendNextMediaSegment(mediaData) {
-
-
-        if(sourceBuffer == null) {
-            segmentWaitDecode.push(mediaData);
-            return;
-        }
-        //console.log(mediaSource.readyState, mediaSource.readyState,sourceBuffer.updating)
-        if(mediaSource.readyState === 'closed' || mediaSource.readyState === "ended") {
-            console.log('mediaSource closed or ended')
-            return;
-        }
-
-        if(onDurationChangeCallback) {
-            //90000为采样率，先写死
-            let rtpTimestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 3600;//
-            //console.log('callback time: ', rtpTimestamp)
-            //console.log('sourceBuffer: ', sourceBuffer.timestampOffset)
-            onDurationChangeCallback(rtpTimestamp);
-        }
-
-        //console.count('一帧');
-
-        //try {
-        if(segmentWaitDecode.length) {
-            segmentWaitDecode.push(mediaData);
-            //console.log(segmentWaitDecode)
-        }else {
-            if(!sourceBuffer.updating) {
-                sourceBuffer.appendBuffer(mediaData);
-            } else {
-                segmentWaitDecode.push(mediaData);
-            }
-        }
-        //}catch (e){
-        //    console.log('appendNextMediaSegment Error')
-        //}
-
-        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length &&  sourceBuffer.buffered.end(0) > DELAY) {
-            if(!startPlay) {
-                videoElement.play();
-                console.warn('playbakrate: ', videoElement.playbackRate)
-                ctrlDelayFlag = true;
-            }
-            startPlay = true;
-        } else {
-            if(!startPlay) {
-                videoElement.pause();
-            }
-        }
-        //console.log(sourceBuffer)
-    }
-
-    /**
-     * Video事件
-     * @param videoElement video对象
-     */
-    function addVideoEventListener(videoElement) {
-        videoElement.addEventListener('loadstart', onloadstart);
-
-        videoElement.addEventListener('waiting', onWaiting);
-
-        videoElement.addEventListener('durationchange', onDurationChange);
-
-        videoElement.addEventListener('timeupdate', timeupdate);
-
-        videoElement.addEventListener('canplay', oncanplay);
-
-        videoElement.addEventListener('canplaythrough', oncanplaythrough);
-
-        videoElement.addEventListener('error', onVideoError);
-
-        document.addEventListener('visibilitychange', onVisibilityChange);
-    }
-
-    function onVisibilityChange(e) {
-        if(document.visibilityState === 'visible') {
-            ctrlDelayFlag = true;
-            checkDelay();
-            videoElement.play();
-        } else {
-            ctrlDelayFlag = false;
-            videoElement.pause();
-        }
-        console.warn('visibilityState: ', document.visibilityState)
-    }
-
-    function onloadstart() {
-        console.log('loadstart');
-    }
-
-    function onDurationChange() {
-        //console.log('durationchange');
-        if (mediaSource === null) {
-            return;
-        }
-
-        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
-            checkBuffer();
-        }
-        //console.log('currentTime：', videoElement.currentTime);
-        // if(onDurationChangeCallback) {
-        //     //90000为采样率，先写死
-        //     let rtpTimestamp = videoElement.currentTime * 90000 + firstTimeStamp ;
-        //     //console.log('callback time: ', rtpTimestamp)
-        //     onDurationChangeCallback(rtpTimestamp);
-        // }
-
-        //try {
-
-        //}catch(e) {
-        //    console.log('sourceBuffer has been moved')
-        //}
-
-    }
-
-    function checkDelay() {
-        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
-            if(ctrlDelayFlag) {
-                let startTime = sourceBuffer.buffered.start(0);
-                let endTime = sourceBuffer.buffered.end(0);
-                let diffTime = (videoElement.currentTime === 0 ? endTime - startTime: endTime - videoElement.currentTime).toFixed(2);
-                if(diffTime >= delay + 0.5) {
-                    if(sourceBuffer.updating) {
-                        return;
-                    }
-                    let tempCurrntTime = endTime - delay;
-                    //console.log('跳秒前', videoElement.currentTime)
-                    videoElement.currentTime = tempCurrntTime.toFixed(3);
-                    //console.log('跳秒后', videoElement.currentTime, sourceBuffer.buffered.end(0), videoElement.duration)
-                    //ctrlDelayFlag = false;
-                } else if((diffTime < DELAY + 0.2 ) && diffTime >= DELAY) {
-                    //console.warn('playbackRate:', 1, diffTime)
-                    videoElement.playbackRate = 1;
-                }
-                else if(diffTime < DELAY) {
-                    //console.warn('playbackRate:', 0.9, diffTime)
-                    videoElement.playbackRate = 0.9;
-                }else {
-                    //console.warn('playbackRate:', 1.1, diffTime)
-                    videoElement.playbackRate = 1.1;
-                }
-            }
-        }
-        window.requestAnimationFrame(checkDelay);
-    }
-
-    function timeupdate() {
-        // console.log('******timeupdate******');
-        // console.log(videoElement.currentTime);
-        // console.log('******timeupdate end******')
-    }
-
-    function oncanplay() {
-        // if(isFirstTimeStamp && (firstTimeStamp == null)) {
-        //     //firstTimeStamp =
-        //     isFirstTimeStamp = false;
-        // }
-
-        onCanplayCallback && onCanplayCallback(videoElement);
-        // console.log('canplay');
-    }
-
-    function oncanplaythrough() {
-        if(document.visibilityState === 'visible' && startPlay){ctrlDelayFlag = true};
-        // console.log('canplaythrough');
-    }
-
-    function onVideoError() {
-        console.error('error');
-        //console.log(e)
-        console.error(videoElement.currentTime);
-        console.error("Error " + videoElement.error.code + "; details: " + videoElement.error.message);
-    }
-
-
-    /**
-     * MediaSource事件
-     * @param mediaSource
-     */
-    function addMediaSourceEventListener(mediaSource) {
-        mediaSource.addEventListener('sourceopen', onSourceOpen);
-
-        mediaSource.addEventListener('error', onMediaSourceError);
-    }
-
-    function onSourceOpen() {
-        console.log('OnsourceOpen');
-        appendInitSegment(); //此处重新调用一次，是为了建立sourceBuffer
-    }
-
-    function onMediaSourceError() {
-        console.log('mediaSource error');
-        console.log(videoElement.currentTime)
-    }
-
-    /**
-     * sourceBuffer事件
-     */
-    function addSourceBufferEventListener(sourceBuffer) {
-        sourceBuffer.addEventListener('error', onSourceBufferError);
-
-        sourceBuffer.addEventListener('update', onUpdate);
-    }
-
-    function onSourceBufferError() {
-        console.log('sourceBuffer Error');
-        console.log(videoElement.currentTime)
-    }
-
-    function onUpdate() {
-        //console.log('sourceBuffer update');
-        if(segmentWaitDecode.length > 0) {
-            if(!sourceBuffer.updating) {
-                sourceBuffer.appendBuffer(segmentWaitDecode[0]);
-
-                //console.log('segmentWaitDecode:  ' + segmentWaitDecode.length)
-                segmentWaitDecode.shift();
-            }
-        }
-        //console.log(e)
-    }
-
-    function checkBuffer() {
-        let minute = 60;
-        let bufferTime = 30;
-        let startTime = sourceBuffer.buffered.start(0);
-        let endTime = sourceBuffer.buffered.end(0);
-        //console.log(endTime- videoElement.currentTime)
-        if (!sourceBuffer.updating && (endTime - startTime > minute)) {
-            sourceBuffer.remove(startTime, endTime - bufferTime);
-            videoElement.play();
-            console.log('remove buffer: ', startTime, ' - ', (endTime - bufferTime))
-        }else if(sourceBuffer.updating && (endTime - startTime > minute)) {
-            console.log('clear buffer failed!')
-        }
-    }
-
-    function onWaiting() {
-        // console.log('waiting....');
-        ctrlDelayFlag = false;
-        // if(delay < 0.7) {
-        //     if(waitingCount === 0) {
-        //         time = Date.now();
-        //         waitingCount++;
-        //     }else {
-        //         if((Date.now() - time) <= 5000) {
-        //             waitingCount ++;
-        //             if(waitingCount >= 5) {
-        //                 delay += 0.1;
-        //                 console.log('delay: ', delay);
-        //                 time = Date.now();
-        //                 waitingCount = 0;
-        //             }
-        //         } else {
-        //             waitingCount = 1;
-        //             time = Date.now();
-        //         }
-        //     }
-        // }
-    }
-
-    function removeEventListener() {
-        document.removeEventListener('visibilitychange', onVisibilityChange);
-        videoElement.removeEventListener('loadstart', onloadstart);
-        videoElement.removeEventListener('waiting', onWaiting);
-        videoElement.removeEventListener('durationchange', onDurationChange);
-        videoElement.removeEventListener('timeupdate', timeupdate);
-        videoElement.removeEventListener('canplay', oncanplay);
-        videoElement.removeEventListener('canplaythrough', oncanplaythrough);
-        videoElement.removeEventListener('error', onVideoError);
-
-        mediaSource.removeEventListener('sourceopen', onSourceOpen);
-        mediaSource.removeEventListener('error', onMediaSourceError);
-
-        sourceBuffer.removeEventListener('error', onSourceBufferError);
-        sourceBuffer.removeEventListener('update', onUpdate);
-    }
-
-}
-
-
-
-export default VideoMediaSource;

src/views/common/rtsp-player/libs/ROIDrawer.js

@@ -1,629 +0,0 @@
-import Drawer from './drawer.js';
-
-class ROIDrawer extends Drawer {
-    constructor(props) {
-        super(props);
-        this.currentState = 'end';
-        this.points = [];
-        this.polygons = [];
-        this.MAX_POLYGON = 1;
-        this.onDrawROIFinishedCallback = null;
-    }
-
-    _init() {
-        this.context.lineWidth = 2;
-        this.context.font = 'bold 20px Arial';
-
-        this.canvas.addEventListener('click', this._onClick.bind(this));
-        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
-        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
-    }
-
-    _onClick(e) {
-        switch (this.currentState) {
-            case 'begin':
-                this.points.push(getMousePos(this.canvas, e));
-                this.currentState = 'firstPoint';
-                break;
-            case 'firstPoint': // 防止初始点点两次
-                break;
-            case 'move':
-                this.currentState = 'points';
-                break;
-            case 'points':
-                let currentPoint = getMousePos(this.canvas, e);
-                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
-                    return;
-                }
-                this.points.push(currentPoint);
-                if (checkPolygon(this.points)) {
-                    this.points.pop();
-                }
-                //console.log(this.points);
-                break;
-            case 'end':
-                //console.log(this.points)
-                break;
-            default:
-                console.log('unknown state: ', this.currentState);
-                break;
-        }
-        // this._drawPolygons(this.points, true);
-    }
-
-    _oncontextmenu(e) {
-        e.preventDefault();
-        if (this.currentState === 'end') { //防止点击右键启动绘制
-            return;
-        }
-        if (this.points.length <= 2) {
-            this._resetPoints();
-        } else {
-            if ((this.points[0].x !== this.points[this.points.length - 1].x) || (this.points[0].y !== this.points[this.points.length - 1].y)) {
-                this.points.push(this.points[0]);
-            }
-            if (checkPolygon(this.points)) {
-                this.points.pop();
-            } else {
-                this.currentState = 'end';
-                this.polygons.push([...this.points]);
-                if (this.polygons.length < this.MAX_POLYGON) {
-                    this._resetPoints();
-                } else {
-                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
-                    this._drawPolygons([]);
-                }
-            }
-        }
-    }
-
-    _onmousemove(e) {
-        let pos = getMousePos(this.canvas, e);
-        //console.log('mousemove');
-        if (e.button === 0) {
-            if (this.currentState === 'firstPoint') {
-                this.currentState = 'move';
-                this.points.push(pos);
-            } else if (this.currentState === 'move') {
-                this.points.pop();
-                this.points.push(pos);
-            }
-            if (this.currentState !== 'end') {
-                this.points.push(pos);
-                this._drawPolygons(this.points);
-                this.points.pop();
-            } else {
-                //this._drawPolygons(this.points);
-            }
-            if (this.currentState === 'begin') {
-                this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
-            }
-        }
-    }
-
-    getROIData() {
-        if (this.currentState !== 'end') { //非完成状态
-            return null;
-        }
-        let polygons = [];
-        this.polygons.map((points, k) => {
-            let data = points.slice(0, points.length - 1);
-            data.map((point, k) => {
-                data[k] = this._to8191Coordinate(point, this.canvas);
-            });
-            polygons.push([...data]);
-        });
-
-        return polygons;
-    }
-
-    setROI(polygons) {
-        if (!polygons) {
-            return;
-        }
-        let data = [];
-        this.polygons = [];
-        polygons.map((points, k) => {
-            points.map((point, k) => {
-                let result = this._toRealCoordinate(point.x, point.y);
-                data[k] = { x: result[0], y: result[1] };
-            });
-            if (data.length) {
-                data[data.length] = data[0];
-            }
-            this.polygons.push([...data]);
-            data = [];
-        });
-        this.currentState = 'end';
-        this.points = [];
-        this._drawPolygons(this.points);
-    }
-
-    redrawROI() {
-        this._drawPolygons(this.points);
-    }
-
-    reset() {
-        this.currentState = 'begin';
-        this.polygons = [];
-        this.points.length = 0;
-        this._drawPolygons(this.points);
-    }
-
-    setROIFinishedCallback(callback) {
-        this.onDrawROIFinishedCallback = callback;
-    }
-
-    setPolygonNum(num) {
-        this.MAX_POLYGON = num;
-    }
-
-    terminate() {
-        this.clearCanvas();
-        this.canvas.width = 0;
-        this.canvas.height = 0;
-        this.currentState = 'end';
-        this.points.length = 0;
-        this.canvas.removeEventListener('click', this._onClick);
-        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
-        this.canvas.removeEventListener('mousemove', this._onmousemove);
-    }
-
-    _drawPolygons(points) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.polygons.map((points, k) => {
-            this._drawPolygon(points);
-        });
-        this._drawPolygon(points);
-    }
-
-    _drawPolygon(points) {
-        if (!points.length) {
-            return;
-        }
-        const end = this.currentState === 'end';
-        //console.log(points)
-        this.context.strokeStyle = end ? '#0000ff' : "#ffff00";
-
-        this.context.beginPath();
-        this.context.moveTo(points[0].x, points[0].y);
-        for (let i = 1; i < points.length; i++) {
-            this.context.lineTo(points[i].x, points[i].y);
-        }
-        if (end) {
-            // draw is done, fill polygon with a color
-            this.context.fillStyle = "rgba(255, 0, 0, 0.2)";
-            this.context.fill();
-        } else {
-            this.context.stroke();
-        }
-        this.context.closePath();
-
-        this.polygons.map((points, k) => {
-            this._drawText('区域' + (k + 1), points[0].x - 20, points[0].y - 10);
-        });
-    }
-
-    _resetPoints() {
-        this.currentState = 'begin';
-        this.points.length = 0;
-        this._drawPolygons(this.points);
-    }
-
-    _drawText(text, x, y) {
-        this.context.beginPath();
-        this.context.fillStyle = "rgba(255, 255, 0, 1)";
-        this.context.fillText(text, x, y);
-        this.context.closePath();
-    }
-
-}
-
-class StandingDrawer extends Drawer {
-    constructor(props) {
-        super(props);
-        this.currentState = 'end';
-        this.points = [];
-        this.onDrawROIFinishedCallback = null;
-    }
-
-    _init() {
-        this.context.lineWidth = 2;
-        this.context.font = 'bold 20px Arial';
-
-        this.canvas.addEventListener('click', this._onClick.bind(this));
-        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
-        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
-    }
-
-    _onClick(e) {
-        let pos = getMousePos(this.canvas, e);
-        switch (this.currentState) {
-            case 'begin':
-                this.points.push(pos);
-                this.currentState = 'firstPoint';
-                break;
-            case 'firstPoint': // 防止初始点点两次
-                break;
-            case 'move':
-                this.currentState = 'points';
-                break;
-            case 'points':
-                if (((pos.x === this.points[this.points.length - 1].x) && (pos.y === this.points[this.points.length - 1].y))
-                    || this.points.length > 6) {
-                    return;
-                }
-                this.points.push(pos);
-                let points = this.points.length > 4 ? this.points.slice(0, 4) : this.points;
-                if (checkPolygon(points)) {
-                    this.points.pop();
-                }
-                if (this.points.length === 6) {
-                    this.currentState = 'end';
-                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
-                }
-                this._drawArea(this.points);
-                break;
-            case 'end':
-                break;
-            default:
-                console.log('unknown state: ', this.currentState);
-                break;
-        }
-    }
-
-    _oncontextmenu(e) {
-        e.preventDefault();
-    }
-
-    _onmousemove(e) {
-        let pos = getMousePos(this.canvas, e);
-        if (e.button === 0) {
-            if (this.currentState === 'firstPoint') {
-                this.currentState = 'move';
-                this.points.push(pos);
-            } else if (this.currentState === 'move') {
-                this.points.pop();
-                this.points.push(pos);
-            }
-            if (this.currentState !== 'end') {
-                this.points.push(pos);
-                this._drawArea(this.points);
-                this.points.pop();
-            } else {
-            }
-            // if(this.currentState === 'begin') {
-            //     this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
-            // }
-        }
-    }
-
-    _drawArea(points) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        let polygon = points.length > 4 ? points.slice(0, 4) : points;
-        this._drawPolygon(polygon);
-        let line = points.length > 4 ? points.slice(4) : [];
-        this._drawLine(line);
-    }
-
-    _drawPolygon(points) {
-        if (!points.length) {
-            return;
-        }
-        this.context.strokeStyle = '#00ff00';
-        this.context.beginPath();
-        this.context.moveTo(points[0].x, points[0].y);
-        for (let i = 1; i < points.length; i++) {
-            this.context.lineTo(points[i].x, points[i].y);
-        }
-        this.points.length >= 4 && this.context.lineTo(points[0].x, points[0].y);
-        this.context.stroke();
-        this.context.closePath();
-    }
-
-    _drawLine(points) {
-        if (points.length !== 2) {
-            return;
-        }
-        this.context.strokeStyle = '#0000ff';
-        this.context.beginPath();
-        this.context.moveTo(points[0].x, points[0].y);
-        this.context.lineTo(points[1].x, points[1].y);
-        this.context.stroke();
-        this.context.closePath();
-    }
-
-    getROIData() {
-        if (this.currentState !== 'end') { //非完成状态
-            return null;
-        }
-        let points = [];
-        this.points.map((point, k) => {
-            points.push(this._to8191Coordinate(point, this.canvas));
-        });
-        return points;
-    }
-
-    setROI(points) {
-        if (!points) {
-            return;
-        }
-        let data = [];
-        points.map((point, k) => {
-            let result = this._toRealCoordinate(point.x, point.y);
-            data[k] = { x: result[0], y: result[1] };
-        });
-        this.points = [...data];
-        this._drawArea(data);
-        this.currentState = 'end';
-    }
-
-    redrawROI() {
-        this._drawArea(this.points);
-    }
-
-    reset() {
-        this.currentState = 'begin';
-        this.points.length = 0;
-        this._drawArea(this.points);
-    }
-
-    setROIFinishedCallback(callback) {
-        this.onDrawROIFinishedCallback = callback;
-    }
-
-    terminate() {
-        this.clearCanvas();
-        this.canvas.width = 0;
-        this.canvas.height = 0;
-        this.currentState = 'end';
-        this.points.length = 0;
-        this.canvas.removeEventListener('click', this._onClick);
-        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
-        this.canvas.removeEventListener('mousemove', this._onmousemove);
-    }
-
-}
-
-class SpeedLine extends Drawer {
-    constructor(canvas) {
-        super(canvas);
-        this.currentState = 'end';
-        this.MAXLINE = 2;
-        this.points = [];
-        this.onDrawROIFinishedCallback = null;
-    }
-
-    _init() {
-        this.canvas.addEventListener('click', this._onClick.bind(this));
-        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
-        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
-    }
-
-    _onClick(e) {
-        if (this.points.length === this.MAXLINE * 2) {
-            return;
-        }
-        switch (this.currentState) {
-            case 'begin':
-                this.points.push(getMousePos(this.canvas, e));
-                this.currentState = 'firstPoint';
-                break;
-            case 'firstPoint': // 防止初始点点两次
-                break;
-            case 'move':
-                this.currentState = 'points';
-                break;
-            case 'points':
-                let currentPoint = getMousePos(this.canvas, e);
-                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
-                    return;
-                }
-                this.points.push(currentPoint);
-                if (this.points.length === this.MAXLINE * 2) {
-                    if (this._checkLine(this.points)) {
-                        this.points.pop();
-                    } else {
-                        this.currentState = 'end';
-                        this._drawLines(this.points);
-                        this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
-                    }
-                }
-                break;
-            case 'end':
-                break;
-            default:
-                console.log('unknown state: ', this.currentState);
-                break;
-        }
-    }
-
-    _onmousemove(e) {
-        let pos = getMousePos(this.canvas, e);
-        if (e.button === 0) {
-            if (this.currentState === 'firstPoint') {
-                this.currentState = 'move';
-                this.points.push(pos);
-            } else if (this.currentState === 'move') {
-                this.points.pop();
-                this.points.push(pos);
-            }
-            if (this.currentState !== 'end' && this.currentState !== 'begin') {
-                this.points.push(pos);
-                this._drawLines(this.points);
-                this.points.pop();
-            }
-        }
-    }
-
-    _oncontextmenu(e) {
-        e.preventDefault();
-    }
-    /**
-     *
-     * @param points [] x1,y1,x2,y2...
-     * @private
-     */
-    _checkLine(points) {
-        for (let i = 0; i < points.length - 3; i = i + 2) {
-            for (let j = i + 2; j < points.length - 1; j = j + 2) {
-                let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
-                if (result) {
-                    console.log('intersect:');
-                    console.log(result)
-                    return result;
-                }
-            }
-        }
-        return false;
-    }
-
-    _drawLines(points) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        if (!points.length) {
-            return;
-        }
-        const end = this.currentState === 'end';
-        this.context.strokeStyle = end ? '#00ff00' : "#ffff00";
-        this.context.beginPath();
-        for (let i = 0; i < points.length - 1; i = i + 2) {
-            this.context.moveTo(points[i].x, points[i].y);
-            this.context.lineTo(points[i + 1].x, points[i + 1].y);
-        }
-        this.context.stroke();
-        this.context.closePath();
-    }
-
-    getROIData() {
-        if (this.currentState !== 'end') { //非完成状态
-            return null;
-        }
-        let data = this.points;
-        data.map((point, k) => {
-            data[k] = this._to8191Coordinate(point, this.canvas);
-        });
-        return data;
-    }
-
-    setROI(data) {
-        data.map((point, k) => {
-            let result = this._toRealCoordinate(point.x, point.y);
-            data[k] = { x: result[0], y: result[1] };
-        });
-
-        this.currentState = 'end';
-        this.points = data;
-        this._drawLines(this.points);
-    }
-
-    redrawROI() {
-        this._drawLines(this.points);
-    }
-
-    reset() {
-        this.currentState = 'begin';
-        this.points.length = 0;
-        console.log(this.points)
-        this._drawLines(this.points);
-    }
-
-    setROIFinishedCallback(callback) {
-        this.onDrawROIFinishedCallback = callback;
-    }
-
-    setLineNum(num) {
-        this.MAXLINE = num;
-    }
-
-    terminate() {
-        this.clearCanvas();
-        this.canvas.width = 0;
-        this.canvas.height = 0;
-        this.currentState = 'end';
-        this.points.length = 0;
-        this.canvas.removeEventListener('click', this._onClick);
-        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
-        this.canvas.removeEventListener('mousemove', this._onmousemove);
-    }
-}
-
-class BlankROIDrawer extends Drawer {
-    constructor(canvas) {
-        super(canvas);
-    }
-    getROIData() {
-
-    }
-
-    setROI() {
-
-    }
-
-    redrawROI() {
-
-    }
-
-    reset() {
-
-    }
-
-    terminate() {
-
-    }
-}
-
-function getMousePos(canvas, event) {
-    var rect = canvas.getBoundingClientRect();
-    var x = event.clientX - rect.left * (canvas.width / rect.width);
-    var y = event.clientY - rect.top * (canvas.height / rect.height);
-    //console.log("x:"+x+",y:"+y);
-    return { x: x, y: y };
-}
-
-function checkPolygon(points) {
-    for (let i = 0, length = points.length - 1; i < length; i++) {
-        for (let j = i + 1, len = points.length - 1; j < len; j++) {
-            let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
-            if (result) {
-                console.log('intersect:');
-                console.log(result)
-                return result;
-            }
-        }
-    }
-    return false;
-}
-
-
-function segmentsIntr(a, b, c, d) {
-
-    // 三角形abc 面积的2倍
-    var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
-
-    // 三角形abd 面积的2倍
-    var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
-
-    // 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
-    if (area_abc * area_abd >= 0) {
-        return false;
-    }
-
-    // 三角形cda 面积的2倍
-    var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
-    // 三角形cdb 面积的2倍
-    // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
-    var area_cdb = area_cda + area_abc - area_abd;
-    if (area_cda * area_cdb >= 0) {
-        return false;
-    }
-
-    //计算交点坐标
-    var t = area_cda / (area_abd - area_abc);
-    var dx = t * (b.x - a.x),
-        dy = t * (b.y - a.y);
-    return { x: a.x + dx, y: a.y + dy };
-
-}
-
-
-export { ROIDrawer, StandingDrawer, SpeedLine, BlankROIDrawer };

src/views/common/rtsp-player/libs/drawer.js

@@ -1,98 +0,0 @@
-class Drawer {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.context = canvas.getContext('2d');
-        this._init();
-    }
-
-    _init() {
-
-    }
-
-    cover(video) {
-        //console.log('cover')
-        let offsetLeft = 0, //canvas和video同级时
-            offsetTop = 0,
-            //offsetLeft = getOffsetRect(video).left, //canvas为body的子元素时，根据DOM文档定位
-            //offsetTop = getOffsetRect(video).top,
-            videoHeight = video.videoHeight,
-            videoWidth = video.videoWidth,
-            width = video.getBoundingClientRect().width || videoWidth,
-            height = video.getBoundingClientRect().height || videoHeight;
-        this.canvas.style.position = 'absolute';
-
-        //this.canvas.style.top = offsetTop +'px';
-
-        //this.canvas.style.height = height +'px';
-
-        let tempHeight = width * videoHeight / videoWidth;
-        if (tempHeight > height) { // 如果缩放后的高度大于标签宽度，则按照height缩放width
-            this.canvas.height = height;
-            this.canvas.width = videoWidth / videoHeight * height;
-            this.canvas.style.height = height + 'px';
-            this.canvas.style.width = videoWidth / videoHeight * height + 'px';
-            this.canvas.style.top = offsetTop + 'px';
-            this.canvas.style.left = offsetLeft + (width - videoWidth / videoHeight * height) / 2 + 'px';
-        } else {
-            this.canvas.width = width;
-            this.canvas.height = width * videoHeight / videoWidth;
-            this.canvas.style.width = width +'px';
-            this.canvas.style.height = width * videoHeight / videoWidth +'px';
-            this.canvas.style.left = offsetLeft + 'px';
-            this.canvas.style.top = offsetTop + (height - width * videoHeight / videoWidth) / 2 + 'px';
-        }
-    }
-
-    clearCanvas() {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-
-    terminate() {
-        this.clearCanvas();
-        this.canvas.width = 0;
-        this.canvas.height = 0;
-    }
-
-    /**
-     * 8191坐标系转真实坐标
-     * @param x 8191坐标系 x坐标
-     * @param y 8191坐标系 y坐标
-     * @returns {number[]} 数组
-     * @private
-     */
-    _toRealCoordinate(x, y) {
-        return [parseInt(x * this.canvas.width / 8191), parseInt(y * this.canvas.height / 8191)];
-    }
-
-    /**
-     * 真实坐标系转8191坐标系
-     * @param point {x: x, y: y}
-     * @param canvas 坐标系所在的画布
-     * return {x: x, y: y}
-     */
-     _to8191Coordinate(point, canvas) {
-        return {x: parseInt(point.x * 8191 / canvas.width), y: parseInt(point.y * 8191 / canvas.height)}
-    }
-}
-
-
-/**
- * 获取元素相对于dom文档的坐标
- * @param elem
- * @returns {{top: number, left: number}}
- */
-function getOffsetRect(elem) {
-    let box = elem.getBoundingClientRect();
-    let body = document.body;
-    let docElem = document.documentElement;
-    let scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
-    let scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
-    let clientTop = docElem.clientTop || body.clientTop || 0;
-    let clientLeft = docElem.clientLeft || body.clientLeft || 0;
-    let top = box.top + scrollTop - clientTop;
-    let left = box.left + scrollLeft - clientLeft;
-    return {top: Math.round(top), left: Math.round(left)}
-}
-
-
-export default Drawer;

src/views/common/rtsp-player/libs/ivsDrawer.js

@@ -1,275 +0,0 @@
-import Drawer from './drawer.js';
-class IvsDrawer extends Drawer {
-    constructor(canvas) {
-        super(canvas);
-        this.confidence = 200; //关键点最低置信度
-        this.displayNum = 7; //大于等于该值时才绘制姿态
-    }
-
-    _init() {
-        this.context.textAlign = 'left';
-        this.context.textBaseline = 'bottom';
-    }
-
-    draw(data, time) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        let rect = null,
-            length = 0,
-            undrawPoints = [],
-            bodyLineWidth = 0,
-            confidencePoint = [];
-        let bodyCount = 0,
-            speedBodyCount = 0;
-        data.map((content, k) => {
-            let {
-                points,
-                boundingBox,
-                handsUp,
-                boxConfidence,
-                Loiter,
-                Standing,
-                Alone,
-                guides,
-                speed,
-                overSpeed,
-                id
-            } = content;
-            switch (content.type) {
-                case 'rect':
-                    this.context.beginPath();
-                    this.context.strokeStyle = '#00ff00';
-                    this.context.fillStyle = '#00ff00';
-                    this.context.lineWidth = 1;//线条的宽度
-                    this.context.font = 'bold 20px Arial';
-                    if (!content.quality) {
-                        this.context.strokeStyle = '#ff0000';
-                    }
-
-                    rect = this._toRealCoordinate(content.rect[0], content.rect[1]);
-                    rect.push.apply(rect, this._toRealCoordinate(content.rect[2], content.rect[3]));
-                    this._drawRect(rect);
-
-                    //this.context.font = 'bold 20px Arial';
-                    //this.context.fillStyle = '#00ff00';
-                    // this._drawText(content.id, rect[0], rect[1]);
-                    // this._drawText(content.id, rect[0], rect[1]);
-                    // if (content.text) {
-                    //     this._drawText(content.text, rect[0], rect[1] - 20);
-                    // }
-                    if (content.text !== undefined) {
-                        this._drawText(content.text, rect[0], rect[1] - 5);
-                    }
-                    //console.log('绘制 ', time)
-                    this.context.stroke();
-                    this.context.closePath();
-                    break;
-                case 'text':
-                    break;
-                case 'coco-pose':
-                    length = points.length;
-                    undrawPoints = [];
-                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
-                    //过滤掉置信点不够的情况
-                    confidencePoint = points.filter((point) => {
-                        return point.confidence > this.confidence;
-                    });
-                    if (confidencePoint.length >= this.displayNum) {
-                        this.context.lineWidth = bodyLineWidth;
-                        //绘制实线
-                        for (let i = 0; i < length; i++) {
-                            if (undrawPoints.includes(i) || points[i].parent === -1) {
-                                continue;
-                            }
-                            let point = this._toRealCoordinate(points[i].x, points[i].y);
-                            let parentNode = points[points[i].parent];
-                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
-
-                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
-                            //confidence高于阈值时画实线，否则透明度降低
-                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
-                                this.context.globalAlpha = 0.3;
-                            }
-                            this.context.beginPath();
-                            this.context.moveTo(point[0], point[1]);
-                            this.context.lineTo(parentPoint[0], parentPoint[1]);
-                            this.context.stroke();
-                            this.context.globalAlpha = 1;
-                            this.context.closePath();
-                        }
-                        //绘制圆
-                        for (let i = 0; i < length; i++) {
-                            if (undrawPoints.includes(i)) {
-                                continue;
-                            }
-                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
-                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
-                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
-                            let point = this._toRealCoordinate(points[i].x, points[i].y);
-                            this.context.beginPath();
-                            this._drawArc(point[0], point[1], bodyLineWidth);
-                            this.context.fill();
-                            this.context.closePath();
-                            //}
-                        }
-                    } else {
-                        //console.log('only', confidencePoint.length, ' points');
-                    }
-                    //绘制人体框
-                    if (boxConfidence >= 0) {
-                        this.context.beginPath();
-                        this.context.lineWidth = 1;//线条的宽度
-                        this.context.strokeStyle = handsUp ? '#ff0000': '#0000ff';
-                        this.context.fillStyle = '#ffff00';
-                        this.context.font = 'bold 20px Arial';
-                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
-                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
-                        this._drawRect(rect);
-                        this._drawText(content.id, rect[0], rect[1] - 10);
-                        this.context.stroke();
-                        this.context.closePath();
-                    }
-                    break;
-                case 'region-detect':
-                    let {state, area} = content;
-                    this.context.lineWidth = 2;
-                    this.context.strokeStyle = (state === 1) ? '#ffff00' : '#ff0000';
-
-                    this.context.beginPath();
-                    let beginPoint = this._toRealCoordinate(area[0].x, area[0].y);
-                    this.context.moveTo(beginPoint[0], beginPoint[1]);
-                    for (let i = 1; i < area.length; i++) {
-                        let point = this._toRealCoordinate(area[i].x, area[i].y);
-                        this.context.lineTo(point[0], point[1]);
-                    }
-                    this.context.lineTo(beginPoint[0], beginPoint[1]);
-                    this.context.stroke();
-                    this.context.closePath();
-                    break;
-                case 'coco-poseex':
-                    length = points.length;
-                    undrawPoints = [];
-                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
-                    //过滤掉置信点不够的情况
-                    confidencePoint = points.filter((point) => {
-                        return point.confidence > this.confidence;
-                    });
-                    if (confidencePoint.length >= this.displayNum) {
-                        this.context.lineWidth = bodyLineWidth;
-                        //绘制实线
-                        for (let i = 0; i < length; i++) {
-                            if (undrawPoints.includes(i) || points[i].parent === -1) {
-                                continue;
-                            }
-                            let point = this._toRealCoordinate(points[i].x, points[i].y);
-                            let parentNode = points[points[i].parent];
-                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
-
-                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
-                            //confidence高于阈值时画实线，否则透明度降低
-                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
-                                this.context.globalAlpha = 0.3;
-                            }
-                            this.context.beginPath();
-                            this.context.moveTo(point[0], point[1]);
-                            this.context.lineTo(parentPoint[0], parentPoint[1]);
-                            this.context.stroke();
-                            this.context.globalAlpha = 1;
-                            this.context.closePath();
-                        }
-                        //绘制圆
-                        for (let i = 0; i < length; i++) {
-                            if (undrawPoints.includes(i)) {
-                                continue;
-                            }
-                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
-                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
-                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
-                            let point = this._toRealCoordinate(points[i].x, points[i].y);
-                            this.context.beginPath();
-                            this._drawArc(point[0], point[1], bodyLineWidth);
-                            this.context.fill();
-                            this.context.closePath();
-                            //}
-                        }
-                    } else {
-                        //console.log('only', confidencePoint.length, ' points');
-                    }
-                    //绘制人体框
-                    if (boxConfidence >= 0) {
-                        let strokeStyle = (Loiter === 2 || Standing || Alone) ? '#ff0000' : (Loiter ? '#EFB842' : '#0000ff');
-                        this.context.beginPath();
-                        this.context.lineWidth = 1;//线条的宽度
-                        this.context.strokeStyle = strokeStyle;
-                        this.context.fillStyle = '#ffff00';
-                        this.context.font = 'bold 20px Arial';
-                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
-                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
-                        this._drawRect(rect);
-                        this._drawText(content.id, rect[0], rect[1] - 10);
-                        this.context.stroke();
-                        this.context.closePath();
-                    }
-
-                    //绘制参考线
-                    if(guides) {
-                        this.context.strokeStyle = '#0000ff';
-                        let point0 = this._toRealCoordinate(guides[0].x, guides[0].y);
-                        let point1 = this._toRealCoordinate(guides[1].x, guides[1].y);
-                        this.context.beginPath();
-                        this.context.setLineDash([10]);
-                        this.context.moveTo(point0[0], point0[1]);
-                        this.context.lineTo(point1[0], point1[1]);
-                        this._drawText(content.id, point1[0], point1[1] - 10);
-                        this.context.stroke();
-                        this.context.setLineDash([]);
-                        this.context.closePath();
-                    }
-                    bodyCount++;
-                    break;
-                case 'over-speed':
-                    this.context.beginPath();
-                    this.context.fillStyle = overSpeed ? '#ff0000' : '#ffff00';
-                    this.context.font = 'bold 16px Arial';
-                    if(overSpeed) {
-                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s PMD`, 10, speedBodyCount * 20 + 30);
-                    } else {
-                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s`, 10, speedBodyCount * 20 + 30);
-                    }
-                    this.context.stroke();
-                    this.context.closePath();
-                    speedBodyCount++;
-                    break;
-                default:
-                    console.log('unknown ivs type: ', content.type);
-                    break;
-            }
-        });
-        //人数统计
-        if(bodyCount) {
-            this.context.beginPath();
-            this.context.fillStyle = '#ffff00';
-            this._drawText('人数:' + bodyCount, this.canvas.width - 100, 100);
-            this.context.closePath();
-        }
-    }
-
-
-    _drawRect(rect) {
-        //console.log(rect)
-        this.context.rect(rect[0], rect[1], rect[2], rect[3]);
-    }
-
-    _drawText(text, x, y) {
-        this.context.fillText(text, x, y);
-    }
-
-    _drawArc(x, y, r) {
-        this.context.arc(x, y, r, 0, 360);
-    }
-}
-
-function f() {
-
-}
-
-export default IvsDrawer;

src/views/common/rtsp-player/libs/md5.js

@@ -1,257 +0,0 @@
-/* eslint-disable */
-/*
- * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
- * Digest Algorithm, as defined in RFC 1321.
- * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
- * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
- * Distributed under the BSD License
- * See http://pajhome.org.uk/crypt/md5 for more info.
- */
-
-/*
- * Configurable variables. You may need to tweak these to be compatible with
- * the server-side, but the defaults work in most cases.
- */
-var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
-var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
-var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
-
-/*
- * These are the functions you'll usually want to call
- * They take string arguments and return either hex or base-64 encoded strings
- */
-export function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
-function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
-function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
-function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
-function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
-function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
-
-/*
- * Perform a simple self-test to see if the VM is working
- */
-function md5_vm_test()
-{
-  return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
-}
-
-/*
- * Calculate the MD5 of an array of little-endian words, and a bit length
- */
-function core_md5(x, len)
-{
-  /* append padding */
-  x[len >> 5] |= 0x80 << ((len) % 32);
-  x[(((len + 64) >>> 9) << 4) + 14] = len;
-
-  var a =  1732584193;
-  var b = -271733879;
-  var c = -1732584194;
-  var d =  271733878;
-
-  for(var i = 0; i < x.length; i += 16)
-  {
-    var olda = a;
-    var oldb = b;
-    var oldc = c;
-    var oldd = d;
-
-    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
-    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
-    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
-    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
-    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
-    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
-    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
-    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
-    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
-    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
-    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
-    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
-    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
-    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
-    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
-    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
-
-    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
-    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
-    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
-    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
-    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
-    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
-    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
-    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
-    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
-    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
-    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
-    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
-    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
-    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
-    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
-    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
-
-    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
-    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
-    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
-    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
-    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
-    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
-    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
-    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
-    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
-    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
-    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
-    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
-    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
-    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
-    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
-    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
-
-    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
-    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
-    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
-    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
-    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
-    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
-    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
-    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
-    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
-    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
-    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
-    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
-    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
-    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
-    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
-    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
-
-    a = safe_add(a, olda);
-    b = safe_add(b, oldb);
-    c = safe_add(c, oldc);
-    d = safe_add(d, oldd);
-  }
-  return Array(a, b, c, d);
-
-}
-
-/*
- * These functions implement the four basic operations the algorithm uses.
- */
-function md5_cmn(q, a, b, x, s, t)
-{
-  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
-}
-function md5_ff(a, b, c, d, x, s, t)
-{
-  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
-}
-function md5_gg(a, b, c, d, x, s, t)
-{
-  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
-}
-function md5_hh(a, b, c, d, x, s, t)
-{
-  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
-}
-function md5_ii(a, b, c, d, x, s, t)
-{
-  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
-}
-
-/*
- * Calculate the HMAC-MD5, of a key and some data
- */
-function core_hmac_md5(key, data)
-{
-  var bkey = str2binl(key);
-  if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
-
-  var ipad = Array(16), opad = Array(16);
-  for(var i = 0; i < 16; i++)
-  {
-    ipad[i] = bkey[i] ^ 0x36363636;
-    opad[i] = bkey[i] ^ 0x5C5C5C5C;
-  }
-
-  var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
-  return core_md5(opad.concat(hash), 512 + 128);
-}
-
-/*
- * Add integers, wrapping at 2^32. This uses 16-bit operations internally
- * to work around bugs in some JS interpreters.
- */
-function safe_add(x, y)
-{
-  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
-  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
-  return (msw << 16) | (lsw & 0xFFFF);
-}
-
-/*
- * Bitwise rotate a 32-bit number to the left.
- */
-function bit_rol(num, cnt)
-{
-  return (num << cnt) | (num >>> (32 - cnt));
-}
-
-/*
- * Convert a string to an array of little-endian words
- * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
- */
-function str2binl(str)
-{
-  var bin = Array();
-  var mask = (1 << chrsz) - 1;
-  for(var i = 0; i < str.length * chrsz; i += chrsz)
-    bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
-  return bin;
-}
-
-/*
- * Convert an array of little-endian words to a string
- */
-function binl2str(bin)
-{
-  var str = "";
-  var mask = (1 << chrsz) - 1;
-  for(var i = 0; i < bin.length * 32; i += chrsz)
-    str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
-  return str;
-}
-
-/*
- * Convert an array of little-endian words to a hex string.
- */
-function binl2hex(binarray)
-{
-  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
-  var str = "";
-  for(var i = 0; i < binarray.length * 4; i++)
-  {
-    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
-           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
-  }
-  return str;
-}
-
-/*
- * Convert an array of little-endian words to a base-64 string
- */
-function binl2b64(binarray)
-{
-  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-  var str = "";
-  for(var i = 0; i < binarray.length * 4; i += 3)
-  {
-    var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
-                | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
-                |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
-    for(var j = 0; j < 4; j++)
-    {
-      if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
-      else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
-    }
-  }
-  return str;
-}

src/views/common/rtsp-player/libs/player.js

@@ -1,131 +0,0 @@
-import WebSocketServer from './websocketServer.js';
-import {BlankROIDrawer, ROIDrawer, StandingDrawer, SpeedLine} from './ROIDrawer.js';
-
-let ROIdrawer = null;
-class Player {
-    constructor(option) {
-        this.ws = null;
-        this.options = option;
-        this.events = {
-            error: ()=>{}
-        };
-        this.ROI = {
-            ROIDrawer,
-        }
-    }
-
-    init(v) {
-        this.options.vue = v;
-        //console.log('init');
-        ROIdrawer = new ROIDrawer(this.options.drawer);
-        this.options.ROI = ROIdrawer;
-        this.ws = new WebSocketServer(this.options);
-        this.ws.init();
-    }
-
-    connect() {
-        for(let i in this.events) {
-            this.ws.setCallBack(i, this.events[i]);
-        }
-        this.ws.connect();
-    }
-
-    play() {
-        //console.log('player')
-        // this.close()
-        // this.ws = new WebSocketServer(this.options)
-        // this.ws.init();
-    }
-
-    pause() {
-        //console.log('pause')
-    }
-
-    close() {
-        if(this.ws)
-            this.ws.close();
-        if(ROIdrawer)
-            ROIdrawer.terminate();
-        //console.log('close1')
-    }
-
-    /**
-     * 绘制额外信息
-     * @param obj
-     */
-    updateInfo(obj) {
-        this.ws.updateInfo(obj);
-    }
-
-    changeROIType(type) {
-        ROIdrawer && ROIdrawer.terminate();
-        switch (type) {
-            case 'Polygon1':
-                ROIdrawer = new ROIDrawer(this.options.drawer);
-                ROIdrawer.setPolygonNum(1);
-                ROIdrawer.cover(this.options.video);
-                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
-                break;
-            case 'Polygon2':
-                ROIdrawer = new ROIDrawer(this.options.drawer);
-                ROIdrawer.setPolygonNum(2);
-                ROIdrawer.cover(this.options.video);
-                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
-                break;
-            case 'Polygon1Line1':
-                ROIdrawer = new StandingDrawer(this.options.drawer);
-                ROIdrawer.cover(this.options.video);
-                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
-                break;
-            case 'Line2':
-                ROIdrawer = new SpeedLine(this.options.drawer);
-                ROIdrawer.setLineNum(2);
-                ROIdrawer.cover(this.options.video);
-                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
-                break;
-            default:
-                ROIdrawer = new BlankROIDrawer(this.options.drawer);
-                break;
-        }
-        this.ws.setROIDrawer(ROIdrawer);
-    }
-
-
-    setROI(data) {
-        ROIdrawer && ROIdrawer.setROI(data);
-    }
-
-    resetROI() {
-        ROIdrawer && ROIdrawer.reset();
-    }
-
-    getROIData() {
-        if(ROIdrawer) {
-            return ROIdrawer.getROIData();
-        }
-        return null;
-    }
-
-    setPolygonNum(num) {
-        ROIdrawer && ROIdrawer.setPolygonNum(num);
-    }
-
-    /**
-     * 自定义事件
-     * 目前支持如下事件
-     * [error] websocket连接失败
-     * [noStream] 收不到码流
-     * [canplay] 视频能够播放时触发
-     * [initialCompleted] 视频初始化完成, 首次canplay
-     * [ROIFinished] 手动绘制ROI完成时触发
-     *
-     * @param event 事件名
-     * @param callback 事件响应函数
-     */
-    on(event, callback) {
-        this.events[event] = callback;
-    }
-}
-
-export default Player;
-

src/views/common/rtsp-player/libs/websocketServer.js

@@ -1,652 +0,0 @@
-import WorkerManager from './workerManager.js';
-import { hex_md5 } from "./md5.js";
-
-function WebSocketServer(options) {
-    let videoElement = null;
-    let canvasElement = null;
-    let ROIElement = null;
-    let websocket = null;
-    let wsURL = null;
-    let rtspURL = null;
-    let ip = null;
-    let port = null;
-    let username = null;
-    let password = null;
-    let CSeq = 1;
-    let IsDescribe = false; //RTSP响应报文中，describe时有两段，以'\r\n'分段
-    let currentState = "Options";
-    let describekey = false;
-    let Authentication = '\r\n'; //认证，信令最后四个字节为'\r\n\r\n'，为补足，默认为'\r\n'
-    let sessionID = '';
-    let rtspSDPData = {};
-    let SDPinfo = []; //SDP信息
-    let setupSDPIndex = 0;
-    let getParameterInterval = null; //保活
-    let AACCodecInfo = null;
-
-    //RTP包处理相关
-    let rtspinterleave = null;
-    let RTPPacketTotalSize = 0;
-    let rtpheader = null;
-    let rtpPacketArray = null;
-
-    let workerManager = null;
-    let connectFailCallback = null;
-
-    let lastStreamTime = null; //记录收到码流的时间
-    let getStreamInterval = null;
-    let noStreamCallback = null;
-
-    const RTSP_INTERLEAVE_LENGTH = 4; //交织头占4个字节
-    const RTSP_STATE = {
-        OK: 200,
-        UNAUTHORIZED: 401,
-        NOTFOUND: 404,
-        INVALID_RANGE: 457,
-        NOTSERVICE: 503,
-        DISCONNECT: 999
-    };
-    const SEND_GETPARM_INTERVAL = 20000; //保活时间
-
-    let v = null;
-
-    function constructor({ video, canvas, ROI, wsUrl, rtspUrl, vue } = { options }) {
-        videoElement = video;
-        canvasElement = canvas;
-        ROIElement = ROI;
-        rtspURL = rtspUrl;
-        //分解 rtspUrl
-        let ret = rtspUrl.match(/rtsp:\/\/(.+):(.+)@(.+):(\d+)(.+)/)
-        username = ret[1]
-        password = ret[2]
-        ip = ret[3]
-        port = ret[4]
-        wsURL = wsUrl + '?tcpaddr=' + encodeURIComponent(username + ":" + password + "@" + ip + ":" + port);
-        v = vue
-    }
-
-    constructor.prototype = {
-        init() {
-            workerManager = new WorkerManager();
-            workerManager.init(videoElement, canvasElement, ROIElement, v);
-        },
-        connect() {
-            websocket = new WebSocket(wsURL);
-            websocket.binaryType = 'arraybuffer';
-            websocket.onmessage = ReceiveMessage;
-            websocket.onopen = () => {
-                let option = StringToU8Array("OPTIONS " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n\r\n");
-                websocket.send(option);
-                //console.log('websocket connect')
-            };
-            websocket.onerror = () => {
-                if (connectFailCallback) {
-                    connectFailCallback('websocket connect fail');
-                }
-            }
-        },
-        close() {
-            clearInterval(getParameterInterval);
-            clearInterval(getStreamInterval);
-            SendRtspCommand(CommandConstructor("TEARDOWN", null));
-            websocket.close();
-            if (workerManager) {
-                workerManager.terminate();
-            }
-        },
-        setCallBack(event, callback) {
-            switch (event) {
-                case 'error':
-                    connectFailCallback = () => {
-                        callback();
-                        this.close();
-                    };
-                    break;
-                case 'noStream':
-                    noStreamCallback = () => {
-                        callback();
-                        this.close();
-                    };
-                    break;
-                case 'canplay':
-                case 'initialCompleted':
-                case 'ROIFinished':
-                    workerManager.setEventCallBack(event, callback);
-                    break;
-                default:
-                    console.log('unsupport event');
-            }
-        },
-        updateInfo(obj) {
-            workerManager.updateInfo(obj);
-        },
-        setROIDrawer(ROIElement) {
-            workerManager.setROIDrawer(ROIElement);
-        },
-    };
-
-
-
-    return new constructor(options);
-
-    /**
-     * websocket消息处理函数
-     * @param event
-     * @constructor
-     */
-    function ReceiveMessage(event) {
-        let data = event.data;
-        let receiveUint8 = new Uint8Array(data);
-        let PreceiveUint8 = new Uint8Array(receiveUint8.length);
-        PreceiveUint8.set(receiveUint8, 0);
-        let dataLength = PreceiveUint8.length;
-        // if(dataLength < 10) {
-        //     //console.log(String.fromCharCode.apply(null, PreceiveUint8))
-        // }
-        while (dataLength > 0) {
-            if (PreceiveUint8[0] != 36) {//非$符号表示RTSP
-                //console.log(PreceiveUint8[0], PreceiveUint8[1], PreceiveUint8[2], PreceiveUint8[3], PreceiveUint8[4])
-                //console.log(PreceiveUint8.length)
-                let PreceiveMsg = String.fromCharCode.apply(null, PreceiveUint8);
-                //console.log(PreceiveMsg)
-                let rtspendpos = null;
-                if (IsDescribe === true) {
-                    rtspendpos = PreceiveMsg.lastIndexOf("\r\n");
-                    IsDescribe = false
-                } else {
-                    rtspendpos = PreceiveMsg.search("\r\n\r\n");
-
-                }
-                let rtspstartpos = PreceiveMsg.search("RTSP");
-                if (rtspstartpos !== -1) {
-                    if (rtspendpos !== -1) {
-                        let RTSPResArray = PreceiveUint8.subarray(rtspstartpos, rtspendpos + RTSP_INTERLEAVE_LENGTH);
-                        PreceiveUint8 = PreceiveUint8.subarray(rtspendpos + RTSP_INTERLEAVE_LENGTH);
-                        let receiveMsg = String.fromCharCode.apply(null, RTSPResArray);
-                        RTSPResHandler(receiveMsg);
-                        dataLength = PreceiveUint8.length;
-                    } else {
-                        dataLength = PreceiveUint8.length;
-                        return
-                    }
-                } else {
-                    PreceiveUint8 = new Uint8Array;
-                    return
-                }
-            } else { //$表示RTP和RTCP
-                //console.log('RTP开始');
-                //console.log(PreceiveUint8.length)
-                // if(PreceiveUint8.length == 4) {
-                //    console.log(PreceiveUint8)
-                // }
-                lastStreamTime = Date.now();
-                rtspinterleave = PreceiveUint8.subarray(0, RTSP_INTERLEAVE_LENGTH);
-                //console.log(rtspinterleave)
-                RTPPacketTotalSize = rtspinterleave[2] * 256 + rtspinterleave[3];
-                if (RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH <= PreceiveUint8.length) {
-                    rtpheader = PreceiveUint8.subarray(RTSP_INTERLEAVE_LENGTH, 16);
-                    rtpPacketArray = PreceiveUint8.subarray(16, RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
-                    //rtpCallback(rtspinterleave, rtpheader, rtpPacketArray);
-                    workerManager.parseRtpData(rtspinterleave, rtpheader, rtpPacketArray);
-                    PreceiveUint8 = PreceiveUint8.subarray(RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
-                    //console.log('PreceiveUint8.length:  ' + PreceiveUint8.length)
-                    dataLength = PreceiveUint8.length;
-                } else {
-                    dataLength = PreceiveUint8.length;
-                    //console.count('11111111111')
-                    //console.log(PreceiveUint8)
-                    return
-                }
-            }
-        }
-    }
-
-    /**
-     * 将字符串转为arrayBuffer
-     * @param string
-     */
-    function StringToU8Array(string) {
-        CSeq++;
-        //console.log(string)
-        let stringLength = string.length;
-        let outputUint8Array = new Uint8Array(new ArrayBuffer(stringLength));
-        for (let i = 0; i < stringLength; i++) {
-            outputUint8Array[i] = string.charCodeAt(i);
-        }
-        //console.log(outputUint8Array)
-        return outputUint8Array;
-        //return string;
-    }
-
-    /**
-     * 处理收到的RTSP信令，解析后发送下一条
-     * @param stringMessage
-     * @constructor
-     */
-    function RTSPResHandler(stringMessage) {
-        //console.log(stringMessage)
-        //let seekPoint = stringMessage.search("CSeq: ") + 5;
-        let rtspResponseMsg = parseRtsp(stringMessage);
-        //console.log(rtspResponseMsg)
-        if (rtspResponseMsg.ResponseCode === RTSP_STATE.UNAUTHORIZED && Authentication === "\r\n") { //需要鉴权
-            if (currentState === "Describe") {
-                IsDescribe = false;
-                describekey = false;
-            }
-            // username= getUser(rtspURL).username;//用url里覆盖配置
-            // password = getUser(rtspURL).password;
-            //console.log(rtspResponseMsg)
-            SendRtspCommand(formDigest(rtspResponseMsg));
-            Authentication = "\r\n";
-
-        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.OK) { //服务器端返回成功
-            switch (currentState) {
-                case 'Options':
-                    currentState = "Describe";
-                    SendRtspCommand(CommandConstructor("DESCRIBE", null));
-                    break;
-                case "Describe":
-                    rtspSDPData = parseDescribeResponse(stringMessage);
-                    if (typeof rtspResponseMsg.ContentBase !== "undefined") {
-                        rtspSDPData.ContentBase = rtspResponseMsg.ContentBase
-                    }
-                    //console.log(rtspSDPData.Sessions)
-                    for (let idx = 0; idx < rtspSDPData.Sessions.length; idx++) {
-                        let sdpInfoObj = {};
-                        if (rtspSDPData.Sessions[idx].CodecMime === "H264") { //暂时只支持H264
-                            sdpInfoObj.codecName = rtspSDPData.Sessions[idx].CodecMime;
-                            //sdpInfoObj.trackID = rtspSDPData.Sessions[idx].ControlURL;
-                            sdpInfoObj.trackID = rtspSDPData.Sessions[idx].trackID;
-                            sdpInfoObj.ClockFreq = rtspSDPData.Sessions[idx].ClockFreq;
-                            sdpInfoObj.Port = parseInt(rtspSDPData.Sessions[idx].Port);
-                            if (typeof rtspSDPData.Sessions[idx].Framerate !== "undefined") {
-                                sdpInfoObj.Framerate = parseInt(rtspSDPData.Sessions[idx].Framerate)
-                            }
-                            if (typeof rtspSDPData.Sessions[idx].SPS !== "undefined") {
-                                sdpInfoObj.SPS = rtspSDPData.Sessions[idx].SPS;
-                            }
-                            SDPinfo.push(sdpInfoObj)
-                        } else {
-                            console.log("Unknown codec type:", rtspSDPData.Sessions[idx].CodecMime, rtspSDPData.Sessions[idx].ControlURL)
-                        }
-                    }
-                    setupSDPIndex = 0;
-                    currentState = "Setup";
-                    //console.log(SDPinfo[setupSDPIndex])
-                    SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
-                    //SendRtspCommand(CommandConstructor("SETUP", 'track1'));
-                    break;
-                case "Setup":
-                    sessionID = rtspResponseMsg.SessionID;
-                    //多路流(如音频流)
-                    //在Describe中暂时只解析H264视频流，因此SDPinfo.length始终为1
-                    if (setupSDPIndex < SDPinfo.length) {
-                        SDPinfo[setupSDPIndex].RtpInterlevedID = rtspResponseMsg.RtpInterlevedID;
-                        SDPinfo[setupSDPIndex].RtcpInterlevedID = rtspResponseMsg.RtcpInterlevedID;
-                        setupSDPIndex += 1;
-                        if (setupSDPIndex !== SDPinfo.length) {
-                            SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
-                        } else {
-                            workerManager.sendSdpInfo(SDPinfo);
-                            currentState = "Play";
-                            SendRtspCommand(CommandConstructor("PLAY"));
-                        }
-                    }
-
-                    sessionID = rtspResponseMsg.SessionID;
-                    //开始播放后，发送GET_PARAMETER进行保活
-                    clearInterval(getParameterInterval);
-                    getParameterInterval = setInterval(function () {
-                        SendRtspCommand(CommandConstructor("GET_PARAMETER", null))
-                    }, SEND_GETPARM_INTERVAL);
-
-                    getStreamInterval = setInterval(() => {
-                        if (!getBitStream()) {
-                            console.log('超时！');
-                            noStreamCallback && noStreamCallback();
-                        }
-                    }, 5000);
-                    break;
-                case "Play":
-
-                    break;
-                default:
-                    console.log('暂不支持的信令');
-                    break;
-            }
-        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTSERVICE) { //服务不可用
-
-        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTFOUND) { //Not Found
-
-        }
-    }
-
-    /**
-     * 发送rtsp信令
-     * @param sendMessage
-     * @constructor
-     */
-    function SendRtspCommand(sendMessage) {
-        //console.log(sendMessage)
-        if (websocket !== null && websocket.readyState === WebSocket.OPEN) {
-            if (describekey === false) {
-                let describeCmd = sendMessage.search("DESCRIBE");
-                if (describeCmd !== -1) {
-                    IsDescribe = true;
-                    describekey = true;
-                }
-            }
-            //console.log(sendMessage)
-            websocket.send(StringToU8Array(sendMessage))
-        } else {
-            console.log('websocket未连接')
-        }
-    }
-
-    /**
-     * 组装RTSP信令
-     * @param method
-     * @param trackID
-     * @returns {*}
-     * @constructor
-     */
-    function CommandConstructor(method, trackID, interleaved) {
-        let sendMessage;
-        switch (method) {
-            case "OPTIONS":
-            case "TEARDOWN":
-            case "SET_PARAMETERS":
-            case "DESCRIBE":
-                //TODO: 保活
-                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
-                break;
-            case "SETUP":
-                //console.log(trackID)
-                //TODO 多trackID的时候测试一下
-                sendMessage = method + " " + rtspURL + "/" + trackID + " RTSP/1.0\r\nCSeq: " + CSeq + Authentication + "Transport:RTP/AVP/TCP;unicast;interleaved=" + 2 * interleaved + "-" + (2 * interleaved + 1) + "\r\n";
-                if (sessionID == 0) {
-                    sendMessage += "\r\n";
-                } else {
-                    sendMessage += "Session: " + sessionID + "\r\n\r\n";
-                }
-                break;
-            case "PLAY":
-                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n" + "Range: npt=0.000-\r\n" + Authentication;
-                break;
-            case "PAUSE":
-                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n\r\n";
-                break;
-            case "GET_PARAMETER":
-                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n" + Authentication;
-                break;
-            default:
-                console.log('暂不支持的RTSP信令');
-        }
-        //console.log(sendMessage);
-        return sendMessage;
-    }
-
-    /**
-     * 解析RTSP信令
-     * @param message1
-     */
-    function parseRtsp(message1) {
-        let RtspResponseData = {};
-        let cnt = 0, cnt1 = 0, ttt = null, LineTokens = null;
-        let message = null;
-        if (message1.search("Content-Type: application/sdp") !== -1) {
-            let messageTok = message1.split("\r\n\r\n");
-            message = messageTok[0]
-        } else {
-            message = message1
-        }
-        let TokenziedResponseLines = message.split("\r\n");
-        let ResponseCodeTokens = TokenziedResponseLines[0].split(" ");
-        if (ResponseCodeTokens.length > 2) {
-            RtspResponseData.ResponseCode = parseInt(ResponseCodeTokens[1]);
-            RtspResponseData.ResponseMessage = ResponseCodeTokens[2]
-        }
-        if (RtspResponseData.ResponseCode === RTSP_STATE.OK) {
-            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
-                LineTokens = TokenziedResponseLines[cnt].split(":");
-                if (LineTokens[0] === "Public") {
-                    RtspResponseData.MethodsSupported = LineTokens[1].split(",")
-                } else if (LineTokens[0] === "CSeq") {
-                    RtspResponseData.CSeq = parseInt(LineTokens[1])
-                } else if (LineTokens[0] === "Content-Type") {
-                    RtspResponseData.ContentType = LineTokens[1];
-                    if (RtspResponseData.ContentType.search("application/sdp") !== -1) {
-                        RtspResponseData.SDPData = parseDescribeResponse(message1)
-                    }
-                } else if (LineTokens[0] === "Content-Length") {
-                    RtspResponseData.ContentLength = parseInt(LineTokens[1])
-                } else if (LineTokens[0] === "Content-Base") {
-                    let ppos = TokenziedResponseLines[cnt].search("Content-Base:");
-                    if (ppos !== -1) {
-                        RtspResponseData.ContentBase = TokenziedResponseLines[cnt].substr(ppos + 13)
-                    }
-                } else if (LineTokens[0] === "Session") {
-                    let SessionTokens = LineTokens[1].split(";");
-                    //RtspResponseData.SessionID = parseInt(SessionTokens[0])
-                    //console.log(SessionTokens[0])
-                    RtspResponseData.SessionID = SessionTokens[0].trim();
-                } else if (LineTokens[0] === "Transport") {
-                    let TransportTokens = LineTokens[1].split(";");
-                    for (cnt1 = 0; cnt1 < TransportTokens.length; cnt1++) {
-                        let tpos = TransportTokens[cnt1].search("interleaved=");
-                        if (tpos !== -1) {
-                            let interleaved = TransportTokens[cnt1].substr(tpos + 12);
-                            let interleavedTokens = interleaved.split("-");
-                            if (interleavedTokens.length > 1) {
-                                RtspResponseData.RtpInterlevedID = parseInt(interleavedTokens[0]);
-                                RtspResponseData.RtcpInterlevedID = parseInt(interleavedTokens[1])
-                            }
-                        }
-                    }
-                } else if (LineTokens[0] === "RTP-Info") {
-                    LineTokens[1] = TokenziedResponseLines[cnt].substr(9);
-                    let RTPInfoTokens = LineTokens[1].split(",");
-                    RtspResponseData.RTPInfoList = [];
-                    for (cnt1 = 0; cnt1 < RTPInfoTokens.length; cnt1++) {
-                        let RtpTokens = RTPInfoTokens[cnt1].split(";");
-                        let RtpInfo = {};
-                        for (let cnt2 = 0; cnt2 < RtpTokens.length; cnt2++) {
-                            let poss = RtpTokens[cnt2].search("url=");
-                            if (poss !== -1) {
-                                RtpInfo.URL = RtpTokens[cnt2].substr(poss + 4)
-                            }
-                            poss = RtpTokens[cnt2].search("seq=");
-                            if (poss !== -1) {
-                                RtpInfo.Seq = parseInt(RtpTokens[cnt2].substr(poss + 4))
-                            }
-                        }
-                        RtspResponseData.RTPInfoList.push(RtpInfo)
-                    }
-                }
-            }
-        } else if (RtspResponseData.ResponseCode === RTSP_STATE.UNAUTHORIZED) {
-            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
-                LineTokens = TokenziedResponseLines[cnt].split(":");
-                if (LineTokens[0] === "CSeq") {
-                    RtspResponseData.CSeq = parseInt(LineTokens[1])
-                } else if (LineTokens[0] === "WWW-Authenticate") {
-                    let AuthTokens = LineTokens[1].split(",");
-                    for (cnt1 = 0; cnt1 < AuthTokens.length; cnt1++) {
-                        let pos = AuthTokens[cnt1].search("Digest realm=");
-                        if (pos !== -1) {
-                            ttt = AuthTokens[cnt1].substr(pos + 13);
-                            let realmtok = ttt.split('"');
-                            RtspResponseData.Realm = realmtok[1]
-                        }
-                        pos = AuthTokens[cnt1].search("nonce=");
-                        if (pos !== -1) {
-                            ttt = AuthTokens[cnt1].substr(pos + 6);
-                            let noncetok = ttt.split('"');
-                            RtspResponseData.Nonce = noncetok[1]
-                        }
-                    }
-                }
-            }
-        }
-        return RtspResponseData
-    }
-
-    /**
-     * 解析Describe信令
-     * @param message1
-     */
-    function parseDescribeResponse(message1) {
-        //console.log(message1)
-        let SDPData = {};
-        let Sessions = [];
-        SDPData.Sessions = Sessions;
-        let message = null;
-        if (message1.search("Content-Type: application/sdp") !== -1) {
-            let messageTok = message1.split("\r\n\r\n");
-            message = messageTok[1]
-        } else {
-            message = message1
-        }
-        let TokenziedDescribe = message.split("\r\n");
-        let mediaFound = false;
-        for (let cnt = 0; cnt < TokenziedDescribe.length; cnt++) {
-            let SDPLineTokens = TokenziedDescribe[cnt].split("=");
-            if (SDPLineTokens.length > 0) {
-                switch (SDPLineTokens[0]) {
-                    case "a":
-                        let aLineToken = SDPLineTokens[1].split(":");
-                        if (aLineToken.length > 1) {
-                            if (aLineToken[0] === "control") {
-                                let pos = TokenziedDescribe[cnt].search("control:");
-                                if (mediaFound === true) {
-                                    if (pos !== -1) {
-                                        SDPData.Sessions[SDPData.Sessions.length - 1].ControlURL = TokenziedDescribe[cnt].substr(pos + 8);
-                                        let trackPos = TokenziedDescribe[cnt].search("track");
-                                        SDPData.Sessions[SDPData.Sessions.length - 1].trackID = TokenziedDescribe[cnt].substr(trackPos);
-                                    }
-                                } else {
-                                    if (pos !== -1) {
-                                        SDPData.BaseURL = TokenziedDescribe[cnt].substr(pos + 8)
-                                    }
-                                }
-                            } else if (aLineToken[0] === "rtpmap") {
-                                //console.log(aLineToken)
-                                let rtpmapLine = aLineToken[1].split(" ");
-                                //console.log(rtpmapLine)
-                                SDPData.Sessions[SDPData.Sessions.length - 1].PayloadType = rtpmapLine[0];
-                                let MimeLine = rtpmapLine[1].split("/");
-                                SDPData.Sessions[SDPData.Sessions.length - 1].CodecMime = MimeLine[0];
-                                if (MimeLine.length > 1) {
-                                    SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq = MimeLine[1]
-                                }
-                            } else if (aLineToken[0] === "framesize") {
-                                let framesizeLine = aLineToken[1].split(" ");
-                                if (framesizeLine.length > 1) {
-                                    let framesizeinf = framesizeLine[1].split("-");
-                                    SDPData.Sessions[SDPData.Sessions.length - 1].Width = framesizeinf[0];
-                                    SDPData.Sessions[SDPData.Sessions.length - 1].Height = framesizeinf[1]
-                                }
-                            } else if (aLineToken[0] === "framerate") {
-                                SDPData.Sessions[SDPData.Sessions.length - 1].Framerate = aLineToken[1]
-                            } else if (aLineToken[0] === "fmtp") {
-                                let sessLine = TokenziedDescribe[cnt].split(" ");
-                                if (sessLine.length < 2) {
-                                    continue
-                                }
-                                for (let ii = 1; ii < sessLine.length; ii++) {
-                                    let sessToken = sessLine[ii].split(";");
-                                    let sessprmcnt = 0;
-                                    for (sessprmcnt = 0; sessprmcnt < sessToken.length; sessprmcnt++) {
-                                        let ppos = sessToken[sessprmcnt].search("mode=");
-                                        if (ppos !== -1) {
-                                            SDPData.Sessions[SDPData.Sessions.length - 1].mode = sessToken[sessprmcnt].substr(ppos + 5)
-                                        }
-                                        ppos = sessToken[sessprmcnt].search("config=");
-                                        if (ppos !== -1) {
-                                            SDPData.Sessions[SDPData.Sessions.length - 1].config = sessToken[sessprmcnt].substr(ppos + 7);
-                                            AACCodecInfo.config = SDPData.Sessions[SDPData.Sessions.length - 1].config;
-                                            AACCodecInfo.clockFreq = SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq;
-                                            AACCodecInfo.bitrate = SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate
-                                        }
-                                        ppos = sessToken[sessprmcnt].search("sprop-vps=");
-                                        if (ppos !== -1) {
-                                            SDPData.Sessions[SDPData.Sessions.length - 1].VPS = sessToken[sessprmcnt].substr(ppos + 10)
-                                        }
-                                        ppos = sessToken[sessprmcnt].search("sprop-sps=");
-                                        if (ppos !== -1) {
-                                            SDPData.Sessions[SDPData.Sessions.length - 1].SPS = sessToken[sessprmcnt].substr(ppos + 10)
-                                        }
-                                        ppos = sessToken[sessprmcnt].search("sprop-pps=");
-                                        if (ppos !== -1) {
-                                            SDPData.Sessions[SDPData.Sessions.length - 1].PPS = sessToken[sessprmcnt].substr(ppos + 10)
-                                        }
-                                        ppos = sessToken[sessprmcnt].search("sprop-parameter-sets=");
-                                        if (ppos !== -1) {
-                                            let SPSPPS = sessToken[sessprmcnt].substr(ppos + 21);
-                                            let SPSPPSTokenized = SPSPPS.split(",");
-                                            if (SPSPPSTokenized.length > 1) {
-                                                SDPData.Sessions[SDPData.Sessions.length - 1].SPS = SPSPPSTokenized[0];
-                                                SDPData.Sessions[SDPData.Sessions.length - 1].PPS = SPSPPSTokenized[1]
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                        break;
-                    case "m":
-                        let mLineToken = SDPLineTokens[1].split(" ");
-                        let Session = {};
-                        Session.Type = mLineToken[0];
-                        Session.Port = mLineToken[1];
-                        Session.Payload = mLineToken[3];
-                        SDPData.Sessions.push(Session);
-                        mediaFound = true;
-                        break;
-                    case "b":
-                        if (mediaFound === true) {
-                            let bLineToken = SDPLineTokens[1].split(":");
-                            SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate = bLineToken[1]
-                        }
-                        break
-                }
-            }
-        }
-        return SDPData
-    };
-
-    function formDigest(message) {
-        let { Nonce, Realm } = message;
-        //Realm = '54c415830ec4';
-        //Nonce = 'fb01c51948704e59eb5a474b33caff8b';
-        let user = {
-            username: username,
-            password: password,
-        };
-
-        let hex1 = hex_md5(user.username + ":" + Realm + ":" + user.password);
-        let hex2 = hex_md5(currentState.toUpperCase() + ":" + rtspURL);
-        let responce = hex_md5(hex1 + ":" + Nonce + ":" + hex2);
-        Authentication = 'Authorization: Digest username="' + user.username + '", realm="' + Realm + '", nonce="' + Nonce + '",uri="' + rtspURL + '", response="' + responce + '"\r\n' + "Accept: application/sdp\r\n" + '\r\n';
-
-        return currentState.toUpperCase() + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
-    }
-
-    function getUser(rtspUrl) {
-        let user = rtspUrl.split('rtsp://')[1].split('@')[0];
-        let username = user.split(':')[0],
-            password = user.split(':')[1];
-        return { username, password };
-    }
-
-    function getBitStream() {
-        if (lastStreamTime === null) {
-            lastStreamTime = Date.now();
-        } else {
-            //console.log(Date.now() - lastStreamTime)
-            return Date.now() - lastStreamTime < 5000;
-        }
-    }
-}
-
-export default WebSocketServer;

src/views/common/rtsp-player/libs/workerManager.js

@@ -1,536 +0,0 @@
-import VideoMediaSource from './MediaSource.js';
-import MP4Remux from './MP4Remux.js';
-import IvsDrawer from './ivsDrawer.js';
-
-function WorkerManager() {
-    let videoWorker;
-    let SDPInfo;
-    let messageArray = [];
-    let rtpStackCount = 0;
-    let videoElement = null;
-    let canvasElement = null;
-    let videoMS = null;
-
-    const rtpStackCheckNum = 10;
-
-    let codecInfo = null;
-    let initSegmentData = null;
-    let mediaInfo = {
-        id: 1,
-        samples: null,
-        baseMediaDecodeTime: 0
-    };
-    let numBox = 1;
-    let mediaSegNum = 0; //用于记录缓存的box个数
-    let mediaFrameData = null; //用于缓存未喂入mse的box
-    let mediaFrameSize = 0; //mediaFrameData的大小
-    let preBaseDecodeTime = 0; //上一个解码时间
-    let curBaseDecodeTime = 0; //从第一帧到当前帧的持续时间
-    let mediaSegmentData = null; //MP4化的数据
-    let sequenseNum = 1;
-
-    let mp4Remux;
-
-    let firstTimeStamp = null; //第一个视频帧的时间戳
-    let SEIinfo = null;
-    let ivsDrawer = null;
-    let info = null;
-    let MAX_INFO = 25; // 限制info最大长度
-    let startDrawIVS = false;
-    let onCanplayCallback = null;
-    let ROIdrawer = null;
-
-    let initialCompleted = false;
-    let onInitialCompletedCallback = null;
-    let frameRate = 25; //默认25
-    let resizeObserver = null;
-    let vw = null;
-    function constructor() {
-    }
-
-    constructor.prototype = {
-        init(video,canvas,ROIElement,vue) {
-            videoWorker = new Worker('/libs/videoWorker.js');
-            // vw = new VideoWorker();// 这里初始化
-            // videoWorker = vue.$worker.create([
-            //     {
-            //         message:'message',
-            //         func:(data)=>{
-            //             if(data.vw && data.vw.receive){
-            //                 let msg = {type:data.type,data:data.data}
-            //                 data.vw.receive(msg)
-            //             }
-            //         }
-            //     }
-            // ])
-
-            videoWorker.onmessage = videoWorkerMessage;
-            videoElement = video;
-            canvasElement = canvas;
-
-            mp4Remux = new MP4Remux();
-            mp4Remux.init();
-
-            SEIinfo = new IVSQueue();
-            info = new LruCache(MAX_INFO);
-            ivsDrawer = new IvsDrawer(canvasElement);
-            ROIdrawer = ROIElement;
-
-            resizeObserver = new ResizeObserver( entries => {
-                ivsDrawer.cover(videoElement);
-                ROIdrawer.cover(videoElement);
-                ROIdrawer.redrawROI();
-            });
-            resizeObserver.observe(videoElement);
-        },
-
-        sendSdpInfo(SDPinfo) {
-            SDPInfo = SDPinfo;
-            console.log(SDPinfo)
-            let message = {
-                type: "sdpInfo",
-                data: {
-                    sdpInfo: SDPInfo
-                }
-            };
-            videoWorker.postMessage(message);
-            //Todo:暂时采用第一路视频的帧率
-            if(SDPInfo.length && SDPInfo[0].Framerate) {
-                frameRate = SDPinfo[0].Framerate;
-            }
-        },
-
-        parseRtpData(rtspinterleave, rtpheader, rtpPacketArray) {
-            // console.log(rtspinterleave)
-            // console.log( rtpheader)
-            // //console.log(rtpPacketArray)
-            // console.log(rtpheader[3])
-
-            let mediaType = rtspinterleave[1];
-            let idx = parseInt(mediaType / 2, 10);
-            let markerBitHex = 128;
-            let message = {
-                type: "rtpData",
-                data: {rtspInterleave: rtspinterleave, header: rtpheader, payload: rtpPacketArray}
-            };
-            //console.log(rtspinterleave)
-            //console.log('idx: ',idx)
-
-            if(idx !== 0) {
-                console.log('idx: ',rtspinterleave);
-                //console.log(SDPInfo)
-                return;
-            }
-            switch (SDPInfo[idx].codecName) {
-                case"H264":
-                    messageArray.push(message);
-                    if (rtpStackCount >= rtpStackCheckNum || (rtpheader[1] & markerBitHex) === markerBitHex) {
-                        if((rtpheader[1] & markerBitHex) === markerBitHex) {
-                            //onsole.log('遇到终止位: ' + rtpheader[1])
-                        }
-                        let sendMessage = {type: "rtpDataArray", data: messageArray};
-                        if (videoWorker) {
-                            videoWorker.postMessage(sendMessage)
-                        }
-                        sendMessage = null;
-                        messageArray = [];
-                        rtpStackCount = 0
-                        //console.log('1111111111')
-                    } else {
-                        rtpStackCount++
-                    }
-                    break;
-                default:
-            }
-        },
-
-        /**
-         * 更新需要绘制的其它信息
-         * @param obj
-         */
-        updateInfo(obj) {
-            //if((obj.name !== '') && (obj.name !== undefined) && (obj.name !== null)) {
-            info.set(obj.id, obj.name);
-            //}
-        },
-
-        setEventCallBack(event, callback) {
-            switch (event) {
-                case 'canplay':
-                    onCanplayCallback = callback;
-                    break;
-                case 'initialCompleted':
-                    onInitialCompletedCallback = callback;
-                    break;
-                case 'ROIFinished':
-                    ROIdrawer.setROIFinishedCallback(callback);
-                    break;
-                default:
-                    break;
-            }
-        },
-
-        setROIDrawer(ROIElement) {
-            ROIdrawer = ROIElement;
-        },
-
-        terminate() {
-            videoWorker.terminate();
-            ivsDrawer.terminate();
-            resizeObserver && resizeObserver.unobserve(videoElement);
-            resizeObserver = null;
-            info.clear();
-            startDrawIVS = false;
-            window.onresize = null;
-            if(videoMS) {
-                videoMS.close();
-                videoMS = null;
-            }
-        }
-    }
-
-    return new constructor();
-
-    function videoWorkerMessage(event) {
-        let videoMessage = event.data;
-        let type = videoMessage.type;
-        //console.log(videoMessage.data)
-        switch (type) {
-            // case 'codecInfo': //设置codecType
-            //     break;
-            // case 'initSegment': //第一个buffer，设置SPS等
-            case 'videoInit'://合并codecInfo和initSegment
-                console.log(videoMessage)
-                codecInfo = videoMessage.data.codecInfo;
-                //console.log(videoMessage.data)
-                initSegmentData = mp4Remux.initSegment(videoMessage.data.initSegmentData);
-//console.log(initSegmentData)
-                videoMS = new VideoMediaSource(videoElement);
-                videoMS.CodecInfo = codecInfo;
-                videoMS.InitSegment = initSegmentData;
-                //console.log(videoMS.CodecInfo, videoMS.InitSegment)
-                videoMS.init();
-                videoMS.onCanplayCallback(()=>{
-                    ivsDrawer.cover(videoElement);
-                    onCanplayCallback && onCanplayCallback();
-                    if(!initialCompleted) {
-                        ROIdrawer.cover(videoElement);
-                        onInitialCompletedCallback && onInitialCompletedCallback();
-                        initialCompleted = true;
-                    }
-                });
-                break;
-            case 'firstvideoTimeStamp':
-                firstTimeStamp = videoMessage.data;
-
-                videoMS.setFirstTimeStamp(firstTimeStamp);
-                //videoMS.setDurationChangeCallBack(drawIVS);
-
-                console.log('first frame timestamp: ', firstTimeStamp);
-                startDrawIVS = true;
-                window.requestAnimationFrame(draw);
-                break;
-            case 'videoTimeStamp'://时间戳，用于智能同步
-                //videoMS.setFirstTimeStamp(videoMessage.data);
-                //console.log('frame timestamp: ', videoMessage.data);
-                //console.log('npt: ', ( videoMessage.data - firstTimeStamp)/90000)
-                break;
-            case 'mediaSample': //用于设置baseMediaDecodeTime
-                if(mediaInfo.samples == null) {
-                    mediaInfo.samples = new Array(numBox);
-                }
-                //console.log('frameDuration: ' + videoMessage.data.frameDuration)
-                curBaseDecodeTime += videoMessage.data.frameDuration;
-
-                mediaInfo.samples[mediaSegNum++] = videoMessage.data;
-                break;
-            case 'videoRender': //视频数据
-                //缓存该segment数据
-                let tempBuffer = new Uint8Array(videoMessage.data.length + mediaFrameSize);
-                if(mediaFrameSize !== 0) {
-                    tempBuffer.set(mediaFrameData);
-                }
-                //console.log(videoMessage)
-                tempBuffer.set(videoMessage.data, mediaFrameSize);
-                mediaFrameData = tempBuffer;
-                mediaFrameSize = mediaFrameData.length;
-
-                if(mediaSegNum % numBox === 0 && mediaSegNum !== 0) {
-                    if (sequenseNum === 1) {
-                        mediaInfo.baseMediaDecodeTime = 0
-                    } else {
-                        mediaInfo.baseMediaDecodeTime = preBaseDecodeTime;
-                    }
-                    preBaseDecodeTime = curBaseDecodeTime;
-                    mediaSegmentData = mp4Remux.mediaSegment(sequenseNum, mediaInfo, mediaFrameData);
-                    sequenseNum++;
-                    mediaSegNum = 0;
-                    mediaFrameData = null;
-                    mediaFrameSize = 0;
-
-                    if (videoMS !== null) {
-                        videoMS.setMediaSegment(mediaSegmentData)
-                    } else {
-
-                    }
-                }
-                break;
-            case 'YUVData'://FFMPEG解码的数据
-                //console.log(videoMessage.data)
-                //draw(videoMessage.data);
-                //yuv2canvas(videoMessage.data.data, videoMessage.data.width, videoMessage.data.height,canvasElement)
-
-                break;
-            case 'SEI': //处理SEI信息
-                //console.log('SEI timestamp: ', videoMessage.data.timestamp);
-                //console.log('SEI-npt: ', (videoMessage.data.timestamp - firstTimeStamp)/90000)
-                if(videoMessage.data.ivs !== null) {
-                    let ivs = [];
-                    videoMessage.data.ivs.map((content, k) => {
-                        if(content.state) { //state=1, 绘制该信息
-                            ivs.push(content);
-                        }else { //state=0, 清除info中对应的id:name
-                            // let id = content.id;
-                            // console.log('删除', id, info[id]);
-                            // delete info[id];
-                            // console.log(info)
-                        }
-                    });
-
-                    //console.log('PUSH SEI: ', videoMessage.data.timestamp)
-                    SEIinfo.push(videoMessage.data.timestamp, ivs);
-
-                    //console.log(videoMessage.data.timestamp - lastTime)
-                    //lastTime = videoMessage.data.timestamp;
-                }
-                //console.log('timestamp: ', videoMessage.data.timestamp)
-                //console.log(SEIinfo)
-                break;
-            default:
-                console.log('暂不支持其他类型');
-                break;
-        }
-    }
-
-    function draw() {
-        let timestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 90000/frameRate;//
-        drawIVS(timestamp);
-        if(startDrawIVS) {
-            window.requestAnimationFrame(draw);
-        }
-    }
-
-    /**
-     * 根据时间戳获取相应的ivs信息
-     * @param timestamp 当前帧的时间戳
-     * @returns {*} ivs信息
-     */
-    function getIVS(timestamp) {
-        let preNode = null;
-        let nextNode = null;
-
-        preNode = SEIinfo.shift();
-        nextNode = SEIinfo.top();
-        while((preNode !== undefined) && (preNode !== null)) {
-            if(preNode[0] > timestamp) {
-                SEIinfo.unshift(preNode);
-                //console.log('SEI时间大于video: ', preNode[0], timestamp);
-                return null;
-            } else if(preNode[0] === timestamp) {
-                return preNode;
-            } else {
-
-                if(nextNode === undefined || nextNode === null) {
-                    console.log('last ivs info: ', timestamp, preNode[0], SEIinfo);
-                    //console.log(preNode[0] - lastTime);
-                    //lastTime = preNode[0];
-                    if(timestamp - preNode[0] < 90000/frameRate) {
-                        return preNode;//最后一个node
-                    }
-                    return null;
-                }
-                if(nextNode[0] > timestamp) {
-                    // console.log('video time: ', timestamp, preNode[0], SEIinfo.length());
-                    // if(SEIinfo.length()) {
-                    //     SEIinfo.map((v, k)=>{
-                    //         console.log(v);
-                    //     });
-                    // }
-                    //console.log(preNode[0] - lastTime);
-                    //lastTime = preNode[0];
-                    return preNode;
-                } else if(nextNode[0] === timestamp){
-
-                    nextNode = SEIinfo.shift();
-                    //console.log('video time: ', timestamp, nextNode[0], SEIinfo);
-                    //console.log(nextNode[0] - lastTime);
-                    //lastTime = nextNode[0];
-                    return nextNode;
-                } else {
-                    preNode = SEIinfo.shift();
-                    nextNode = SEIinfo.top();
-                }
-            }
-        }
-        return null;
-    }
-
-    /**
-     * 绘制智能信息
-     * @param timestamp
-     */
-    function drawIVS(timestamp) {
-        let data = getIVS(timestamp);
-        if(data === undefined || data === null) {
-            //清空画布
-            //ivsDrawer.clearCanvas();
-            if(!SEIinfo.length() || (SEIinfo.length() && (SEIinfo.list[0][0] - timestamp) > 90000/frameRate)) {
-                ivsDrawer.clearCanvas();
-            }
-        }else {
-            //console.log('GET SEI: ', data[0], ' videoTimestamp', timestamp);
-            data = data[1];
-            //console.log(info.map.length)
-            if(info.map.length > MAX_INFO) {
-                console.log('info length: ', info.map.length);
-            }
-            //获取鹰眼信息
-            data.map((content, k) =>{
-                let result = info.get(content.id);
-                if(result !== undefined && result !== null) {
-                    data[k].text = result.value;
-                }
-            });
-            ivsDrawer.draw(data, timestamp);
-        }
-    }
-}
-
-function ElementResizeCallback(someElement, callback) {
-    const ro = new ResizeObserver( entries => {
-        // for (let entry of entries) {
-        //     const cr = entry.contentRect;
-        //     console.log('Element:', entry.target);
-        //     console.log(`Element size: ${cr.width}px x ${cr.height}px`);
-        // }
-        callback();
-    });
-    ro.observe(someElement);
-}
-
-function yuv2canvas(yuv, width, height, canvas) {
-
-    canvas.width = width;
-    canvas.height = height;
-
-    var context    = canvas.getContext("2d");
-    var output     = context.createImageData(width, height);
-    var outputData = output.data;
-
-    var yOffset = 0;
-    var uOffset = width * height;
-    var vOffset = width * height + (width*height)/4;
-    for (var h=0; h<height; h++) {
-        for (var w=0; w<width; w++) {
-            var ypos = w + h * width + yOffset;
-
-            var upos = (w>>1) + (h>>1) * width/2 + uOffset;
-            var vpos = (w>>1) + (h>>1) * width/2 + vOffset;
-
-            var Y = yuv[ypos];
-            var U = yuv[upos] - 128;
-            var V = yuv[vpos] - 128;
-
-            var R =  (Y + 1.371*V);
-            var G =  (Y - 0.698*V - 0.336*U);
-            var B =  (Y + 1.732*U);
-
-            var outputData_pos = w*4 + width*h*4;
-            outputData[0+outputData_pos] = R;
-            outputData[1+outputData_pos] = G;
-            outputData[2+outputData_pos] = B;
-            outputData[3+outputData_pos] = 255;
-        }
-    }
-
-    context.putImageData(output, 0, 0);
-}
-
-class IVSQueue {
-    constructor() {
-        this.list = [];
-    }
-
-    push(timestamp, ivs) {
-        for (let i = 0, len = this.list.length; i < len; i++) {
-            if(this.list[i][0] === timestamp) {
-                let oldIvs = this.list[i][1];
-                Array.prototype.push.apply(oldIvs, ivs);
-                this.list[i][1] = oldIvs;
-                return;
-            }
-        }
-        this.list.push([timestamp, ivs]);
-    }
-
-    shift() {
-        let tmp = this.list.shift();
-        return tmp;
-    }
-
-    unshift(node) {
-        this.list.unshift(node);
-    }
-
-    top() {
-        let tmp = this.list[0];
-        return tmp;
-    }
-
-    length() {
-        return this.list.length;
-    }
-
-    map(v,k) {
-        return this.list.map(v,k);
-    }
-}
-
-class LruCache {
-    constructor(limit) {
-        this.limit = limit || 20;
-        this.map = [];
-    }
-    get(key) {
-        return this._search(key);
-    }
-    set(key, value) {
-        let result  = this._search(key);
-        if(!result) {
-            this.map.unshift({
-                key: key,
-                value: value
-            });
-            if(this.map.length > this.limit) {
-                this.map.pop();
-            }
-        }
-    }
-
-    //每次查找将该元素置于队首
-    _search(key) {
-        for(let i = 0, length = this.map.length; i < length; i++) {
-            if(this.map[i].key === key) {
-                let head = this.map.splice(i, 1);
-                this.map.unshift(head[0]);
-                return head[0];
-            }
-        }
-        return null;
-    }
-
-    clear() {
-        this.map = [];
-    }
-}
-export default WorkerManager;

src/views/groupManagment/GroupRecord.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="GroupRecord">
-        <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-            </el-row>
-        </header>
-        <section>
-            <article class="table">
-                <el-table :data="tableData" border style="width: 100%">
-                    <el-table-column prop="date" sortable label="日期" width="180"></el-table-column>
-                    <el-table-column  sortable label="猪编号" width="180"></el-table-column>
-                    <el-table-column prop="name" label="状态" width="180"></el-table-column>
-                    <el-table-column prop="address" label="耳标号"></el-table-column>
-                    <el-table-column label="操作" width="150">
-                        <template slot-scope="scope">
-                            <el-button @click="look(scope.row)" type="text" size="small">查看</el-button>
-                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
-                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
-                                <el-button slot="reference" type="text" size="small">删除</el-button>
-                            </el-popconfirm>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <el-row type="flex" justify="end">
-                    <el-col :span="8" class="pagination">
-                        <el-pagination
-                            @current-change="pageChange"
-                            background
-                            layout="prev, pager, next"
-                            :page-count="10"
-                        ></el-pagination>
-                    </el-col>
-                </el-row>
-            </article>
-        </section>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: "",
-            tableData: [
-                {
-                    date: "2016-05-02",
-                    name: "可用",
-                    address: "6895564457554"
-                },
-                {
-                    date: "2016-05-04",
-                    name: "不可用",
-                    address: "6895564456725"
-                },
-                {
-                    date: "2016-05-01",
-                    name: "不可用",
-                    address: "6895564415514"
-                },
-                {
-                    date: "2016-05-03",
-                    name: "可用",
-                    address: "6895564457594"
-                }
-            ]
-        };
-    },
-    created() {},
-    methods: {
-        look(row) {
-            this.$router.push({
-                path: 'UnityTrace'
-            })
-        },
-        edit(row) {},
-        del(row) {},
-        pageChange(p) {
-            console.log(p)
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-#header {
-    margin-bottom: 15px;
-}
-.table {
-    .pagination {
-        margin-top: 20px;
-    }
-}
-</style>

src/views/groupManagment/UnityTrace/UnityTrace.vue

@@ -1,232 +0,0 @@
-<template>
-    <div class="UnityTrace">
-        <header class="header">
-            <h5>基本信息</h5>
-            <ul>
-                <el-row type="flex" class="row">
-                    <el-col :span="8" class="col">
-                        <span class="title">猪编号：</span>
-                        <span class="content">1540</span>
-                    </el-col>
-                    <el-col class="col">
-                        <span class="title">出生天数：</span>
-                        <span class="content">51</span>
-                    </el-col>
-                </el-row>
-                <el-row type="flex" class="row">
-                    <el-col :span="8" class="col">
-                        <span class="title">出生日期：</span>
-                        <span class="content">2020-05-01</span>
-                    </el-col>
-                    <el-col class="col">
-                        <span class="title">耳标号：</span>
-                        <span class="content">A3525DF3542</span>
-                    </el-col>
-                </el-row>
-                <el-row type="flex" class="row">
-                    <el-col :span="8" class="col">
-                        <span class="title">批次：</span>
-                        <span class="content">13543</span>
-                    </el-col>
-                    <el-col class="col">
-                        <span class="title">当前位置：</span>
-                        <span class="content">育肥舍四栋</span>
-                    </el-col>
-                </el-row>
-                <el-row type="flex" class="row">
-                    <el-col :span="8" class="col">
-                        <span class="title">品种：</span>
-                        <span class="content">大白</span>
-                    </el-col>
-                    <el-col class="col">
-                        <span class="title">饲养员：</span>
-                        <span class="content">某某某</span>
-                    </el-col>
-                </el-row>
-            </ul>
-        </header>
-        <section class="section">
-            <el-date-picker
-                v-model="value2"
-                type="datetimerange"
-                :picker-options="pickerOptions"
-                @change="pickerChange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                align="right"
-                class="date-picker"
-            ></el-date-picker>
-            <article v-if="dateArr.length > 0">
-                <chart-a :dateArr="dateArr" :data="animalTempArr" class="charts"></chart-a>
-                <chart-b :dateArr="dateArr" :data="envTempArr" class="charts"></chart-b>
-                <chart-c :dateArr="dateArr" :data="batteryArr" class="charts"></chart-c>
-            </article>
-            <p v-else class="hint"> 当前时间段无数据... </p>
-        </section>
-        
-    </div>
-</template>
-
-<script>
-import { reqReportList } from "@/api/groupManagment";
-
-import chart_a from "./charts/chart_a";
-import chart_b from "./charts/chart_b";
-import chart_c from "./charts/chart_c";
-
-const pickerOptions = {
-    shortcuts: [
-        {
-            text: "最近一小时",
-            onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 1);
-                picker.$emit("pick", [start, end]);
-            }
-        },
-        {
-            text: "最近半天",
-            onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 12);
-                picker.$emit("pick", [start, end]);
-            }
-        },
-         {
-            text: "最近一天",
-            onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24);
-                picker.$emit("pick", [start, end]);
-            }
-        },
-        {
-            text: "最近三天",
-            onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
-                picker.$emit("pick", [start, end]);
-            }
-        },
-        {
-            text: "最近一周",
-            onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-                picker.$emit("pick", [start, end]);
-            }
-        }
-    ]
-};
-
-export default {
-    name: "UnityTrace",
-    components: {
-        "chart-a": chart_a,
-        "chart-b": chart_b,
-        "chart-c": chart_c
-    },
-    data() {
-        return {
-            dateArr: [],
-            animalTempArr: [],
-            envTempArr: [],
-            batteryArr: [],
-            pickerOptions,
-            value2: null,
-            timer_1: null,
-            SData: Math.floor(( new Date().getTime() - 3600 * 1000 * 6 ) / 1000), // 默认最近六小时 
-            EData: Math.ceil(new Date().getTime() / 1000)
-        };
-    },
-    created() {
-        // 一分钟更新一次   后端10分钟更新一次数据
-        this.getReportList()
-        this.timer_1 = setInterval(() => {
-            this.getReportList()
-            console.log("getReportList")
-        }, 1000 * 60);
-    },
-    mounted() {},
-    beforeDestroy() {
-        window.clearInterval(this.timer_1)
-    },
-    methods: {
-        // 事件选择器值改变
-        pickerChange(value) {
-            console.log(value)
-            this.SData = Math.floor(new Date(value[0]).getTime() / 1000)
-            this.EData = Math.ceil(new Date(value[1]).getTime() / 1000)
-            console.log(this.SData, this.EData)
-            this.getReportList()
-        },
-        // 请求个体数据  id  825   826 830
-        getReportList() {
-            reqReportList({ deviceId:825, start:this.SData, end:this.EData })
-                .then(res => {
-                    let dateArr = [], 
-                        animalTempArr = [],
-                        envTempArr = [],
-                        batteryArr = []
-                    res.forEach((item, index) => {
-                        dateArr.push(item.created)
-                        animalTempArr.push(item.animalTemp)
-                        batteryArr.push(item.battery*100)
-                        envTempArr.push(item.envTemp)
-                    });
-                    this.dateArr = dateArr
-                    this.animalTempArr = animalTempArr
-                    this.envTempArr = envTempArr
-                    this.batteryArr = batteryArr
-
-                })
-                .catch(err => {
-                    console.log( err);
-                });
-        },
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.UnityTrace {
-    .header {
-        border: 1px solid #eee;
-        padding: 10px;
-        h5 {
-            font-size: 18px;
-        }
-        .row {
-            padding-left: 100px;
-            margin-bottom: 10px;
-            .col {
-                overflow: ellipsis;
-                .title {
-                    font-size: 15px;
-                }
-                .content {
-                    font-size: 14px;
-                    color: #555;
-                }
-            }
-        }
-    }
-    .section {
-        .date-picker {
-            margin-left: 48%;
-            margin-top: 30px;
-            margin-bottom: 20px;
-        }
-        .charts{
-            border-top: 1px solid #ccc;
-            padding-top: 25px;
-        }
-    }
-}
-</style>

src/views/groupManagment/UnityTrace/charts/Ae.vue

@@ -1,42 +0,0 @@
-<template>
-    <div class="Ad">
-        <h1>{{title}}</h1>
-    </div>
-</template>
-
-<script>
-import { mapActions } from "vuex";
-
-export default {
-    
-    name: "Ad",
-    props: {
-        title:{default: 'default'}
-    },
-    data() {
-        return {};
-    },
-    
-    created() {
-        console.log(this.title)
-    },
-    methods: {
-        ...mapActions(["fetch"]),
-        get() {
-            this.fetch({
-                api: "aaa",
-                method: "GET",
-                data: {},
-                success: res => {
-                    console.log(res);
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        }
-    }
-};
-</script>

src/views/groupManagment/UnityTrace/charts/chart_a.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="chart_a">
-        
-        <div id="chart_a" style="width: 80%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            orgOptions: {},
-            // subtext: "副标题"
-        };
-    },
-    props: {
-         dateArr:{type:Array},
-         data:{type:Array}
-     },
-    created() {
-        
-    },
-    watch: {
-        dateArr(nVal,oVal) {
-            this.drawChart();
-        }
-    },
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById('chart_a')
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "耳根温度",
-                    // subtext: this.subtext,
-                    left: 100
-                },
-                tooltip: {
-                    trigger: "axis"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: "none"
-                        },
-                        dataView: { readOnly: false },
-                        magicType: { type: ["line", "bar"] },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: "red" // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: "blue" // 100% 处的颜色
-                        }
-                    ]
-                },
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: this.dateArr
-                },
-                yAxis: {
-                    type: "value",
-                    axisLabel: {
-                        formatter: "{value} °C"
-                    },
-                    scale: true
-                },
-                series: [
-                    {
-                        name: "耳温",
-                        type: "line",
-                        data: this.data,
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/groupManagment/UnityTrace/charts/chart_b.vue

@@ -1,110 +0,0 @@
-<template>
-    <div class="chart_b">
-        <div id="chart_b" style="width: 80%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            orgOptions: {},
-            // subtext: "副标题"
-        };
-    },
-    created() {},
-    props: {
-        dateArr:{type:Array},
-        data:{type:Array}
-    },
-    watch: {
-        dateArr(nVal,oVal) {
-            this.drawChart();
-        }
-    },
-
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(document.getElementById("chart_b"));
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "环境温度",
-                    // subtext: this.subtext,
-                    left: 100
-                },
-                tooltip: {
-                    trigger: "axis"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: "none"
-                        },
-                        dataView: { readOnly: false },
-                        magicType: { type: ["line", "bar"] },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: "red" // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: "blue" // 100% 处的颜色
-                        }
-                    ]
-                },
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: this.dateArr || []
-                },
-                yAxis: {
-                    type: "value",
-                    axisLabel: {
-                        formatter: "{value} °C"
-                    },
-                    scale: true
-                },
-                series: [
-                    {
-                        name: "耳温",
-                        type: "line",
-                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
-                        data: this.data,
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/groupManagment/UnityTrace/charts/chart_c.vue

@@ -1,109 +0,0 @@
-<template>
-    <div class="chart_c">
-        <div id="chart_c" style="width: 80%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            orgOptions: {},
-            // subtext: "副标题"
-        };
-    },
-    created() {},
-    props: {
-        dateArr:{type:Array},
-        data:{type:Array}
-    },
-    watch: {
-        dateArr(nVal,oVal) {
-            this.drawChart();
-        }
-    },
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(document.getElementById("chart_c"));
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "电池电量",
-                    // subtext: this.subtext,
-                    left: 100
-                },
-                tooltip: {
-                    trigger: "axis"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: "none"
-                        },
-                        dataView: { readOnly: false },
-                        magicType: { type: ["line", "bar"] },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: "red" // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: "blue" // 100% 处的颜色
-                        }
-                    ]
-                },
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: this.dateArr
-                },
-                yAxis: {
-                    type: "value",
-                    axisLabel: {
-                        formatter: "{value} %"
-                    },
-                    scale: true
-                },
-                series: [
-                    {
-                        name: "电量",
-                        type: "line",
-                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
-                        data: this.data,
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/productManagement/goatBloodLog.vue

@@ -0,0 +1,160 @@
+<template>
+    <!-- 静态  羊血登记 -->
+    <div class="goatBloodLog">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
+                    <el-table-column prop="date" label="放血时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
+                    <el-table-column prop="b" label="重量"></el-table-column>
+                    <el-table-column prop="d" label="保质期"></el-table-column>
+                    <el-table-column prop="c" label="位置"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12426",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "425g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12427",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "425g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12428",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/productManagement/goatHasletLog.vue

@@ -0,0 +1,160 @@
+<template>
+    <!-- 静态  羊杂登记 -->
+    <div class="goatBloodLog">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
+                    <el-table-column prop="date" label="宰杀时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
+                    <el-table-column prop="b" label="重量"></el-table-column>
+                    <el-table-column prop="d" label="保质期"></el-table-column>
+                    <el-table-column prop="c" label="位置"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "45625",
+                    b: "1465g",
+                    d: "5天",
+                    c: "羊储存一库"
+                },
+                {
+                    id: "12426",
+                    date: "2020-07-14",
+                    a: "45625",
+                    b: "1465g",
+                    d: "5天",
+                    c: "羊储存一库"
+                },
+                {
+                    id: "12427",
+                    date: "2020-07-14",
+                    a: "45625",
+                    b: "1465g",
+                    d: "5天",
+                    c: "羊储存一库"
+                },
+                {
+                    id: "12428",
+                    date: "2020-07-14",
+                    a: "45625",
+                    b: "1465g",
+                    d: "5天",
+                    c: "羊储存一库"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/productManagement/productInfo.vue

@@ -0,0 +1,175 @@
+<template>
+    <!-- 静态  产品档案-->
+    <div class="productInfo">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="ID编码" width="180"></el-table-column>
+                    <el-table-column prop="date" label="产品名称" width="180"></el-table-column>
+                    <el-table-column prop="a" label="所属批次"></el-table-column>
+                    <el-table-column prop="b" label="规格型号"></el-table-column>
+                    <el-table-column prop="c" label="产品价格"></el-table-column>
+                    <el-table-column prop="d" label="存放地点"></el-table-column>
+                    <el-table-column prop="e" label="保质期"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "带骨羊前腿",
+                    a: "1001",
+                    b: "AAAA",
+                    c: "58元/kg",
+                    d: "冷藏仓1",
+                    e: "180天"
+                },
+                {
+                    id: "12426",
+                    date: "带骨羊前腿",
+                    a: "1001",
+                    b: "AA",
+                    c: "58元/kg",
+                    d: "冷藏仓1",
+                    e: "180天"
+                },
+                {
+                    id: "12427",
+                    date: "羊菲力",
+                    a: "1001",
+                    b: "A",
+                    c: "29元/包",
+                    d: "冷藏仓1",
+                    e: "180天"
+                },
+                {
+                    id: "12428",
+                    date: "羊菲力",
+                    a: "1001",
+                    b: "AAA",
+                    c: "58元/kg",
+                    d: "冷藏仓1",
+                    e: "180天"
+                },
+                {
+                    id: "12429",
+                    date: "羊菲力",
+                    a: "1001",
+                    b: "AAAAA",
+                    c: "58元/kg",
+                    d: "冷藏仓1",
+                    e: "180天"
+                },
+                
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/productManagement/sheepskinLog.vue

@@ -0,0 +1,155 @@
+<template>
+    <!-- 静态  羊皮登记 -->
+    <div class="sheepskinLog">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
+                    <el-table-column prop="date" label="剥离时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="批次号"></el-table-column>
+                    <el-table-column prop="b" label="重量"></el-table-column>
+                    <el-table-column prop="c" label="位置"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "5kg",
+                    c: "羊皮储存室"
+                },
+                {
+                    id: "12426",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "4kg",
+                    c: "羊皮储存室"
+                },
+                {
+                    id: "12427",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "4kg",
+                    c: "羊皮储存室"
+                },
+                {
+                    id: "12428",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "5kg",
+                    c: "羊皮储存室"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/statisticAnalysis/Crop.vue

@@ -1,123 +0,0 @@
-<template>
-    <div class="Crop">
-        <header class="header">出栏预测：</header>
-
-        <section class="section">
-            <el-select v-model="value" placeholder="请选择">
-                <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                ></el-option>
-            </el-select>
-            <div class="container">
-                <article class="left">
-                    <crop-chart-a />
-                </article>
-                <article class="right">
-                    <crop-chart-b />
-                </article>
-            </div>
-        </section>
-        <section class="section">
-            <el-select v-model="value2" placeholder="请选择">
-                <el-option
-                    v-for="item in options2"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                ></el-option>
-            </el-select>
-            <div class="container">
-                <article class="left">
-                    <crop-chart-c />
-                </article>
-                <article class="right">
-                    <crop-chart-d />
-                </article>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script>
-import crop_chart_a from "./charts/crop_chart_a";
-import crop_chart_b from "./charts/crop_chart_b";
-import crop_chart_c from "./charts/crop_chart_c";
-import crop_chart_d from "./charts/crop_chart_d";
-export default {
-    name: "Crop",
-    components: {
-        "crop-chart-a": crop_chart_a,
-        "crop-chart-b": crop_chart_b,
-        "crop-chart-c": crop_chart_c,
-        "crop-chart-d": crop_chart_d
-    },
-    data() {
-        return {
-            options: [
-                {
-                    value: "选项1",
-                    label: "一牧场"
-                },
-                {
-                    value: "选项2",
-                    label: "二牧场"
-                }
-            ],
-            options2: [
-                {
-                    value: "选项1",
-                    label: "一舍"
-                },
-                {
-                    value: "选项2",
-                    label: "二舍"
-                },
-                {
-                    value: "选项3",
-                    label: "三舍"
-                },
-                {
-                    value: "选项4",
-                    label: "四舍"
-                },
-                {
-                    value: "选项5",
-                    label: "五舍"
-                }
-            ],
-            value: "选项1",
-            value2: "选项1"
-        };
-    },
-    created() {},
-    methods: {}
-};
-</script>
-
-<style lang="scss" scoped>
-.Crop {
-    .header {
-        margin-bottom: 15px;
-        font-size: 18px;
-        font-weight: 600;
-        color: #444;
-    }
-    .section {
-        .container {
-            display: flex;
-            .left {
-                width: 40%;
-                // border: 1px solid #066;
-                overflow: visible;
-            }
-            .right {
-                width: 40%;
-                // border: 1px solid rgb(39, 37, 160);
-            }
-        }
-    }
-}
-</style>

src/views/statisticAnalysis/PSY.vue

@@ -1,141 +0,0 @@
-<template>
-    <div class="PSY">
-        <h5 class="h5">PSY分析：</h5>
-        <header class="header">
-            <article class="card">
-                <h5 class="title">PSA</h5>
-                <span class="value">19.8</span>
-                <div class="describe">
-                    <div class="up">
-                        <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
-                    </div>
-                    <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
-                    </div>
-                </div>
-            </article>
-
-            <article class="card">
-                <h5 class="title">LSY非生产天数</h5>
-                <span class="value">12</span>
-                <div class="describe">
-                    <div class="up">
-                        <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
-                    </div>
-                    <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
-                    </div>
-                </div>
-            </article>
-
-            <article class="card">
-                <h5 class="title">平均胎次</h5>
-                <span class="value">2.3</span>
-                <div class="describe">
-                    <div class="up">
-                        <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
-                    </div>
-                    <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
-                    </div>
-                </div>
-            </article>
-        </header>
-        <section class="section">
-            <psy-chart/>
-        </section>
-    </div>
-</template>
-
-<script>
-import PSY_chart from "./charts/PSY_chart";
-
-export default {
-    name: "PSY",
-    components: {
-        "psy-chart": PSY_chart
-    },
-    data() {
-        return {};
-    },
-    created() {
-    },
-    methods: {
-        
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.PSY{
-    .h5{
-        margin-bottom: 15px;
-        font-size: 18px;
-        font-weight: 600;
-        color: #444;
-    }
-    .header{
-        width: 75%;
-        display: flex;
-        justify-content: space-around;
-        .card{
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            width: 250px;
-            height: 140px;
-            padding: 15px 20px 0 20px;
-            border: 1px solid #ddd;
-            border-radius: 10px;
-            color: #999;
-            .title{
-                font-size: 28px;
-            }
-            .value{
-                font-size: 30px;
-                text-align: center;
-                color: #444;
-                font-weight: 600;
-                padding-bottom: 10px;
-                width: 100%;
-                border-bottom: 2px #ddd solid;
-            }
-            .describe{
-                flex: 1;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                .up{
-                    margin-right: 25px;
-                    .icon{
-                        color: #8FD96B;
-                        margin: 0 3px;
-                    }
-                }
-                .down{
-                    .icon{
-                        color: #F5232E;
-                        margin: 0 3px;
-                    }
-                }
-            }
-        }
-    }
-    .section{
-        margin-top: 30px;
-    }
-}
-</style>

src/views/statisticAnalysis/charts/PSY_chart.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="PSY_chart">
-        <div id="PSY_chart" style="width: 70%;height:500px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "PSY_chart",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("PSY_chart")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "PSY曲线",
-                    left: "center",
-                    bottom: 5
-                },
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataView: { show: true, readOnly: true },
-                        magicType: { show: true, type: ["line", "bar"] },
-                        restore: { show: true },
-                        saveAsImage: { show: true }
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "13%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: [
-                            "一月",
-                            "二月",
-                            "三月",
-                            "四月",
-                            "五月",
-                            "六月",
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value",
-                        scale: true
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "line",
-                        barWidth: "50%",
-                        data: [20,27,38,35,50, 66, 98, 120, 99, 66,40,30],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            x: "amount",
-                            // Map the "product" column to Y axis
-                            y: "product"
-                        },
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/statisticAnalysis/charts/crop_chart_a.vue

@@ -1,107 +0,0 @@
-<template>
-    <div class="crop_chart_a">
-        <div id="crop_chart_a" style="width: 100%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "crop_chart_a",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("crop_chart_a")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "未来保育猪数量预测",
-                    left: "center",
-                    bottom: 5
-                },
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataView: { show: true, readOnly: true },
-                        magicType: { show: true, type: ["line", "bar"] },
-                        restore: { show: true },
-                        saveAsImage: { show: true }
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "13%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "50%",
-                        data: [52, 200, 334, 390, 330, 220],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            x: "amount",
-                            // Map the "product" column to Y axis
-                            y: "product"
-                        },
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/statisticAnalysis/charts/crop_chart_b.vue

@@ -1,107 +0,0 @@
-<template>
-    <div class="crop_chart_b">
-        <div id="crop_chart_b" style="width: 100%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "crop_chart_b",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("crop_chart_b")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "未来商品猪数量预测",
-                    left: "center",
-                    bottom: 5
-                },
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataView: { show: true, readOnly: true },
-                        magicType: { show: true, type: ["line", "bar"] },
-                        restore: { show: true },
-                        saveAsImage: { show: true }
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "13%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "50%",
-                        data: [52, 200, 334, 390, 330, 220],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            x: "amount",
-                            // Map the "product" column to Y axis
-                            y: "product"
-                        },
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/statisticAnalysis/charts/crop_chart_c.vue

@@ -1,107 +0,0 @@
-<template>
-    <div class="crop_chart_c">
-        <div id="crop_chart_c" style="width: 100%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "crop_chart_c",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("crop_chart_c")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "未来保育猪数量预测",
-                    left: "center",
-                    bottom: 5
-                },
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataView: { show: true, readOnly: true },
-                        magicType: { show: true, type: ["line", "bar"] },
-                        restore: { show: true },
-                        saveAsImage: { show: true }
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "13%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "50%",
-                        data: [355, 200, 422, 390, 330, 220],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            x: "amount",
-                            // Map the "product" column to Y axis
-                            y: "product"
-                        },
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/statisticAnalysis/charts/crop_chart_d.vue

@@ -1,107 +0,0 @@
-<template>
-    <div class="crop_chart_d">
-        <div id="crop_chart_d" style="width: 100%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "crop_chart_d",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("crop_chart_d")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "未来保育猪数量预测",
-                    left: "center",
-                    bottom: 5
-                },
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataView: { show: true, readOnly: true },
-                        magicType: { show: true, type: ["line", "bar"] },
-                        restore: { show: true },
-                        saveAsImage: { show: true }
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "13%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "50%",
-                        data: [366, 566, 334, 390, 330, 220],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            x: "amount",
-                            // Map the "product" column to Y axis
-                            y: "product"
-                        },
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/storeTransportation/dispatching.vue

@@ -0,0 +1,222 @@
+<template>
+    <!-- 静态  配送管理 -->
+    <div class="dispatching">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="ID编码" width="180"></el-table-column>
+                    <el-table-column prop="aa" label="配送客户/单位"></el-table-column>
+                    <el-table-column prop="date" label="时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="配送地址"></el-table-column>
+                    <el-table-column prop="b" label="产品名称"></el-table-column>
+                    <el-table-column prop="c" label="重量"></el-table-column>
+                    <el-table-column prop="d" label="配送员"></el-table-column>
+                    <el-table-column label="状态" width="150">
+                        <template slot-scope="scope">
+                            <div v-if="scope.row.status == 0">
+                                <span>配送中</span>
+                                <el-button @click="edit(scope.row)" type="text" size="small">查看行程</el-button>
+                            </div>
+                            <div v-else-if="scope.row.status == 1">配送完成</div>
+                            <div v-else>错误</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    aa: "广州广泛食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "带骨羊前腿",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    aa: "湖北食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "带骨羊前腿",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    aa: "湖北食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "带骨羊前腿",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    aa: "广州广泛食品有限公司",
+                    date: "2020-07-14",
+                    a: "湖北省武汉市武昌区高架路135号",
+                    b: "羊菲力",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    aa: "广州广泛食品有限公司",
+                    date: "2020-07-14",
+                    a: "湖北省武汉市武昌区高架路135号",
+                    b: "带骨羊前腿",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    aa: "绍兴食品有限公司",
+                    date: "2020-07-14",
+                    a: "湖北省武汉市武昌区高架路135号",
+                    b: "羊菲力",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 1
+                },
+                {
+                    id: "12425",
+                    aa: "绍兴食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "羊菲力",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 1
+                },
+                {
+                    id: "12425",
+                    aa: "广州广泛食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "羊菲力",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 1
+                },
+                {
+                    id: "12425",
+                    aa: "广州广泛食品有限公司",
+                    date: "2020-07-14",
+                    a: "深圳新思路1242号",
+                    b: "带骨羊前腿",
+                    c: "5000kg",
+                    d: "张小刚",
+                    status: 1
+                },
+               
+                
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/storeTransportation/goatBloodLog - 副本 - 副本.vue

@@ -0,0 +1,160 @@
+<template>
+    <!-- 静态  羊血登记 -->
+    <div class="goatBloodLog">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
+                    <el-table-column prop="date" label="放血时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
+                    <el-table-column prop="b" label="重量"></el-table-column>
+                    <el-table-column prop="d" label="保质期"></el-table-column>
+                    <el-table-column prop="c" label="位置"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12426",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "425g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12427",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "425g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                {
+                    id: "12428",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    d: "25天",
+                    c: "羊血储存一库"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/storeTransportation/shopStore.vue

@@ -0,0 +1,204 @@
+<template>
+    <!-- 静态  门店管理 -->
+    <div class="shopstare">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="门店名称" width="180"></el-table-column>
+                    <el-table-column prop="a" label="负责人"></el-table-column>
+                    <el-table-column prop="b" label="负责人电话"></el-table-column>
+                    <el-table-column prop="c" label="门店地址"></el-table-column>
+                    <el-table-column prop="d" label="备注"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "金华一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "绍兴一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "绍兴一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "绍兴一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "嘉善县一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                {
+                    id: "XX一号店铺",
+                    a: "张小刚",
+                    b: "13865936595",
+                    d: "北京市海淀区西二旗",
+                    c: "暂无备注"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/storeTransportation/transportation.vue

@@ -0,0 +1,166 @@
+<template>
+    <!-- 静态  运输管理 -->
+    <div class="transportation">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="ID编码" width="180"></el-table-column>
+                    <el-table-column prop="date" label="时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="配送地址"></el-table-column>
+                    <el-table-column prop="b" label="产品名称"></el-table-column>
+                    <el-table-column prop="c" label="重量"></el-table-column>
+                    <el-table-column prop="d" label="配送员"></el-table-column>
+                    <el-table-column label="状态" width="150">
+                        <template slot-scope="scope">
+                            <div v-if="scope.row.status == 0">
+                                <span>配送中</span>
+                                <el-button @click="edit(scope.row)" type="text" size="small">查看行程</el-button>
+                            </div>
+                            <div v-else-if="scope.row.status == 1">配送完成</div>
+                            <div v-else>错误</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">删除所选</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    c: "羊血储存一库",
+                    d: "25天",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    c: "羊血储存一库",
+                    d: "25天",
+                    status: 0
+                },
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    c: "羊血储存一库",
+                    d: "25天",
+                    status: 1
+                },
+                {
+                    id: "12425",
+                    date: "2020-07-14",
+                    a: "24563",
+                    b: "525g",
+                    c: "羊血储存一库",
+                    d: "25天",
+                    status: 1
+                },
+                
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/unityManagement/UnityTrace.vue

@@ -1,19 +0,0 @@
-<template>
-    <div class="UnityTrace">
-        <h1>个体追踪</h1>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: "UnityTrace",
-    data() {
-        return {};
-    },
-    created() {},
-    methods: {
-        
-    }
-};
-</script>