重庆网站制作的网站,一起做网站17广州,城市联盟网站怎么做,做cps的网络文学网站如下图所有#xff0c;有个需求更新#xff0c; 实现拖拽。 1#xff0c;当新增了测点类型的时候每个对应的回路子数据都会新增对应的测点类型。 2#xff0c;当拖动测点类型结束的时候对应的回路里面的内容也会跟着测点类型的排序自动排序 其实很简单#xff0c;只要会了…如下图所有有个需求更新 实现拖拽。 1当新增了测点类型的时候每个对应的回路子数据都会新增对应的测点类型。 2当拖动测点类型结束的时候对应的回路里面的内容也会跟着测点类型的排序自动排序 其实很简单只要会了拖拽然后再定的数据处理里面加上对应的处理逻辑就好了。 我这边直接展示代码了。 templatediv classboxdiv classassembly-wrapdiv classassembly-divdiv classassemblyimgimg v-showNumber(dataInfos.assembly.value) 1 src../../../assets/images/switch/onAssembly.png altimg v-showNumber(dataInfos.assembly.value) ! 1 src../../../assets/images/switch/assembly.png alt/divdiv classflexCloumdiv classtitle :class{title2: dataInfos.title.position 2}{{ dataInfos.title.value }}/divdiv v-showdataInfos.networkVoltageFlag classnetwork-voltage :class{title2: dataInfos.title.position 2}电网电压 span{{ dataInfos?.networkVoltageInfo?.value }} v /span/div/divdiv classswitch-line/divdiv classswitch-wrapdiv v-for(item, i) in dataInfos.loopList :keyi classswitch-rowdiv classloop回路{{ i1 }}/divdiv v-showNumber(item.value) 1 classloopimgwrapimg classloopimg1 src../../../assets/images/switch/on.png alt/divimg v-showNumber(item.value) ! 1 :class{loopimg2: i1 ! dataInfos.loopList.length} src../../../assets/images/switch/off.png altdiv classlabel :class{label2: item.value ! 1} :titleitem.label{{ item.label }}/divdiv classswitchminediv v-for(item2, i) in item.list :keyispan dblclicktriggerDblclick(item, item2){{ item2.value | isNull }}{{ item2.unit }}/span/div/div/div/divdiv classlabellistdiv v-for(item, i) in dataInfos.options :keyiel-tooltip v-ifitem.label.length 4 classitem effectdark :contentitem.label placementtopspan{{ item.label }}/span/el-tooltipspan v-else{{ item.label }}/span/div/div/div/divzmjdialog refzmjdialog top10vh width1000px confirmconfirm cancelcancel el-form refruleForm :modelformData label-width150pxdiv classdf!-- :rules[{ required: true, message: 请输入测点, trigger: [blur, change] }] --el-form-itemlabel组件标题el-input v-modelformData.title.value placeholder请输入组件标题/el-input/el-form-itemel-form-itemlabel标题位置el-radio v-modelformData.title.position :label1左/el-radioel-radio v-modelformData.title.position :label2右/el-radio/el-form-item/divdiv classdf !-- :label${formData.title.value}测点 --el-form-itemlabel测点el-input v-modelformData.assembly.site placeholder请输入标题测点/el-input/el-form-item/divdiv classdf el-form-itemlabel电网电压el-switch v-modelformData.networkVoltageFlag //el-form-item/divdiv classdf v-showformData.networkVoltageFlagel-form-itemlabel电网电压测点el-input v-modelformData.networkVoltageInfo.site placeholder请输入电网电压测点/el-input/el-form-item/divdiv classpump-listdiv classtitlespan回路/spanul!-- li clickpumpcancel取消/li --li clickaddpump添加回路/li/ul/divdiv classdf site-wrap stylemargin-top: 20px;el-form-itemlabel-width100pxlabel测点类型el-input v-modelsitetypes placeholder请输入测点类型/el-input/el-form-itemdiv classaddsitetype clickaddsitetype()添加测点类型/div/divdiv classoptionsListdiv v-for(item, i) in formData.options:keyidraggabletruedragstartdragStart(i, item)dragover.preventdragOver(i)dragenddragEnd(){{ item.label }}i classel-tag__close el-icon-close clickoptionclose(i)/i/div/divdiv classulmineel-collapse v-modelactiveNames changehandleChangeel-collapse-item v-for(item, i) in formData.loopList :keyi :nameitemplate slottitle回路{{ i1 }}div classpumpdelete click.stoppumpdelete(i)删除/div/templatediv classulmine-div!-- div classaddpumpsite clickaddpumpsite(i)添加测点/div --div classdfel-form-itemlabel-width100pxlabel回路名称el-input v-modelitem.label placeholder请输入名称/el-input/el-form-itemel-form-itemlabel-width120pxlabel回路测点el-input v-modelitem.site placeholder请输入测点/el-input/el-form-item/divdiv v-for(item2, j) in item.list:keyjdraggabletruerefoptionsRefdiv classdfel-form-itemlabel-width100pxlabel测点类型:div classtypetext{{ item2.type }}/div/el-form-itemel-form-itemlabel-width50pxlabel测点el-input v-modelitem2.site :style{width: 120px} placeholder请输入测点/el-input/el-form-itemel-form-itemlabel-width80pxlabel单位el-input v-modelitem2.unit :style{width: 120px} placeholder请输入单位/el-input/el-form-itemel-form-item label-width20px label classponits_valueel-radio v-modelitem2.state :label1初始值/el-radioel-radio v-modelitem2.state :label2转换值/el-radio/el-form-itemdiv v-showitem2.state 2div classadd_point conversion clickaddConversion(item2)添加转换值/div/div/divdiv v-showitem2.state 2div v-for(item3,indexs) in item2.children :keyindexsdiv classpoints_items stylemargin-bottom:20pxel-form-item label-width100px label转换标识el-input v-modelitem3.value placeholder转换标识/el-input/el-form-itemel-form-item label-width100px label转换值el-input v-modelitem3.label placeholder转换值/el-input/el-form-itemi classel-icon-remove stylemargin-left:30px;font-size:25px;cursor: pointer; clickdeleteConversion(item2,indexs)/i/div/div/div!-- div classel-icon-remove clickdeletepumpsite(i,j)/div --/div/div/el-collapse-item/el-collapse/div/div/el-form/zmjdialogzmjdialog refchildInfoDialog width850px top30vh :title${label}${labelItem}历史数据 confirmchildInfoDialogzmj-echarts :refhistoricalLineEcharts${chartId} :echarts-idhistoricalLineEcharts${chartId} :height200px/zmj-echarts/zmjdialog/div/templatescriptimport ZmjEcharts from /components/zmjEcharts.vueimport { shearerOptions } from ../../components/echarts/Historicalline.jsexport default {components: {ZmjEcharts},props: {dataInfo:{type: Object,default (){return {}}}},data () {return {sitetypes: null,formData: {},activeNames: [0],dataInfos: {},groupName: , // 测点大类dataName: , // 测名称deviceIdList: 1, // 设备号label: null,labelItem: null,chartId: Id${new Date().getTime()},dragStartIndex: ,dragStartData: ,copyStartData:}},watch: {dataInfo: {immediate: true,deep: true,handler (val) {this.formData JSON.parse(JSON.stringify(val))this.dataInfos JSON.parse(JSON.stringify(val))// 处理后加入字段this.formData.loopList.forEach(v {v.listv.list.forEach(v2 {if(!v2.state){v2.state 1}if(!v2.children){v2.children []}})})console.log(this.formData, this.formData)}}},computed: {},created () {},filters: {isNull (val) {return val null ? -- : val}},mounted () {window.$eventBus.$on(wsMessage, message {let dataType message.dataType// message.data.forEach(val {})for(let i in this.dataInfos){if(i loopList){this.dataInfos[i].forEach(v {if(this.sifn(v.site) dataType){this.messagefn(message.data, v)}v.list v.list.forEach(v2 {if(this.sifn(v2.site) dataType){this.messagefn(message.data, v2)}})})}if(i assembly){if(this.sifn(this.dataInfos[i].site) dataType){this.messagefn(message.data, this.dataInfos[i])}}if(i networkVoltageInfo){if(this.sifn(this.dataInfos[i].site) dataType){this.messagefn(message.data, this.dataInfos[i])}}}})},beforeDestroy () {window.$eventBus.$off(wsMessage)},methods: {// 拖拽逻辑在这里。dragStart (index, item) {console.log(index, item);this.dragStartIndex indexthis.dragStartData item// 拿到测点类型 的第 index 个 数据对应的listthis.formData.loopList.forEach(item {this.copyStartData item.list[index]})},// 只要拖拽元素进入到放置区域就触发这里实际是鼠标指针进入放置区域才触发dragOver (index) {this.dragOverIndex index},// 结束拖拽逻辑的时候进行对应的子向排序。dragEnd () {const copyTodolist [...this.formData.options]// 删除老的节点copyTodolist.splice(this.dragStartIndex, 1)// 在列表中目标位置增加新的节点copyTodolist.splice(this.dragOverIndex, 0, this.dragStartData)// ... 上边是测点类型的排序结束后对应的回路跟着类型调整位置this.formData.options [...copyTodolist] // 获取测点类型调整后的顺序// console.log(drag end, this.formData.loopList, 所有的对应类型loopList);this.formData.loopList.map((item, v) {const copyList [...item.list] // 所有的对应类型loopList的对应测点list// 删除对应的老的节点copyList.splice(this.dragStartIndex, 1)// 在列表中目标位置增加新的节点copyList.splice(this.dragOverIndex, 0, this.copyStartData)return item.list [...copyList]})this.dragOverIndex },// 双击事件 展示折线图triggerDblclick (info, info2) {console.log(info, info2, 双击事件);this.$refs.childInfoDialog.open()this.label info.labelthis.labelItem info2.typeif(info2.site){let arr info2?.site?.split(/) || []console.log(arr);this.groupName ${arr[0]} // 测点大类this.deviceIdList ${arr[1]} // 设备号this.dataName ${arr[2]} // 测名称}let params {workFaceCode: window.$getStorage(workFaceInfo).workFaceCode,startTime: window.$dayjs().format(YYYY-MM-DD 00:00:00),endTime: window.$dayjs().add(1, day).format(YYYY-MM-DD 00:00:00),aggregateType : none, // 聚合类型 传none获取原始历史值groupName: this.groupName, // 测点大类dataName: this.dataName, // 测名称deviceIdList: this.deviceIdList // 设备号}let thisDataList nullwindow.$axiosGet(deviceHistory, params).then((res) {if(!res.length){this.$refs[historicalLineEcharts${this.chartId}] this.$refs[historicalLineEcharts${this.chartId}].upDataEcharts(shearerOptions(res || [], params, this.dataInfos))return}thisDataList res.map(item {return item.data})this.$nextTick(() {this.$refs[historicalLineEcharts${this.chartId}] this.$refs[historicalLineEcharts${this.chartId}].getEchartsLiving();this.$refs[historicalLineEcharts${this.chartId}] this.$refs[historicalLineEcharts${this.chartId}].upDataEcharts(shearerOptions(thisDataList || [], params, this.dataInfos))})}).catch(() {this.$refs[historicalLineEcharts${this.chartId}] this.$refs[historicalLineEcharts${this.chartId}].upDataEcharts(shearerOptions(thisDataList || [], params, this.dataInfos))})},childInfoDialog () {this.$refs.childInfoDialog.close()},messagefn (e, v){e.forEach(val {if(val.deviceId this.sifn(v.site, 2)){v.value val.valueif(v.state 2){v.childrenv.children.forEach(v2 {if(String(val.value) String(v2.value)){v.value v2.label}})}}})},sifn (v, i 1) {if(v){let arr v.split(/)if(arr.length 3){if(i 1){return ${arr[0]}_${arr[2]}}else if(i 2) {return Number(arr[1])}}else{return v}}else{return v}},deleteConversion (items, indexs){items.children.splice(indexs, 1)},// 添加转换值addConversion (item){item.children?.push({label:,value:})},handleChange (val) {console.log(val)},// 回路删除pumpdelete (i) {if(this.formData.loopList.length 2){this.$message.warning(回路最少有2个)return}this.formData.loopList.splice(i, 1)},// 添加回路addpump () {this.formData.loopList.push({site: null,value: null,label: null,list: this.formData.options.map(v {return {site: null,value: null,type: v.label,unit: null,state: 1,children: []}})})},// 回路类型添加addsitetype () {if(this.sitetypes || this.sitetypes null|| this.sitetypes undefined){return this.$message.warning(请添加测点类型)}this.formData.options.push({label: this.sitetypes})this.formData.loopList.forEach(v {v.list.push({site: null,value: null,type: this.sitetypes,unit: null,state: 1,children: []})})this.sitetypes },// 回路类型添加删除optionclose (i) {this.formData.options.splice(i, 1)this.formData.loopList.forEach(v {v.list.splice(i, 1)})},// 乳化泵测点添加// addpumpsite (i) {// this.formData.loopList[i].list.push({// site: null,// value: null,// type: null,// unit: null// })// },// 乳化泵测点删除// deletepumpsite (i, j) {// this.formData.loopList[i].list.splice(j, 1)// },edit () {// this.formData window.$utils.cloneDeep(this.formData)this.$refs.zmjdialog.open()},confirm (){this.dragStartIndex ;this.$refs.ruleForm.validate((valid) {if (valid) {this.$refs.zmjdialog.close()// let arr [ this.formData.assembly.site, this.formData.networkVoltageInfo.site]let arr [ this.formData.assembly.site]this.formData.loopList.forEach(v {arr.push(v.site)v.list v.list.forEach(v2 {arr.push(v2.site)})})let newArr []newArr.push(this.formData.networkVoltageInfo.site, ...arr)this.$emit(update:dataTypeList, newArr)this.$emit(update:dataInfo, this.formData)this.$message.success(保存成功)} else {return false}})},cancel () {this.dragStartIndex ;console.log(取消)}}}/scriptstyle langscss scoped.box{padding-top: 20px;font-size: 14px;}.assembly-wrap{border: 1px solid #707070;border-radius: 2px;width: 100%;height: 100%;}.assembly-div{width: calc(100% - 80px);margin-left: 80px;position: relative;.assemblyimg{width: 95%;position: relative;img{position: absolute;top: -20px;left: 50%;margin-left: -32px;}}.network-voltage{position: absolute;top: 60px;font-size: 12px;width: 60%;left: -20%;text-align: right;padding: 0 60px 0 0;span{margin-left: 10px;color: #31E8B4;}}.flexCloum{display: flex;flex-direction: column;}.title{position: absolute;top: 30px;font-size: 20px;color: #FFBB00;width: 60%;left: -10%;text-align: right;padding:0 60px 0 0;}.title2{text-align: left;width: 50%;padding:0 0 0 30px;left: auto;right: 0;}.switch-line{width: calc(95% - 11px);height: 2px;position: absolute;top: 102px;left: 5px;background: #31E8B4;}.switch-wrap{position: absolute;top: 104px;width: 95%;display: flex;justify-content: space-between;.switch-row{position: relative;.loopimgwrap{width: 21px;}.loopimg2{position: relative;left: -8px;}}.switch-row:last-child{.loopimg1{position: relative;left: 4px;}}.switch-row:first-child{.loopimg1{position: relative;left: -7px;}}.loop{position: absolute;width: 70px;text-align: left;top: -25px;}.label{position: absolute;width:70px;bottom: -40px;left: -31px;}.label2{left: -22px;// height: 40px;// line-height: 16px;// overflow: hidden;// text-overflow: ellipsis;// white-space: nowrap;}.switchmine{position: absolute;top: 160px;left: -25px;div{width: 70px;line-height: 20px;height: 20px;margin-bottom: 10px;color: #31E8B4;}}}.labellist{position: absolute;left: -80px;top: 264px;line-height: 20px;div{width: 60px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;margin-bottom: 10px;}}}.pump-list{position: relative;color: #fff;border:1px solid #999;border-radius: 5px;.title{display: flex;justify-content: space-between;align-items: center;padding: 0 16px;width: 100%;height: 36px;background: rgba(238, 238, 238, 0.08);border-bottom: 1px solid #314150;box-sizing: border-box;ul{display: flex;li{margin-left: 8px;width: 64px;line-height: 24px;font-size: 14px;text-align: center;border-radius: 3px;user-select: none;cursor: pointer;}// li:nth-child(1){// border: 1px solid rgba(255, 255, 255, 0.24);// }li:nth-child(1){border: 1px solid #0088FF;}}}.ulmine{padding:0 20px 10px 20px;height: 400px;overflow: hidden;overflow-y: scroll;.ulmine-div{position: relative;padding: 15px 0;}.el-icon-remove{cursor: pointer;height: 36px;line-height: 36px;font-size: 20px;padding-left: 15px;color: #999;}.pumpdelete{width: 64px;line-height: 24px;font-size: 14px;text-align: center;border-radius: 3px;cursor: pointer;border: 1px solid #B23B3B;margin-left: 620px;}.addpumpsite{position: absolute;line-height: 24px;font-size: 14px;text-align: center;border-radius: 3px;cursor: pointer;right: 10px;top: 20px;width: 84px;right: 30px;border: 1px solid #0088FF;}::v-deep{.el-collapse{border: none;}.el-collapse-item__header{padding-left: 20px;background: transparent;color: #fff;border-bottom:none;background: rgba(238, 238, 238, 0.08);}.el-collapse-item__wrap{background: transparent;border-bottom: 1px dashed #7a7d80;}.el-collapse-item__content{color: #fff;padding-bottom: 0;}}}.ulmine::-webkit-scrollbar {display: none;}}.addsitetype{position: absolute;line-height: 24px;font-size: 14px;text-align: center;border-radius: 3px;cursor: pointer;top: 62px;width: 104px;left: 370px;border: 1px solid #0088FF;}.optionsList{display: flex;flex-wrap:wrap;padding-bottom: 5px;margin-left: 80px;div{margin-left: 20px;background-color: #f4f4f5;border-color: #e9e9eb;color: #909399;padding:7px 12px;border-radius: 4px;position: relative;margin-bottom: 10px;.el-tag__close{color: #909399;background-color: #c0c4cc;border-radius: 50%;font-size: 15px;text-align: center;margin-left: 5px;cursor: pointer;}}}.site-wrap{::v-deep{.el-form-item{margin-bottom: 10px;}}}.typetext{width: 100px;overflow: hidden;}.add_point{display: inline-block;margin-left: 30px;width: 80px;height: 32px;border-radius: 4px;font-size: 14px;color: #fff;line-height: 30px;border: 1px solid #409EFF;cursor: pointer;text-align: center;user-select: none;}.conversion{margin-left: 20px;margin-top: 5px;font-size: 13px;height: 28px;line-height: 26px;}.points_items{display: flex;align-items: center;::v-deep{.el-form-item{margin-bottom: 0;}}}/style保存后的图例对比
