Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 激情视频导航,激情在线视频,欧美在线一区二区三区欧美 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          html5 工業web組態-開發自定義的組件 （炫酷按鈕）
          
        
           
          
	
	
          
		
                        
          為了方便用戶更好使用web組態，最近提供了用戶自定義組件的功能。在實施項目中就可以使用自己的組件了！


           首先我們登陸系統就會看到新增的組件管理選項 如下圖：

           點擊添加組件選擇2D組件我們就可以建立一個自己的組件了

           《組件設計器》由 基礎設置（包括名稱 code 類型 狀態 icon 次序號 ）HTML編輯區域 CSS編輯區域 JS編輯區域 和預覽區域組成。
           首先我們給組件 起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統會為我們建立一個組件模板。
           由于web組態是由vue開發的所以開發組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發組件。以下我附上vue生命周期圖及組件代碼。
          我們就開始設計一個炫酷的按鈕作為例子 
          HTML代碼如下：
          <a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>
          這里:
          style="imrstyle"：樣式 在web組態設計器中呈現的樣式
           v-show="controlProp.commProp.visible"：可見性 在web組態設計器中可實現顯示或閃爍
          {{controlProp.textProp.text}}：文本 對應組件的文本屬性
          更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
          CSS代碼如下：
          .btn123 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      z-index: 1;
    }
    
    .btn123:hover {
      animation: animate 8s linear infinite;
    }
    
    @keyframes animate {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }
    
    .btn123::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -9999;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 40px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .btn123:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite;
    }
    
    
          JS代碼如下：
          export default {
  props: {
    controlProp: Object //作為web組態設計器的繼承屬性
  },
  data() {
    return {
    }
  },
  computed: {
    imrstyle: function () {  //imrstyle 作為web組態設計器的控制樣式
      let maxWidth = this.controlProp.commProp.width
      let maxHeight = this.controlProp.commProp.height
      if (this.controlProp.textProp && this.controlProp.textProp.padding) {
        maxWidth = maxWidth - this.controlProp.textProp.padding * 2
        maxHeight = maxHeight - this.controlProp.textProp.padding * 2
      }
      return {
        // 'max-width': maxWidth+ 'px',
        // 'max-height': maxHeight+ 'px',
        width: '100%',
        height: '100%',
        'box-sizing': 'content-box',
        background: 'transparent',
        'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',
        'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',
        'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',
        'line-height': maxHeight + 'px',
        'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',
        'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',
        'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',
        'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initImports() {
      return {

      }
    },
    initProp() {   //初始化狀態 （基礎屬性 特殊屬性 文本屬性）
      return {
        commProp: { // 基礎屬性  
          width: 80,
          height: 30,
          borderwidth: 0,
          backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',
          borderradius:5
        },
        spProp:{ // 特殊屬性
          },
        textProp: { // 文本屬性
          text: 'Button',
          fontsize: 12,
          fontcolor: 'black',
          horizonalign: 'center',
          verticalalign: 'middle',
          padding: 0,
          margin: 0
        },
        spPropSetting: [ // 特殊屬性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup
        ]
      }
    }
  }
}
          這里需要注意：
          initProp()：方法中實現對組件的 基礎屬性 文本屬性 特殊屬性的初始化配置
          更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
          點擊保存這樣我們設計的組件就顯示出來了！是不是很簡單。

          這樣在我們的web組態中就可以使用我們自定義的組件了！[大笑][大笑][大笑]
          eb組態，開發儀表組件echarts。


          首先我們登陸系統就會看到新增的組件管理選項 如下圖：

          點擊添加組件選擇2D組件我們就可以建立一個自己的組件了

          《組件設計器》由 基礎設置（包括名稱 code 類型 狀態 icon 次序號 ）HTML編輯區域 CSS編輯區域 JS編輯區域 和預覽區域組成。
          首先我們給組件 起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統會為我們建立一個組件模板。
          由于web組態是由vue開發的所以開發組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發組件。以下我附上組件代碼。
          我們就開始設計一個炫酷的按鈕作為例子
          HTML代碼如下：
          <a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>
          這里:
          style="imrstyle"：樣式 在web組態設計器中呈現的樣式
          v-show="controlProp.commProp.visible"：可見性 在web組態設計器中可實現顯示或閃爍
          {{controlProp.textProp.text}}：文本 對應組件的文本屬性
          更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7 
          JS代碼如下：
          export default {
  props: {
    controlProp: Object,
    controlImports: Object,
    previewId: String // 頁面容器的id,若控件在頁面容器中 用來區分生成canvas的元素
  },
  data() {
    return {
      myCharts: null,
    }
  },
  mounted() {
    let echarts = this.controlImports['echarts']

    // 基于準備好的dom，初始化echarts實例
    let box
    if (this.previewId) {
      box = $('.' + this.previewId + ' #' + this.controlProp.commProp.id)[0]
    } else {
      box = $('#' + this.controlProp.commProp.id)[0]
    }
    this.myCharts = echarts.init(box)
    this.initCharts()
  },
  computed: {
    imrstyle: function () {
      return {
        position: 'absolute',
        width: this.controlProp.commProp.width + 'px',
        height: this.controlProp.commProp.height + 'px',
        // left: this.controlProp.commProp.x + 'px',
        // top: this.controlProp.commProp.y + 'px',
        'background-color': this.controlProp.commProp.backgroundColor,
        'border': this.controlProp.commProp.borderwidth + 'px ' + this.controlProp.commProp.borderstyle + ' ' + this.controlProp.commProp.bordercolor,
        'animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',
        '-webkit-animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',
        'transform': 'rotate(' + this.controlProp.commProp.angle + 'deg)',
        'box-shadow': this.controlProp.spProp.isShowShadow ? '10px 0px 10px rgba(0,0,0,0.9)' : 'none'
      }
    }
  },
  watch: {
    'controlProp.commProp.width': {
      handler: function () {
        this.myCharts.resize()
      }
    },
    'controlProp.commProp.height': {
      handler: function () {
        this.myCharts.resize()
      }
    },
    'controlProp.spProp.echartsOption'(val) {
      this.initCharts()
    },
    'controlProp.spProp.value'(val) {
      this.setValue()
    },
    'controlProp.spProp.name'(val) {
      this.setValue()
    },
    'controlProp.spProp.max'(val) {
      this.setValue()
    },
  },
  created() {
    console.log('echarts')
    this.controlProp.spProp.update = this.update
  },
  methods: {
    initCharts() {
      //準備數據
      let category = [{
        name: this.controlProp.spProp.name,
        value: this.controlProp.spProp.value
      }];
      let total = this.controlProp.spProp.max; //數據總數
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });
      // 使用剛指定的配置項和數據顯示圖表。
      let option = eval('(' + this.controlProp.spProp.echartsOption + ')')
      option.xAxis.max = total
      option.yAxis.data = category
      option.series[0].data = category
      option.series[1].data = [total, total, total, total]
      option.series[1].symbolBoundingData = total
      option.series[2].data = datas
      option.series[2].label.normal.formatter = category[0].value + '%'
      option.series[2].symbolBoundingData = total
      option.series[3].data = [total, total, total, total]
      option.series[4].data = [total, total, total, total]
      this.myCharts.setOption(option, true);
    },
    setValue() {
      //準備數據
      let category = [{
        name: this.controlProp.spProp.name,
        value: this.controlProp.spProp.value
      }];
      let total = this.controlProp.spProp.max; //數據總數
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });

      // 使用剛指定的配置項和數據顯示圖表。
      let option = eval('(' + this.controlProp.spProp.echartsOption + ')')
      option.xAxis.max = total
      option.yAxis.data = category
      option.series[0].data = category
      option.series[1].data = [total, total, total, total]
      option.series[1].symbolBoundingData = total
      option.series[2].data = datas
      option.series[2].label.normal.formatter = category[0].value + '%'
      option.series[2].symbolBoundingData = total
      option.series[3].data = [total, total, total, total]
      option.series[4].data = [total, total, total, total]
      //更新echarts
      this.myCharts.setOption(option);
    },
    update() {
      this.initCharts()
    },
    initImports() {
      return {
        'echarts': 'echarts'
      }
    },
    initProp() {
      return {
        commProp: { // 基礎屬性
          width: 600,
          height: 60
        },
        textProp: {
          padding: 0,
          margin: 0
        },
        spProp: { // 特殊屬性
          name: '進度',
          value: 80,
          max:100,
          echartsOption: `{
              xAxis: {
                  max: total,
                  splitLine: {
                      show: false
                  },
                  axisLine: {
                      show: false
                  },
                  axisLabel: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  }
              },
              grid: {
                  left: 50,
                  top: 0, //設置條形圖的邊距
                  right: 50,
                  bottom: 0
              },
              yAxis: [{
                  type: "category",
                  inverse: false,
                  data: category,
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      show: false
                  }
              }],
              series: [{
                      //內
                      type: "bar",
                      barWidth: 28,

                      legendHoverLink: false,
                      silent: true,
                      itemStyle: {
                          color: {
                              type: "linear",
                              x: 0,
                              y: 0,
                              x2: 1,
                              y2: 0,
                              colorStops: [{
                                      offset: 0,
                                      color: "#0097ff" // 0% 處的顏色
                                  },
                                  {
                                      offset: 0.4,
                                      color: "#6dffe1" // 100% 處的顏色
                                  },
                                  {
                                      offset: 0.8,
                                      color: "#9d6fff" // 100% 處的顏色
                                  }
                              ]
                          }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: "left",
                              formatter: "{b}",
                              offset: [0, 2], //設置右邊數據位置
                              textStyle: {
                                  color: "#0097ff",
                                  fontSize: 14,
                                  fontWeight: 600
                              }
                          }
                      },
                      data: category,
                      z: 1,
                      animationEasing: "elasticOut"
                  },
                  {
                      // 分隔
                      type: "pictorialBar",
                      itemStyle: {
                          normal: {
                              color: "#07314a"
                          }
                      },
                      symbolRepeat: "fixed",
                      symbolMargin: 2,
                      symbol: "rect",
                      symbolClip: true,
                      symbolSize: [3, 28],
                      symbolPosition: "start",
                      symbolOffset: [3, -4],
                      symbolBoundingData: total,
                      data: [total, total, total, total],
                      z: 2,
                      animationEasing: "elasticOut",
                  },
                  {
                      //外邊框
                      type: "pictorialBar",
                      symbol: "rect",
                      symbolBoundingData: total,
                      itemStyle: {
                          normal: {
                              color: "none"
                          }
                      },
                      label: {
                          normal: {
                              formatter: "80"+"%",
                              show: true,
                              position: "right",
                              offset: [5, -3], //設置右邊數據位置
                              textStyle: {
                                  color: "#0097ff",
                                  fontSize: 14,
                                  fontWeight: 600
                              }
                          }
                      },
                      data: datas,
                      z: 0,
                      animationEasing: "elasticOut"
                  },
                  {
                      name: "外框",
                      type: "bar",
                      barGap: "-130%", // 設置外框粗細
                      data: [total, total, total, total],
                      barWidth: 45,
                      itemStyle: {
                          normal: {
                              barBorderRadius: [5, 5, 5, 5],
                              color: "#07314a", // 填充色
                              barBorderColor: "#1588D1", // 邊框色
                              barBorderWidth: 3, // 邊框寬度
                          }
                      },
                      z: 0
                  },
                  {
                      type: 'scatter',
                      name: '條形',
                      symbol: 'roundRect',
                      symbolSize: [7,20],
                      symbolOffset: [3, -5],
                      symbolKeepAspect: true,
                      itemStyle: {
                          normal: {
                              color: "#1588D1"
                          }
                      },
                      data: [total, total, total, total],
                  }
              ]
          }`,
          update: null
        },
        spPropSetting: [ // 特殊屬性
          { label: '名稱', type: 'textinput', group: '特殊', valuename: 'name' },
          { label: '數值', type: 'numberinput', group: '特殊', valuename: 'value' },
          { label: '最大值', type: 'numberinput', group: '特殊', valuename: 'max' },
        ]
      }
    }
  }
}
          這里需要注意：
          initProp()：方法中實現對組件的 基礎屬性 文本屬性 特殊屬性的初始化配置
          watch：中監聽'controlProp.spProp.value'屬性，這樣就可以使用web組態中的變量綁定功能，實現實時顯示數值。
          更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
          點擊保存這樣我們設計的組件就顯示出來了！是不是很簡單。


          這樣在我們的web組態中就可以使用我們自定義的儀表盤組件了！
          要：隨著工業智能化的快速發展，基于HTML for Web開發的工業組態圖成為實現智能化生產線監控與控制的重要工具。本文將深入探討基于HTML for Web開發的工業組態圖的優勢、設計要點以及實際應用案例，展示其在工業領域中的重要性和價值。


          引言
          工業組態圖是一種以圖形化方式呈現工業生產線狀態和數據的技術。隨著互聯網和Web技術的快速發展，基于HTML for Web開發的工業組態圖成為了實現智能化生產線監控與控制的主要方式之一。本文將深入探討基于HTML for Web開發的工業組態圖的設計原理、優勢以及實際應用案例。


          設計原理
          HTML5和CSS3的優勢：HTML5和CSS3提供了豐富的語義化標簽和樣式控制能力，能夠實現靈活的頁面布局和交互效果。借助HTML5和CSS3，工業組態圖可以實現高度可定制化的界面設計，滿足不同工業場景的需求。


          JavaScript的動態性：JavaScript是一門強大的腳本語言，通過它可以實現組態圖中的動態更新和交互操作。JavaScript可以處理實時數據的獲取、處理和呈現，為工業組態圖帶來了更高的靈活性和響應性。


          SVG的矢量圖形能力：可縮放矢量圖形（SVG）是一種基于XML的圖形格式，具有良好的可伸縮性和高質量的圖形渲染能力。借助SVG，工業組態圖可以實現精確的圖形繪制和動畫效果，展示豐富的工業設備、傳感器和數據元素。


          WebSocket的實時通信：WebSocket是一種支持雙向通信的網絡協議，能夠實現實時數據的傳輸和更新。工業組態圖可以通過WebSocket與工業設備和傳感器進行實時數據交互，確保組態圖中的數據與實際生產線狀態保持同步。


          設計要點
          數據源與接口：工業組態圖需要與工業設備和傳感器建立連接并獲取實時數據。設計時需要考慮數據源的類型、接口方式以及數據傳輸的穩定性和安全性。
          組件庫與樣式：選擇適合工業場景的組件庫，包括圖標、儀表盤、進度條等。同時，優化樣式布局，確保組態圖界面簡潔明了、易于操作。
          交互操作與反饋：提供友好的交互操作方式，如點擊、拖拽、縮放等，以便用戶與組態圖中的元素進行交互。同時，及時反饋操作結果和狀態變化，增強用戶體驗。
          告警與報警機制：根據實際需求，設定合適的告警和報警規則，及時顯示和處理潛在問題。通過直觀的標識和提示，幫助操作人員快速發現和解決異常情況。
          歷史數據記錄與分析：記錄歷史數據，提供數據回放和分析功能，幫助用戶了解過去的生產線狀態和數據變化，優化生產過程和決策。


          實際應用案例
          生產線監控與優化：基于HTML for Web開發的工業組態圖可以實時監控生產線上的設備狀態、生產進度和質量指標等關鍵數據。通過可視化展示，操作人員可以快速發現異常情況，并及時采取措施進行調整和優化，提高生產效率和質量。
          能耗管理與節能控制：工業組態圖可以集成能耗監測系統，實時顯示能源消耗情況，并與生產數據進行關聯分析。通過分析能耗數據，識別能源浪費和優化機會，幫助企業實現節能減排目標。
          故障診斷與維護：基于HTML for Web開發的工業組態圖可以與設備故障診斷系統集成，實時顯示設備運行狀態和故障報警信息。操作人員可以通過組態圖快速定位故障設備，并提供維修指引和記錄維護日志，提高設備可用性和維護效率。
          遠程監控與操作：借助HTML for Web開發的工業組態圖，操作人員可以通過Web瀏覽器遠程訪問生產線的狀態和數據，實現遠程監控和操作。這使得跨地域的生產管理和協作變得更加便捷，提高了生產線的靈活性和響應能力。


          結論
          基于HTML for Web開發的工業組態圖為工業智能化提供了強大的工具和平臺。它利用HTML5、CSS3、JavaScript和SVG等技術，實現了數據可視化、實時通信和交互操作等功能，為工業生產線的監控與控制帶來了便利和效率。隨著工業互聯網的進一步發展，基于HTML for Web開發的工業組態圖將在工業領域中發揮越來越重要的作用，助力企業實現智能化生產和可持續發展。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
