<template>
    <div id="chart-map"
         ref="myEchart"
         :style="{height:'88vh',width:'100%'}"
         class="map-contanier"/>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils/common/utils";
export default {
    data()
    {
        return {
            chart: null,
            geoCoordMap: [
                {
                    "甘肃": [103.73, 36.03],
                    "青海": [101.74, 36.56],
                    "四川": [104.06, 30.67],
                    "河北": [114.48, 38.03],
                    "云南": [102.73, 25.04],
                    "贵州": [106.71, 26.57],
                    "湖北": [114.31, 30.52],
                    "河南": [113.65, 34.76],
                    "山东": [117, 36.65],
                    "江苏": [118.78, 32.04],
                    "安徽": [117.27, 31.86],
                    "浙江": [120.19, 30.26],
                    "江西": [115.89, 28.68],
                    "福建": [119.3, 26.08],
                    "广东": [113.23, 23.16],
                    "湖南": [113, 28.21],
                    "海南": [110.35, 20.02],
                    "辽宁": [123.38, 41.8],
                    "吉林": [125.35, 43.88],
                    "黑龙江": [126.63, 45.75],
                    "山西": [112.53, 37.87],
                    "陕西": [108.95, 34.27],
                    "台湾": [121.30, 25.03],
                    "北京": [116.46, 39.92],
                    "上海": [121.48, 31.22],
                    "重庆": [106.54, 29.59],
                    "天津": [117.2, 39.13],
                    "内蒙古": [111.65, 40.82],
                    "广西": [108.33, 22.84],
                    "西藏": [91.11, 29.97],
                    "宁夏": [106.27, 38.47],
                    "新疆": [87.68, 43.77],
                    "香港": [114.17, 22.28],
                    "澳门": [113.54, 22.19]
                }
            ],
            dataList: [
                { nativePlace: "黑龙江", peopleCounting: 2635 },
                { nativePlace: "北京", peopleCounting: 2635 },
                { nativePlace: "新疆", peopleCounting: 2635 },
                { nativePlace: "青海", peopleCounting: 2635 },
                { nativePlace: "湖北", peopleCounting: 2653 },
                { nativePlace: "贵州", peopleCounting: 2635 }
            ]
        };
    },
    mounted()
    {
        this.initChart();
        this.__resizeHandler = debounce(() =>
        {
            if (this.chart)
            {
                this.chart.resize();
            }
        }, 100);
        window.addEventListener("chart-map", this.__resizeHandler);
    },
    beforeDestroy()
    {
        if (!this.chart)
        {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart()
        {
            let icon = "image://" + require("@/assets/images/reform/ready.png"); // location图标
            let icon1 = "image://" + require("@/assets/images/reform/hint.png"); // 弹窗的背景图片
            let myChart = echarts.init(this.$refs.myEchart); // 这里是为了获得容器所在位置
            window.onresize = myChart.resize();
            myChart.setOption({
                backgroundColor: "transparent", // 画布背景颜色
                tooltip: { // 鼠标移到图里面的浮动提示框
                    show: false
                },
                geo: {
                    show: true,
                    map: "china",
                    zoom: 1.1,
                    aspectScale: 0.8, // 长宽比
                    top: "5%",
                    layoutSize: "100%",
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#00A0E6",
                            borderWidth: 0, // 设置外层边框
                            borderColor: "#05D8ED",
                            shadowColor: "#1442A4",
                            shadowOffsetX: 0,
                            shadowOffsetY: 18
                        }
                    }
                },
                series: [
                {
                    type: "map",
                    map: "china",
                    geoIndex: 1,
                    zoom: 1.1,
                    top: "5%",
                    layoutSize: "100%",
                    aspectScale: 0.8, // 长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b}",
                            color: "#ffffff",
                            fontSize: 14,
                            position: "inside"
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    selectedMode: "multiple",
                    colorBy: "series",
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#00BAE6",
                            borderColor: "#01E6F6",
                            borderWidth: 2
                        },
                        emphasis: {
                            areaColor: "#009EE6"
                        }
                    }
                },
                // 地图中闪烁的点
                {
                    name: "闪点",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    symbolOffset: [0, -30],
                    data: this.convertDataDian(),
                    showEffectOn: "render",
                    encode: {
                        value: 5
                    },
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke", // 波纹绘制方式 stroke, fill
                        period: 5, // 动画时间，值越小速度越快
                        scale: 5 // 波纹圆环最大限制，值越大波纹越大
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        color: "#0154BE",
                        shadowBlur: 10,
                        shadowColor: "#0154BE"
                    },
                    zlevel: 1
                },
                { // 悬浮窗
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon,
                    symbolSize: [27, 34],
                    symbolOffset: [0, -30],
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                },
                // 框
                {
                    name: "悬浮窗",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: icon1,
                    symbolSize: [149, 70],
                    symbolOffset: [0, -80],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: this.fontSize * 0.9
                            },
                            formatter: (params) =>
                            {
                                return `{a|${params.name}}\n{b|${params.data.value[2]}}`;
                            },
                            rich: {
                                a: {
                                    color: "#01D8FF",
                                    fontWeight: "bold",
                                    fontSize: this.fontSize,
                                    align: "center"
                                },
                                b: {
                                    color: "#ffffff",
                                    fontSize: this.fontSize * 1.2,
                                    fontWeight: "bold",
                                    padding: 10,
                                    align: "center"
                                }
                            }
                        }
                    },
                    showEffectOn: "render",
                    rippleEffect: { // 涟漪特效
                        brushType: "stroke" // 波纹绘制方式 stroke, fill
                    },
                    data: this.convertDataDian(),
                    hoverAnimation: true,
                    zlevel: 1
                }
                ]
            });
        },
        convertDataDian()
        {
            let geoCoordMap = this.geoCoordMap[0];
            let res = [];
            for (let i = 0; i < this.dataList.length; i++)
            {
                let geoCoord = geoCoordMap[this.dataList[i].nativePlace];
                if (geoCoord)
                {
                    res.push({
                        name: this.dataList[i].nativePlace,
                        value: geoCoord.concat(this.dataList[i].peopleCounting)
                    });
                }
            }
            return res;
        }
    }
};
</script>

