<template>
    <PageHeader :title="title">
        <template #action>
            <div style="text-align: left;">
                <Select filterable v-model="ReC.project" style="width:200px" placeholder="项目"
                    @on-change="getiterations">
                    <Option v-for="item in projects" :value="item.id" :key="item.id">{{
        item.name }}</Option>
                </Select>
                <Select v-model="ReC.iteration" style="width:200px;margin-left: 10px;" placeholder="迭代"
                    @on-change="getReportInfo">
                    <Option v-for="item in iterations" :value="item.key" :key="item.key">{{ item.name }}</Option>
                </Select>
                <Button type="primary" @click="breforesend" style="width:100px;margin-left: 10px;">发送邮件</Button>
                <Button type="primary" @click="breforerunjenkins" style="width:130px;margin-left: 10px;">回归脚本运行</Button>
            </div>
        </template>
    </PageHeader>
    <Collapse v-model="defaultvalue" accordion simple>
        <Panel name="1">
            jenkins最新运行结果
            <template #content>
                <Table :columns="jenkins_columns" :data="jenkis_data">
                    <template #action="{ row, index }">
                        <div fix v-if="row.running">
                            <Icon type="md-ionic" size=18 class="demo-spin-icon-load"></Icon>
                            <div>运行中</div>
                        </div>
                        <div v-if="!row.running">
                            <Icon v-if="row.result == 'SUCCESS'" type="ios-checkmark-circle-outline" size=18
                                style="color: #19be6b;"></Icon>
                            <div v-if="row.result == 'SUCCESS'">已完成</div>
                            <Icon v-if="row.result == 'ABORTED'" type="md-close-circle" size=18 style="color: #c5c8ce;">
                            </Icon>
                            <div v-if="row.result == 'ABORTED'">已取消</div>
                            <Icon v-if="row.result == 'FAILURE'" type="ios-close-circle-outline" size=18
                                style="color: #ed4014;"></Icon>
                            <div v-if="row.result == 'FAILURE'">失败</div>
                        </div>
                    </template>
                </Table>
            </template>
        </Panel>
    </Collapse>
    <Card v-if="report">
        <template #extra>
            <Icon v-if="!edit" type="md-create" @click="edit = !edit" size="20" color="#2b85e4" />
            <Icon v-if="edit" type="md-checkmark-circle-outline" @click="edit = !edit" size="20" color="#2b85e4" />
        </template>
        <div style="margin-top: 8px;" id="reportBox">
            <h2 style="text-align: center;">{{ info.project + "-" + info.sprint + "测试报告" }}</h2>
            <h4 style="text-align: center;">{{ myname }}</h4>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">测试结论</Button>
            <p>
                &nbsp; &nbsp;
                <Paragraph v-if="edit" v-model="testResult" editable />
                <span v-if="!edit" id="jielun"></span>
            </p>
            <br />
            <div style="background-color: #dcdee2;margin-left: 1em;">
                <P>
                    <span>用例总数：{{ mycase.length }};</span>
                    <span>用例密度：{{ story ? ((mycase.length) / (story.length)).toFixed(2) : 0 }};</span>
                    <span>覆盖率：</span>
                    <span v-if="fugailu == 100" style="color: #19be6b;">{{ fugailu }}%</span>
                    <span v-else style="color: #ed4014;">{{ fugailu }}%</span>
                </P>
                <p>
                    <span v-for="item in story">
                        <span>{{ item.summary }}:</span><span :style="colorstyle(item.case.length)"
                            style="margin-right: 3px;">{{ item.case.length
                            }}</span><span>个用例；</span>
                    </span>
                </p>
                <P>
                    <span>bug总数：{{ bug.length }};</span>
                    <span>未关闭bug数：</span>
                    <span v-if="bug.filter(ele => { return ele.statusId != getStatuSuccessId() }).length == 0"
                        style="color: #19be6b;">{{
        bug.filter(ele => { return ele.statusId != getStatuSuccessId() }).length }}</span>
                    <span v-else style="color: #ed4014;">{{ bug.filter(ele => {
        return ele.statusId != getStatuSuccessId()
    }).length
                        }}</span>
                </P>
            </div>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">风险</Button>
            <p>
                &nbsp; &nbsp;
                <Paragraph v-if="edit" v-model="fengxxian" editable />
                <span v-if="!edit">{{ fengxxian }}</span>
            </p>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">测试计划资源情况</Button>
            <Table :columns="storycolumns" :data="story">
                <template #summary="{ row, index }">
                    <a target="_blank" :href='"http://jira.galaxy-immi.com/browse/" + row.key'>
                        <u>{{ row.summary }}</u>
                    </a>
                </template>
                <template #chan="{ row, index }">
                    <p>
                        {{ filterPeopleString('chan', row.peoples) }}
                    </p>
                </template>
                <template #qian="{ row, index }">
                    <p>
                        {{ filterPeopleString('qian', row.peoples) }}
                    </p>
                </template>
                <template #hou="{ row, index }">
                    <p>
                        {{ filterPeopleString('hou', row.peoples) }}
                    </p>
                </template>
                <template #test="{ row, index }">
                    <p>
                        {{ filterPeopleString('test', row.peoples) }}
                    </p>
                </template>
                <template #start="{ row, index }">
                    <p v-if="!edit">
                        {{ row.start }}
                    </p>
                    <Paragraph v-else v-model="row.start" editable />
                </template>
                <template #end="{ row, index }">
                    <p v-if="!edit">
                        {{ row.end }}
                    </p>
                    <Paragraph v-else v-model="row.end" editable />
                </template>
                <template v-if="edit" #action="{ row, index }">
                    <Icon type="ios-remove-circle" style="color: crimson;" @click="this.story.splice(index, 1)"
                        size="15" />
                </template>
            </Table>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">测试用例</Button>
            <div>
                <div v-for="item in story">
                    <Button type="info" style="width: 100%;text-align: left;">
                        {{ item.summary }}
                    </Button>
                    <Table :columns="casecolumns" :data="item.case.map(ele => { return { key: ele } })">
                        <template #summary="{ row, index }">
                            <a target="_blank" v-if="searchCaseBykey(row.key)"
                                :href='"http://jira.galaxy-immi.com/browse/" + row.key'>
                                <u>{{ searchCaseBykey(row.key).summary }}</u>
                            </a>
                            <p v-else style="color: #ed4014;">面板未找到相关用例，请联系jira人员配置</p>
                        </template>
                        <template #status="{ row, index }">
                            <p v-if="searchCaseBykey(row.key)">
                                {{ statusMap[searchCaseBykey(row.key).statusId] }}
                            </p>
                        </template>
                        <template v-if="edit" #action="{ row, index }">
                            <Icon type="ios-remove-circle" style="color: crimson;"
                                @click="item.case.splice(index, 1); rmcase(row.key)" size="15" />
                        </template>
                    </Table>
                </div>
            </div>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">bug记录</Button>
            <Table :columns="bugcolumns" :data="bug">
                <template #summary="{ row, index }">
                    <a target="_blank" :href='"http://jira.galaxy-immi.com/browse/" + row.key'>
                        <u>{{ row.summary }}</u>
                    </a>
                </template>
                <template #create="{ row, index }">
                    <p>
                        {{ row.extraFields ? row.extraFields[1].html : '' }}
                    </p>
                </template>
                <template #priority="{ row, index }">
                    <p>
                        {{ priorityMap[row.priorityId] }}
                    </p>
                </template>
                <template #Severity="{ row, index }">
                    <p>
                        {{ row.Severity }}
                    </p>
                </template>
                <template #status="{ row, index }">
                    <p>
                        {{ statusMap[row.statusId] }}
                    </p>
                </template>
                <template #people="{ row, index }">
                    <p>
                        {{ row.ascription }}
                    </p>
                </template>
                <template v-if="edit" #action="{ row, index }">
                    <Icon type="ios-remove-circle" style="color: crimson;" @click="this.bug.splice(index, 1)"
                        size="15" />
                </template>
            </Table>
            <Button shape="circle" style="margin-top: 10px;margin-bottom: 10px;" type="primary">自动化运行结果</Button>
            <Table :columns="script_result_columns" :data="jenkis_data">
                <template #name="{ row, index }">
                    <a target="_blank" :href="row.reportPath">
                        <u>{{ row.job }}</u>
                    </a>
                </template>
                <template #time="{ row, index }">
                    <p>
                        {{ row.time }}
                    </p>
                </template>
                <template #total="{ row, index }">
                    <p>
                        {{ row.total }}
                    </p>
                </template>
                <template #success="{ row, index }">
                    <p>
                        {{ row.success }}
                    </p>
                </template>
                <template #fail="{ row, index }">
                    <p>
                        {{ row.fail }}
                    </p>
                </template>
                <template #abf="{ row, index }">
                    <p>
                        {{ row.success && row.total ? (parseInt(row.success) / parseInt(row.total) * 100).toFixed(2) + '%' : ''
                        }}
                    </p>
                </template>
            </Table>
        </div>
        <div id="biao" style="margin-top: 10px;">
            <Row>
                <Col :span="12">
                <v-chart :option="bug_create_column" style="height: 300px"></v-chart></Col>
                <Col justify="center" :span="12">
                <v-chart :option="bug_p_column" style="height: 300px"></v-chart></Col>
            </Row>
            <Row>
                <Col justify="center" :span="12">
                <v-chart :option="bug_s_column" style="height: 300px"></v-chart></Col>
                <!-- <Col justify="center" :span="12">
                <v-chart :option="case_s_column" style="height: 300px"></v-chart></Col> -->
                <Col :span="12">
                <v-chart :option="bug_user_column" style="height: 300px"></v-chart></Col>
            </Row>
        </div>
    </Card>
    <Space wrap>
        <Modal title="选择收件人" v-model="modlShow" class-name="vertical-center-modal" @on-cancel="closeShow()">
            <Select filterable v-model="sendto" multiple style="width:260px;margin-bottom: 15px" placeholder="收件人">
                <Option v-for="item in emailList" :value="item.address" :key="item.id">{{ item.name }}</Option>
            </Select>
            <Select filterable v-model="sendcc" multiple style="width:260px" placeholder="抄送人">
                <Option v-for="item in emailList" :value="item.address" :key="item.id">{{ item.name }}</Option>
            </Select>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="send()">确认</Button>
            </template>
        </Modal>
    </Space>
    <Space wrap>
        <Modal title="运行脚本" v-model="runscriptShow" class-name="vertical-center-modal"
            @on-cancel="runscriptShow = false">
            <CheckboxGroup v-model="run_script">
                <Checkbox v-for="item in all_script" :label="item.name" border style="margin-top: 10px;"></Checkbox>
            </CheckboxGroup>
            <template #footer>
                <Button @click="runscriptShow=false">取消</Button>
                <Button type="primary" @click="runscript">确认</Button>
            </template>
        </Modal>
    </Space>
