123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312 |
- <template>
- <el-dialog :visible.sync="dialogVisible" :title="title" class="edit-origin-dialog">
- <el-form style="width:400px;" :model="formData" class="dcenter" label-width="120px">
- <!-- <el-form-item label="">-->
- <!-- <el-input v-model="formData.Name" placeholder="请输入数据源名称"></el-input>-->
- <!-- </el-form-item>-->
- <el-form-item label="接口名称">
- <el-input v-model="formData.Name" placeholder="请输入接口名称"></el-input>
- </el-form-item>
- <!-- <el-input type="textarea" class="edit-textarea dcenter block" v-model="formData.Description" placeholder="请维护数据源说明"></el-input>-->
- <el-form-item label="协议类型">
- <el-select v-model="formData.ProtocolType" filterable @change="handleChangeProtocolType"
- placeholder="请选择">
- <el-option v-for="item in options" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="json格式" v-if="formData.ProtocolType == 'common'">
- <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="ProtocolInfo"
- placeholder="请输入json格式数据"></el-input>
- </el-form-item>
- <!-- <el-form-item label="主机IP地址" v-if="formData.ProtocolType != 'common'">-->
- <!-- <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port" :ProtocolType="formData.ProtocolType" @change="changeItem" @deletePort="deletePort"></ip-input>-->
- <!-- </el-form-item> -->
- <el-form-item label="通讯地址/端口" v-if="formData.ProtocolType != 'common'">
- <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port"
- :ProtocolType="formData.ProtocolType" @change="changeItem" @deletePort="deletePort"></ip-input>
- </el-form-item>
- <template v-if="formData.ProtocolType =='ems-collect'">
- <el-form-item label="TCP/UDP">
- <el-select placeholder="请选择" v-model="tcpOptions">
- <el-option v-for="item in tcpList" :key="item.value" :label="item.label" :value="item.value"/>
- </el-select>
- </el-form-item>
- <el-form-item label="线程数">
- <el-select placeholder="请选择" v-model="threadOptions">
- <el-option v-for="item in threadList" :key="item.value" :label="item.label" :value="item.value"/>
- </el-select>
- </el-form-item>
- <el-form-item label="HBase库名">
- <el-input/>
- </el-form-item>
- <el-form-item label="zookeeper">
- <el-input/>
- </el-form-item>
- </template>
- <template
- v-if="formData.ProtocolType == 'opc' ||formData.ProtocolType == 'mqtt' || formData.ProtocolType == 'amqp' ">
- <el-form-item label="用户名">
- <el-input v-model="formData.ProtocolInfo.User"></el-input>
- </el-form-item>
- <el-form-item label="密码">
- <el-input v-model="formData.ProtocolInfo.Password"></el-input>
- </el-form-item>
- </template>
- <el-form-item label="ProgId" v-if="formData.ProtocolType == 'opc'">
- <el-input v-model="formData.ProtocolInfo.ProgId"></el-input>
- </el-form-item>
- <el-form-item label="采集间隔(s)" v-if="formData.ProtocolType != 'ems-collect'">
- <el-input-number v-model="formData.CollectInterval" controls-position="right" :min="10"></el-input-number>
- </el-form-item>
- <el-form-item label="通讯模式" v-if="formData.ProtocolType != 'common' && formData.ProtocolType != 'ems-collect' ">
- <el-select filterable>
- <el-option></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="网络类型">
- <el-select v-model="formData.wangluo" filterable @change="handleChangeNetType" placeholder="请选择">
- <el-option v-for="item in netOptons" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="描述">
- <el-input type="textarea" v-model="formData.Description" :autosize="{ minRows: 4, maxRows: 4}"
- placeholder="请输入描述内容,200个字以内"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button :disabled="formData.wangluo =='jianjie'?true:false">测试</el-button>
- <el-button @click="dialogVisible = false">取消</el-button>
- <el-button type="primary">保存</el-button>
- </el-form-item>
- <el-form-item label="测试日志">
- <el-input type="textarea" v-model="formData.ceshi" :autosize="{ minRows: 4, maxRows: 4}"
- disabled></el-input>
- </el-form-item>
- </el-form>
- </el-dialog>
- </template>
- <script>
- import ipInput from "@/components/config_point/ip_input"
- // import bread from "components/common/bread_crumb"
- import tools from "@/utils/tools"
- import {createDataSource, queryDataSource, updateDataSource} from "@/fetch/point_http"
- import {mapGetters} from "vuex";
- export default {
- computed: {
- ...mapGetters("layout", [
- "projectId"
- ])
- },
- data() {
- return {
- dialogVisible: false,
- title: '',
- formData: {
- ProtocolType: "", //协议类型
- ProtocolStandarded: true,
- Name: "",
- ProtocolInfo: {
- Ip: "", //ip
- Port: "", //端口号,有些协议类型没有该信息
- User: "", //用户名
- Password: "", //密码
- ProgId: "", //progId
- },
- Description: "",
- CollectInterval: 10
- },
- ProtocolInfo: "",//自定义协议信息
- options: [
- {
- value: 'modbus-tcp',
- label: 'Modbus TCP'
- }, {
- value: 'bacnet-ip',
- label: 'BACNet IP'
- }, {
- value: 'opc',
- label: 'OPC'
- }, {
- value: 'knx',
- label: 'KNX'
- }, {
- value: 'mqtt',
- label: 'MQTT'
- }, {
- value: 'amqp',
- label: 'AMQP'
- }, {
- value: 'lora',
- label: 'LoRa'
- }, {
- value: 'ems-collect',
- label: 'ems-collect'
- }, {
- value: 'common',
- label: '其他'
- }],
- netOptons: [
- {
- value: 'zhilian',
- label: '直连'
- }, {
- value: 'jianjie',
- label: '间接'
- },
- ],
- tcpList: [
- {value: 1, label: 'TCP'},
- {value: 0, label: 'UDP'}
- ],
- threadList: [
- {value: 1, label: 1},
- {value: 2, label: 2},
- {value: 4, label: 4},
- {value: 8, label: 8}
- ],
- threadOptions: '', //临时存储
- tcpOptions: '',//临时存储
- }
- },
- components: {
- ipInput,
- },
- methods: {
- openDialog(obj) {
- this.dialogVisible = true
- this.title = obj ? '编辑数据源' : '添加数据源'
- this.getDataSouse(obj)
- },
- changeItem(ip, port) {
- this.formData.ProtocolInfo.Ip = ip
- this.formData.ProtocolInfo.Port = port
- },
- handleChangeProtocolType(val) {//切换协议类型
- switch (val) {
- case 'modbus-tcp':
- case 'bacnet-ip':
- case 'knx':
- case 'lora':
- break
- case 'opc' :
- break
- case 'mqtt':
- case 'amqp':
- break
- case 'ems-collect':
- break
- case 'common':
- this.formData.ProtocolStandarded = false
- break
- }
- },
- handleChangeNetType(val) { //网络类型
- console.log(val)
- },
- getDataSouse(item) {
- this.formData = {}
- let param = {
- Filters: {
- Id: item.Id
- },
- "PageNumber": 1,
- "PageSize": 50,
- "Projection": []
- }
- queryDataSource(param, res => {
- let data = res.Content[0]
- data.ProtocolType = data.ProtocolType == '其他' ? 'common' : data.ProtocolType
- this.formData = data
- if (!this.formData.ProtocolInfo) {
- //信息点为空时
- this.formData.ProtocolInfo = {
- "Ip": "", //ip
- "Port": "",
- "User": "", //用户名
- "Password": "", //密码
- "ProgId": "", //progId
- }
- } else {
- //有信息点时
- this.ProtocolInfo = JSON.stringify(data.ProtocolInfo)
- debugger
- }
- this.handleChangeProtocolType(data.ProtocolType)
- })
- },
- btnClick() {
- console.log(this.formData, "form")
- let param = tools.deepCopy(this.formData)
- tools.delObjKey(param, "CreateTime")
- tools.delObjKey(param, "LastUpdate")
- if (param.ProtocolType == 'common') {
- try {
- let ProtocolInfo = JSON.parse(this.ProtocolInfo)
- param.ProtocolInfo = ProtocolInfo
- } catch (err) {
- this.$message.error("属性详情格式错误!")
- return false
- }
- }
- if (!!this.id) {
- console.log(param.ProtocolInfo.Port)
- if (param.ProtocolInfo.hasOwnProperty("Port") && param.ProtocolInfo.Port == "") {
- delete param.ProtocolType.Port
- }
- updateDataSource({
- Content: [param],
- Projection: []
- }, res => {
- console.log(res, 'res')
- this.$router.push({
- path: '/point/pointsetting'
- })
- this.$message.success("更新成功!")
- })
- } else {
- // param.ProjectId = this.projectId
- console.log(param, "param")
- createDataSource(param, res => {
- console.log(res)
- this.$router.push({
- path: '/point/pointsetting'
- })
- this.$message.success("创建成功!")
- })
- }
- },
- deletePort() {
- this.formData.ProtocolInfo.Port = ""
- }
- },
- watch: {
- projectId() {
- this.$router.push({
- path: '/point/pointsetting'
- })
- }
- }
- }
- </script>
- <style scoped lang="less">
- .edit-origin-dialog {
- /deep/ .el-select > .el-input {
- width: 282px;
- }
- }
- </style>
|