var videoHtml = document.getElementById("video").querySelector("video");
 var canvasHtml = document.createElement("canvas");
 var context = canvasHtml.getContext("2d");
 context.drawImage(videoHtml, 0, 0, width, height);
 let img = canvasHtml.toDataURL("image/png", 1); // 获取的图片路径，可直接在页面显示

var videoHtml = document.getElementById("video").querySelector("video");
var width = document.getElementById("video").clientWidth;
var height = document.getElementById("video").clientHeight;
var canvasHtml = document.createElement("canvas");
canvasHtml.width = width;
canvasHtml.height = height;
var context = canvasHtml.getContext("2d");
context.drawImage(videoHtml, 0, 0, width, height);
let img = canvasHtml.toDataURL("image/png", 1);

<!-- dragHoverIndex 代表当前悬浮的元素  drag-hover-cell 为悬浮元素的样式 -->
<td v-for="(week, wi) in d.arrangeList"
:key="'daily_week_'+wi"
:class="{'drag-hover-cell': dragHoverIndex === (wi + '_' + d.id)}""
class="course-cell has-class"
@drop="drop($event, d, wi)"
@dragover="allowDrop($event, week, wi, d.id)"
                            >
                                ...
                            </td>

<template>
    <div class="middle-chart">
        <div ref="chart"
             :style="{height:height,width:width}"/>
    </div>