</template>

<script>
import html2canvas from "html2canvas";
export default {
    props: ['isCollapsed'],
    data() {
        return {
            defaultvalue: "",
            modlShow: false,
            runscriptShow: false,
            sendto: [],
            sendcc: [],
            defaultcc: [],
            emailList: [],
            jenkis_data: [],
            run_script: [],
            all_script: [],
            jenkins_columns: [
                {
                    title: '脚本名',
                    key: 'job'
                },
                {
                    title: '最近运行时间',
                    key: 'time'
                }, {

                    title: '状态',
                    slot: 'action',
                    align: 'center'

                }
            ],
            script_result_columns: [
                {
                    title: '脚本名',
                    slot: 'name',
                },
                {
                    title: '运行时间',
                    slot: 'time',
                },
                {
                    title: '用例总数',
                    slot: 'total',
                }, {

                    title: '成功数',
                    slot: 'success',
                    align: 'center'
                },
                {

                    title: '失败数',
                    slot: 'fail',
                    align: 'center'
                },
                {
                    title: '通过率',
                    slot: 'abf',
                    align: 'center'
                }
            ],

            bug_p_column: {
                title: {
                    text: 'bug优先级占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '优先级',
                        type: 'pie',
                        radius: '50%',
                        data: [
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }, bug_s_column: {
                title: {
                    text: 'bug严重程度占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '严重程度',
                        type: 'pie',
                        radius: '50%',
                        data: [
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            mycase: [],
            report: false,
            case_s_column: {
                title: {
                    text: '用例状态占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            bug_create_column: {
                title: {
                    text: 'bug产出趋势',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    }
                ]
            },
            bug_user_column: {
                title: {
                    text: '开发bug分布',
                    left: 'center'
                },
                xAxis: {

                    axisLabel: { interval: 0, },

                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar'
                    }
                ]
            },
            cShow: [],
            p1option: [],
            page_id: 17,
            title: "测试报告",
            edit: false,
            projects: [],
            iterations: [],
            ReC: {
                project: null,
                iteration: null
            },
            testResult: '所有测试用例均已完成，所有bug均已修复，测试通过',
            fengxxian: "无",
            myname: null,
            bug: [],
            case: [],
            people: [],
            story: [],
            storycolumns: [
                {
                    title: '需求',
                    slot: 'summary'
                },
                {
                    title: '产品',
                    slot: 'chan'
                },
                {
                    title: '前端',
                    slot: 'qian'
                },
                {
                    title: '后端',
                    slot: 'hou'
                },
                {
                    title: '测试',
                    slot: 'test'
                },
                {
                    title: '开始时间',
                    slot: 'start'
                },
                {
                    title: '结束时间',
                    slot: 'end'
                }
            ],
            casecolumns: [
                {
                    title: '用例名',
                    slot: 'summary'
                },
                {
                    title: '状态',
                    slot: 'status'
                }
            ],
            bugcolumns: [
                {
                    title: 'BUG',
                    slot: 'summary'
                },
                {
                    title: '提出时间',
                    slot: 'create'
                },
                {
                    title: '优先级',
                    slot: 'priority'
                },
                {
                    title: '严重程度',
                    slot: 'Severity'
                },
                {
                    title: '状态',
                    slot: 'status'
                },
                {
                    title: '修复人',
                    slot: 'people'
                }
            ],
            info: {
                project: null,
                sprint: null
            },
            statusMap: {},
            priorityMap: {},
            typeMap: {},
            caseCount: 0,
            fugailu: 0
        }
    },
    methods: {
        breforesend() {
            if (!this.report) return this.$Message.error("请先完善报告信息")
            if (this.fugailu < 100) return this.$Message.error("用例覆盖率不足100%（每个需求必须关联测试用例）")
            this.edit = false;
            this.getallEmail();
            this.getdefaultCC();
            this.modlShow = true;
        },
        show() {
            var info = ''
            if (this.testResult.includes("测试不通过")) {
                const a = this.testResult.split("测试不通过")
                for (var i = 0; i < a.length; i++) {
                    info = i < a.length - 1 ? info + '<span>' + a[i] + '</span><span style="font-weight: bold;color: #ed4014;">测试不通过</span>' : info + '<span>' + a[i] + '</span>'
                }
            } else if (this.testResult.includes("测试通过")) {
                const a = this.testResult.split("测试通过")
                console.info(a)
                for (var i = 0; i < a.length; i++) {
                    info = i < a.length - 1 ? info + '<span>' + a[i] + '</span><span style="font-weight: bold;color: #19be6b;">测试通过</span>' : info + '<span>' + a[i] + '</span>'
                }
            } else {
                info = '<span>' + this.testResult + '</span>'
            }
            document.getElementById("jielun").innerHTML = info
        },
        searchCaseBykey(key) {
            const index = this.mycase.findIndex(ele => { return ele.key == key })
            return index == -1 ? null : this.mycase[index]
        },
        getJenkinsInfo() {
            this.$request("get", '/tool/testport/runresult', null, this, (data) => {
                this.jenkis_data = data.data;
                setTimeout(() => {
                    this.getJenkinsInfo();
                }, 5000);
            })
        },
        breforerunjenkins() {
            this.$request("get", "/tool/testport/allscript", null, this, (data) => {
                this.all_script = data.data;
                this.run_script = this.all_script.map((each) => { return each.name })
                this.runscriptShow = true;
            })
        },
        runscript() {
            this.$request("post", "/tool/testport/runjobs", this.run_script, this, () => {
                this.runscriptShow = false;
            })
        },
        rmcase(key) {
            const index = this.mycase.findIndex(ele => ele.key == key)
            index != -1 && this.mycase.splice(index, 1)
        },
        filterPeopleString(type, people) {
            var result = ''
            people.forEach(ele => {
                if (this.people[type].indexOf(ele) != -1) { result = result + " " + ele }
            })
            return result
        },
        getprojects() {
            this.$request('get', 'tool/testport/getproject', null, this, (data) => { this.projects = data.data; this.ReC.iteration = null })
        },
        getiterations(project) {
            this.$request('get', 'tool/testport/iteration/' + project, null, this, (data) => { this.iterations = data.data })
        }, getReportInfo() {
            if (!this.ReC.iteration) return
            if (this.edit) this.edit = !this.edit
            this.$request('get', 'tool/testport/reportinfo', this.ReC, this, (data) => {
                this.bug = data.data.bug
                this.case = data.data.testcase
                this.people = data.data.people
                this.story = data.data.story
                this.info.project = data.data.project
                this.info.sprint = data.data.sprint
                this.statusMap = data.data.statusMap
                this.priorityMap = data.data.priorityMap
                this.typeMap = data.data.typeMap
                this.render()
            })
        },
        getStatuSuccessId() {
            for (var k in this.statusMap) {
                if (this.statusMap[k] == '完成' || this.statusMap[k] == '已完成') return k
            }
        },
        getdefaultCC() {
            this.$request('get', '/tool/testport/defaultCClist', null, this, (data) => { this.defaultcc = data.data })
        },
        render() {
            this.report = true
            setTimeout(() => {
                this.show()
            }, 50);
        },
        async send() {
            if (!this.report) return
            const html = document.getElementById("reportBox").innerHTML
            var stylestart = '<head><style type="text/css">'
            var styleend = '</style></head>'
            const cssBlock = document.styleSheets
            for (var i of cssBlock) {
                for (var j of i.rules) {
                    if (!j.selectorText) continue
                    if (j.selectorText == ".ivu-table") {
                        stylestart = stylestart + ".ivu-table {width: inherit;max-width: 100%;overflow: hidden;color: rgb(81, 90, 110);font-size: 14px;background-color: rgb(255, 255, 255);box-sizing: border-box;}"
                    }
                    else if (j.selectorText.includes("ivu-btn") || j.selectorText.includes("ivu-typography") || j.selectorText.includes("ivu-table") || j.selectorText.includes("body")) { stylestart = stylestart + j.cssText }
                }
            }
            const c = (stylestart + styleend + html).replace(/style="width(.*?)"/gm, 'style="width:100%"')
            var htmlDom = document.getElementById("biao")
            html2canvas(htmlDom, {
                useCORS: true,
                width: window.screen.availWidth,
                height: window.screen.availHeight,
                windowwidth: document.body.scrollWidth,
                windowHeight: document.body.scrollHeight,
                x: 0,
                y: window.pageYOffset
            }).then((canvas) => {
                const m = `<img src='${canvas.toDataURL("image/png")}'/>`
                const result = c + m
                const sub = this.info.project + "-" + this.info.sprint + "测试报告"
                this.closeShow()
                this.$request("post", "/tool/testport/sendport", { to: this.sendto, cc: this.sendcc, subject: sub, contents: result }, this, () => { this.sendto = [] })
            });
        },
        getallEmail() {
            this.$request("get", "/tool/testport/emailuserlist", null, this, (data) => { this.emailList = data.data })
        },
        closeShow() {
            this.modlShow = false
        }, colorstyle(number) {
            return number ? "color: #515a6e;" : "color: #ed4014;"
        }
    },
    watch: {
        edit(value) {
            const a = {
                title: ' ',
                slot: 'action'
            }
            if (value) {
                this.storycolumns.push(a)
                this.bugcolumns.push(a)
                this.casecolumns.push(a)
            } else {
                const index1 = this.storycolumns.findIndex(ele => { return ele.slot == 'action' })
                const index2 = this.bugcolumns.findIndex(ele => { return ele.slot == 'action' })
                const index3 = this.casecolumns.findIndex(ele => { return ele.slot == 'action' })
                index1 == -1 || this.storycolumns.splice(index1, 1)
                index2 == -1 || this.bugcolumns.splice(index2, 1)
                index3 == -1 || this.casecolumns.splice(index3, 1)
                setTimeout(() => {
                    this.show()
                }, 50);
            }
        },
        defaultcc: {
            handler(value) {
                // value.forEach(element => {
                //     if (!this.sendcc.includes(element.address)) this.sendcc.push(element.address)
                // });
                this.sendcc = value.map(ele => { return ele.address })
            }, deep: true
        },
        bug: {
            handler(value) {
                this.bug_p_column.series[0].data = []
                this.bug_s_column.series[0].data = []
                this.bug_create_column.xAxis.data = []
                this.bug_create_column.series[0].data = []
                this.bug_user_column.xAxis.data = []
                this.bug_user_column.series[0].data = []
                if (value) {
                    var pinfo = {}
                    var sinfo = {}
                    var dateinfo = {}
                    var bugUser = {}
                    value.forEach(ele => {
                        console.info(ele)
                        ele.priorityId in pinfo ? pinfo[ele.priorityId]++ : pinfo[ele.priorityId] = 1
                        ele.Severity in sinfo ? sinfo[ele.Severity]++ : sinfo[ele.Severity] = 1
                        // let date = ele.extraFields[1].html.split(' ')[0] || ''
                        let date = null
                        if (ele.extraFields) {
                            const index = ele.extraFields?.findIndex(ele => { return ele.id == "created" }) || -1
                            date = index != -1 ? ele.extraFields[index].html.split(' ')[0] : 0
                        } else {
                            date = null
                        }
                        date in dateinfo ? dateinfo[date]++ : dateinfo[date] = 1
                        ele.ascription in bugUser ? bugUser[ele.ascription]++ : bugUser[ele.ascription] = 1
                    })
                    for (var i in pinfo) {
                        this.bug_p_column.series[0].data.push({ value: pinfo[i], name: this.priorityMap[i] })
                    }

                    for (var i in sinfo) {
                        this.bug_s_column.series[0].data.push({ value: sinfo[i], name: i })
                    }

                    for (var i in dateinfo) {
                        this.bug_create_column.xAxis.data.push(i)
                        this.bug_create_column.series[0].data.push(dateinfo[i])
                    }
                    for (var i = 0; i < this.bug_create_column.xAxis.data.length; i++) {
                        for (var j = i + 1; j < this.bug_create_column.xAxis.data.length; j++) {
                            if (this.bug_create_column.xAxis.data[i] > this.bug_create_column.xAxis.data[j]) {
                                const a = this.bug_create_column.xAxis.data[i]
                                const b = this.bug_create_column.series[0].data[i]
                                this.bug_create_column.xAxis.data[i] = this.bug_create_column.xAxis.data[j]
                                this.bug_create_column.xAxis.data[j] = a
                                this.bug_create_column.series[0].data[i] = this.bug_create_column.series[0].data[j]
                                this.bug_create_column.series[0].data[j] = b
                            }
                        }
                    }

                    for (var i in bugUser) {
                        this.bug_user_column.xAxis.data.push(i)
                        this.bug_user_column.series[0].data.push(bugUser[i])
                    }
                }
            }, deep: true
        },
        story: {
            handler(value) {
                if (value) {
                    this.mycase = []
                    var a = 0
                    var b = 0
                    this.cShow = value.map(ele => { return ele.key });
                    value.forEach(ele => {
                        if (ele.case.length > 0) {
                            b += 1
                        };
                        a += 1
                    })
                    value.forEach(ele => {
                        if (ele.extraFields) {
                            const index = ele.extraFields.findIndex(item => { return item.id == "created" })
                            ele.start = index != -1 ? ele.extraFields[index].html.split(" ")[0] : ''
                        }
                        else ele.start = ''
                        ele.end = new Date().toLocaleDateString()
                        this.case.forEach(each => {
                            if (ele.case.indexOf(each.key) != -1) {
                                this.mycase.push(each)
                            }
                        })
                    })
                    this.fugailu = a ? ((b / a) * 100).toFixed(2) : 0
                }
            },
            deep: true
        },
        mycase: {
            handler(value) {
                this.case_s_column.series[0].data = []
                if (value) {
                    var info = {}
                    value.forEach(ele => {
                        ele.statusId in info ? info[ele.statusId]++ : info[ele.statusId] = 1
                    })
                    for (var i in info) {
                        this.case_s_column.series[0].data.push({ value: info[i], name: this.statusMap[i] })
                    }
                }
            },
            deep: true
        }
    },
    created() {
        this.getprojects();
        this.getJenkinsInfo();
        this.myname = JSON.parse(localStorage.getItem("userinfo")).name
    },
    mounted() {
    }
};
</script>

<style type="text/css">
.chart {
    height: 100vh;
}

@keyframes changDeg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.demo-spin-icon-load {
    color: #2b85e4;
    animation: changDeg 2s linear 0.2s infinite;
}
</style>