ibms/src/components/config_point/find_keyword.vue

<template>
    <div class="view-find-word">
        <div class="saga-border" style="position:relative;">
            <p class="center">请从下面的原始点位描述中选择"{{type == 'type' ? "对象类型" : "对象参数"}}"关键字</p>
            <div style="position:absolute;top: 0;right: 20px;">
                <el-switch
                    @change="changeType(type)"
                    v-model="isSwitch">
                </el-switch>
                AI辅助
            </div>
            <div class="h10"></div>
            <div>
                <cut-string v-if="!!Description" :string="Description" :closedStr="closedStr" ref="cutString"></cut-string>
                <p v-else class="center">已处理到最后一条</p>
            </div>
            <div class="h10"></div>
            <div class="center">
                <el-button type="primary" :disabled="!Description" @click="noWatch">此条无法识别</el-button>
                <el-button type="primary" :disabled="!Description" @click="getCutString">继续发现关键字</el-button>
            </div>
            <div class="h10"></div>
        </div>
        <div class="h10"></div>
        <div class="find-data">
            <div class="left-view saga-border">
                <doughnut v-if="!!sum" :sum="sum" type="left" :name="dataName" width="200" height="200" :renderData="echartsData"></doughnut>
                <div v-else class="center">
                    <i class="icon-wushuju iconfont"></i>
                    暂无数据
                </div>
            </div>
            <div class="right-view saga-border">
                <div class="find-tags" v-for="(tag,index) in tagList" :key="index">
                    <el-tag :key="type == 'type' ? tag.EquipmentType : tag.EquipmentParameter" @click="changeName(type == 'type' ? tag.EquipmentType : tag.EquipmentParameter)" @close="closeTag(type == 'type' ? tag.EquipmentType : tag.EquipmentParameter)" closable>
                        {{type == 'type' ? (tag.EquipmentType + "(" + tag.PointCount + ")") : (tag.EquipmentParameter + "(" + tag.PointCount + ")")}}
                    </el-tag>
                </div>
            </div>
        </div>
        <my-dialog :dialogVisible="reNameDialog" @confirm="reNameConfirm" :footer="footer" @cancel="cancel" title="重命名" :isAppendBody="true">
            <h3 class="center">{{name}}</h3>
            <el-input v-model="newName" placeholder="请输入新名称"></el-input>
        </my-dialog>
    </div>