</template>
<script>
import echarts from "echarts";
import "echarts-wordcloud";
import { debounce } from "@/scripts/common/utils";
export default {
    props: {
        height: {
            type: String,
            default: "100%"
        },
        width: {
            type: String,
            default: "100%"
        }
    },
    data()
    {
        return {
        };
    },
    mounted()
    {
        this.initChart();
        this.__resizeHandler = debounce(() =>
        {
            if (this.chart)
            {
                this.chart.resize();
            }
        }, 100);
        window.addEventListener("resize", this.__resizeHandler);
    },
    beforeDestroy()
    {
        if (!this.chart)
        {
            return;
        }
        window.removeEventListener("resize", this.__resizeHandler);
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart: function()
        {
            this.chart = echarts.init(this.$refs.chart);

            this.chart.setOption(
                {
                    tooltip: {},
                    series: [{
                        type: "wordCloud",
                        gridSize: 5,
                        textStyle: {
                            normal: {
                                color: () =>
                                {
                                    return "rgb(" + [
                                            Math.round(Math.random() * 160) + 45,
                                            Math.round(Math.random() * 160) + 45,
                                            Math.round(Math.random() * 160) + 45
                                        ].join(",") + ")";
                                }
                            }
                        },
                        emphasis: {
                            textStyle: {
                                shadowBlur: 10,
                                shadowColor: "#333"
                            }
                        },
                        data: [
                        {
                            name: "Sam S Club",
                            value: 6987
                        },
                        {
                            name: "Macys",
                            value: 6181
                        },
                        {
                            name: "Amy Schumer",
                            value: 4386
                        },
                        {
                            name: "Jurassic World",
                            value: 4055
                        },
                        {
                            name: "Charter Communications",
                            value: 2467
                        },
                        {
                            name: "Chick Fil A",
                            value: 2244
                        },
                        {
                            name: "Planet Fitness",
                            value: 1898
                        },
                        {
                            name: "Pitch Perfect",
                            value: 1484
                        },
                        {
                            name: "Express",
                            value: 1112
                        },
                        {
                            name: "Home",
                            value: 965
                        },
                        {
                            name: "Johnny Depp",
                            value: 847
                        },
                        {
                            name: "Lena Dunham",
                            value: 582
                        },
                        {
                            name: "Lewis Hamilton",
                            value: 555
                        },
                        {
                            name: "KXAN",
                            value: 550
                        },
                        {
                            name: "Mary Ellen Mark",
                            value: 462
                        },
                        {
                            name: "Farrah Abraham",
                            value: 366
                        },
                        {
                            name: "Rita Ora",
                            value: 360
                        },
                        {
                            name: "Serena Williams",
                            value: 282
                        },
                        {
                            name: "NCAA baseball tournament",
                            value: 273
                        },
                        {
                            name: "Point Break",
                            value: 265
                        }
                    ]
                    }]
                });
        }
    }
};
</script>
<style lang="scss" scoped>
@import url("./chart.scss");
</style>

<div id="imgWrapper">
    <ul id="imgList">
        {taskImg.map((item, index) =>(
            <li key={`img${index}`}
                lazyload="true"
                data-original={download() + item.imageId}>
                <Image
                    width={150}
                    height={150}
                    src=""/>
            </li>
        ))}
    </ul>
</div>

// 获取未显示的图片列表
const imgList = document.getElementById("imgList").querySelectorAll("li[data-original][lazyload]");
// 获取主容器左边距离和右边距离
const wrapper = document.getElementById("imgWrapper");
const initRect = wrapper.getBoundingClientRect();
const initLeft = initRect.left;
const initRight = initRect.right;
imgList.forEach((item, index) =>
{
    const img = item.firstChild.firstChild;//获取图片元素
    const rect = item.getBoundingClientRect();
    let rectL = rect.left + rect.width;// 图片到可视区域左边距离
    let rectR = rect.right - rect.width;// 图片到可视区域右边距离
    // 判断是否在可视区域内
    if ((rect.left >= initLeft && rectR <= initRight) || (rectL >= initLeft && rect.right <= initRight))
    {
        img.src = item.dataset.original;
        item.removeAttribute("data-original");// 移除属性，下次不再遍历
        item.removeAttribute("lazyload");
    }
    
});

