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 国产高清在线精品一区免费97 ,国产成人综合网,中文字幕亚洲在线 

      

        

          



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

          


          
	

          

 

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


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

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

           《組件設計器》由 基礎設置（包括名稱 code 類型 狀態(tài) icon 次序號 ）HTML編輯區(qū)域 CSS編輯區(qū)域 JS編輯區(qū)域 和預覽區(qū)域組成。
           首先我們給組件 起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統(tǒng)會為我們建立一個組件模板。
           由于web組態(tài)是由vue開發(fā)的所以開發(fā)組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發(fā)組件。以下我附上vue生命周期圖及組件代碼。
          我們就開始設計一個炫酷的按鈕作為例子 
          HTML代碼如下：
          <a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>
          這里:
          style="imrstyle"：樣式 在web組態(tài)設計器中呈現(xiàn)的樣式
           v-show="controlProp.commProp.visible"：可見性 在web組態(tài)設計器中可實現(xiàn)顯示或閃爍
          {{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組態(tài)設計器的繼承屬性
  },
  data() {
    return {
    }
  },
  computed: {
    imrstyle: function () {  //imrstyle 作為web組態(tài)設計器的控制樣式
      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() {   //初始化狀態(tài) （基礎屬性 特殊屬性 文本屬性）
      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()：方法中實現(xiàn)對組件的 基礎屬性 文本屬性 特殊屬性的初始化配置
          更多屬性配置參考：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組態(tài)中就可以使用我們自定義的組件了！[大笑][大笑][大笑]
          eb組態(tài)，開發(fā)儀表組件echarts。


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

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

          《組件設計器》由 基礎設置（包括名稱 code 類型 狀態(tài) icon 次序號 ）HTML編輯區(qū)域 CSS編輯區(qū)域 JS編輯區(qū)域 和預覽區(qū)域組成。
          首先我們給組件 起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統(tǒng)會為我們建立一個組件模板。
          由于web組態(tài)是由vue開發(fā)的所以開發(fā)組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發(fā)組件。以下我附上組件代碼。
          我們就開始設計一個炫酷的按鈕作為例子
          HTML代碼如下：
          <a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>
          這里:
          style="imrstyle"：樣式 在web組態(tài)設計器中呈現(xiàn)的樣式
          v-show="controlProp.commProp.visible"：可見性 在web組態(tài)設計器中可實現(xiàn)顯示或閃爍
          {{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,若控件在頁面容器中 用來區(qū)分生成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() {
      //準備數(shù)據(jù)
      let category = [{
        name: this.controlProp.spProp.name,
        value: this.controlProp.spProp.value
      }];
      let total = this.controlProp.spProp.max; //數(shù)據(jù)總數(shù)
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });
      // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
      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() {
      //準備數(shù)據(jù)
      let category = [{
        name: this.controlProp.spProp.name,
        value: this.controlProp.spProp.value
      }];
      let total = this.controlProp.spProp.max; //數(shù)據(jù)總數(shù)
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });

      // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
      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: [{
                      //內(nèi)
                      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], //設置右邊數(shù)據(jù)位置
                              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], //設置右邊數(shù)據(jù)位置
                              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, // 邊框?qū)挾?                          }
                      },
                      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: '數(shù)值', type: 'numberinput', group: '特殊', valuename: 'value' },
          { label: '最大值', type: 'numberinput', group: '特殊', valuename: 'max' },
        ]
      }
    }
  }
}
          這里需要注意：
          initProp()：方法中實現(xiàn)對組件的 基礎屬性 文本屬性 特殊屬性的初始化配置
          watch：中監(jiān)聽'controlProp.spProp.value'屬性，這樣就可以使用web組態(tài)中的變量綁定功能，實現(xiàn)實時顯示數(shù)值。
          更多屬性配置參考：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組態(tài)中就可以使用我們自定義的儀表盤組件了！
          要：隨著工業(yè)智能化的快速發(fā)展，基于HTML for Web開發(fā)的工業(yè)組態(tài)圖成為實現(xiàn)智能化生產(chǎn)線監(jiān)控與控制的重要工具。本文將深入探討基于HTML for Web開發(fā)的工業(yè)組態(tài)圖的優(yōu)勢、設計要點以及實際應用案例，展示其在工業(yè)領域中的重要性和價值。


          引言
          工業(yè)組態(tài)圖是一種以圖形化方式呈現(xiàn)工業(yè)生產(chǎn)線狀態(tài)和數(shù)據(jù)的技術。隨著互聯(lián)網(wǎng)和Web技術的快速發(fā)展，基于HTML for Web開發(fā)的工業(yè)組態(tài)圖成為了實現(xiàn)智能化生產(chǎn)線監(jiān)控與控制的主要方式之一。本文將深入探討基于HTML for Web開發(fā)的工業(yè)組態(tài)圖的設計原理、優(yōu)勢以及實際應用案例。


          設計原理
          HTML5和CSS3的優(yōu)勢：HTML5和CSS3提供了豐富的語義化標簽和樣式控制能力，能夠?qū)崿F(xiàn)靈活的頁面布局和交互效果。借助HTML5和CSS3，工業(yè)組態(tài)圖可以實現(xiàn)高度可定制化的界面設計，滿足不同工業(yè)場景的需求。


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


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


          WebSocket的實時通信：WebSocket是一種支持雙向通信的網(wǎng)絡協(xié)議，能夠?qū)崿F(xiàn)實時數(shù)據(jù)的傳輸和更新。工業(yè)組態(tài)圖可以通過WebSocket與工業(yè)設備和傳感器進行實時數(shù)據(jù)交互，確保組態(tài)圖中的數(shù)據(jù)與實際生產(chǎn)線狀態(tài)保持同步。


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


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


          結(jié)論
          基于HTML for Web開發(fā)的工業(yè)組態(tài)圖為工業(yè)智能化提供了強大的工具和平臺。它利用HTML5、CSS3、JavaScript和SVG等技術，實現(xiàn)了數(shù)據(jù)可視化、實時通信和交互操作等功能，為工業(yè)生產(chǎn)線的監(jiān)控與控制帶來了便利和效率。隨著工業(yè)互聯(lián)網(wǎng)的進一步發(fā)展，基于HTML for Web開發(fā)的工業(yè)組態(tài)圖將在工業(yè)領域中發(fā)揮越來越重要的作用，助力企業(yè)實現(xiàn)智能化生產(chǎn)和可持續(xù)發(fā)展。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