</template>
<script>
    import cutString from "@/components/config_point/cut_string"
    import doughnut from "@/components/echarts/doughnut"
    import myDialog from "@/components/el_pack/dialog"
    import {
        findKeysWord,
        findKeysWordType,
        queryDataSourceCount,
        queryEqTypeList,
        queryEqParamList,
        renameType,
        renameParam,
        setParamTer,
        setTypeTer,
        delParamTer,
        delTypeTer,
        updatePoint
    } from "@/fetch/point_http"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        props: {
            type: {
                type: String,
                default: "type", //arguments or type
            }
        },
        computed: {
            ...mapGetters("project", [
                "datasourceId",
                "protocolType"
            ]),
            projectId () {
                return this.$store.getters['layout/projectId']
            }
        },
        components: {
            cutString,
            doughnut,
            myDialog
        },
        data() {
            return {
                title: "",
                Description: "",
                echartsData: [],
                sum: 0,
                tagList: [],
                reNameDialog: false,
                name: "",
                newName: "",
                footer: {
                    cancel: "取消",
                    confirm: "确定"
                },
                aiStr: "",//ai推荐
                Id: "",
                dataName: "",
                isSwitch: true,//是否开启开关
                closedStr: "",//已被选择的数据
            }
        },
        created() {},
        mounted() {},
        methods: {
            //继续发现关键字
            getCutString() {
                // console.log(this.$refs.cutString.getData())
                if (!this.$refs.cutString.getData()) {
                    this.$message.error("请确定当前有选择关键字")
                    return false
                }
                let setNameFun;
                if (this.type == "type") {
                    setNameFun = setTypeTer
                } else {
                    setNameFun = setParamTer
                }
                setNameFun({
                    data: {
                        DataSourceId: this.datasourceId,
                        Key: this.$refs.cutString.getData()
                    },
                    type: this.protocolType
                }, res => {
                    this.$message.success("添加成功")
                    this.changeType()
                })
            },
            //取消
            cancel() {
                this.reNameDialog = false
            },
            //关闭标签(删除)
            closeTag(tag) {
                // console.log(tag)
                let delFun;
                if (this.type == "type") {
                    delFun = delTypeTer
                } else {
                    delFun = delParamTer
                }
                let param = {
                    data: {
                        DataSourceId: this.datasourceId,
                        Key: this.type == "type" ? tag : tag
                    },
                    type: this.protocolType
                }
                this.$confirm("你确定删除该标签？").then(_ => {
                    this.delAjax(param, delFun)
                }).catch(_ => {
                })
            },
            delAjax(param, fun) {
                fun(param, res => {
                    this.$message.success("删除标签成功")
                    this.changeType()
                })
            },
            //点击事件，重命名
            changeName(tag) {
                this.reNameDialog = true
                this.newName = ""
                if (this.type == "type") {
                    this.name = tag
                } else {
                    this.name = tag
                }
            },
            //确定修改名字
            reNameConfirm() {
                let reNameFun;
                if (this.type == "type") {
                    reNameFun = renameType
                } else {
                    reNameFun = renameParam
                }
                reNameFun({
                    data: {
                        DataSourceId: this.datasourceId,
                        KeyNew: this.newName,
                        KeyOld: this.name
                    },
                    type: this.protocolType
                }, res => {
                    this.$message.success("修改成功")
                    this.changeType()
                    this.cancel()
                })
            },
            //获取文字
            changeType(type) {
                let queryFun
                this.type = !!type ? type : this.type 
                if (this.type == "type") {
                    queryFun = findKeysWordType
                } else {
                    queryFun = findKeysWord
                }
                queryFun({
                    data: {
                        DataSourceId: this.datasourceId,
                        ProjectId: this.projectId,
                        Ai: this.isSwitch
                    },
                    type: this.protocolType
                }, res => {
                    if (!!res.Content.length) {
                        this.Description = res.Content[0].Description
                        //默认已经选择的关键字
                        if(this.type == "type"){
                            this.closedStr = res.Content[0].KeyEquipmentParameter || ''
                            this.aiStr = res.Content[0].KeyEquipmentType || ''
                        }else{
                            this.closedStr = res.Content[0].KeyEquipmentType || ''
                            this.aiStr = res.Content[0].KeyEquipmentParameter || ''
                        }
                        this.Id = res.Content[0].PointId
                        //清空已选择的数据
                        this.$nextTick(_ => {
                            this.$refs.cutString.clear(this.aiStr)
                        })
                    } else {
                        this.Description = ""
                    }
                })
                this.getDataForSource()
                this.getbeenFoundList()
            },
            //查询数据源数据
            getDataForSource() {
                queryDataSourceCount({
                    Filters: {
                        Id: this.datasourceId
                    }
                }, res => {
                    let data = res.Content[0]
                    this.dataName = res.Content[0].Name
                    this.echartsData = [
                        {
                            name: "已识别:" + (this.type != 'type' ? data.Equipmentparameterstandard : data.Equipmenttypestandard),
                            value: (this.type != 'type' ? data.Equipmentparameterstandard : data.Equipmenttypestandard)
                        },
                        {
                            name: "未识别:" + (this.type != 'type' ? data.Equipmentparameternotstandard : data.Equipmenttypenotstandard),
                            value: (this.type != 'type' ? data.Equipmentparameternotstandard : data.Equipmenttypenotstandard)
                        },
                        {
                            name: "无法识别:" + (this.type != 'type' ? data.Equipmentparameterignorestandard : data.Equipmenttypeignorestandard),
                            value: (this.type != 'type' ? data.Equipmentparameterignorestandard : data.Equipmenttypeignorestandard)
                        },
                    ]
                    this.sum = data.Used
                })
            },
            //查询标签列表
            getbeenFoundList() {
                let getListFetch;
                if (this.type == "type") {
                    getListFetch = queryEqTypeList
                } else {
                    getListFetch = queryEqParamList
                }
                // console.log(getListFetch)
                getListFetch({
                    data: {
                        ProjectId: this.projectId,
                        DataSourceId: this.datasourceId
                    },
                    type: this.protocolType
                }, res => {
                    // console.log(res, 'getListFetch')
                    this.tagList = res.Content
                })
            },
            noWatch(){
                console.log()
                let param = {
                    data: {
                        Content: [
                            {
                                Id: this.Id,
                                [this.type == 'type' ? 'IgnoreKeyEquipmentType' : 'IgnoreKeyEquipmentParameter']: true
                            }
                        ]
                    },
                    type: this.protocolType
                }
                updatePoint(param,res => {
                    console.log(res)
                    this.$message.success("设置无法识别成功")
                    this.changeType()
                })
            }
        },
        watch:{
        }
    }
</script>
<style lang="scss" scoped>
    .view-find-word {
        .find-data {
            height: 300px;
            .left-view {
                width: 300px;
                height: 300px;
                display: inline-block;
            }
            .right-view {
                width: calc(100% - 305px);
                padding: 5px;
                box-sizing: border-box;
                height: 300px;
                overflow-y: auto;
                float: right;
            }
        }
        .h10 {
            height: 10px;
        }
        .find-tags {
            display: inline-block;
            margin: 8px;
        }
    }
</style>