// 获取未显示的图片列表
const imgList = document.getElementById("imgList").querySelectorAll("li[data-original][lazyload]");
imgList.forEach((item, index) =>
{
    const img = item.firstChild.firstChild;//获取图片元素
    // 判断是否在可视区域内
    if (img.offsetTop < window.innerHeight + window.pageYOffset)
    {
        img.src = item.dataset.original;
        item.removeAttribute("data-original");// 移除属性，下次不再遍历
        item.removeAttribute("lazyload");
    }
    
});

const gMap = new AILabel.Map("AiLabelImg", { zoom: 0, cx: 0, cy: 0, zoomMax: 400 * 10, zoomMin: 400 / 10, autoPan: true, drawZoom: true });

render()
{
    return (
        <div id="AiLabelImg"></div>
    );
}

// 获取容器的宽高
initWidth = document.getElementById("AiLabelImg").clientWidth;
initHeight = document.getElementById("AiLabelImg").clientHeight;
const image = new Image();
image.src = imgUrl;// 图片地址
image.onload = () =>
{
    imgInitW = image.width;
    imgInitH = image.height;
    imgSjW = initWidth;
    imgSjH = initHeight;
    const sR = imgInitW / imgInitH;
    const iR = initWidth / initHeight;
    // 如果图片宽度大于高度 则宽度百分百  高度自适应
    if (sR >= iR)
    {
        imgSjH = Math.floor(initWidth / imgInitW * imgInitH);
    }
    else
    {
        // 如果图片高度大于宽度 则高度百分百  宽度自适应
        imgSjW = Math.floor(initHeight / imgInitH * imgInitW);
    }
    // 图片层实例\添加
    const gImageLayer = new AILabel.Layer.Image("img", props.url, { h: imgSjH, w: imgSjW }, {});
    gMap.addLayer(gImageLayer);
    const gFeatureLayer = new AILabel.Layer.Feature(`featureid`, { opacity: 1, zIndex: 4 });
};
}

const gTextStyle = new AILabel.Style({ strokeColor: "#E43446", lineWeight: 2, fillColor: "rgba(0,0,0,0)" });
// 设置模式为矩形框
gMap.setMode("drawRect", gTextStyle);
// 监听绘制过程 
// 绘制完成，将绘制的坐标值显示
const count = 0;
gMap.events.on("geometryDrawDone", (type, points) =>
{
    // 每次画框的featureId都需要不一样，可以用count计数
    feature = new AILabel.Feature.Rect(`rectid${count}`, points, { name: "矩形框" }, style);
    gFeatureLayer.addFeature(feature);
    count += 1;
});
// 编辑完成，替换新的点坐标值
gMap.events.on("geometryEditDone", (type, feature, newPoints) =>
{
    feature.show();
    feature.update({ points: newPoints });
});
// 绘制过程中，将之前的框先隐藏
gMap.events.on("geometryEditing", (type, feature) =>
{
    feature.hide();
});

import React, {
    useImperativeHandle,
    forwardRef,
    useEffect
} from "react";
import styles from "./index.less";
import { message } from "antd";
import { canvasToAil, aiToCanvas } from "@/utils/utils";
import PropTypes from "prop-types";

const AILabel = require("AILabel");

