web-point-standard/src/components/config_point/find_keyword.vue

<template>
    <div class="view-find-word">
        <div class="saga-border">
            <p class="center">请从下面的原始点位描述中选择"{{title == 'type' ? "设备类型" : "设备参数"}}"关键字</p>
            <div class="h10"></div>
            <div>
                <cut-string v-if="!!Description" :string="Description" ref="cutString"></cut-string>
                <p v-else class="center">已处理到最后一条</p>
            </div>
            <div class="h10"></div>
            <div class="center">
                <el-button :disabled="!Description" @click="getCutString">此条无法识别</el-button>
                <el-button :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" width="200" height="200" :renderData="echartsData"></doughnut>
                <div v-else class="center">暂无数据</div>
            </div>
            <div class="right-view saga-border">
                <div class="find-tags" v-for="tag in tagList">
                    <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
    } from "fetch/point_http"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        props: {
            type: {
                type: String,
                default: "type", //arguments or type
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        components: {
            cutString,
            doughnut,
            myDialog
        },
        data() {
            return {
                title: "",
                Description: "",
                echartsData: [],
                sum: 0,
                tagList: [],
                reNameDialog: false,
                name: "",
                newName: "",
                footer: {
                    cancel: "取消",
                    confirm: "确定"
                }
            }
        },
        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 
                console.log(this.type)
                if (this.type == "type") {
                    queryFun = findKeysWordType
                } else {
                    queryFun = findKeysWord
                }
                queryFun({
                    data: {
                        DataSourceId: this.datasourceId,
                        ProjectId: this.projectId
                    },
                    type: this.protocolType
                }, res => {
                    if (!!res.Content) {
                        this.Description = res.Content.Description
                    } else {
                        this.Description = ""
                    }
                    // console.log(res)
                })
                this.getDataForSource()
                this.getbeenFoundList()
            },
            //查询数据源数据
            getDataForSource() {
                queryDataSourceCount({
                    Filters: {
                        Id: this.datasourceId
                    }
                }, res => {
                    let data = res.Content[0]
                    this.echartsData = [{
                            name: "无法识别-" + data.Ignorestandard,
                            value: data.Ignorestandard
                        },
                        {
                            name: "未识别-" + data.Notstandard,
                            value: data.Notstandard
                        },
                        {
                            name: "已识别-" + data.Notrelated,
                            value: data.Notrelated
                        }
                    ]
                    this.sum = data.Sum
                })
            },
            //查询标签列表
            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
                })
            }
        },
        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>