spfm-market-front/src/pages/main/competitor/index.vue

<template>
    <div>
        <fullscreen
            :fullscreen.sync="fullscreen"
            class="container structure-l mc-style"
            style="margin: 0; width: calc(75% - 15px)"
        >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="违规信息" name="first">
                    <div class="container-box">
                        <!-- <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList> -->
                        <div class="checknum">
                            <span>全部({{ total }}) | 已选</span>
                            <span class="c-188ACF">({{ totalcheck }})</span>
                        </div>
                        <div class="titbtn-box">
                            <el-button
                                size="medium"
                                type="success"
                                icon="el-icon-s-order"
                                @click="outExe(1)"
                            >汇总Excel报表</el-button
                            >
                            <el-button
                                size="medium"
                                type="primary"
                                icon="el-icon-plus"
                                @click="addinfo"
                            >新建</el-button
                            >
                        </div>
                        <div class="search">
                            <mySearch
                                :searchList="searchList"
                                @searchInfo="searchInfo"
                            ></mySearch>
                        </div>
                        <div class="tabbox">
                            <el-table
                                height="calc(50vh - 100px)"
                                @select="checkNum"
                                @select-all="checkNum"
                                class="com-table"
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                size="small"
                                border
                                style="width: 100%"
                                v-loading="loading"
                            >
                                <el-table-column type="selection" width="55"> </el-table-column>
                                <el-table-column
                                    prop="violationCateName"
                                    label="违规类别"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column prop="provinceName" label="省份">
                                </el-table-column>
                                <el-table-column
                                    width="100"
                                    prop="recordRegionName"
                                    label="违规地市"
                                >
                                </el-table-column>
                                <el-table-column prop="operatorName" label="运营商">
                                </el-table-column>
                                <el-table-column prop="violationItemName" label="违规项目">
                                </el-table-column>
                                <el-table-column width="120" label="违规内容">
                                    <template slot-scope="scope">
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            :content="scope.row.violationContent"
                                            placement="bottom"
                                        >
                      <span
                          class="tab-long"
                          v-show="scope.row.violationContent.length > 7"
                      >{{ scope.row.violationContent }}</span
                      >
                                        </el-tooltip>
                                        <span v-show="scope.row.violationContent.length <= 7">{{
                                                scope.row.violationContent
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="tariffName" label="资费名称">
                                </el-table-column>
                                <el-table-column width="120" label="资费内容">
                                    <template slot-scope="scope">
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            :content="scope.row.taffiffContent"
                                            placement="bottom"
                                        >
                      <span
                          class="tab-long"
                          v-show="scope.row.taffiffContent.length > 7"
                      >{{ scope.row.taffiffContent }}</span
                      >
                                        </el-tooltip>
                                        <span v-show="scope.row.taffiffContent.length <= 7">{{
                                                scope.row.taffiffContent
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="monthFee"
                                    sortable
                                    width="100"
                                    label="月费(元)"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="preFee"
                                    width="110"
                                    sortable
                                    label="预存款(元)"
                                >
                                </el-table-column>
                                <el-table-column prop="remFee" width="100" label="酬金">
                                </el-table-column>
                                <el-table-column prop="saleChnl" label="渠道">
                                </el-table-column>
                                <el-table-column prop="saleScope" label="范围">
                                </el-table-column>
                                <el-table-column prop="monthSale" label="月销量">
                                </el-table-column>
                                <el-table-column label="上报时间" width="140">
                                    <template slot-scope="scope" class="tab-btn">
                                        <span>{{ scope.row.opTime }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="opName" label="上报人">
                                    <template slot-scope="scope">
                                        <span>{{ $desensitization(scope.row.opName, 1) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="contactPhone"
                                    width="100"
                                    label="联系电话"
                                >
                                </el-table-column>
                                <el-table-column label="审核状态">
                                    <template slot-scope="scope" class="tab-btn">
                    <span
                        :class="
                        scope.row.sts * 1 === 2
                          ? 'pass'
                          : scope.row.sts * 1 === 1
                          ? 'nopass'
                          : ''
                      "
                    >{{ scope.row.stsDesc }}</span
                    >
                                    </template>
                                </el-table-column>

                                <el-table-column
                                    prop="evidenceType"
                                    label="证据类型"
                                    width="100"
                                >
                                </el-table-column>

                                <el-table-column
                                    prop="fixFlagDesc"
                                    label="是否已解决"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="groupFlagDesc"
                                    label="是否反馈总部"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="wwFlagDesc"
                                    label="是否返回竞合"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="admFlagDesc"
                                    label="是否反馈总局"
                                    width="100"
                                >
                                </el-table-column>

                                <el-table-column
                                    label="操作"
                                    width="120"
                                    align="center"
                                    fixed="right"
                                >
                                    <template slot-scope="scope" class="tab-btn">
                                        <el-dropdown @command="outlineinfo">
                                            <i class="el-icon-download"></i>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item :command="scope"
                                                ><i class="el-icon-picture"></i
                                                >对外导出图片</el-dropdown-item
                                                >
                                                <el-dropdown-item :command="scope.row"
                                                ><i class="el-icon-folder-opened"></i
                                                >对内导出word</el-dropdown-item
                                                >
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="详情"
                                            placement="bottom-end"
                                        >
                                            <i
                                                class="el-icon-view"
                                                @click="checkInfo(scope.row.id)"
                                            ></i>
                                        </el-tooltip>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="删除"
                                            placement="bottom-end"
                                        >
                                            <i class="el-icon-delete" @click="delLine(scope.row)"></i>
                                        </el-tooltip>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="修改"
                                            placement="bottom-end"
                                        >
                                            <i
                                                class="el-icon-edit"
                                                @click="changeInfo(scope.row)"
                                                v-if="scope.row.sts !== 1"
                                            ></i>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                class="pageBox"
                                @current-change="currchange"
                                layout="prev, pager, next"
                                background
                                :total="total"
                            >
                            </el-pagination>
                        </div></div
                    ></el-tab-pane>
                <el-tab-pane label="正常信息" name="second">
                    <div class="container-box">
                        <!--                         <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList> -->
                        <div class="checknum">
                            <span>全部({{ total1 }}) | 已选</span>
                            <span class="c-188ACF">({{ totalcheck1 }})</span>
                        </div>
                        <div class="titbtn-box">
                            <el-button
                                size="medium"
                                type="success"
                                icon="el-icon-s-order"
                                @click="outExe(2)"
                            >汇总Excel报表</el-button
                            >
                            <el-button
                                size="medium"
                                type="primary"
                                icon="el-icon-plus"
                                @click="addinfo1"
                            >新建</el-button
                            >
                        </div>
                        <div class="search">
                            <mySearch
                                :searchList="searchList1"
                                @searchInfo="searchInfo1"
                            ></mySearch>
                        </div>
                        <div class="tabbox">
                            <el-table
                                @select="checkNum1"
                                @select-all="checkNum1"
                                class="com-table"
                                ref="multipleTable"
                                :data="tableData1"
                                tooltip-effect="dark"
                                size="small"
                                border
                                style="width: 100%"
                                v-loading="loading"
                            >
                                <el-table-column type="selection" width="55"> </el-table-column>
                                <el-table-column
                                    prop="violationCateName"
                                    label="类别"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column prop="provinceName" label="省份">
                                </el-table-column>
                                <el-table-column
                                    width="100"
                                    prop="recordRegionName"
                                    label="地市"
                                >
                                </el-table-column>
                                <el-table-column prop="packageGear" label="套餐档位">
                                </el-table-column>
                                <el-table-column prop="tariffName" label="套餐名称">
                                </el-table-column>
                                <el-table-column prop="operatorName" label="运营商">
                                </el-table-column>
                                <el-table-column width="120" label="套餐内容">
                                    <template slot-scope="scope">
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            :content="scope.row.taffiffContent"
                                            placement="bottom"
                                        >
                      <span
                          class="tab-long"
                          v-show="scope.row.taffiffContent.length > 7"
                      >{{ scope.row.taffiffContent }}</span
                      >
                                        </el-tooltip>
                                        <span v-show="scope.row.taffiffContent.length <= 7">{{
                                                scope.row.taffiffContent
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="monthFee"
                                    sortable
                                    width="100"
                                    label="月费(元)"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="concessionalRate"
                                    sortable
                                    width="100"
                                    label="优惠价"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="preFee"
                                    width="110"
                                    sortable
                                    label="预存款(元)"
                                >
                                </el-table-column>
                                <el-table-column prop="remFee" width="100" label="酬金">
                                </el-table-column>
                                <el-table-column prop="saleChnl" label="渠道">
                                </el-table-column>
                                <el-table-column prop="saleScope" label="范围">
                                </el-table-column>
                                <el-table-column prop="monthSale" label="月销量">
                                </el-table-column>
                                <el-table-column prop="isDb" label="是否包含宽带">
                                </el-table-column>
                                <el-table-column prop="dbContent" label="宽带具体内容">
                                </el-table-column>
                                <el-table-column label="上报时间" width="140">
                                    <template slot-scope="scope" class="tab-btn">
                                        <span>{{ scope.row.opTime }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="opName" label="上报人">
                                    <template slot-scope="scope">
                                        <span>{{ $desensitization(scope.row.opName, 1) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="contactPhone"
                                    width="100"
                                    label="联系电话"
                                >
                                </el-table-column>
                                <el-table-column label="审核状态">
                                    <template slot-scope="scope" class="tab-btn">
                    <span
                        :class="
                        scope.row.sts * 1 === 2
                          ? 'pass'
                          : scope.row.sts * 1 === 1
                          ? 'nopass'
                          : ''
                      "
                    >{{ scope.row.stsDesc }}</span
                    >
                                    </template>
                                </el-table-column>

                                <el-table-column
                                    prop="fixFlagDesc"
                                    label="是否已解决"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="groupFlagDesc"
                                    label="是否反馈总部"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="wwFlagDesc"
                                    label="是否返回竞合"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="admFlagDesc"
                                    label="是否反馈总局"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    width="120"
                                    align="center"
                                    fixed="right"
                                >
                                    <template slot-scope="scope" class="tab-btn">
                                        <el-dropdown @command="outlineinfo1">
                                            <i class="el-icon-download"></i>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item :command="scope"
                                                ><i class="el-icon-picture"></i
                                                >对外导出图片</el-dropdown-item
                                                >
                                                <el-dropdown-item :command="scope.row"
                                                ><i class="el-icon-folder-opened"></i
                                                >对内导出word</el-dropdown-item
                                                >
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="详情"
                                            placement="bottom-end"
                                        >
                                            <i
                                                class="el-icon-view"
                                                @click="checkInfo1(scope.row.id)"
                                            ></i>
                                        </el-tooltip>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="删除"
                                            placement="bottom-end"
                                        >
                                            <i class="el-icon-delete" @click="delLine(scope.row)"></i>
                                        </el-tooltip>
                                        <el-tooltip
                                            class="item"
                                            effect="light"
                                            content="修改"
                                            placement="bottom-end"
                                        >
                                            <i
                                                class="el-icon-edit"
                                                @click="changeInfo1(scope.row)"
                                                v-if="scope.row.sts !== 1"
                                            ></i>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                class="pageBox"
                                @current-change="currchange1"
                                layout="prev, pager, next"
                                background
                                :total="total1"
                            >
                            </el-pagination>
                        </div></div
                    ></el-tab-pane>
            </el-tabs>

            <myMessage
                :messTit="messTit"
                @closeMessage="closeMessage"
                :centerDialogVisible="centerDialogVisible"
                v-if="centerDialogVisible"
            ></myMessage>
            <myMessage
                :messTit="messTit"
                @closeMessage="closeMessagedel"
                :centerDialogVisible="centerDialogVisibledel"
                v-if="centerDialogVisibledel"
            ></myMessage>
        </fullscreen>
        <competeRight></competeRight>
    </div>
</template>
<script>
import competeRight from "../../../components/competeRight";
import mySearch from "../../../components/search";
import toolList from "../../../components/toolList.vue";
import myMessage from "../../../components/myMessage.vue";

export default {
    components: {
        competeRight,
        mySearch,
        toolList,
        myMessage,
    },
    data() {
        return {
            exportType: "1", // 1是违规  2是正常
            activeName: "first",
            tooltit: "",
            fullscreen: false,
            total: 0,
            total1: 0,
            totalcheck: 0,
            totalcheck1: 0,
            pageSize: 1,
            pageSize1: 1,
            tableData: [],
            tableData1: [],
            outList: [],
            outList1: [],
            searchList: [
                {
                    type: "sel",
                    tit: "类别",
                    value: "",
                    width: "19%",
                    options: [],
                },
                {
                    type: "sel",
                    tit: "运营商",
                    value: "",
                    width: "19%",
                    options: [],
                },
                {
                    type: "date",
                    tit: "开始时间",
                    value: "",
                    width: "19%",
                },
                {
                    type: "date",
                    tit: "结束时间",
                    value: "",
                    width: "19%",
                },
                {
                    type: "input",
                    tit: "请输入违规内容",
                    value: "",
                    width: "19%",
                },
            ],
            searchList1: [
                {
                    type: "sel",
                    tit: "类别",
                    value: "",
                    width: "19%",
                    options: [],
                },
                {
                    type: "sel",
                    tit: "运营商",
                    value: "",
                    width: "19%",
                    options: [],
                },
                {
                    type: "date",
                    tit: "开始时间",
                    value: "",
                    width: "19%",
                },
                {
                    type: "date",
                    tit: "结束时间",
                    value: "",
                    width: "19%",
                },
            ],
            params: {},
            centerDialogVisible: false,
            centerDialogVisibledel: false,
            messTit: "",
            delid: "",
            loading: false,
        };
    },
    methods: {
        // 接口调用
        getSecondList(v, n) {
            this.pageSize = n;
            this.loading = true;
            this.totalcheck = 0;
            v.type = "正规";
            this.tableData1 = [];
            this.$http({
                url: "/market/swcompetitor/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}',
                },
                data: v,
            }).then((res) => {
                this.tableData1 = res.data.data;
                this.total1 = res.data.totalRecord;
                this.loading = false;
            });
        },
        handleClick() {
            if (this.activeName == "first") {
                this.getList(this.params, this.pageSize);
            } else {
                this.getSecondList(this.params, this.pageSize);
            }
        },
        //查询处理
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.violationCate = v[0]) : "";
            v[1] ? (this.params.operatorCode = v[1]) : "";
            v[2] ? (this.params.opTimeFrom = v[2]) : "";
            v[3] ? (this.params.opTimeTo = v[3]) : "";
            v[4] ? (this.params.violationContent = v[4]) : "";
            this.getList(this.params, this.pageSize);
        },
        //查询处理
        searchInfo1(v) {
            this.params = {};
            v[0] ? (this.params.violationCate = v[0]) : "";
            v[1] ? (this.params.operatorCode = v[1]) : "";
            v[2] ? (this.params.opTimeFrom = v[2]) : "";
            v[3] ? (this.params.opTimeTo = v[3]) : "";
            v[4] ? (this.params.violationContent = v[4]) : "";
            this.getSecondList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            let _this = this;
            this.pageSize = n;
            this.loading = true;
            this.tableData = [];
            this.totalcheck = 0;
            v.type = "违规";
            this.$http({
                url: "/market/swcompetitor/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}',
                },
                data: v,
            }).then((res) => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                for (let i = 0; i < this.tableData.length; i++) {
                    _this.tableData[i].preFee = _this.tableData[i].preFee * 1;
                    _this.tableData[i].monthFee = _this.tableData[i].monthFee * 1;
                    if (_this.tableData[i].contactPhone) {
                        _this.tableData[i].contactPhone =
                            _this.tableData[i].contactPhone.split("");
                        _this.tableData[i].contactPhone[3] = "*";
                        _this.tableData[i].contactPhone[4] = "*";
                        _this.tableData[i].contactPhone[5] = "*";
                        _this.tableData[i].contactPhone[6] = "*";
                        let phone = "";
                        for (let j = 0; j < _this.tableData[i].contactPhone.length; j++) {
                            phone += _this.tableData[i].contactPhone[j];
                        }
                        _this.tableData[i].contactPhone = phone;
                    }
                }
                this.loading = false;
            });
        },
        //获取字典
        getListwglb() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: "wglb",
                },
            }).then((res) => {
                this.searchList[0].options = res.data;
            });
        },
        //获取字典
        getListsf() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: "yys",
                },
            }).then((res) => {
                this.searchList[1].options = res.data;
            });
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        // 分页
        currchange1(v) {
            this.pageSize1 = v;
            this.getSecondList(this.params, this.pageSize);
        },
        closeMessagedel(v) {
            let _this = this;
            this.centerDialogVisibledel = false;
            if (v === 1) {
                this.$http({
                    url: "/market/swcompetitor/del",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        id: this.delid,
                    },
                }).then((res) => {
                    if (res.data.result === 1) {
                        _this.$message({
                            message: res.data.desc,
                            type: "error",
                        });
                    } else {
                        _this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        _this.getList(this.params, this.pageSize);
                    }
                });
            }
        },
        //删除
        delLine(v) {
            this.delid = v.id;
            this.centerDialogVisibledel = true;
            this.messTit = "即将删除此条数据, 是否删除?";
        },
        //跳添加页
        addinfo() {
            this.$router.push("/addCompetitor");
            this.setabList("新增竞争对手信息", "/addCompetitor");
        },
        //跳添加页
        addinfo1() {
            this.$router.push("/addCompetitorNew");
            this.setabList("新增竞争对手信息", "/addCompetitorNew");
        },
        //详情页
        checkInfo(v) {
            this.$router.push({
                path: "/competitorInfo",
                query: {
                    id: v,
                    type: 1,
                },
            });
            this.setabList("竞争对手信息详情", "/competitorInfo?id=" + v + "&type=1");
        },
        //详情页
        checkInfo1(v) {
            this.$router.push({
                path: "/competitorInfoNew",
                query: {
                    id: v,
                    type: 1,
                },
            });
            this.setabList("竞争对手信息详情", "/competitorInfoNew?id=" + v + "&type=1");
        },
        changeInfo(v) {
            this.$router.push({
                path: "/changeCompet",
                query: {
                    id: v.id,
                },
            });
            this.setabList("竞争对手信息修改", "/changeCompet?id=" + v.id);
        },
        changeInfo1(v) {
            this.$router.push({
                path: "/changeCompetNew",
                query: {
                    id: v.id,
                },
            });
            this.setabList("竞争对手信息修改", "/changeCompetNew?id=" + v.id);
        },
        setabList(n, p) {
            let params = {
                children: "",
                name: n,
                rountPath: p,
                target: "_self",
            };
            for (let i = 0; i < this.$store.state.tabList.length; i++) {
                if (this.$store.state.tabList[i].name === params.name) {
                    this.$store.state.tabList[i] = params;
                }
            }
            let set = new Set([...this.$store.state.tabList, params]);
            set.add(params);
            this.$store.commit("setDefaultActive", params.rountPath);
            this.$store.commit("setTabList", Array.from(set));
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        //列表选择
        checkNum1(v) {
            this.totalcheck1 = v.length;
            this.outList1 = v;
        },
        //列表选择
        checkNum(v) {
            this.totalcheck = v.length;
            this.outList = v;
        },
        //导出
        outlineinfo(v) {
            if (v.row) {
                let data = {
                    provinceName: v.row.provinceName,
                    operatorName: v.row.operatorName,
                    violationCateName: v.row.violationCateName,
                    violationItemName: v.row.violationItemName,
                    violationItem: v.row.violationItemName,
                    monthFee: v.row.monthFee,
                    tariffName: v.row.tariffName,
                    taffiffContent: v.row.taffiffContent,
                    remFee: v.row.remFee,
                    preFee: v.row.preFee,
                    saleScope: v.row.saleScope,
                    saleChnl: v.row.saleChnl,
                    monthSale: v.row.monthSale,
                    violationContent: v.row.violationContent,
                    recordRegionName: v.row.recordRegionName,
                };
                this.$http({
                    url: "/market/cwcompetitor/writeImg",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: data,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime() + ".png"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = new Date().getTime() + ".png";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            } else {
                let data = {
                    provinceName: v.provinceName,
                    operatorName: v.operatorName,
                    violationCateName: v.violationCateName,
                    violationItemName: v.violationItemName,
                    violationItem: v.violationItemName,
                    monthFee: v.monthFee,
                    tariffName: v.tariffName,
                    taffiffContent: v.taffiffContent,
                    remFee: v.remFee,
                    preFee: v.preFee,
                    saleScope: v.saleScope,
                    saleChnl: v.saleChnl,
                    monthSale: v.monthSale,
                    violationContent: v.violationContent,
                    recordRegionName: v.recordRegionName,
                    id: v.id,
                };
                this.$http({
                    url: "/market/cwcompetitor/write2Doc",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: data,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime() + ".docx"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = new Date().getTime() + ".docx";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },
        //导出
        outlineinfo1(v) {
            if (v.row) {
                let data = {
                    provinceName: v.row.provinceName,
                    operatorName: v.row.operatorName,
                    violationCateName: v.row.violationCateName,
                    violationItemName: v.row.violationItemName,
                    violationItem: v.row.violationItemName,
                    monthFee: v.row.monthFee,
                    tariffName: v.row.tariffName,
                    taffiffContent: v.row.taffiffContent,
                    remFee: v.row.remFee,
                    preFee: v.row.preFee,
                    saleScope: v.row.saleScope,
                    saleChnl: v.row.saleChnl,
                    monthSale: v.row.monthSale,
                    violationContent: v.row.violationContent,
                    recordRegionName: v.row.recordRegionName,
                };
                this.$http({
                    url: "/market/cwcompetitor/writeImg1",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: data,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime() + ".png"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = new Date().getTime() + ".png";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            } else {
                let data = {
                    provinceName: v.provinceName,
                    operatorName: v.operatorName,
                    violationCateName: v.violationCateName,
                    violationItemName: v.violationItemName,
                    violationItem: v.violationItemName,
                    monthFee: v.monthFee,
                    tariffName: v.tariffName,
                    taffiffContent: v.taffiffContent,
                    remFee: v.remFee,
                    preFee: v.preFee,
                    saleScope: v.saleScope,
                    saleChnl: v.saleChnl,
                    monthSale: v.monthSale,
                    violationContent: v.violationContent,
                    recordRegionName: v.recordRegionName,
                    id: v.id,
                };
                this.$http({
                    url: "/market/cwcompetitor/write2Doc1",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: data,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime() + ".docx"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = new Date().getTime() + ".docx";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },
        //导出表格---------------------------------------------------------------------------------------------------
        closeMessage(v) {
            this.centerDialogVisible = false;
            if (v===1){
                this.export2Excel(v);
            }
        },
        outExe(val) {
            // 1违规 2正常
            if (val == 1) {
                if (this.outList.length > 0) {
                    this.centerDialogVisible = true;
                    this.messTit = "此操作将导出excel文件, 是否继续?";
                    this.exportType = val;
                }
            } else {
                if (this.outList1.length > 0) {
                    this.centerDialogVisible = true;
                    this.messTit = "此操作将导出excel文件, 是否继续?";
                    this.exportType = val;
                }
            }
        },
        export2Excel() {
            var that = this;
            console.log("=============================================");
            console.log("violationContent");
            if (this.exportType === 1) {
                require.ensure([], () => {
                    const { export_json_to_excel } = require("../vendor/Export2Excel");
                    console.log("violationContent");
                    const tHeader = [
                        "违规类别",
                        "省份",
                        "违规地市",
                        "运营商",
                        "违规项目",
                        "违规内容",
                        "资费名称",
                        "资费内容",
                        "月费",
                        "预存款",
                        "酬金",
                        "渠道",
                        "范围",
                        "月销量",
                        "上报时间",
                        "上报人",
                        "联系电话",
                        "审核状态",
                        "证据类型",
                        "是否已解决",
                        "是否反馈总部",
                        "是否返回竞合",
                        "是否反馈总局",
                    ]; // 导出的表头名
                    const filterVal = [
                        "violationCateName",
                        "provinceName",
                        "recordRegionName",
                        "operatorName",
                        "violationItemName",
                        "violationContent",
                        "tariffName",
                        "taffiffContent",
                        "monthFee",
                        "preFee",
                        "remFee",
                        "saleChnl",
                        "saleScope",
                        "monthSale",
                        "opTime",
                        "opName",
                        "contactPhone",
                        "stsDesc",
                        "evidenceType",
                        "fixFlagDesc",
                        "groupFlagDesc",
                        "wwFlagDesc",
                        "admFlagDesc",
                    ]; // 导出的表头字段名
                    const list = that.outList;
                    const data = that.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `竞争对手excel`); // 导出的表格名称，根据需要自己命名
                });
                return;
            }
            if (this.exportType === 2) {
                require.ensure([], () => {
                    const { export_json_to_excel } = require("../vendor/Export2Excel");
                    const tHeader = [
                        "类别",
                        "省份",
                        "地市",
                        "套餐档位",
                        "套餐名称",
                        "运营商",
                        "套餐内容",
                        "月费(元)",
                        "优惠价",
                        "预存款(元)",
                        "酬金",
                        "渠道",
                        "范围",
                        "月销量",
                        "是否包含宽带",
                        "宽带具体内容",
                        "上报时间",
                        "上报人",
                        "联系电话",
                        "审核状态",
                        "是否已解决",
                        "是否反馈总部",
                        "是否返回竞合",
                        "是否反馈总局",
                    ]; // 导出的表头名
                    const filterVal = [
                        "violationCateName",
                        "provinceName",
                        "recordRegionName",
                        "packageGear",
                        "tariffName",
                        "operatorName",
                        "taffiffContent",
                        "monthFee",
                        "concessionalRate",
                        "preFee",
                        "remFee",
                        "saleChnl",
                        "saleScope",
                        "monthSale",
                        "isDb",
                        "dbContent",
                        "opTime",
                        "opName",
                        "contactPhone",
                        "stsDesc",
                        "fixFlagDesc",
                        "groupFlagDesc",
                        "wwFlagDesc",
                        "admFlagDesc",
                    ]; // 导出的表头字段名
                    const list = that.outList1;
                    const data = that.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `竞争对手excel`); // 导出的表格名称，根据需要自己命名
                });
                return;
            }
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
    },
    mounted() {
        let type = this.$route.query.type
        if(type == '1'){
               this.activeName = 'second';
            this.getSecondList(this.params, this.pageSize);
        }else{
            this.getList(this.params, this.pageSize);
        }
    },
    created() {
        this.getListwglb();
        this.getListsf();
    },
};
</script>
<style lang="css">
.mc-style .el-tabs__content {
    display: block !important;
}
</style>
<style scoped lang="scss">
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.tabbox {
    /*float: left;*/
    /*max-width: 900px;*/
    .pass {
        color: #e4393c;
    }

    .nopass {
        color: #00b83f;
    }
}

.tab-long {
    height: 22px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 1;
    /* 控制最多显示几行 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
}

.checknum {
    font-size: 13px;
    margin-top: 10px;
    color: #b2b2b2;

    .c-188ACF {
        color: #188acf;
    }
}

.titbtn-box {
    text-align: right;
}

.com-table {
    margin-top: 16px;
}

.cell {
    i {
        padding: 0 5px;
        display: inline-block;
        cursor: pointer;
    }
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}


</style>