let gMap;
let gImageLayer;
let count = 0;
let gFeatureLayer;
let selectedFeature = null;
let showFlag = true;
let initWidth = 700;// 盒子宽
let initHeight = 400;// 盒子的高
let initZoom;// 初始放大值
let initCenter;// 初始中心点
let gTextStyle; // 画笔样式
let preTextStyle;
let labelList = [];// 所有框的坐标和标签数据
let current = {}; // 当前框的坐标和标签数据
/* 用于坐标值转换参数 */
let imgInitH; // 图片的初始宽度
let imgInitW; // 图片的初始高度
let imgSjH;
let imgSjW;
const MONITOR_CANVAS = (props, ref) =>
{
    const textAndRect = (points, created, index, isPreAnnotation) =>
    {
        let feature;
        let style;
        if (isPreAnnotation === "1")
        {
            style = preTextStyle;
        }
        else
        {
            style = gTextStyle;
        }
        // 实例化矩形形
        if (props.type === "2" || props.type === "1")
        {
            feature = new AILabel.Feature.Rect(`rectid${count}`, points, { name: "矩形框" }, style);
        }
        else if (props.type === "4")
        {
            feature = new AILabel.Feature.Polygon(`rectid${count}`, points, { name: "多变型" }, style);
        }
        gFeatureLayer.addFeature(feature);
        count += 1;
    };
    useEffect(() =>
    {
        if (props.url)
        {
            initWidth = document.getElementById("AiLabelImgWrapper").clientWidth;
            initHeight = document.getElementById("AiLabelImgWrapper").clientHeight;
            const image = new Image();
            image.src = props.url;
            image.onload = () =>
            {
                imgInitW = image.width;
                imgInitH = image.height;
                imgSjW = initWidth;
                imgSjH = initHeight;
                const sR = imgInitW / imgInitH;
                const iR = initWidth / initHeight;
                // 如果图片宽度大于高度 则宽度百分百  高度自适应
                if (sR >= iR)
                {
                    imgSjH = Math.floor(initWidth / imgInitW * imgInitH);
                }
                else
                {
                    // 如果图片高度大于宽度 则高度百分百  宽度自适应
                    imgSjW = Math.floor(initHeight / imgInitH * imgInitW);
                }
                count = 0;
                labelList = [];
                // document.getElementById("AiLabelImg").style.width = `${imgSjW}px`;
                // document.getElementById("AiLabelImg").style.height = `${imgSjH}px`;
                gMap = new AILabel.Map("AiLabelImg", { zoom: 0, cx: 0, cy: 0, zoomMax: 400 * 10, zoomMin: 400 / 10, autoPan: true, drawZoom: true });
                gMap.tipLayer.hideTips(); // 关闭tip提示
                // 图片层实例\添加
                gImageLayer = new AILabel.Layer.Image("img", props.url, { h: imgSjH, w: imgSjW }, {});
                gMap.addLayer(gImageLayer);
                gFeatureLayer = new AILabel.Layer.Feature(`featureid`, { opacity: 1, zIndex: 4 });
                gMap.addLayer(gFeatureLayer);
                initZoom = gMap.getZoom();
                initCenter = gMap.getCenter();
                // 样式
                gTextStyle = new AILabel.Style({ strokeColor: "#E43446", lineWeight: 2, fillColor: "rgba(0,0,0,0)" });
                preTextStyle = new AILabel.Style({ strokeColor: "#0FA883", lineWeight: 2, fillColor: "rgba(0,0,0,0)" });
                gMap.events.on("featureSelected", feature =>
                {
                    // TODO 框被选中
                });
                gMap.events.on("featureStatusReset", () =>
                {
                   // TODO 框失去焦点
                });
            };
        }
    }, [props.url]);
    useImperativeHandle(ref, () => ({
        // 窗口自适应
        autoWindow()
        {
            gMap.centerAndZoom(initCenter, initZoom);
        },
        //回复浏览模式
        autoWidth()
        {
            gMap.setMode("pan");
        },
        // 原始尺寸
        initWidth()
        {
            gMap.centerAndZoom(initCenter, initZoom);
        },
        imgZoomIn()
        {
            gMap.zoomIn();
        },
        imgZoomOut()
        {
            gMap.zoomOut();
        },
        draw()
        {
            if (gFeatureLayer)
            {
                if (props.type === "2" || props.type === "1")
                {
                    gMap.setMode("drawRect", gTextStyle);
                }
                else if (props.type === "4")
                {
                    gMap.setMode("drawPolygon", gTextStyle);
                }
                gMap.events.on("geometryDrawDone", (type, points) =>
                {
                    textAndRect(points, true, 0, null, "0");
                });
                gMap.events.on("geometryEditDone", (type, feature, newPoints) =>
                {
                    feature.show();
                    feature.update({ points: newPoints });
                });
                gMap.events.on("geometryEditing", (type, feature) =>
                {
                    feature.hide();
                });
            }
        },
        // 复制框
        copyLabel()
        {
            if (selectedFeature === null)
            {
                message.error("未选择框进行复制操作");
            }
            else
            {
                const copyPoint = [];
                selectedFeature.points.forEach(item =>
                {
                    copyPoint.push({
                        x: item.x + 10,
                        y: item.y - 10
                    });
                });
                selectedFeature.deActive();
                textAndRect(copyPoint, true, 0, null, "0");
            }
        },
        // 删除框
        deleteLabel()
        {
            if (selectedFeature === null)
            {
                message.error("未选择框进行删除操作");
            }
            else
            {
                // 修改操作
                gFeatureLayer.removeFeature(selectedFeature);
            }
        },
        showHideAll()
        {
            const allFeatures = gFeatureLayer.getAllFeatures(); // 返回所有要素数据
            allFeatures.forEach(feature =>
            {
                if (showFlag)
                {
                    feature.hide();
                }
                else
                {
                    feature.show();
                }
            });
            showFlag = !showFlag;
        }
    }));

    return (
        <div id="AiLabelImgWrapper" className={styles["ailabel-img"]}>
            <div id="AiLabelImg" className={styles["ailabel-img"]}></div>
        </div>
    );
};
export default forwardRef(MONITOR_CANVAS);

