lc_smart_admin/web/src/view/devicesAdmin/screens/screens.vue

<template>
  <div>
    <div class="gva-search-box">
      <el-form
          ref="searchForm"
          :inline="true"
          :model="searchInfo"
      >
        <el-form-item label="名称或编码">
          <el-input
              v-model="searchInfo.keyword"
              placeholder="搜索名称或SN"
          />
        </el-form-item>
        <el-form-item label="所属分路">
          <el-select v-model="searchInfo.shunt" placeholder="所属分路">
            <el-option label="主路" value=1></el-option>
            <el-option label="支路" value=2></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              icon="search"
              @click="onSubmit"
          >查询</el-button>
          <el-button
              icon="refresh"
              @click="onReset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button
            type="primary"
            icon="plus"
            @click="add()"
        >新增</el-button>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :table-layout="'fixed'"
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="ID" label="#" :width="80"/>
        <el-table-column prop="shunt" label="所属分路" :width="100">
          <template #default="scope">
            {{ scope.row.shunt===1?"主路":scope.row.shunt===2?"支路":"未知" }}
          </template>
        </el-table-column>
        <el-table-column prop="screensName" label="名称" />
        <el-table-column prop="screensCode" label="编码">
          <template #default="scope">
            <el-tag effect="light">{{ scope.row.screensCode }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sn" label="SN" />
        <el-table-column prop="screensBrand" label="品牌" />
        <el-table-column prop="screensModel" label="型号"/>
        <el-table-column prop="GateWay.gatewayName" label="所属网关"/>
        <el-table-column prop="status" label="在线状态">
          <template #default="scope">
            <div class="onlinebox" :style="{'background': scope.row.status===0 ? 'red':'green' }"></div>
            <span :style="{ color: scope.row.status === 0 ? 'red' : 'green' }">{{ scope.row.status === 0 ? '离线' : '在线' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="left"
            fixed="right"
            label="操作"
            :width="300"
        >
          <template #default="scope">
            <el-button
                type="primary"
                link
                icon="view"
                @click="view(scope.row)"
            >查看</el-button>
            <el-button
                type="primary"
                link
                icon="edit"
                @click="editScreens(scope.row)"
            >编辑</el-button>
            <el-button
                type="primary"
                link
                @click="switchOpenCloseScreens(scope.row,1)"
            >亮屏</el-button>
            <el-button
                type="primary"
                link
                @click="switchOpenCloseScreens(scope.row,0)"
            >熄屏</el-button>
            <el-button
                type="primary"
                link
                @click="openInCodeDialog(scope.row)"
            >发送文字</el-button>
            <el-button
                type="primary"
                link
                @click="openVoiceBroadDialog(scope.row)"
            >远程喊话</el-button>
            <el-button
                type="primary"
                link
                @click="openSetBrightDialog(scope.row)"
            >设置</el-button>
            <el-button
                type="primary"
                link
                icon="delete"
                @click="deleteScreens(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>

      <el-dialog v-model="addScreensDialog" title="LED显示屏" width="900">
        <el-form
            ref="screensForm"
            :rules="rules"
            :model="screensInfo"
            label-width="100px"
            style="padding: 15px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="屏幕名称：" :inline="false" prop="screensName">
                <el-input v-model="screensInfo.screensName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码：" :inline="false">
                <el-input disabled v-model="screensInfo.screensCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="SN：" :inline="false" prop="sn">
                <el-input v-model="screensInfo.sn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组网方式：" :inline="false" prop="network">
                <el-select v-model="screensInfo.network" placeholder="请选择组网方式">
                  <el-option label="网关" :value=0></el-option>
                  <el-option label="4G模块" :value=1></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="ip地址：" :inline="false" prop="ipAddress">
                <el-input v-model="screensInfo.ipAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌：" :inline="false" prop="screensBrand">
                <el-input v-model="screensInfo.screensBrand"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="型号：" :inline="false" prop="screensModel">
                <el-input v-model="screensInfo.screensModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属网关：" :inline="false" prop="gatewayId">
                <el-select v-model="screensInfo.gatewayId" placeholder="所属网关">
                  <el-option v-for=" (item) in screensParams.gatewayList" :label="item.gatewayName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="分辨率：" :inline="false">
                <el-select v-model="screensInfo.resolutionId" placeholder="请选择分辨率">
                  <el-option v-for=" (item) in screensParams.resolution" :label="item.price" :value="item.ID"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="屏幕尺寸：" :inline="false">
                <el-select v-model="screensInfo.screensSizeId" placeholder="请选择屏幕尺寸">
                  <el-option v-for=" (item) in screensParams.screensSize" :label="item.size" :value="item.ID"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属分路：" :inline="false">
                <el-select v-model="screensInfo.shunt" placeholder="请选择所属分路">
                  <el-option label="主路" :value=1></el-option>
                  <el-option label="支路" :value=2></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分路描述：" :inline="false">
                <el-input v-model="screensInfo.shuntDescribe"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="安装时间：" :inline="false">
                <el-date-picker
                    v-model="screensInfo.installTime"
                    type="date"
                    placeholder="Pick a day"
                    size="default"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时控开关Sn：" :inline="false">
                <el-input v-model="screensInfo.switchSn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeAddScreensDialog">取消</el-button>
            <el-button type="primary" @click="enterAddScreensDialog">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="viewScreensDialog" title="详情" style="padding: 35px">
        <el-form
            :model="screensInfo"
            label-width="110px"
            style="padding: 20px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="屏幕名称：" :inline="false">
                {{screensInfo.screensName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码：" :inline="false">
                {{screensInfo.screensCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="品牌：" :inline="false">
                {{screensInfo.screensBrand }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="型号：" :inline="false">
                {{screensInfo.screensModel }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="SN：" :inline="false">
                {{screensInfo.sn }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组网方式：" :inline="false">
                {{screensInfo.network === 0 ? '网关':'4G模块' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="ip地址：" :inline="false">
                {{screensInfo.ipAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属网关：" :inline="false">
                {{screensInfo.GateWay.gatewayName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="分辨率：" :inline="false">
                {{screensInfo.Resolution.price }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="屏幕尺寸：" :inline="false">
                {{screensInfo.ScreensSize.size }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属分路：" :inline="false">
                <el-tag effect="dark">{{screensInfo.shunt===1?"主路":screensInfo.shunt===2?"支路":"未知"}}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分路描述：" :inline="false">
                {{screensInfo.shuntDescribe }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="在线状态：" :inline="false">
                <div class="onlinebox" :style="{'background': screensInfo.status===0 ? 'red':'green' }"></div>
                <span :style="{ color: screensInfo.status === 0 ? 'red' : 'green' }">{{ screensInfo.status === 0 ? '离线' : '在线' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装时间：" :inline="false">
                {{screensInfo.installTime }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最近上线时间：" :inline="false">
                {{ screensInfo.lastOnlineTime}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计在线时长：" :inline="false">
                <el-tag type="success">{{ onlineSum  }}</el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="上次离线时间：" :inline="false">
                {{ screensInfo.lastOfflineTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计离线时长：" :inline="false">
                <el-tag type="warning">{{ offlineSum  }}</el-tag>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

<!--      发送内码文字时打开的弹窗-->
      <el-dialog v-model="inCodeDialog" title="发送文字" width="900">
<!--          <div class="dialog-footer" style="position: relative;left: 780px;height: 35px">-->
<!--            <el-button type="danger" circle @click="addData()">添加</el-button>-->
<!--            <el-button type="danger" circle @click="minData()">移除</el-button>-->
<!--          </div>-->
        <el-scrollbar max-height="400px">
          <el-form v-for="(item,i) in dataForms" ref="dataForm" :rules="rules" :model="dataForms" label-width="120px" style="padding: 15px">
<!--            <el-divider>文字数据{{i+1}}</el-divider>-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="文字内容：" :inline="false" prop="text">
                  <template #label>
                    <span>文字内容</span>
                    <span style="color: red">(必填)</span>：
                  </template>
                  <el-input v-model="item.text" type="textarea" :maxlength="4" show-word-limit/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="文字颜色：" :inline="false">
                  <el-select v-model="item.color" placeholder="请选择文字颜色">
                    <el-option label="红色" value="红色" />
                    <el-option label="黄色" value="黄色" />
                    <el-option label="绿色" value="绿色" />
                  </el-select>
                </el-form-item>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <el-form-item label="文字尺寸：" :inline="false">-->
<!--                  <el-select v-model="item.size" placeholder="请选择文字尺寸">-->
<!--                    <el-option label="16号" value="16号" />-->
<!--                    <el-option label="24号" value="24号" />-->
<!--                    <el-option label="32号" value="32号" />-->
<!--                    <el-option label="48号" value="48号" />-->
<!--                    <el-option label="64号" value="64号" />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
          </el-form>
        </el-scrollbar>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeInCodeDialog">取消</el-button>
            <el-button type="primary" @click="enterInCodeDialog">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

<!--远程喊话弹窗-->
      <el-dialog v-model="voiceBroadDialog" title="远程喊话" width="900">
        <el-scrollbar max-height="400px">
          <el-form ref="dataForm" :rules="rules" :model="voiceBroadForm" label-width="120px" style="padding: 15px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="播报内容：" :inline="false" prop="broadContent">
                  <el-input v-model="voiceBroadForm.broadContent" type="textarea"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeVoiceBroadDialog">取消</el-button>
            <el-button type="primary" @click="enterVoiceBroadDialog">
              发送
            </el-button>
          </div>
        </template>
      </el-dialog>

<!--设置亮度和时控弹窗-->
      <el-dialog v-model="setBrightDialog" title="设置" width="500">
          <el-form ref="dataForm" :model="setBrightForm" style="padding: 15px">
            <el-divider content-position="left">亮度</el-divider>
            <el-row>
              <el-col :span="21">
                <el-form-item label="白天：" :inline="false" prop="broadContent">
                  <el-slider v-model="setBrightForm.dayBright" :step="10" :format-tooltip="(e) => e + '%'" /><div style="position: absolute;left: 360px">{{ setBrightForm.dayBright }}%</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="21">
                <el-form-item label="晚上：" :inline="false" prop="broadContent">
                  <el-slider v-model="setBrightForm.nightBright" :step="10" :format-tooltip="(e) => e + '%'"/><div style="position: absolute;left: 360px">{{ setBrightForm.nightBright }}%</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">声音</el-divider>
            <el-row :gutter="25">
              <el-col :span="11">
                <el-form-item label="开：" :inline="false">
                  <el-select v-model="setBrightForm.audioOn" placeholder="请设置时间">
                    <template #prefix>
                      <span style="padding-left: 3px;padding-top: 4px;"><el-icon><Clock /></el-icon></span>
                    </template>
                    <el-option v-for=" x in timeArr" :label="x" :value="x" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="关：" :inline="false">
                  <el-select v-model="setBrightForm.audioOff" placeholder="请设置时间">
                    <template #prefix>
                    <span style="padding-left: 3px;padding-top: 4px;"><el-icon><Clock /></el-icon></span>
                    </template>
                    <el-option v-for=" x in timeArr" :label="x" :value="x" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">屏幕<span style="color: red">(默认00:00-00:00表示常亮)</span> </el-divider>
            <el-row :gutter="25">
              <el-col :span="11">
                <el-form-item label="亮：" :inline="false">
                  <el-select v-model="setBrightForm.ledOn" placeholder="请设置时间">
                    <template #prefix>
                      <span style="padding-left: 3px;padding-top: 4px;"><el-icon><Clock /></el-icon></span>
                    </template>
                    <el-option v-for=" x in timeArr" :label="x" :value="x" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="熄：" :inline="false">
                  <el-select v-model="setBrightForm.ledOff" placeholder="请设置时间">
                    <template #prefix>
                      <span style="padding-left: 3px;padding-top: 4px;"><el-icon><Clock /></el-icon></span>
                    </template>
                    <el-option v-for=" x in timeArr" :label="x" :value="x" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeSetBrightDialog">取消</el-button>
            <el-button type="primary" @click="enterSetBrightDialog">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import {
  deleteBaseScreens,
  getScreensList,
  queryscreensParms,
  setScreensInfo,
  addScreens,
  switchScreens,
  sendInternalCode, voiceBroad, setBrightAudioLed
} from "@/api/screens";
import { ref,reactive} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import dayjs from "dayjs";
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
const screensInfo = ref({})
const nowSn = ref("")
const timeArr = ref([
  '00:00', '00:10', '00:20', '00:30', '00:40', '00:50',
  '01:00', '01:10', '01:20', '01:30', '01:40', '01:50',
  '02:00', '02:10', '02:20', '02:30', '02:40', '02:50',
  '03:00', '03:10', '03:20', '03:30', '03:40', '03:50',
  '04:00', '04:10', '04:20', '04:30', '04:40', '04:50',
  '05:00', '05:10', '05:20', '05:30', '05:40', '05:50',
  '06:00', '06:10', '06:20', '06:30', '06:40', '06:50',
  '07:00', '07:10', '07:20', '07:30', '07:40', '07:50',
  '08:00', '08:10', '08:20', '08:30', '08:40', '08:50',
  '09:00', '09:10', '09:20', '09:30', '09:40', '09:50',
  '10:00', '10:10', '10:20', '10:30', '10:40', '10:50',
  '11:00', '11:10', '11:20', '11:30', '11:40', '11:50',
  '12:00', '12:10', '12:20', '12:30', '12:40', '12:50',
  '13:00', '13:10', '13:20', '13:30', '13:40', '13:50',
  '14:00', '14:10', '14:20', '14:30', '14:40', '14:50',
  '15:00', '15:10', '15:20', '15:30', '15:40', '15:50',
  '16:00', '16:10', '16:20', '16:30', '16:40', '16:50',
  '17:00', '17:10', '17:20', '17:30', '17:40', '17:50',
  '18:00', '18:10', '18:20', '18:30', '18:40', '18:50',
  '19:00', '19:10', '19:20', '19:30', '19:40', '19:50',
  '20:00', '20:10', '20:20', '20:30', '20:40', '20:50',
  '21:00', '21:10', '21:20', '21:30', '21:40', '21:50',
  '22:00', '22:10', '22:20', '22:30', '22:40', '22:50',
  '23:00', '23:10', '23:20', '23:30', '23:40', '23:50'])
const dataForms = ref([
  {
    text:'',
    color:'红色',
    size:'24号'
  }
])
const voiceBroadForm = ref({})
const setBrightForm = ref({})
const screensParams = reactive({
  resolution:[],
  screensSize:[],
  gatewayList:[]
})
const screensForm = ref(null)
const dataForm = ref(null)
const dialogFlag = ref('add')
const isFlag = ref('')
const addScreensDialog = ref(false)
const viewScreensDialog = ref(false)
const inCodeDialog = ref(false)
const voiceBroadDialog = ref(false)
const setBrightDialog = ref(false)
const onlineSum = ref('0')
const offlineSum = ref('0')
const oldSn = ref('')

const rules = ref({
  screensName: [
    { required: true, message: '请输入名称',trigger: 'blur'},
    { min: 5, message: '最低5位字符', trigger: 'blur' }
  ],
  screensBrand: [
    { required: true, message: '请填写品牌',trigger: 'blur'},
  ],
  screensModel: [
    { required: true, message: '请填写型号',trigger: 'blur'},
  ],
  sn: [
    { required: true,  message:'请输入设备SN',trigger: 'blur'},
  ],
  network: [
    { required: true,  message:'请选择组网方式',trigger: 'blur'},
  ],
  gatewayId: [
    { required: true,  message:'请选择网关',trigger: 'blur'},
  ],
  broadContent: [
    { required: true,  message:'请填写播报内容',trigger: 'blur'},
  ]
})

const TimeConversion = (t) => {
  const timestampInSec = Math.floor(t / 1000);  // 转换为秒
  // 计算总天数
  const totalDays = Math.floor(timestampInSec / (24 * 60 * 60));  // 每天 86400 秒
  // 计算年数
  const years = Math.floor(totalDays / 365);
  // 计算剩余的天数
  const remainingDays = totalDays % 365;

  // 计算剩余的小时数
  const hours = Math.floor((timestampInSec % (24 * 60 * 60)) / 3600);  // 每小时 3600 秒
  // 根据年数、天数和小时数返回相应的格式
  if (years > 0) {
    return `${years}年${remainingDays}天${hours}小时`;
  } else if (remainingDays > 0) {
    return `${remainingDays}天${hours}小时`;
  } else {
    return `${hours}小时`;
  }
}
const getNowDay = ()=>{
  let timestamp = Date.now(); // 获取当前时间戳，单位是毫秒
  screensInfo.value.installTime = new Date(timestamp)
}

const getRandomCode = (prex)=>{
  let str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  let arr1 = str1.split("");
  screensInfo.value.screensCode = prex
  for(let i = 0; i < 10;i++){
    let n = Math.round(Math.random()*(arr1.length -1));
    screensInfo.value.screensCode += arr1[n]
  }
}

const tableRowClassName = ({row, rowIndex})=>{
  if ((rowIndex+1) % 2  === 0) {
    return 'success-row';
  }
  return '';
}
const getTableData = async() => {
  const table = await getScreensList({page: page.value, pageSize: pageSize.value,...searchInfo.value})
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}
const getScreensParms = async() => {
  const table = await queryscreensParms()
  if (table.code === 0) {
    screensParams.screensSize = table.data.screensSize
    screensParams.resolution = table.data.resolution
    screensParams.gatewayList = table.data.pubGateway
  }
}

getScreensParms()
getTableData()

const view = (row)=>{
  viewScreensDialog.value = true
  screensInfo.value = JSON.parse(JSON.stringify(row))
  screensInfo.value.installTime = new Date(screensInfo.value.installTime).toLocaleDateString()

  if (screensInfo.value.status ===1 ){
    onlineSum.value = TimeConversion(new Date()-new Date(screensInfo.value.lastOnlineTime))
    offlineSum.value = TimeConversion(new Date(screensInfo.value.lastOnlineTime)-new Date(screensInfo.value.lastOfflineTime))
  }else {
    onlineSum.value = TimeConversion(new Date(screensInfo.value.lastOfflineTime)-new Date(screensInfo.value.lastOnlineTime))
    offlineSum.value = TimeConversion(new Date()-new Date(screensInfo.value.lastOfflineTime))
  }

  if (screensInfo.value.lastOnlineTime === '0001-01-01T00:00:00Z' || screensInfo.value.lastOnlineTime === null ){
    screensInfo.value.lastOnlineTime = '——'
    onlineSum.value = "无"
  }else {
    screensInfo.value.lastOnlineTime = dayjs(screensInfo.value.lastOnlineTime).format('YYYY-MM-DD HH:mm:ss')
  }
  if (screensInfo.value.lastOfflineTime === '0001-01-01T00:00:00Z' || screensInfo.value.lastOfflineTime === null ){
    screensInfo.value.lastOfflineTime = '——'
    offlineSum.value = "无"
  }else {
    screensInfo.value.lastOfflineTime = dayjs(screensInfo.value.lastOfflineTime).format('YYYY-MM-DD HH:mm:ss')
  }
}



const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const add = () => {
  screensInfo.value={GateWay:{},Resolution:{},ScreensSize:{},resolutionId:1,screensSizeId:1,shunt:1}
  dialogFlag.value = 'add'
  addScreensDialog.value = true
  getNowDay()
  getRandomCode("XSP-")
}

const closeAddScreensDialog = () => {
  screensForm.value.resetFields()
  addScreensDialog.value = false
  isFlag.value=''
}

// 弹窗相关
const onSubmit = () => {
  page.value = 1
  pageSize.value = 10
  getTableData()
}
const onReset = () => {
  searchInfo.value = {}
}

const enterAddScreensDialog = async() => {
  screensForm.value.validate(async valid => {
    if (valid) {
      const req = {
        ...screensInfo.value
      }
      if (dialogFlag.value === 'add') {
        const res = await addScreens(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '创建成功' })
          await getTableData()
          closeAddScreensDialog()
        }
      }
      if (dialogFlag.value === 'edit') {
        req.oldSn = oldSn.value
        const res = await setScreensInfo(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '编辑成功' })
          await getTableData()
          closeAddScreensDialog()
        }
      }
    }
  })
}

const editScreens = (row) => {
  dialogFlag.value = 'edit'
  oldSn.value = row.sn
  screensInfo.value = JSON.parse(JSON.stringify(row))
  addScreensDialog.value = true
}
const deleteScreens = (obj) => {
  ElMessageBox.confirm('您确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async() => {
        const res = await deleteBaseScreens({ Sn:obj.sn })
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功!',
          })
          getTableData()
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}

const switchOpenCloseScreens = async (obj,opt) => {
  if (obj.status ===0 ){
    ElMessage({
      type: 'info',
      message: '操作失败，设备离线',
    })
    return
  }
  var res = await switchScreens({sn:obj.sn,network:obj.network,flag:opt});
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '操作成功!',
    })
  }
}

const openInCodeDialog = async (obj)=>{
  if (obj.status ===0 ){
    ElMessage({
      type: 'info',
      message: '操作失败，设备离线',
    })
    return
  }
  inCodeDialog.value = true
  nowSn.value = obj.sn
}
const openVoiceBroadDialog = async (obj)=>{
  if (obj.status ===0 ){
    ElMessage({
      type: 'info',
      message: '操作失败，设备离线',
    })
    return
  }
  voiceBroadDialog.value = true
  nowSn.value = obj.sn
}

// const addData = ()=>{
//   if(dataForms.value.length === 5){
//     ElMessage({
//       type: 'info',
//       message: '最多添加五个数据',
//     })
//     return
//   }
//   var arr = {text:'',color:'',size:''}
//   dataForms.value.push(arr)
// }
// const minData = ()=>{
//   if(dataForms.value.length === 1){
//     ElMessage({
//       type: 'info',
//       message: '至少选择一个数据',
//     })
//     return
//   }
//   dataForms.value.length = dataForms.value.length-1
// }

const closeInCodeDialog = ()=>{
  nowSn.value = ""
  inCodeDialog.value = false
  dataForms.value = [{text:'', color:'红色',size:'24号'}]
}

const enterInCodeDialog = async ()=>{
  for (const x of dataForms.value) { // 使用 for...of 循环
    if (x.text === '') {
      ElMessage({
        type: 'error',
        message: '请填写文字内容',
      })
      return;
    }
  }
  var res = await sendInternalCode({sn:nowSn.value,content:dataForms.value});
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '操作成功!',
    })
  }
}

const closeVoiceBroadDialog = ()=>{
  nowSn.value = ""
  voiceBroadDialog.value = false
  voiceBroadForm.value = {}
}

const enterVoiceBroadDialog = async () => {
  var res = await voiceBroad({sn: nowSn.value, broadContent: voiceBroadForm.value.broadContent});
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '操作成功!',
    })
  }
}



const openSetBrightDialog = async (obj)=>{
  if (obj.status ===0 ){
    ElMessage({
      type: 'info',
      message: '操作失败，设备离线',
    })
    return
  }
  console.log("=====",obj)
  setBrightForm.value = {dayBright:obj.dayBright,nightBright:obj.nightBright,audioOn:obj.audioOn,audioOff:obj.audioOff,switchSn:obj.switchSn,ledOn:obj.ledOn,ledOff:obj.ledOff}
  setBrightDialog.value = true
  nowSn.value = obj.sn
}

const closeSetBrightDialog = ()=>{
  setBrightDialog.value = false
  nowSn.value = ""
  getTableData()
}

const enterSetBrightDialog = async () => {
  var res = await setBrightAudioLed({
    sn: nowSn.value,
    dayBright: setBrightForm.value.dayBright,
    nightBright: setBrightForm.value.nightBright,
    audioOn: setBrightForm.value.audioOn,
    audioOff: setBrightForm.value.audioOff,
    switchSn: setBrightForm.value.switchSn,
    ledOn:setBrightForm.value.ledOn,
    ledOff:setBrightForm.value.ledOff
  });
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '操作成功!',
    })
  }
  closeSetBrightDialog()
}



</script>
<style>
.el-table .success-row {
  background: #f3fdef;
}

.onlinebox{
  width: 12px; height: 12px;border-radius: 50%; display: inline-block; margin-right: 4px; position: relative; top: 1px;
}

.el-dialog__header{
  border-bottom: 1px solid #e8eaec;
}
.el-dialog__footer {
  border-top: 1px solid #e8eaec;
}
</style>