性色AV一区二区三区无码|
国产福利视频一区二区|
久久久av波多野一区二区|
日本不卡一区二区视频a|
91大神在线精品视频一区|
日韩aⅴ人妻无码一区二区|
91福利国产在线观看一区二区|
精品黑人一区二区三区|
亚洲午夜精品第一区二区8050|
国产精品一区二区资源|
无码av中文一区二区三区桃花岛|
亚洲国产美国国产综合一区二区
|
无码精品国产一区二区三区免费|
在线观看一区二区精品视频|
一区二区三区国产精品|
亚洲一区二区三区高清|
久久久久人妻一区精品性色av|
精品久久久久一区二区三区|
tom影院亚洲国产一区二区|
亚洲熟女www一区二区三区|
无码一区二区三区在线|
精品国产天堂综合一区在线|
国产自产对白一区|
日韩一区二区免费视频|
成人精品视频一区二区三区不卡|
精品一区二区三区四区|
亚洲一区二区三区免费视频|
2021国产精品一区二区在线|
无码乱码av天堂一区二区|
久久精品一区二区三区AV|
久久精品无码一区二区三区不卡
|
黑人大战亚洲人精品一区|
亚洲一区二区精品视频|
国产伦理一区二区|
在线精品自拍亚洲第一区|
国产一区二区三区乱码|
无码中文人妻在线一区|
国产高清视频一区三区|
色国产在线视频一区|
成人区人妻精品一区二区三区|
色狠狠色噜噜Av天堂一区|