// 兼容性的处理
           const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
           const chunkSize = 1024 * 1024 * 5; // 切片每次5M
           const chunks = Math.ceil(file.size / chunkSize);
           let currentChunk = 0; // 当前上传的chunk
           const spark = new SparkMD5.ArrayBuffer();
           // 对arrayBuffer数据进行md5加密，产生一个md5字符串
           const chunkFileReader = new FileReader(); // 用于计算出每个chunkMd5
           const params = { chunks: [], file: {}}; // 用于上传所有分片的md5信息
           const arrayBufferDataT = []; // 用于存储每个chunk的arrayBuffer对象,用于分片上传使用
		/* 文件合并所需参数 */
           params.file.fileName = file.name; // 文件名
           params.file.totalSize = file.size; // 文件总大小
           params.file.fileType = file.type; // 文件类型
           params.file.relativePath = file.name; // 相对路径
           params.file.refProjectId = "dbxt-sf-gd-sz"; // 文件唯一标识

           function loadNext()
           {
               const start = currentChunk * chunkSize;
               const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
               chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
           }
           loadNext();
           let identifier;
           chunkFileReader.onload = function(e)
           {
               // 对每一片分片进行md5加密
               if (currentChunk === 0)
               {
                   spark.append(e.target.result);
                   identifier = spark.end();
               }
               // 每一个分片需要包含的信息
               const obj = {
                   totalSize: file.size,
                   relativePath: file.name,
                   chunkNumber: currentChunk + 1, // 块编号
                   fileName: file.name,
                   identifier, // 块编号
                   totalChunks: chunks, // 总分片数
                   chunkSize, // 块大小
                   currentChunkSize: ((currentChunk * chunkSize + chunkSize) >= file.size) ? file.size - currentChunk * 							chunkSize : chunkSize // 当前块大小
               };
               // 每一次分片onload,currentChunk都需要增加，以便来计算分片的次数
               currentChunk += 1;
               params.chunks.push(obj);

               // 将每一块分片的arrayBuffer存储起来，用来partUpload
               const tmp = {
                   chunk: obj.chunkNumber,
                   currentBuffer: e.target.result
               };
               arrayBufferDataT.push(tmp);
               if (currentChunk < chunks)
               {
               // 当前切片总数没有达到总数时
                   loadNext();
                   // 计算预处理进度
                   setpreUploading(true);
                   setpreUploadPercent(Number((currentChunk / chunks * 100).toFixed(2)));
               }
               else
               {
                   setchunksSize(chunks);
                   setpreUploadPercent(100);
                   setFileList([file]);
                   // 记录所有chunks的长度
                   params.file.identifier = identifier;
                   params.file.fileChunks = params.chunks.length;
                   // 表示预处理结束，将上传的参数，arrayBuffer的数据存储起来
                   setarrayBufferData(arrayBufferDataT);
                   setpreUploading(false);
                   setuploadParams(params);
               }
           };

           chunkFileReader.onerror = function()
           {
               console.warn("oops, something went wrong.");
           };

