#增加了繁体中文支持，更新了二代灭蚊灯标签和远程控制功能

src/api/counter.js

@@ -77,3 +77,13 @@ export function fetchWeatherLog(query) {
     params: query
   })
 }
+
+// device v2 remote control
+
+export function fetchRemoteControl(deviceID, data) {
+  return request({
+    url: `/api/mosq/devicemqtt/remotecontrol/${deviceID}/`,
+    method: 'post',
+    data
+  })
+}

src/components/LangSelect/index.vue

@@ -4,7 +4,8 @@
       <svg-icon class-name='international-icon' icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+      <el-dropdown-item command="zh" :disabled="language==='zh'">简体</el-dropdown-item>
+      <el-dropdown-item command="hk" :disabled="language==='hk'">繁体</el-dropdown-item>
       <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>

src/lang/en.js

@@ -179,6 +179,7 @@ export default {
     trendChart: 'Trend chart',
     region: 'Region',
     deviceName: 'Device Name',
+    noName: 'No Name',
     humitureChart: 'Humiture chart',
     temperature: 'Temperature',
     humidity: 'Humidity',

src/lang/hk.js

@@ -0,0 +1,238 @@
+export default {
+  route: {
+    dashboard: '儀表板',
+    introduction: '簡述',
+    documentation: '文檔',
+    counter: '滅蚊燈數據',
+    statistic: '數據統計',
+    device: '狀態監控',
+    detail: '設備詳情',
+    logs: '日誌列表',
+    map: '區域地圖',
+    weather: '氣象台',
+    deviceSetting: '設備設置',
+    systemSetting: '系統設置',
+    guide: '引導頁',
+    permission: '權限測試頁',
+    pagePermission: '頁面權限',
+    directivePermission: '指令權限',
+    icons: '圖標',
+    components: '組件',
+    componentIndex: '介紹',
+    tinymce: '富文本編輯器',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON編輯器',
+    dndList: '列表拖拽',
+    splitPane: 'Splitpane',
+    avatarUpload: '頭像上傳',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: '小組件',
+    backToTop: '返回頂部',
+    dragDialog: '拖拽 Dialog',
+    dragKanban: '可拖拽看板',
+    charts: '圖表',
+    keyboardChart: '鍵盤圖表',
+    lineChart: '折線圖',
+    mixChart: '混合圖表',
+    example: '綜合實例',
+    nested: '路由嵌套',
+    bar: 'Bar',
+    barProfile: 'Profile',
+    barPosts: 'Posts',
+    Table: 'Table',
+    dynamicTable: '動態Table',
+    dragTable: '拖拽Table',
+    inlineEditTable: 'Table內編輯',
+    complexTable: '綜合Table',
+    treeTable: '樹形表格',
+    customTreeTable: '自定義樹表',
+    tab: 'Tab',
+    form: '表單',
+    createArticle: '創建文章',
+    editArticle: '編輯文章',
+    articleList: '文章列表',
+    errorPages: '錯誤頁面',
+    page401: '401',
+    page404: '404',
+    errorLog: '錯誤日誌',
+    excel: 'Excel',
+    exportExcel: '導出 Excel',
+    selectExcel: '導出選定',
+    uploadExcel: '上傳 Excel',
+    zip: 'Zip',
+    exportZip: '導出 Zip',
+    theme: '換膚',
+    clipboardDemo: 'Clipboard',
+    i18n: '國際化'
+  },
+  navbar: {
+    logOut: '退出登錄',
+    dashboard: '首頁',
+    github: '項目地址',
+    screenfull: '全屏',
+    theme: '換膚'
+  },
+  login: {
+    title: '系統登錄',
+    logIn: '登錄',
+    username: '賬號',
+    password: '密碼',
+    any: '隨便填',
+    thirdparty: '第三方登錄',
+    thirdpartyTips: '本地不能模擬，請結合自己業務進行模擬！！！'
+  },
+  documentation: {
+    documentation: '文檔',
+    github: 'Github 地址'
+  },
+  permission: {
+    roles: '你的權限',
+    switchRoles: '切換權限'
+  },
+  guide: {
+    description: '引導頁對於一些第一次進入項目的人很有用，你可以簡單介紹下項目的功能。本 Demo 是基於',
+    button: '打開引導'
+  },
+  components: {
+    documentation: '文檔',
+    tinymceTips: '富文本是管理後臺一個核心的功能，但同時又是一個有很多坑的地方。在選擇富文本的過程中我也走了不少的彎路，市面上常見的富文本都基本用過了，最終權衡了一下選擇了Tinymce。更詳細的富文本比較和介紹見',
+    dropzoneTips: '由於我司業務有特殊需求，而且要傳七牛 所以沒用第三方，選擇了自己封裝。代碼非常的簡單，具體代碼你可以在這裡看到 @/components/Dropzone',
+    stickyTips: '當頁面滾動到預設的位置會吸附在頂部',
+    backToTopTips1: '頁面滾動到指定位置會在右下角出現返回頂部按鈕',
+    backToTopTips2: '可自定義按鈕的樣式、show/hide、出現的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
+    imageUploadTips: '由於我在使用時它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的話，優先還是使用官方版本。'
+  },
+  table: {
+    dynamicTips1: '固定表頭, 按照表頭順序排序',
+    dynamicTips2: '不固定表頭, 按照點擊順序排序',
+    dragTips1: '默認順序',
+    dragTips2: '拖拽後順序',
+    title: '標題',
+    importance: '重要性',
+    type: '類型',
+    remark: '點評',
+    search: '搜索',
+    add: '添加',
+    export: '導出',
+    reviewer: '審核人',
+    id: '序號',
+    date: '時間',
+    author: '作者',
+    readings: '閱讀數',
+    status: '狀態',
+    actions: '操作',
+    edit: '編輯',
+    publish: '發布',
+    draft: '草稿',
+    delete: '刪除',
+    cancel: '取 消',
+    confirm: '確 定'
+  },
+  errorLog: {
+    tips: '請點擊右上角bug小圖標',
+    description: '現在的管理後臺基本都是spa的形式了，它增強了用戶體驗，但同時也會增加頁面出問題的可能性，可能一個小小的疏忽就導致整個頁面的死鎖。好在 Vue 官網提供了一個方法來捕獲處理異常，你可以在其中進行錯誤處理或者異常上報。',
+    documentation: '文檔介紹'
+  },
+  excel: {
+    export: '導出',
+    selectedExport: '導出已選擇項',
+    placeholder: '請輸入文件名(默認excel-list)'
+  },
+  zip: {
+    export: '導出',
+    placeholder: '請輸入文件名(默認file)'
+  },
+  theme: {
+    change: '換膚',
+    documentation: '換膚文檔',
+    tips: 'Tips: 它區別於 navbar 上的 theme-pick, 是兩種不同的換膚方法，各自有不同的應用場景，具體請參考文檔。'
+  },
+  tagsView: {
+    close: '關閉',
+    closeOthers: '關閉其它',
+    closeAll: '關閉所有'
+  },
+  counter: {
+    online: '在線',
+    offline: '離線',
+    all: '全部',
+    inputDeviceID: '設備 ID',
+    inputStatus: '狀態',
+    search: '搜索',
+    reset: '重置',
+    detail: '詳情',
+    map: '地圖',
+    sn: '序號',
+    device: '設備ID',
+    status: '狀態',
+    count: '計數',
+    signal: '信號',
+    energy: '電量',
+    time: '時間',
+    date: '日期',
+    coordinate: '坐標',
+    action: '操作',
+    logDesc: '滅蚊器日誌列表',
+    screen: '顯示屏',
+    trendChart: '趨勢圖',
+    region: '地區',
+    deviceName: '設備名稱',
+    noName: '未命名',
+    humitureChart: '溫濕度',
+    temperature: '溫度',
+    humidity: '濕度',
+    to: '至',
+    logSeachContent: '設備名稱/ID',
+    start_date: '開始日期',
+    end_date: '結束日期'
+  },
+  weather: {
+    online: '在線',
+    offline: '離線',
+    all: '全部',
+    inputDeviceID: '設備 ID',
+    inputStatus: '狀態',
+    search: '搜索',
+    reset: '重置',
+    detail: '詳情',
+    map: '地圖',
+    sn: '序號',
+    device: '設備ID',
+    status: '狀態',
+    count: '計數',
+    signal: '信號',
+    energy: '電量',
+    time: '時間',
+    date: '日期',
+    coordinate: '坐標',
+    action: '操作',
+    logDesc: '滅蚊器日誌列表',
+    screen: '顯示屏',
+    trendChart: '趨勢圖',
+    region: '地區',
+    deviceName: '設備名稱',
+    humitureChart: '溫濕度',
+    temperature: '溫度',
+    humidity: '濕度',
+    to: '至',
+    logSeachContent: '設備名稱/ID',
+    start_date: '開始日期',
+    end_date: '結束日期',
+    envTemp: '環溫(℃)',
+    dewPointTemp: '露點溫度(℃)',
+    envHumi: '環濕(%RH)',
+    airPressure: '氣壓(hPa)',
+    totalRadiation1Ins: '總輻射1瞬時(W/㎡)',
+    windDirection: '風向(°)',
+    windSpeedIns: '瞬時風速(m/s)',
+    windSpeed2mins: '2分鐘風速(m/s)',
+    windSpeed10mins: '10分鐘風速(m/s)',
+    rainfallIntervalCum: '雨量間隔累計(mm)',
+    totalRadiation1IntervalCum: '總輻射1間隔累計(MJ/㎡)',
+    rainfallDailyCum: '雨量日累計(mm)',
+    totalRadiation1DailyCum: '總輻射1日累計(MJ/㎡)',
+    power: '電量(%)'
+  }
+}

src/lang/index.js

@@ -3,8 +3,10 @@ import VueI18n from 'vue-i18n'
 import Cookies from 'js-cookie'
 import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
+import elementHkLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang
 import enLocale from './en'
 import zhLocale from './zh'
+import hkLocale from './hk'
 
 Vue.use(VueI18n)
 
@@ -16,6 +18,10 @@ const messages = {
   zh: {
     ...zhLocale,
     ...elementZhLocale
+  },
+  hk: {
+    ...hkLocale,
+    ...elementHkLocale
   }
 }
 

src/lang/zh.js

@@ -179,6 +179,7 @@ export default {
     trendChart: '趋势图',
     region: '地区',
     deviceName: '设备名称',
+    noName: '未命名',
     humitureChart: '温湿度',
     temperature: '温度',
     humidity: '湿度',

src/views/counter/components/screen.vue

@@ -4,7 +4,7 @@
       <div class="device-base">
         <p class="item"><span class="keyword">{{$t('counter.device')}}: </span><el-tag>{{deviceID}}</el-tag></p>
         <p class="item" v-if="lastItem.device_name"><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{lastItem.device_name}}</el-tag></p>
-        <p class="item" v-else><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>未命名</el-tag></p>
+        <p class="item" v-else><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{$t('counter.noName')}}</el-tag></p>
       </div>
     </div>
     <div class="screen-wrapper">
