dialog.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <el-dialog :visible.sync="dialogVisible" :title="title" class="edit-origin-dialog">
  3. <el-form style="width:400px;" :model="formData" class="dcenter" label-width="120px">
  4. <!-- <el-form-item label="">-->
  5. <!-- <el-input v-model="formData.Name" placeholder="请输入数据源名称"></el-input>-->
  6. <!-- </el-form-item>-->
  7. <el-form-item label="接口名称">
  8. <el-input v-model="formData.Name" placeholder="请输入接口名称"></el-input>
  9. </el-form-item>
  10. <!-- <el-input type="textarea" class="edit-textarea dcenter block" v-model="formData.Description" placeholder="请维护数据源说明"></el-input>-->
  11. <el-form-item label="协议类型">
  12. <el-select v-model="formData.ProtocolType" filterable @change="handleChangeProtocolType"
  13. placeholder="请选择">
  14. <el-option v-for="item in options" :key="item.value" :label="item.label"
  15. :value="item.value"></el-option>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="json格式" v-if="formData.ProtocolType == 'common'">
  19. <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="ProtocolInfo"
  20. placeholder="请输入json格式数据"></el-input>
  21. </el-form-item>
  22. <!-- <el-form-item label="主机IP地址" v-if="formData.ProtocolType != 'common'">-->
  23. <!-- <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port" :ProtocolType="formData.ProtocolType" @change="changeItem" @deletePort="deletePort"></ip-input>-->
  24. <!-- </el-form-item> -->
  25. <el-form-item label="通讯地址/端口" v-if="formData.ProtocolType != 'common'">
  26. <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port"
  27. :ProtocolType="formData.ProtocolType" @change="changeItem" @deletePort="deletePort"></ip-input>
  28. </el-form-item>
  29. <template v-if="formData.ProtocolType =='ems-collect'">
  30. <el-form-item label="TCP/UDP">
  31. <el-select placeholder="请选择" v-model="tcpOptions">
  32. <el-option v-for="item in tcpList" :key="item.value" :label="item.label" :value="item.value"/>
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="线程数">
  36. <el-select placeholder="请选择" v-model="threadOptions">
  37. <el-option v-for="item in threadList" :key="item.value" :label="item.label" :value="item.value"/>
  38. </el-select>
  39. </el-form-item>
  40. <el-form-item label="HBase库名">
  41. <el-input/>
  42. </el-form-item>
  43. <el-form-item label="zookeeper">
  44. <el-input/>
  45. </el-form-item>
  46. </template>
  47. <template
  48. v-if="formData.ProtocolType == 'opc' ||formData.ProtocolType == 'mqtt' || formData.ProtocolType == 'amqp' ">
  49. <el-form-item label="用户名">
  50. <el-input v-model="formData.ProtocolInfo.User"></el-input>
  51. </el-form-item>
  52. <el-form-item label="密码">
  53. <el-input v-model="formData.ProtocolInfo.Password"></el-input>
  54. </el-form-item>
  55. </template>
  56. <el-form-item label="ProgId" v-if="formData.ProtocolType == 'opc'">
  57. <el-input v-model="formData.ProtocolInfo.ProgId"></el-input>
  58. </el-form-item>
  59. <el-form-item label="采集间隔(s)" v-if="formData.ProtocolType != 'ems-collect'">
  60. <el-input-number v-model="formData.CollectInterval" controls-position="right" :min="10"></el-input-number>
  61. </el-form-item>
  62. <el-form-item label="通讯模式" v-if="formData.ProtocolType != 'common' && formData.ProtocolType != 'ems-collect' ">
  63. <el-select filterable>
  64. <el-option></el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="网络类型">
  68. <el-select v-model="formData.wangluo" filterable @change="handleChangeNetType" placeholder="请选择">
  69. <el-option v-for="item in netOptons" :key="item.value" :label="item.label"
  70. :value="item.value"></el-option>
  71. </el-select>
  72. </el-form-item>
  73. <el-form-item label="描述">
  74. <el-input type="textarea" v-model="formData.Description" :autosize="{ minRows: 4, maxRows: 4}"
  75. placeholder="请输入描述内容,200个字以内"></el-input>
  76. </el-form-item>
  77. <el-form-item>
  78. <el-button :disabled="formData.wangluo =='jianjie'?true:false">测试</el-button>
  79. <el-button @click="dialogVisible = false">取消</el-button>
  80. <el-button type="primary">保存</el-button>
  81. </el-form-item>
  82. <el-form-item label="测试日志">
  83. <el-input type="textarea" v-model="formData.ceshi" :autosize="{ minRows: 4, maxRows: 4}"
  84. disabled></el-input>
  85. </el-form-item>
  86. </el-form>
  87. </el-dialog>
  88. </template>
  89. <script>
  90. import ipInput from "@/components/config_point/ip_input"
  91. // import bread from "components/common/bread_crumb"
  92. import tools from "@/utils/tools"
  93. import {createDataSource, queryDataSource, updateDataSource} from "@/fetch/point_http"
  94. import {mapGetters} from "vuex";
  95. export default {
  96. computed: {
  97. ...mapGetters("layout", [
  98. "projectId"
  99. ])
  100. },
  101. data() {
  102. return {
  103. dialogVisible: false,
  104. title: '',
  105. formData: {
  106. ProtocolType: "", //协议类型
  107. ProtocolStandarded: true,
  108. Name: "",
  109. ProtocolInfo: {
  110. Ip: "", //ip
  111. Port: "", //端口号,有些协议类型没有该信息
  112. User: "", //用户名
  113. Password: "", //密码
  114. ProgId: "", //progId
  115. },
  116. Description: "",
  117. CollectInterval: 10
  118. },
  119. ProtocolInfo: "",//自定义协议信息
  120. options: [
  121. {
  122. value: 'modbus-tcp',
  123. label: 'Modbus TCP'
  124. }, {
  125. value: 'bacnet-ip',
  126. label: 'BACNet IP'
  127. }, {
  128. value: 'opc',
  129. label: 'OPC'
  130. }, {
  131. value: 'knx',
  132. label: 'KNX'
  133. }, {
  134. value: 'mqtt',
  135. label: 'MQTT'
  136. }, {
  137. value: 'amqp',
  138. label: 'AMQP'
  139. }, {
  140. value: 'lora',
  141. label: 'LoRa'
  142. }, {
  143. value: 'ems-collect',
  144. label: 'ems-collect'
  145. }, {
  146. value: 'common',
  147. label: '其他'
  148. }],
  149. netOptons: [
  150. {
  151. value: 'zhilian',
  152. label: '直连'
  153. }, {
  154. value: 'jianjie',
  155. label: '间接'
  156. },
  157. ],
  158. tcpList: [
  159. {value: 1, label: 'TCP'},
  160. {value: 0, label: 'UDP'}
  161. ],
  162. threadList: [
  163. {value: 1, label: 1},
  164. {value: 2, label: 2},
  165. {value: 4, label: 4},
  166. {value: 8, label: 8}
  167. ],
  168. threadOptions: '', //临时存储
  169. tcpOptions: '',//临时存储
  170. }
  171. },
  172. components: {
  173. ipInput,
  174. },
  175. methods: {
  176. openDialog(obj) {
  177. this.dialogVisible = true
  178. this.title = obj ? '编辑数据源' : '添加数据源'
  179. this.getDataSouse(obj)
  180. },
  181. changeItem(ip, port) {
  182. this.formData.ProtocolInfo.Ip = ip
  183. this.formData.ProtocolInfo.Port = port
  184. },
  185. handleChangeProtocolType(val) {//切换协议类型
  186. switch (val) {
  187. case 'modbus-tcp':
  188. case 'bacnet-ip':
  189. case 'knx':
  190. case 'lora':
  191. break
  192. case 'opc' :
  193. break
  194. case 'mqtt':
  195. case 'amqp':
  196. break
  197. case 'ems-collect':
  198. break
  199. case 'common':
  200. this.formData.ProtocolStandarded = false
  201. break
  202. }
  203. },
  204. handleChangeNetType(val) { //网络类型
  205. console.log(val)
  206. },
  207. getDataSouse(item) {
  208. this.formData = {}
  209. let param = {
  210. Filters: {
  211. Id: item.Id
  212. },
  213. "PageNumber": 1,
  214. "PageSize": 50,
  215. "Projection": []
  216. }
  217. queryDataSource(param, res => {
  218. let data = res.Content[0]
  219. data.ProtocolType = data.ProtocolType == '其他' ? 'common' : data.ProtocolType
  220. this.formData = data
  221. if (!this.formData.ProtocolInfo) {
  222. //信息点为空时
  223. this.formData.ProtocolInfo = {
  224. "Ip": "", //ip
  225. "Port": "",
  226. "User": "", //用户名
  227. "Password": "", //密码
  228. "ProgId": "", //progId
  229. }
  230. } else {
  231. //有信息点时
  232. this.ProtocolInfo = JSON.stringify(data.ProtocolInfo)
  233. debugger
  234. }
  235. this.handleChangeProtocolType(data.ProtocolType)
  236. })
  237. },
  238. btnClick() {
  239. console.log(this.formData, "form")
  240. let param = tools.deepCopy(this.formData)
  241. tools.delObjKey(param, "CreateTime")
  242. tools.delObjKey(param, "LastUpdate")
  243. if (param.ProtocolType == 'common') {
  244. try {
  245. let ProtocolInfo = JSON.parse(this.ProtocolInfo)
  246. param.ProtocolInfo = ProtocolInfo
  247. } catch (err) {
  248. this.$message.error("属性详情格式错误!")
  249. return false
  250. }
  251. }
  252. if (!!this.id) {
  253. console.log(param.ProtocolInfo.Port)
  254. if (param.ProtocolInfo.hasOwnProperty("Port") && param.ProtocolInfo.Port == "") {
  255. delete param.ProtocolType.Port
  256. }
  257. updateDataSource({
  258. Content: [param],
  259. Projection: []
  260. }, res => {
  261. console.log(res, 'res')
  262. this.$router.push({
  263. path: '/point/pointsetting'
  264. })
  265. this.$message.success("更新成功!")
  266. })
  267. } else {
  268. // param.ProjectId = this.projectId
  269. console.log(param, "param")
  270. createDataSource(param, res => {
  271. console.log(res)
  272. this.$router.push({
  273. path: '/point/pointsetting'
  274. })
  275. this.$message.success("创建成功!")
  276. })
  277. }
  278. },
  279. deletePort() {
  280. this.formData.ProtocolInfo.Port = ""
  281. }
  282. },
  283. watch: {
  284. projectId() {
  285. this.$router.push({
  286. path: '/point/pointsetting'
  287. })
  288. }
  289. }
  290. }
  291. </script>
  292. <style scoped lang="less">
  293. .edit-origin-dialog {
  294. /deep/ .el-select > .el-input {
  295. width: 282px;
  296. }
  297. }
  298. </style>