try
{
    // 判断是否上传
    const data = await examChunk(chunks[0]);
    let { uploadedChunks } = data || []; // 已上传文件
    uploadedChunks = Array.from(new Set(uploadedChunks));
    if (uploadedChunks.length === uploadParams.file.fileChunks || data.skipUpload) // 如果全部文件快已上传 则直接完成 实现秒传
    {
        setuploadPercent(100); // 文件上传进度
        mergeFile();// 合并文件
    }
    else
    {
        setuploadPercent(Number((uploadedChunks.length / uploadParams.file.fileChunks * 100).toFixed(2)));
        const uploadList = chunks.filter(item => { return uploadedChunks.indexOf(item.chunkNumber) < 0; });// 过滤出未上传分片
        handlePartUpload(uploadList, uploadList.length); // 分片上传
    }
}
catch (error)
{
    console.log(error);
}

// 分片上传
const handlePartUpload = (uploadList, currentChunks) =>
    {
        let current = currentChunks;
        uploadList.forEach(async(element) =>
        {
            const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
            const { identifier, chunkNumber } = element;
            const formData = new FormData();
            // 新建一个Blob对象，将对应分片的arrayBuffer加入Blob中
            const blob = new Blob([arrayBufferData[chunkNumber - 1].currentBuffer], { type: "application/octet-stream" });
            // 将生成blob塞入到formdata中传入服务端
            formData.append("upfile", blob, identifier);
            Object.keys(element).forEach(el =>
            {
                formData.append(el, element[el]);
            });
            try
            {
                const uploadData = await upload(formData);
                if (uploadData === 200)
                {
                    current -= 1;
                    setuploadPercent(Number(((uploadParams.file.fileChunks - current) / uploadParams.file.fileChunks * 100).toFixed(2)));
                    if (current === 0)
                    {
                        mergeFile();
                    }
                }
                else
                {
                    setUploadFailed(true);
                    setspinning(false);
                }
            }
            catch (error)
            {
                setUploadFailed(true);
                setspinning(false);
                console.log(error);
            }
        });
    };

const mergeFile = async() =>
{
    try
    {
        const mergeData = await merge(uploadParams.file);
        if (mergeData.id)
        {
            // setUpfileId(mergeData.id);
            // message.success('上传成功');
            createData(mergeData.id);
            setuploading(false);
            setuploaded(true);
        }
        else
        {
            setspinning(false);
            setUploadFailed(true);
        }
    }
    catch (error)
    {
        setspinning(false);
        setUploadFailed(true);
    }
};

ctx.beginPath();
ctx.moveTo(x,y); // 先将点放到初始坐标值
ctx.bezierCurveTo(x+w*0.9，y-h/2，x+w, y-h/2, x+w,y); 
ctx.bezierCurveTo(x+w,y+h/2,x+w*0.9,y+h/2,x,y);// 第二条曲线以第一条曲线的结束点为起始点