@@ -44,12 +44,48 @@
           <li>Power:  <span>{{lastItem.energy}}</span></li>
         </ul>
       </div>
+      <div class="device-status" 
+      v-if="lastItem.chip_type === 'AIR-V2'"
+      >
+        <ul>
+          <li>
+            <p>LED开关
+              <el-switch
+                v-model="led"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                @change="handleLedSwitchChange"
+              >
+              </el-switch>
+            </p>
+          </li>
+          <li>
+            <el-button type="primary" icon="el-icon-delete" size="mini" @click="handleCountClear">计数清零</el-button>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 确认弹窗 -->
+      <el-dialog
+        title="确认"
+        :visible.sync="dialogVisible"
+        width="30%"
+        center
+      >
+        <span>确定要清零计数器吗？</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleCountClear">确定</el-button>
+        </span>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
 import moment from 'moment'
+import { fetchRemoteControl } from '@/api/counter'
+
 export default {
   name: 'screen',
   props: {
@@ -58,10 +94,37 @@ export default {
   },
   data() {
     return {
+      led: true,
+      dialogVisible: false
     }
   },
   methods: {
-    //
+    async handleLedSwitchChange() {
+      const action = this.led ? 'ledOn' : 'ledOff'
+      await this.sendRemoteControlCommand(action)
+    },
+    async handleCountClear() {
+      if (!this.dialogVisible) {
+        this.showConfirmationDialog()
+      } else {
+        await this.sendRemoteControlCommand('countClear')
+      }
+    },
+    async sendRemoteControlCommand(command) {
+      try {
+        const deviceID = this.deviceID
+        console.log(deviceID, command)
+        const response = await fetchRemoteControl(deviceID, { command: command })
+        console.log('Command sent successfully:', response.data)
+      } catch (error) {
+        console.error('Error sending command:', error)
+      } finally {
+        this.dialogVisible = false
+      }
+    },
+    showConfirmationDialog() {
+      this.dialogVisible = true
+    }
   },
   computed: {
     lastTime() {

src/views/counter/device.vue

@@ -43,7 +43,10 @@
       <el-table-column
         prop="device_id"
         :label="$t('counter.device')"
-        min-width="150">
+        min-width="120">
+        <template slot-scope="scope">
+          <span>{{ scope.row.device_id }} <el-tag v-if="scope.row.chip_type === 'AIR-V2'" type="success" size="mini">V2</el-tag></span>
+        </template>
       </el-table-column>
       <el-table-column
         prop="device_name"