久久精品国产一区二区三区日韩|
国产精品一区二区香蕉|
国产精品香蕉在线一区|
成人区人妻精品一区二区三区|
一区二区三区亚洲视频|
亚洲愉拍一区二区三区|
国产精品区一区二区三在线播放|
免费一区二区三区在线视频|
国产福利一区二区三区|
无码av免费一区二区三区|
亚洲第一区在线观看|
日韩人妻无码免费视频一区二区三区|
无码视频一区二区三区在线观看
|
久久亚洲国产精品一区二区|
国产一区精品视频|
欧美亚洲精品一区二区|
国产成人综合精品一区|
国产一区在线视频观看|
日韩一区二区三区视频|
日本韩国黄色一区二区三区|
国产成人无码aa精品一区|
伊人色综合一区二区三区影院视频|
国产免费一区二区视频|
亚洲一区爱区精品无码|
亚洲日韩激情无码一区|
夜夜添无码试看一区二区三区|
黄桃AV无码免费一区二区三区|
大伊香蕉精品一区视频在线|
熟女少妇丰满一区二区|
国产精品va无码一区二区|
中文字幕一区二区人妻|
国产精品高清一区二区三区|
一区二区三区四区精品视频|
亚洲图片一区二区|
国产短视频精品一区二区三区|
久久久无码精品人妻一区|
日韩精品福利视频一区二区三区|
国产精品无码一区二区在线|
国产综合精品一区二区|
精品国产一区二区22|
亚洲熟女一区二区三区|