|
|
@@ -5,13 +5,13 @@
|
|
|
id="deviceDetailTab"
|
|
|
v-model="activeName"
|
|
|
tab-position="left"
|
|
|
- @tab-click="tabChange"
|
|
|
+ @tab-change="tabChange"
|
|
|
style="padding: 10px; min-height: 400px"
|
|
|
lazy
|
|
|
>
|
|
|
<el-tab-pane name="basic">
|
|
|
- <span slot="label">{{ t('device.device-edit148398-0') }}</span>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <template #label>{{ t('device.device-edit148398-0') }}</template>
|
|
|
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
|
|
<el-row :gutter="100">
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
|
|
<el-form-item :label="t('device.device-edit148398-1')" prop="deviceName">
|
|
|
@@ -19,13 +19,15 @@
|
|
|
v-model="form.deviceName"
|
|
|
:placeholder="t('device.device-edit148398-2')"
|
|
|
>
|
|
|
- <el-button slot="append" @click="openSummaryDialog" v-if="form.deviceId != 0">{{
|
|
|
- t('device.device-edit148398-3')
|
|
|
- }}</el-button>
|
|
|
+ <template #append>
|
|
|
+ <el-button @click="openSummaryDialog" v-if="form.deviceId !== 0">
|
|
|
+ {{ t('device.device-edit148398-3') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="" prop="productName">
|
|
|
- <template slot="label">
|
|
|
+ <el-form-item prop="productName">
|
|
|
+ <template #label>
|
|
|
<span style="color: red">*</span>
|
|
|
{{ t('device.device-edit148398-4') }}
|
|
|
</template>
|
|
|
@@ -33,65 +35,63 @@
|
|
|
readonly
|
|
|
v-model="form.productName"
|
|
|
:placeholder="t('device.device-edit148398-5')"
|
|
|
- :disabled="form.status != 1"
|
|
|
+ :disabled="form.status !== 1"
|
|
|
>
|
|
|
- <el-button
|
|
|
- slot="append"
|
|
|
- @click="selectProduct()"
|
|
|
- :disabled="form.status != 1"
|
|
|
- >{{ t('device.device-edit148398-6') }}</el-button
|
|
|
- >
|
|
|
+ <template #append>
|
|
|
+ <el-button
|
|
|
+ @click="selectProduct()"
|
|
|
+ :disabled="form.status !== 1"
|
|
|
+ >
|
|
|
+ {{ t('device.device-edit148398-6') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="" prop="serialNumber">
|
|
|
- <template slot="label">
|
|
|
+ <el-form-item prop="serialNumber">
|
|
|
+ <template #label>
|
|
|
<span style="color: red">*</span>
|
|
|
{{ t('device.device-edit148398-7') }}
|
|
|
</template>
|
|
|
<el-input
|
|
|
v-model="form.serialNumber"
|
|
|
:placeholder="t('device.device-edit148398-8')"
|
|
|
- :disabled="form.status != 1"
|
|
|
+ :disabled="form.status !== 1"
|
|
|
maxlength="32"
|
|
|
>
|
|
|
- <el-button
|
|
|
- v-if="form.deviceType !== 3"
|
|
|
- slot="append"
|
|
|
- @click="generateNum"
|
|
|
- :loading="genDisabled"
|
|
|
- :disabled="form.status != 1"
|
|
|
- v-hasPermi="['iot:device:add']"
|
|
|
- >
|
|
|
- {{ t('device.device-edit148398-9') }}
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- v-if="form.deviceType === 3"
|
|
|
- slot="append"
|
|
|
- @click="genSipID()"
|
|
|
- :disabled="form.status != 1"
|
|
|
- v-hasPermi="['iot:device:add']"
|
|
|
- >
|
|
|
- {{ t('device.device-edit148398-9') }}
|
|
|
- </el-button>
|
|
|
+ <template #append>
|
|
|
+ <el-button
|
|
|
+ v-if="form.deviceType !== 3"
|
|
|
+ @click="generateNum"
|
|
|
+ :loading="genDisabled"
|
|
|
+ :disabled="form.status !== 1"
|
|
|
+
|
|
|
+ >
|
|
|
+ {{ t('device.device-edit148398-9') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="form.deviceType === 3"
|
|
|
+ @click="genSipID()"
|
|
|
+ :disabled="form.status !== 1"
|
|
|
+
|
|
|
+ >
|
|
|
+ {{ t('device.device-edit148398-9') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="openServerTip">
|
|
|
- <template>
|
|
|
- <el-alert
|
|
|
- type="info"
|
|
|
- show-icon
|
|
|
- :description="t('device.device-edit148398-10')"
|
|
|
- ></el-alert>
|
|
|
- </template>
|
|
|
+ <el-alert
|
|
|
+ type="info"
|
|
|
+ show-icon
|
|
|
+ :description="t('device.device-edit148398-10')"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="openTip">
|
|
|
- <template>
|
|
|
- <el-alert
|
|
|
- type="success"
|
|
|
- show-icon
|
|
|
- :description="t('device.device-edit148398-11')"
|
|
|
- ></el-alert>
|
|
|
- </template>
|
|
|
+ <el-alert
|
|
|
+ type="success"
|
|
|
+ show-icon
|
|
|
+ :description="t('device.device-edit148398-11')"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-12')" prop="firmwareVersion">
|
|
|
<el-input
|
|
|
@@ -99,36 +99,32 @@
|
|
|
:placeholder="t('device.device-edit148398-13')"
|
|
|
type="number"
|
|
|
step="0.1"
|
|
|
- :disabled="form.status != 1 || form.deviceType === 3"
|
|
|
+ :disabled="form.status !== 1 || form.deviceType === 3"
|
|
|
>
|
|
|
- <template slot="prepend">Version</template>
|
|
|
+ <template #prepend>Version</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-15')" prop="isShadow">
|
|
|
<el-switch
|
|
|
v-model="form.isShadow"
|
|
|
- active-text=""
|
|
|
- inactive-text=""
|
|
|
:active-value="1"
|
|
|
:inactive-value="0"
|
|
|
:disabled="form.deviceType === 3"
|
|
|
- ></el-switch>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item
|
|
|
- v-if="form.deviceType != 4"
|
|
|
+ v-if="form.deviceType !== 4"
|
|
|
:label="t('device.device-edit148398-16')"
|
|
|
prop="deviceStatus"
|
|
|
>
|
|
|
<el-switch
|
|
|
v-model="deviceStatus"
|
|
|
- active-text=""
|
|
|
- inactive-text=""
|
|
|
- :disabled="form.status == 1 || form.deviceType === 3"
|
|
|
+ :disabled="form.status === 1 || form.deviceType === 3"
|
|
|
:active-value="1"
|
|
|
:inactive-value="0"
|
|
|
active-color="#F56C6C"
|
|
|
- ></el-switch>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-17')" prop="remark">
|
|
|
<el-input
|
|
|
@@ -145,7 +141,7 @@
|
|
|
v-model="form.locationWay"
|
|
|
:placeholder="t('device.device-edit148398-20')"
|
|
|
clearable
|
|
|
- size="small"
|
|
|
+ size="default"
|
|
|
style="width: 100%"
|
|
|
:disabled="form.deviceType === 3"
|
|
|
>
|
|
|
@@ -162,17 +158,18 @@
|
|
|
v-model="form.longitude"
|
|
|
:placeholder="t('device.device-edit148398-22')"
|
|
|
type="number"
|
|
|
- :disabled="form.locationWay != 3"
|
|
|
+ :disabled="form.locationWay !== 3"
|
|
|
>
|
|
|
- <el-link
|
|
|
- slot="append"
|
|
|
- :underline="false"
|
|
|
- href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
|
|
|
- target="_blank"
|
|
|
- :disabled="form.locationWay != 3"
|
|
|
- >
|
|
|
- {{ t('device.device-edit148398-23') }}
|
|
|
- </el-link>
|
|
|
+ <template #append>
|
|
|
+ <el-link
|
|
|
+ :underline="false"
|
|
|
+ href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="form.locationWay !== 3"
|
|
|
+ >
|
|
|
+ {{ t('device.device-edit148398-23') }}
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-24')" prop="latitude">
|
|
|
@@ -180,24 +177,25 @@
|
|
|
v-model="form.latitude"
|
|
|
:placeholder="t('device.device-edit148398-25')"
|
|
|
type="number"
|
|
|
- :disabled="form.locationWay != 3"
|
|
|
+ :disabled="form.locationWay !== 3"
|
|
|
>
|
|
|
- <el-link
|
|
|
- slot="append"
|
|
|
- :underline="false"
|
|
|
- href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
|
|
|
- target="_blank"
|
|
|
- :disabled="form.locationWay != 3"
|
|
|
- >
|
|
|
- {{ t('device.device-edit148398-23') }}
|
|
|
- </el-link>
|
|
|
+ <template #append>
|
|
|
+ <el-link
|
|
|
+ :underline="false"
|
|
|
+ href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="form.locationWay !== 3"
|
|
|
+ >
|
|
|
+ {{ t('device.device-edit148398-23') }}
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-26')" prop="networkAddress">
|
|
|
<el-input
|
|
|
v-model="form.networkAddress"
|
|
|
:placeholder="t('device.device-edit148398-27')"
|
|
|
- :disabled="form.locationWay != 3"
|
|
|
+ :disabled="form.locationWay !== 3"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-28')" prop="networkIp">
|
|
|
@@ -212,11 +210,11 @@
|
|
|
clearable
|
|
|
v-model="form.activeTime"
|
|
|
type="date"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
:placeholder="t('device.device-edit148398-31')"
|
|
|
disabled
|
|
|
style="width: 100%"
|
|
|
- ></el-date-picker>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('device.device-edit148398-32')" prop="rssi">
|
|
|
<el-input
|
|
|
@@ -228,22 +226,22 @@
|
|
|
<el-form-item
|
|
|
:label="t('device.device-edit148398-34')"
|
|
|
prop="remark"
|
|
|
- v-if="form.deviceId != 0"
|
|
|
+ v-if="form.deviceId !== 0"
|
|
|
>
|
|
|
<dict-tag
|
|
|
:options="dict.type.iot_device_status"
|
|
|
:value="form.status"
|
|
|
style="display: inline-block; margin-right: 8px"
|
|
|
/>
|
|
|
- <el-button size="small" @click="handleViewMqtt()">{{
|
|
|
- t('device.device-edit148398-35')
|
|
|
- }}</el-button>
|
|
|
- <el-button size="small" @click="openCodeDialog()">{{
|
|
|
- t('device.device-edit148398-36')
|
|
|
- }}</el-button>
|
|
|
+ <el-button size="small" @click="handleViewMqtt()">
|
|
|
+ {{ t('device.device-edit148398-35') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small" @click="openCodeDialog()">
|
|
|
+ {{ t('device.device-edit148398-36') }}
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" v-if="form.deviceId != 0">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" v-if="form.deviceId !== 0">
|
|
|
<div
|
|
|
style="
|
|
|
border: 1px solid #dfe4ed;
|
|
|
@@ -253,9 +251,9 @@
|
|
|
line-height: 400px;
|
|
|
"
|
|
|
>
|
|
|
- <div id="map" style="height: 435px; width: 100%">{{
|
|
|
- t('device.device-edit148398-37')
|
|
|
- }}</div>
|
|
|
+ <div id="map" style="height: 435px; width: 100%">
|
|
|
+ {{ t('device.device-edit148398-37') }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -266,16 +264,16 @@
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="submitForm"
|
|
|
- v-hasPermi="['iot:device:edit']"
|
|
|
- v-show="form.deviceId != 0"
|
|
|
+
|
|
|
+ v-show="form.deviceId !== 0"
|
|
|
>
|
|
|
{{ t('device.device-edit148398-38') }} {{ t('device.device-edit148398-39') }}
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="submitForm"
|
|
|
- v-hasPermi="['iot:device:add']"
|
|
|
- v-show="form.deviceId == 0"
|
|
|
+
|
|
|
+ v-show="form.deviceId === 0"
|
|
|
>
|
|
|
{{ t('device.device-edit148398-40') }} {{ t('device.device-edit148398-41') }}
|
|
|
</el-button>
|
|
|
@@ -284,199 +282,197 @@
|
|
|
|
|
|
<!-- 选择产品 -->
|
|
|
<product-list
|
|
|
- ref="productList"
|
|
|
+ ref="productListRef"
|
|
|
:productId="form.productId"
|
|
|
- @productEvent="getProductData($event)"
|
|
|
+ @product-event="getProductData"
|
|
|
/>
|
|
|
|
|
|
- <sipid ref="sipidGen" :product="form" @addGenEvent="getSipIDData($event)" />
|
|
|
+ <sipid ref="sipidGenRef" :product="form" @add-gen-event="getSipIDData" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane name="runningStatus" v-if="form.deviceType !== 3">
|
|
|
- <span slot="label">{{ t('device.device-edit148398-42') }}</span>
|
|
|
- <!-- <real-time-status ref="realTimeStatus" :device="form" @statusEvent="getDeviceStatusData($event)" /> -->
|
|
|
+ <template #label>{{ t('device.device-edit148398-42') }}</template>
|
|
|
<running-status
|
|
|
- ref="runningStatus"
|
|
|
+ ref="runningStatusRef"
|
|
|
v-if="!isSubDev"
|
|
|
:device="form"
|
|
|
- @statusEvent="getDeviceStatusData($event)"
|
|
|
+ @status-event="getDeviceStatusData"
|
|
|
/>
|
|
|
<real-time-status
|
|
|
- ref="realTimeStatus"
|
|
|
+ ref="realTimeStatusRef"
|
|
|
v-else
|
|
|
:device="form"
|
|
|
- @statusEvent="getDeviceStatusData($event)"
|
|
|
+ @status-event="getDeviceStatusData"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
-
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="sipChannel"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType === 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-44') }}</span>
|
|
|
- <channel ref="Channel" :device="form" @playerEvent="getPlayerData($event)" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-44') }}</template>
|
|
|
+ <channel ref="ChannelRef" :device="form" @player-event="getPlayerData" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="sipPlayer"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType === 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-45') }}</span>
|
|
|
- <device-live-stream ref="deviceLiveStream" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-45') }}</template>
|
|
|
+ <device-live-stream ref="deviceLiveStreamRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="sipVideo"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType === 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-46') }}</span>
|
|
|
- <deviceVideo ref="deviceVideo" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-46') }}</template>
|
|
|
+ <device-video ref="deviceVideoRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
- <el-tab-pane name="ossRecord" :disabled="form.deviceId == 0" v-if="form.deviceType === 3">
|
|
|
- <span slot="label">{{ t('device.device-edit148398-79') }}</span>
|
|
|
- <OssRecord ref="OssRecord" :device="form" />
|
|
|
+ <el-tab-pane name="ossRecord" :disabled="form.deviceId === 0" v-if="form.deviceType === 3">
|
|
|
+ <template #label>{{ t('device.device-edit148398-79') }}</template>
|
|
|
+ <oss-record ref="OssRecordRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceTimer"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-47') }}</span>
|
|
|
- <device-timer ref="deviceTimer" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-47') }}</template>
|
|
|
+ <device-timer ref="deviceTimerRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
- <el-tab-pane name="deviceUser" :disabled="form.deviceId == 0" lazy>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-48') }}</span>
|
|
|
- <device-user ref="deviceUser" :device="form" @userEvent="getUserData($event)" />
|
|
|
+ <el-tab-pane name="deviceUser" :disabled="form.deviceId === 0" lazy>
|
|
|
+ <template #label>{{ t('device.device-edit148398-48') }}</template>
|
|
|
+ <device-user ref="deviceUserRef" :device="form" @user-event="getUserData" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceLog"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-49') }}</span>
|
|
|
- <device-log ref="deviceLog" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-49') }}</template>
|
|
|
+ <device-log ref="deviceLogRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
- <el-tab-pane name="alertUser" :disabled="form.deviceId == 0" v-if="form.deviceType !== 3">
|
|
|
- <span slot="label">{{ t('device.device-edit148398-80') }}</span>
|
|
|
- <alert-user ref="alertUser" :device="form" />
|
|
|
+ <el-tab-pane name="alertUser" :disabled="form.deviceId === 0" v-if="form.deviceType !== 3">
|
|
|
+ <template #label>{{ t('device.device-edit148398-80') }}</template>
|
|
|
+ <alert-user ref="alertUserRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="deviceAlert" :disabled="form.deviceId == 0">
|
|
|
- <span slot="label">{{ t('device.device-edit148398-81') }}</span>
|
|
|
- <device-alert ref="deviceAlert" :device="form" />
|
|
|
+
|
|
|
+ <el-tab-pane name="deviceAlert" :disabled="form.deviceId === 0">
|
|
|
+ <template #label>{{ t('device.device-edit148398-81') }}</template>
|
|
|
+ <device-alert ref="deviceAlertRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceFuncLog"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-50') }}</span>
|
|
|
- <device-func ref="deviceFuncLog" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-50') }}</template>
|
|
|
+ <device-func ref="deviceFuncLogRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceMonitor"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-51') }}</span>
|
|
|
- <device-monitor ref="deviceMonitor" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-51') }}</template>
|
|
|
+ <device-monitor ref="deviceMonitorRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceStastic"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-52') }}</span>
|
|
|
- <device-statistic ref="deviceStatistic" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-52') }}</template>
|
|
|
+ <device-statistic ref="deviceStatisticRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="deviceModbusTask"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
- v-if="form.transport == 'TCP'"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
+ v-if="form.transport === 'TCP'"
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-77') }}</span>
|
|
|
- <device-modbus-task ref="deviceModbusTask" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-77') }}</template>
|
|
|
+ <device-modbus-task ref="deviceModbusTaskRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="instructionParsing"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-76') }}</span>
|
|
|
- <instruction-parsing ref="instructionParsing" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-76') }}</template>
|
|
|
+ <instruction-parsing ref="instructionParsingRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="scada"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
- v-if="form.deviceType !== 3 && isShowScada == true"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
+ v-if="form.deviceType !== 3 && isShowScada === true"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-73') }}</span>
|
|
|
- <device-scada ref="deviceScada" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-73') }}</template>
|
|
|
+ <device-scada ref="deviceScadaRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="variable"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
v-if="form.deviceType !== 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-74') }}</span>
|
|
|
- <device-variable ref="deviceVariable" :device="form" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-74') }}</template>
|
|
|
+ <device-variable ref="deviceVariableRef" :device="form" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane
|
|
|
name="inlineVideo"
|
|
|
- :disabled="form.deviceId == 0"
|
|
|
- v-if="form.deviceType == 3"
|
|
|
+ :disabled="form.deviceId === 0"
|
|
|
+ v-if="form.deviceType === 3"
|
|
|
lazy
|
|
|
>
|
|
|
- <span slot="label">{{ t('device.device-edit148398-75') }}</span>
|
|
|
- <device-inline-video ref="deviceInlineVideo" :sipRelationList="form.sipRelationList" />
|
|
|
+ <template #label>{{ t('device.device-edit148398-75') }}</template>
|
|
|
+ <device-inline-video ref="deviceInlineVideoRef" :sip-relation-list="form.sipRelationList" />
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 用于设置间距 -->
|
|
|
<el-tab-pane disabled>
|
|
|
- <span slot="label">
|
|
|
+ <template #label>
|
|
|
<div style="margin-top: 150px"></div>
|
|
|
- </span>
|
|
|
+ </template>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
-
|
|
|
<el-tab-pane name="deviceReturn" disabled>
|
|
|
- <span slot="label">
|
|
|
- <el-button type="info" size="mini" @click="goBack()">{{
|
|
|
- t('device.device-edit148398-53')
|
|
|
- }}</el-button>
|
|
|
- </span>
|
|
|
+ <template #label>
|
|
|
+ <el-button type="info" size="small" @click="goBack()">
|
|
|
+ {{ t('device.device-edit148398-53') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
<!-- 设备配置JSON -->
|
|
|
<el-dialog
|
|
|
:title="t('device.device-edit148398-54')"
|
|
|
- :visible.sync="openSummary"
|
|
|
+ v-model="openSummary"
|
|
|
width="700px"
|
|
|
append-to-body
|
|
|
>
|
|
|
@@ -492,7 +488,7 @@
|
|
|
"
|
|
|
>
|
|
|
<json-viewer :value="summary" :expand-depth="10" copyable>
|
|
|
- <template v-slot:copy>{{ t('device.device-edit148398-55') }}</template>
|
|
|
+ <template #copy>{{ t('device.device-edit148398-55') }}</template>
|
|
|
</json-viewer>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -506,19 +502,22 @@
|
|
|
margin-top: -10px;
|
|
|
"
|
|
|
>
|
|
|
- <vue-qr :text="qrText" :size="200"></vue-qr>
|
|
|
+
|
|
|
+ <Vue3NextQrcode :text="qrText" :size="200" />
|
|
|
<div style="padding-bottom: 10px">{{ t('device.device-edit148398-56') }}</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="info" @click="closeSummaryDialog">{{
|
|
|
- t('device.device-edit148398-57')
|
|
|
- }}</el-button>
|
|
|
- </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="info" @click="closeSummaryDialog">
|
|
|
+ {{ t('device.device-edit148398-57') }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-dialog>
|
|
|
|
|
|
- <el-dialog :visible.sync="openCode" width="300px" append-to-body>
|
|
|
+ <el-dialog v-model="openCode" width="300px" append-to-body>
|
|
|
<div
|
|
|
style="
|
|
|
border: 1px solid #ccc;
|
|
|
@@ -528,17 +527,18 @@
|
|
|
margin-top: -15px;
|
|
|
"
|
|
|
>
|
|
|
- <vue-qr :text="qrText" :size="200"></vue-qr>
|
|
|
+ <Vue3NextQrcode :text="qrText" :size="200" />
|
|
|
<div style="padding-bottom: 10px">{{ t('device.device-edit148398-56') }}</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
<el-dialog
|
|
|
:title="t('device.device-edit148398-58')"
|
|
|
- :visible.sync="openViewMqtt"
|
|
|
+ v-model="openViewMqtt"
|
|
|
width="600px"
|
|
|
append-to-body
|
|
|
>
|
|
|
- <el-form ref="listQuery" :model="listQuery" :rules="rules" label-width="150px">
|
|
|
+ <el-form ref="listQueryRef" :model="listQuery" :rules="rules" label-width="150px">
|
|
|
<el-form-item label="clientId" prop="clientId">
|
|
|
<el-input
|
|
|
v-model="listQuery.clientId"
|
|
|
@@ -550,10 +550,20 @@
|
|
|
<el-input v-model="listQuery.username" disabled style="width: 80%" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="passwd" prop="passwd">
|
|
|
- <el-input clearable v-model="listQuery.passwd" disabled style="width: 80%"></el-input>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="listQuery.passwd"
|
|
|
+ disabled
|
|
|
+ style="width: 80%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="port" prop="port">
|
|
|
- <el-input clearable v-model="listQuery.port" disabled style="width: 80%"></el-input>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="listQuery.port"
|
|
|
+ disabled
|
|
|
+ style="width: 80%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="发布" prop="port">
|
|
|
<el-input
|
|
|
@@ -561,7 +571,7 @@
|
|
|
:disabled="listQuery.mqttstats === 0"
|
|
|
clearable
|
|
|
style="width: 80%"
|
|
|
- ></el-input>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="订阅" prop="port">
|
|
|
<el-input
|
|
|
@@ -569,7 +579,7 @@
|
|
|
:disabled="listQuery.mqttstats === 0"
|
|
|
clearable
|
|
|
style="width: 80%"
|
|
|
- ></el-input>
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="是否自定义">
|
|
|
<el-radio-group v-model="listQuery.mqttstats" @change="updateMqttgroup">
|
|
|
@@ -578,52 +588,57 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- v-if="listQuery.mqttstats === 1"
|
|
|
- class="btns"
|
|
|
- type="primary"
|
|
|
- @click="updateMqtt()"
|
|
|
- >修改</el-button
|
|
|
- >
|
|
|
- <el-button class="btns" type="primary" @click="doCopy(2)">{{
|
|
|
- t('device.device-edit148398-59')
|
|
|
- }}</el-button>
|
|
|
- <el-button @click="closeSummaryDialog">{{
|
|
|
- t('device.device-edit148398-57')
|
|
|
- }}</el-button>
|
|
|
- </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ v-if="listQuery.mqttstats === 1"
|
|
|
+ class="btns"
|
|
|
+ type="primary"
|
|
|
+ @click="updateMqtt"
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button class="btns" type="primary" @click="doCopy(2)">
|
|
|
+ {{ t('device.device-edit148398-59') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="closeSummaryDialog">
|
|
|
+ {{ t('device.device-edit148398-57') }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-dialog>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import JsonViewer from 'vue-json-viewer'
|
|
|
-import 'vue-json-viewer/style.css'
|
|
|
-import productList from './product-list'
|
|
|
-import deviceLog from './device-log'
|
|
|
-import deviceAlert from './device-alert'
|
|
|
-import alertUser from './alert-user'
|
|
|
-import deviceUser from './device-user'
|
|
|
-import runningStatus from './running-status'
|
|
|
-import deviceMonitor from './device-monitor'
|
|
|
-import deviceStatistic from './device-statistic'
|
|
|
-import instructionParsing from './instruction-parsing'
|
|
|
-import deviceModbusTask from './device-modbus-task'
|
|
|
-import deviceTimer from './device-timer'
|
|
|
-import channel from '../sip/channel'
|
|
|
-import player from '@/views/components/player/player.vue'
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, computed, onMounted, onActivated, onUnmounted, nextTick } from 'vue'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import JsonViewer from 'vue-json-viewer/ssr'
|
|
|
+import productList from './product-list.vue'
|
|
|
+import deviceLog from './device-log.vue'
|
|
|
+import deviceAlert from './device-alert.vue'
|
|
|
+import alertUser from './alert-user.vue'
|
|
|
+import deviceUser from './device-user.vue'
|
|
|
+import runningStatus from './running-status.vue'
|
|
|
+import deviceMonitor from './device-monitor.vue'
|
|
|
+import deviceStatistic from './device-statistic.vue'
|
|
|
+import instructionParsing from './instruction-parsing.vue'
|
|
|
+import deviceModbusTask from './device-modbus-task.vue'
|
|
|
+import deviceTimer from './device-timer.vue'
|
|
|
+import channel from '../sip/channel.vue'
|
|
|
import deviceVideo from '@/views/components/player/deviceVideo.vue'
|
|
|
import OssRecord from '@/views/iot/record/record-oss.vue'
|
|
|
-import deviceLiveStream from '@/views/components/player/deviceLiveStream'
|
|
|
+import deviceLiveStream from '@/views/components/player/deviceLiveStream.vue'
|
|
|
import sipid from '../sip/sipidGen.vue'
|
|
|
-import deviceScada from './device-scada'
|
|
|
-import deviceVariable from './device-variable'
|
|
|
-import deviceInlineVideo from './device-inline-video'
|
|
|
-import deviceFuncLog from './device-functionlog'
|
|
|
-import deviceSub from './device-sub'
|
|
|
-import vueQr from 'vue-qr'
|
|
|
+import deviceScada from './device-scada.vue'
|
|
|
+import deviceVariable from './device-variable.vue'
|
|
|
+import deviceInlineVideo from './device-inline-video.vue'
|
|
|
+import deviceFuncLog from './device-functionlog.vue'
|
|
|
+import realTimeStatus from '@/views/iot/device/realTime-status.vue'
|
|
|
+import { Vue3NextQrcode } from 'vue3-next-qrcode'
|
|
|
+import 'vue3-next-qrcode/es/style.css'
|
|
|
import { loadBMap } from '@/utils/map.js'
|
|
|
import {
|
|
|
addDevice,
|
|
|
@@ -634,872 +649,501 @@ import {
|
|
|
getMqttConnect,
|
|
|
updateDevice,
|
|
|
updateMqttConnectData
|
|
|
-} from '@/api/iot/device'
|
|
|
+} from '@/api/pms/video/device'
|
|
|
import { getDeviceUser } from '@/api/iot/deviceuser'
|
|
|
import { getUserId } from '@/utils/auth'
|
|
|
import { cacheJsonThingsModel } from '@/api/iot/model'
|
|
|
-import DeviceFunc from '@/views/iot/device/device-functionlog'
|
|
|
-import RealTimeStatus from '@/views/iot/device/realTime-status'
|
|
|
import { clientOut } from '@/api/iot/netty'
|
|
|
import defaultSettings from '@/settings'
|
|
|
-import { use } from 'echarts'
|
|
|
-
|
|
|
-const {t} = useI18n()
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'DeviceEdit',
|
|
|
- dicts: ['iot_device_status', 'iot_location_way'],
|
|
|
- components: {
|
|
|
- RealTimeStatus,
|
|
|
- DeviceFunc,
|
|
|
- deviceLog,
|
|
|
- deviceAlert,
|
|
|
- deviceUser,
|
|
|
- alertUser,
|
|
|
- deviceMonitor,
|
|
|
- deviceStatistic,
|
|
|
- runningStatus,
|
|
|
- productList,
|
|
|
- deviceTimer,
|
|
|
- deviceFuncLog,
|
|
|
- deviceVideo,
|
|
|
- OssRecord,
|
|
|
- player,
|
|
|
- deviceLiveStream,
|
|
|
- deviceSub,
|
|
|
- JsonViewer,
|
|
|
- vueQr,
|
|
|
- channel,
|
|
|
- sipid,
|
|
|
- deviceScada,
|
|
|
- deviceVariable,
|
|
|
- instructionParsing,
|
|
|
- deviceModbusTask,
|
|
|
- deviceInlineVideo
|
|
|
- },
|
|
|
- watch: {
|
|
|
- activeName(val) {
|
|
|
- if (val == 'deviceStastic') {
|
|
|
- this.$nextTick(() => {
|
|
|
- // TODO 重置统计表格的尺寸
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- deviceStatus: {
|
|
|
- set(val) {
|
|
|
- if (val == 1) {
|
|
|
- // 1-未激活，2-禁用，3-在线，4-离线
|
|
|
- this.form.status = 2
|
|
|
- } else if (val == 0) {
|
|
|
- this.form.status = 4
|
|
|
- } else {
|
|
|
- this.form.status = this.oldDeviceStatus
|
|
|
- }
|
|
|
- },
|
|
|
- get() {
|
|
|
- if (this.form.status == 2) {
|
|
|
- return 1
|
|
|
- }
|
|
|
- return 0
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+// i18n
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+// Router and route
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+// Refs
|
|
|
+const formRef = ref()
|
|
|
+const listQueryRef = ref()
|
|
|
+const productListRef = ref()
|
|
|
+const sipidGenRef = ref()
|
|
|
+const runningStatusRef = ref()
|
|
|
+const realTimeStatusRef = ref()
|
|
|
+const ChannelRef = ref()
|
|
|
+const deviceLiveStreamRef = ref()
|
|
|
+const deviceVideoRef = ref()
|
|
|
+const OssRecordRef = ref()
|
|
|
+const deviceTimerRef = ref()
|
|
|
+const deviceUserRef = ref()
|
|
|
+const deviceLogRef = ref()
|
|
|
+const alertUserRef = ref()
|
|
|
+const deviceAlertRef = ref()
|
|
|
+const deviceFuncLogRef = ref()
|
|
|
+const deviceMonitorRef = ref()
|
|
|
+const deviceStatisticRef = ref()
|
|
|
+const instructionParsingRef = ref()
|
|
|
+const deviceModbusTaskRef = ref()
|
|
|
+const deviceScadaRef = ref()
|
|
|
+const deviceVariableRef = ref()
|
|
|
+const deviceInlineVideoRef = ref()
|
|
|
+
|
|
|
+// Reactive data
|
|
|
+const qrText = ref('yanfan')
|
|
|
+const openSummary = ref(false)
|
|
|
+const openCode = ref(false)
|
|
|
+const openViewMqtt = ref(false)
|
|
|
+const genDisabled = ref(false)
|
|
|
+const activeName = ref('basic')
|
|
|
+const mqttList = ref([])
|
|
|
+const loading = ref(true)
|
|
|
+const oldDeviceStatus = ref(null)
|
|
|
+const deviceId = ref('')
|
|
|
+const channelId = ref('')
|
|
|
+const form = reactive({
|
|
|
+ productId: 0,
|
|
|
+ status: 1,
|
|
|
+ locationWay: 1,
|
|
|
+ firmwareVersion: 1.0,
|
|
|
+ serialNumber: '',
|
|
|
+ deviceType: 1,
|
|
|
+ isSimulate: 0,
|
|
|
+ deviceId: 0
|
|
|
+})
|
|
|
+const listQuery = reactive({
|
|
|
+ clientId: 0,
|
|
|
+ username: '',
|
|
|
+ passwd: '',
|
|
|
+ port: '',
|
|
|
+ mqttstats: 0
|
|
|
+})
|
|
|
+const fb = ref(null)
|
|
|
+const dy = ref(null)
|
|
|
+const openTip = ref(false)
|
|
|
+const openServerTip = ref(false)
|
|
|
+const serverType = ref(1)
|
|
|
+const isSubDev = ref(false)
|
|
|
+const summary = ref([])
|
|
|
+const baseUrl = import.meta.env.VITE_BASE_URl
|
|
|
+const map = ref(null)
|
|
|
+const mk = ref(null)
|
|
|
+const latitude = ref('')
|
|
|
+const longitude = ref('')
|
|
|
+const isShowScada = ref(defaultSettings.isShowScada)
|
|
|
+const isMediaDevice = ref(false)
|
|
|
+
|
|
|
+// Computed
|
|
|
+const deviceStatus = computed({
|
|
|
+ get() {
|
|
|
+ return form.status === 2 ? 1 : 0
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 二维码内容
|
|
|
- qrText: 'yanfan',
|
|
|
- // 打开设备配置对话框
|
|
|
- openSummary: false,
|
|
|
- //二维码
|
|
|
- openCode: false,
|
|
|
- openViewMqtt: false,
|
|
|
- // 生成设备编码是否禁用
|
|
|
- genDisabled: false,
|
|
|
- // 选中选项卡
|
|
|
- activeName: 'basic',
|
|
|
- //查看mqtt参数
|
|
|
- mqttList: [],
|
|
|
- // 遮罩层
|
|
|
- loading: true,
|
|
|
- // 设备开始状态
|
|
|
- oldDeviceStatus: null,
|
|
|
- deviceId: '',
|
|
|
- channelId: '',
|
|
|
- // 表单参数
|
|
|
- form: {
|
|
|
- productId: 0,
|
|
|
- status: 1,
|
|
|
- locationWay: 1,
|
|
|
- firmwareVersion: 1.0,
|
|
|
- serialNumber: '',
|
|
|
- deviceType: 1,
|
|
|
- isSimulate: 0
|
|
|
- },
|
|
|
- //mqtt参数查看
|
|
|
- listQuery: {
|
|
|
- clientId: 0,
|
|
|
- username: '',
|
|
|
- passwd: '',
|
|
|
- port: '',
|
|
|
- mqttstats: 0
|
|
|
- },
|
|
|
- fb: null,
|
|
|
- dy: null,
|
|
|
-
|
|
|
- openTip: false,
|
|
|
- openServerTip: false,
|
|
|
- serverType: 1,
|
|
|
- //用于判断是否是设备组(modbus)
|
|
|
- isSubDev: false,
|
|
|
- // 设备摘要
|
|
|
- summary: [],
|
|
|
- // 地址
|
|
|
- baseUrl: process.env.VUE_APP_BASE_API,
|
|
|
- // 地图相关
|
|
|
- map: null,
|
|
|
- mk: null,
|
|
|
- latitude: '',
|
|
|
- longitude: '',
|
|
|
- //组态相关按钮是否显示，true显示，false不显示
|
|
|
- isShowScada: defaultSettings.isShowScada,
|
|
|
- // 表单校验
|
|
|
- rules: {
|
|
|
- deviceName: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: this.t('device.device-edit148398-60'),
|
|
|
- trigger: 'blur'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 2,
|
|
|
- max: 32,
|
|
|
- message: this.t('device.device-edit148398-61'),
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ],
|
|
|
- firmwareVersion: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: this.t('device.device-edit148398-62'),
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- isMediaDevice: false
|
|
|
+ set(val) {
|
|
|
+ if (val === 1) {
|
|
|
+ form.status = 2
|
|
|
+ } else if (val === 0) {
|
|
|
+ form.status = 4
|
|
|
+ } else {
|
|
|
+ form.status = oldDeviceStatus.value
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- let activeName = this.$route.query.activeName
|
|
|
- if (activeName != null && activeName != '') {
|
|
|
- this.activeName = activeName
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// Rules
|
|
|
+const rules = {
|
|
|
+ deviceName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('device.device-edit148398-60'),
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 32,
|
|
|
+ message: t('device.device-edit148398-61'),
|
|
|
+ trigger: 'blur'
|
|
|
}
|
|
|
- // 获取设备信息
|
|
|
- this.form.deviceId = this.$route.query && this.$route.query.deviceId
|
|
|
- if (this.form.deviceId != 0) {
|
|
|
- // this.connectMqtt();
|
|
|
- this.getDevice(this.form.deviceId)
|
|
|
+ ],
|
|
|
+ firmwareVersion: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('device.device-edit148398-62'),
|
|
|
+ trigger: 'blur'
|
|
|
}
|
|
|
- this.isSubDev = this.$route.query.isSubDev == 1 ? true : false
|
|
|
- console.log('this.isSubDev', this.isSubDev)
|
|
|
- },
|
|
|
- activated() {
|
|
|
- // 跳转选项卡
|
|
|
- let activeName = this.$route.query.activeName
|
|
|
- if (activeName != null && activeName != '') {
|
|
|
- this.activeName = activeName
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// Methods
|
|
|
+const updateMqttgroup = (stater) => {
|
|
|
+ if (stater === 1) {
|
|
|
+ fb.value = null
|
|
|
+ dy.value = null
|
|
|
+ listQuery.clientId = null
|
|
|
+ }
|
|
|
+ updateMqtt()
|
|
|
+}
|
|
|
+
|
|
|
+const updateMqtt = () => {
|
|
|
+ listQuery.fpname = fb.value
|
|
|
+ listQuery.dyname = dy.value
|
|
|
+ updateMqttConnectData(listQuery).then((permResponse) => {
|
|
|
+ ElMessage.success(permResponse.msg)
|
|
|
+ handleViewMqtt()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// MQTT相关方法保持不变，只是语法调整
|
|
|
+const connectMqtt = async () => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const mqttCallback = () => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const getMqttTopics = (device) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const getDeviceStatusData = (status) => {
|
|
|
+ form.status = status
|
|
|
+}
|
|
|
+
|
|
|
+const mqttUnSubscribe = (device) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const mqttSubscribe = (device) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const getPlayerData = (data) => {
|
|
|
+ activeName.value = data.tabName
|
|
|
+ channelId.value = data.channelId
|
|
|
+ nextTick(() => {
|
|
|
+ if (channelId.value) {
|
|
|
+ deviceLiveStreamRef.value.channelId = channelId.value
|
|
|
+ deviceLiveStreamRef.value.changeChannel()
|
|
|
}
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- // 取消订阅主题
|
|
|
- this.mqttUnSubscribe(this.form)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- updateMqttgroup(stater) {
|
|
|
- if (stater === 1) {
|
|
|
- this.fb = null
|
|
|
- this.dy = null
|
|
|
- this.listQuery.clientId = null
|
|
|
- }
|
|
|
- this.updateMqtt()
|
|
|
- },
|
|
|
- updateMqtt() {
|
|
|
- this.listQuery.fpname = this.fb
|
|
|
- this.listQuery.dyname = this.dy
|
|
|
- console.log(this.listQuery)
|
|
|
- updateMqttConnectData(this.listQuery).then((permResponse) => {
|
|
|
- this.$message.success(permResponse.msg)
|
|
|
- this.handleViewMqtt()
|
|
|
- })
|
|
|
- },
|
|
|
- /* 连接Mqtt消息服务器 */
|
|
|
- async connectMqtt() {
|
|
|
- if (this.$mqttTool.client == null) {
|
|
|
- await this.$mqttTool.connect(this.vuex_token)
|
|
|
- }
|
|
|
- // 删除所有message事件监听器
|
|
|
- this.$mqttTool.client.removeAllListeners('message')
|
|
|
- // this.$mqttTool.client.on('connect', (e) => {});
|
|
|
- this.mqttUnSubscribe(this.form)
|
|
|
- this.mqttSubscribe(this.form)
|
|
|
- // 添加message事件监听器
|
|
|
- this.mqttCallback()
|
|
|
- if (this.form.deviceType !== 3 && !this.isSubDev) {
|
|
|
- this.$refs.runningStatus.mqttCallback()
|
|
|
- }
|
|
|
- },
|
|
|
- /* Mqtt回调处理 */
|
|
|
- mqttCallback() {
|
|
|
- this.$mqttTool.client.on('message', (topic, message, buffer) => {
|
|
|
- let topics = topic.split('/')
|
|
|
- let productId = topics[1]
|
|
|
- let deviceNum = topics[2]
|
|
|
- if (message instanceof Uint8Array) {
|
|
|
- // 创建TextDecoder对象来转换Uint8Array到字符串
|
|
|
- const decoder = new TextDecoder('utf-8')
|
|
|
- const str = decoder.decode(message)
|
|
|
- message = str //转换后的字符串
|
|
|
- }
|
|
|
- console.log('🚀 ~ this.$mqttTool.client.on ~ message:', message)
|
|
|
- console.log('🚀 ~ this.$mqttTool.client.on ~ topics:', topic)
|
|
|
- message = JSON.parse(message)
|
|
|
- if (!message) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (topics[3] == 'status' || topics[2] == 'status') {
|
|
|
- console.log('接收到【设备状态-详情】主题:', topic)
|
|
|
- console.log('接收到【设备状态-详情】内容：', message)
|
|
|
- // 更新列表中设备的状态
|
|
|
- if (this.form.serialNumber == deviceNum) {
|
|
|
- this.oldDeviceStatus = message.status
|
|
|
- this.form.status = message.status
|
|
|
- this.form.isShadow = message.isShadow
|
|
|
- this.form.rssid = message.rssid
|
|
|
- }
|
|
|
- }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- if (topic.endsWith('ws/service')) {
|
|
|
- this.$busEvent.$emit('updateData', {
|
|
|
- serialNumber: topics[2],
|
|
|
- productId: this.form.productId,
|
|
|
- data: message
|
|
|
- })
|
|
|
- }
|
|
|
- if (topic.endsWith('service/reply')) {
|
|
|
- this.$busEvent.$emit('updateLog', {
|
|
|
- serialNumber: topics[2],
|
|
|
- productId: this.form.productId,
|
|
|
- data: message
|
|
|
- })
|
|
|
- }
|
|
|
- /**mqtt测试 */
|
|
|
- if (topic.endsWith('message/post')) {
|
|
|
- this.$busEvent.$emit('updateMqttMessage', {
|
|
|
- serialNumber: topics[2],
|
|
|
- data: message
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+const tabChange = (paneName) => {
|
|
|
+ nextTick(() => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- /** Mqtt topics array */
|
|
|
- getMqttTopics(device) {
|
|
|
- // 订阅当前设备状态和实时监测
|
|
|
- const topicService = '/ws/service'
|
|
|
- const topicStatus = '/status/post'
|
|
|
- const topicFunction = '/function/post'
|
|
|
- const topicMonitor = '/monitor/post'
|
|
|
- const topicReply = '/service/reply'
|
|
|
- //订阅mqtt测试
|
|
|
- let messagePost = '/message/post'
|
|
|
- const topics = [
|
|
|
- topicService,
|
|
|
- topicStatus,
|
|
|
- topicFunction,
|
|
|
- topicMonitor,
|
|
|
- topicReply,
|
|
|
- messagePost
|
|
|
- ]
|
|
|
-
|
|
|
- return topics.map((topic) => {
|
|
|
- return `/${device.productId}/${device.serialNumber}${topic}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取子组件订阅的设备状态
|
|
|
- getDeviceStatusData(status) {
|
|
|
- this.form.status = status
|
|
|
- },
|
|
|
+const deviceSynchronizationMethod = () => {
|
|
|
+ // 原 deviceSynchronization 方法改名避免冲突
|
|
|
+ deviceSynchronization(form.serialNumber).then(async (response) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- /** Mqtt取消订阅主题 */
|
|
|
- mqttUnSubscribe(device) {
|
|
|
- const topics = this.getMqttTopics(device)
|
|
|
- this.$mqttTool.unsubscribe(topics)
|
|
|
- },
|
|
|
+const getDeviceMethod = (deviceId) => {
|
|
|
+ // 原 getDevice 方法改名避免冲突
|
|
|
+ getDevice(deviceId).then(async (response) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- /** Mqtt订阅主题 */
|
|
|
- mqttSubscribe(device) {
|
|
|
- const topics = this.getMqttTopics(device)
|
|
|
- this.$mqttTool.subscribe(topics)
|
|
|
- },
|
|
|
- // 获取直播子组件传递的激活选项卡名称
|
|
|
- getPlayerData(data) {
|
|
|
- this.activeName = data.tabName
|
|
|
- this.channelId = data.channelId
|
|
|
- // this.$set(this.form, 'channelId', this.channelId);
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.channelId) {
|
|
|
- this.$refs.deviceLiveStream.channelId = this.channelId
|
|
|
- this.$refs.deviceLiveStream.changeChannel()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /** 选项卡改变事件*/
|
|
|
- tabChange(panel) {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.form.deviceType == 3 && panel.name != 'deviceReturn') {
|
|
|
- if (panel.name === 'sipPlayer') {
|
|
|
- if (this.$refs.deviceVideo && this.$refs.deviceVideo.destroy) {
|
|
|
- this.$refs.deviceVideo.destroy()
|
|
|
- }
|
|
|
- if (this.channelId) {
|
|
|
- if (
|
|
|
- this.$refs.deviceLiveStream &&
|
|
|
- this.$refs.deviceLiveStream.channelId !== undefined
|
|
|
- ) {
|
|
|
- this.$refs.deviceLiveStream.channelId = this.channelId
|
|
|
- }
|
|
|
- this.$refs.deviceLiveStream.changeChannel()
|
|
|
- }
|
|
|
- if (this.$refs.deviceLiveStream.channelId) {
|
|
|
- this.$refs.deviceLiveStream.changeChannel()
|
|
|
- }
|
|
|
- } else if (panel.name === 'sipVideo') {
|
|
|
- if (this.$refs.deviceLiveStream && this.$refs.deviceLiveStream.destroy) {
|
|
|
- this.$refs.deviceLiveStream.destroy()
|
|
|
- }
|
|
|
- if (
|
|
|
- this.$refs.deviceVideo &&
|
|
|
- this.$refs.deviceVideo.channelId !== undefined &&
|
|
|
- this.$refs.deviceVideo.queryDate
|
|
|
- ) {
|
|
|
- this.$refs.deviceVideo.loadDevRecord()
|
|
|
- }
|
|
|
- } else if (panel.name === 'sipChannel') {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.Channel.getList()
|
|
|
- })
|
|
|
- }
|
|
|
- //关闭直播流
|
|
|
- if (
|
|
|
- panel.name !== 'sipPlayer' &&
|
|
|
- this.$refs.deviceLiveStream &&
|
|
|
- this.$refs.deviceLiveStream.playing
|
|
|
- ) {
|
|
|
- this.$refs.deviceLiveStream.closeDestroy(false)
|
|
|
- }
|
|
|
- //关闭录像流
|
|
|
- if (
|
|
|
- panel.name !== 'sipVideo' &&
|
|
|
- this.$refs.deviceVideo &&
|
|
|
- this.$refs.deviceVideo.playing
|
|
|
- ) {
|
|
|
- this.$refs.deviceVideo.closeDestroy()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+const getCacheThingsModdel = (productId) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
- // 获取监测统计数据
|
|
|
- if (panel.name === 'deviceStastic') {
|
|
|
- this.$refs.deviceStatistic.getListHistory()
|
|
|
- } else if (panel.name === 'deviceTimer') {
|
|
|
- this.$refs.deviceTimer.getList()
|
|
|
- } else if (panel.name === 'deviceSub') {
|
|
|
- if (this.form.serialNumber) {
|
|
|
- this.$refs.deviceSub.queryParams.gwDeviceId = this.form.deviceId
|
|
|
- this.$refs.deviceSub.gateway.gwDeviceId = this.form.deviceId
|
|
|
- this.$refs.deviceSub.getList()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- if (this.form.deviceType !== 3) {
|
|
|
- // 用于关闭视频推流（页面切换时候需要关闭推流）
|
|
|
- if (panel.name !== 'inlineVideo') {
|
|
|
- this.$refs.deviceInlineVideo && this.$refs.deviceInlineVideo.handleClose()
|
|
|
- }
|
|
|
- if (panel.name !== 'scada') {
|
|
|
- const scadaRef = this.$refs.deviceScada || {}
|
|
|
- if (scadaRef && scadaRef.$refs && scadaRef.$refs.deviceScada) {
|
|
|
- const copmRef = scadaRef.$refs.deviceScada
|
|
|
- if (copmRef.$refs && copmRef.$refs.spirit) {
|
|
|
- copmRef.$refs.spirit.forEach((item) => {
|
|
|
- if (item.$vnode.tag.includes('ViewInlineVideo')) {
|
|
|
- item.handleCloseJessibuca()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /** 数据同步*/
|
|
|
- deviceSynchronization() {
|
|
|
- deviceSynchronization(this.form.serialNumber).then(async (response) => {
|
|
|
- // 获取缓存物模型
|
|
|
- response.data.cacheThingsModel = await this.getCacheThingsModdel(response.data.productId)
|
|
|
- // 获取设备运行状态
|
|
|
- response.data.thingsModels = await this.getDeviceStatus(this.form)
|
|
|
- // 格式化物模型，拆分出监测值,数组添加前缀
|
|
|
- this.formatThingsModel(response.data)
|
|
|
- this.form = response.data
|
|
|
- // 选项卡切换
|
|
|
- this.activeName = 'runningStatus'
|
|
|
- this.oldDeviceStatus = this.form.status
|
|
|
- this.loadMap()
|
|
|
- })
|
|
|
- },
|
|
|
- /**获取设备详情*/
|
|
|
- getDevice(deviceId) {
|
|
|
- getDevice(deviceId).then(async (response) => {
|
|
|
- // 分享设备获取用户权限
|
|
|
- response.data.userPerms = []
|
|
|
- if (response.data.isOwner == 0) {
|
|
|
- getDeviceUser(deviceId, getUserId()).then((permResponse) => {
|
|
|
- if (permResponse.data) {
|
|
|
- response.data.userPerms = permResponse.data.perms.split(',')
|
|
|
- }
|
|
|
- // 获取设备状态和物模型
|
|
|
- this.getDeviceStatusWitchThingsModel(response)
|
|
|
- })
|
|
|
- } else {
|
|
|
- // 获取设备状态和物模型
|
|
|
- this.getDeviceStatusWitchThingsModel(response)
|
|
|
- }
|
|
|
+const getDeviceStatusMethod = (data) => {
|
|
|
+ // 原 getDeviceStatus 方法改名避免冲突
|
|
|
+ const params = {
|
|
|
+ deviceId: data.deviceId,
|
|
|
+ slaveId: data.slaveId
|
|
|
+ }
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ getDeviceRunningStatus(params)
|
|
|
+ .then((response) => {
|
|
|
+ resolve(response.data.thingsModels)
|
|
|
})
|
|
|
- },
|
|
|
- /**用户是否拥有分享设备权限*/
|
|
|
- // hasShrarePerm(permission) {
|
|
|
- // if (this.form.isOwner == 0) {
|
|
|
- // // 分享设备权限
|
|
|
- // if (this.form.userPerms.indexOf(permission) == -1) {
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return true;
|
|
|
- // },
|
|
|
- /** 获取缓存物模型*/
|
|
|
- getCacheThingsModdel(productId) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- cacheJsonThingsModel(productId)
|
|
|
- .then((response) => {
|
|
|
- resolve(JSON.parse(response.data))
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- reject(error)
|
|
|
- })
|
|
|
+ .catch((error) => {
|
|
|
+ reject(error)
|
|
|
})
|
|
|
- },
|
|
|
- /**获取设备运行状态*/
|
|
|
- getDeviceStatus(data) {
|
|
|
- const params = {
|
|
|
- deviceId: data.deviceId,
|
|
|
- slaveId: data.slaveId
|
|
|
- }
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- getDeviceRunningStatus(params)
|
|
|
- .then((response) => {
|
|
|
- resolve(response.data.thingsModels)
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- reject(error)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- formatThingsModel(data) {
|
|
|
- data.chartList = []
|
|
|
- data.monitorList = []
|
|
|
- data.staticList = []
|
|
|
- // 物模型格式化
|
|
|
- for (let i = 0; i < data.thingsModels.length; i++) {
|
|
|
- // 数字类型设置默认值并转换未数值
|
|
|
- if (
|
|
|
- data.thingsModels[i].datatype.type == 'integer' ||
|
|
|
- data.thingsModels[i].datatype.type == 'decimal'
|
|
|
- ) {
|
|
|
- if (data.thingsModels[i].shadow == '') {
|
|
|
- data.thingsModels[i].shadow = Number(data.thingsModels[i].datatype.min)
|
|
|
- } else {
|
|
|
- data.thingsModels[i].shadow = Number(data.thingsModels[i].shadow)
|
|
|
- }
|
|
|
- if (data.thingsModels[i].value == '') {
|
|
|
- data.thingsModels[i].value = Number(data.thingsModels[i].value)
|
|
|
- }
|
|
|
- }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- // 物模型分类放置
|
|
|
- if (data.thingsModels[i].datatype.type == 'array') {
|
|
|
- if (data.thingsModels[i].datatype.arrayType == 'object') {
|
|
|
- for (let k = 0; k < data.thingsModels[i].datatype.arrayParams.length; k++) {
|
|
|
- for (let j = 0; j < data.thingsModels[i].datatype.arrayParams[k].length; j++) {
|
|
|
- // 数组元素中参数ID添加前缀，例如：array_00_
|
|
|
- let index = k > 9 ? String(k) : '0' + k
|
|
|
- let prefix = 'array_' + index + '_'
|
|
|
- data.thingsModels[i].datatype.arrayParams[k][j].id =
|
|
|
- prefix + data.thingsModels[i].datatype.arrayParams[k][j].id
|
|
|
- // 图表、实时监测、监测统计分类放置
|
|
|
- if (data.thingsModels[i].datatype.arrayParams[k][j].isChart == 1) {
|
|
|
- // 图表
|
|
|
- data.thingsModels[i].datatype.arrayParams[k][j].name =
|
|
|
- '[' +
|
|
|
- data.thingsModels[i].name +
|
|
|
- (k + 1) +
|
|
|
- '] ' +
|
|
|
- data.thingsModels[i].datatype.arrayParams[k][j].name
|
|
|
- data.thingsModels[i].datatype.arrayParams[k][j].datatype.arrayType = 'object'
|
|
|
- data.chartList.push(data.thingsModels[i].datatype.arrayParams[k][j])
|
|
|
- if (data.thingsModels[i].datatype.arrayParams[k][j].isHistory == 1) {
|
|
|
- // 监测统计
|
|
|
- data.staticList.push(data.thingsModels[i].datatype.arrayParams[k][j])
|
|
|
- }
|
|
|
- if (data.thingsModels[i].datatype.arrayParams[k][j].isMonitor == 1) {
|
|
|
- // 实时监测
|
|
|
- data.monitorList.push(data.thingsModels[i].datatype.arrayParams[k][j])
|
|
|
- }
|
|
|
- data.thingsModels[i].datatype.arrayParams[k].splice(j--, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 字符串拆分为物模型数组 model=id/name/type/isReadonly/value/shadow
|
|
|
- let values =
|
|
|
- data.thingsModels[i].value != '' ? data.thingsModels[i].value.split(',') : []
|
|
|
- let shadows =
|
|
|
- data.thingsModels[i].shadow != '' ? data.thingsModels[i].shadow.split(',') : []
|
|
|
- for (let j = 0; j < data.thingsModels[i].datatype.arrayCount; j++) {
|
|
|
- if (!data.thingsModels[i].datatype.arrayModel) {
|
|
|
- data.thingsModels[i].datatype.arrayModel = []
|
|
|
- }
|
|
|
- // 数组里面的ID需要添加前缀和索引，例如：array_00_temperature
|
|
|
- let index = j > 9 ? String(j) : '0' + j
|
|
|
- let prefix = 'array_' + index + '_'
|
|
|
- data.thingsModels[i].datatype.arrayModel[j] = {
|
|
|
- id: prefix + data.thingsModels[i].id,
|
|
|
- name: data.thingsModels[i].name,
|
|
|
- type: data.thingsModels[i].type,
|
|
|
- isReadonly: data.thingsModels[i].isReadonly,
|
|
|
- value: values[j] ? values[j] : '',
|
|
|
- shadow: shadows[j] ? shadows[j] : ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (data.thingsModels[i].datatype.type == 'object') {
|
|
|
- for (let j = 0; j < data.thingsModels[i].datatype.params.length; j++) {
|
|
|
- // 图表、实时监测、监测统计分类放置
|
|
|
- if (data.thingsModels[i].datatype.params[j].isChart == 1) {
|
|
|
- // 图表
|
|
|
- data.thingsModels[i].datatype.params[j].name =
|
|
|
- '[' +
|
|
|
- data.thingsModels[i].name +
|
|
|
- '] ' +
|
|
|
- data.thingsModels[i].datatype.params[j].name
|
|
|
- data.chartList.push(data.thingsModels[i].datatype.params[j])
|
|
|
- if (data.thingsModels[i].datatype.params[j].isHistory == 1) {
|
|
|
- // 监测统计
|
|
|
- data.staticList.push(data.thingsModels[i].datatype.params[j])
|
|
|
- }
|
|
|
- if (data.thingsModels[i].datatype.params[j].isMonitor == 1) {
|
|
|
- // 实时监测
|
|
|
- data.monitorList.push(data.thingsModels[i].datatype.params[j])
|
|
|
- }
|
|
|
- data.thingsModels[i].datatype.params.splice(j--, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (data.thingsModels[i].isChart == 1) {
|
|
|
- // // 图表、实时监测、监测统计分类放置
|
|
|
- data.chartList.push(data.thingsModels[i])
|
|
|
- if (data.thingsModels[i].isHistory == 1) {
|
|
|
- // 监测统计
|
|
|
- data.staticList.push(data.thingsModels[i])
|
|
|
- }
|
|
|
- if (data.thingsModels[i].isMonitor == 1) {
|
|
|
- // 实时监测
|
|
|
- data.monitorList.push(data.thingsModels[i])
|
|
|
- }
|
|
|
- // 使用i--解决索引变更问题
|
|
|
- data.thingsModels.splice(i--, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**加载地图*/
|
|
|
- loadMap() {
|
|
|
- this.$nextTick(() => {
|
|
|
- loadBMap().then(() => {
|
|
|
- this.getmap()
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- /** 返回按钮 */
|
|
|
- goBack() {
|
|
|
- const obj = {
|
|
|
- path: '/iotdev/iot/device',
|
|
|
- query: {
|
|
|
- t: Date.now(),
|
|
|
- pageNum: this.$route.query.pageNum
|
|
|
- }
|
|
|
- }
|
|
|
- this.$tab.closeOpenPage(obj)
|
|
|
- this.reset()
|
|
|
- },
|
|
|
- // 表单重置
|
|
|
- reset() {
|
|
|
- this.form = {
|
|
|
- deviceId: 0,
|
|
|
- deviceName: null,
|
|
|
- productId: null,
|
|
|
- productName: null,
|
|
|
- userId: null,
|
|
|
- userName: null,
|
|
|
- tenantId: null,
|
|
|
- tenantName: null,
|
|
|
- serialNumber: '',
|
|
|
- firmwareVersion: 1.0,
|
|
|
- status: 1,
|
|
|
- rssi: null,
|
|
|
- networkAddress: null,
|
|
|
- networkIp: null,
|
|
|
- longitude: null,
|
|
|
- latitude: null,
|
|
|
- activeTime: null,
|
|
|
- createBy: null,
|
|
|
- createTime: null,
|
|
|
- updateBy: null,
|
|
|
- updateTime: null,
|
|
|
- remark: null,
|
|
|
- locationWay: 1,
|
|
|
- clientId: 0
|
|
|
- }
|
|
|
- this.deviceStatus = 0
|
|
|
- this.resetForm('form')
|
|
|
- },
|
|
|
- /** 提交按钮 */
|
|
|
- async submitForm() {
|
|
|
- if (this.form.serialNumber == null || this.form.serialNumber == 0) {
|
|
|
- this.$modal.alertError(this.t('device.device-edit148398-65'))
|
|
|
- return
|
|
|
- }
|
|
|
- let reg = /^[0-9a-zA-Z]+$/
|
|
|
- if (!reg.test(this.form.serialNumber)) {
|
|
|
- this.$modal.alertError(this.t('device.device-edit148398-66'))
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.form.productId == null || this.form.productId == 0) {
|
|
|
- this.$modal.alertError(this.t('device.device-edit148398-67'))
|
|
|
- return
|
|
|
- }
|
|
|
+const formatThingsModel = (data) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const loadMap = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ loadBMap().then(() => {
|
|
|
+ getmap()
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ const obj = {
|
|
|
+ path: '/iotdev/iot/device',
|
|
|
+ query: {
|
|
|
+ t: Date.now(),
|
|
|
+ pageNum: route.query.pageNum
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // $tab.closeOpenPage 需要相应实现
|
|
|
+ reset()
|
|
|
+}
|
|
|
|
|
|
- this.$refs['form'].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.form.deviceId != 0) {
|
|
|
- updateDevice(this.form).then((response) => {
|
|
|
- if (response.data == 0) {
|
|
|
- this.$modal.alertError(response.msg)
|
|
|
- } else {
|
|
|
- this.$modal.alertSuccess(this.t('device.device-edit148398-68'))
|
|
|
- this.form = JSON.parse(JSON.stringify(this.form))
|
|
|
- this.loadMap()
|
|
|
- //是否设备设置为禁用状态，则踢出设备
|
|
|
- if (this.form.status === 2) {
|
|
|
- const params = { clientId: this.form.serialNumber }
|
|
|
- clientOut(params).then((res) => {})
|
|
|
- }
|
|
|
- }
|
|
|
+const reset = () => {
|
|
|
+ Object.assign(form, {
|
|
|
+ deviceId: 0,
|
|
|
+ deviceName: null,
|
|
|
+ productId: null,
|
|
|
+ productName: null,
|
|
|
+ userId: null,
|
|
|
+ userName: null,
|
|
|
+ tenantId: null,
|
|
|
+ tenantName: null,
|
|
|
+ serialNumber: '',
|
|
|
+ firmwareVersion: 1.0,
|
|
|
+ status: 1,
|
|
|
+ rssi: null,
|
|
|
+ networkAddress: null,
|
|
|
+ networkIp: null,
|
|
|
+ longitude: null,
|
|
|
+ latitude: null,
|
|
|
+ activeTime: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ remark: null,
|
|
|
+ locationWay: 1,
|
|
|
+ clientId: 0
|
|
|
+ })
|
|
|
+ deviceStatus.value = 0
|
|
|
+ // resetForm 需要相应实现
|
|
|
+}
|
|
|
+
|
|
|
+const submitForm = () => {
|
|
|
+ if (form.serialNumber === null || form.serialNumber === 0) {
|
|
|
+ ElMessageBox.alert(t('device.device-edit148398-65'), 'Error', {
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let reg = /^[0-9a-zA-Z]+$/
|
|
|
+ if (!reg.test(form.serialNumber)) {
|
|
|
+ ElMessageBox.alert(t('device.device-edit148398-66'), 'Error', {
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (form.productId === null || form.productId === 0) {
|
|
|
+ ElMessageBox.alert(t('device.device-edit148398-67'), 'Error', {
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ formRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (form.deviceId !== 0) {
|
|
|
+ updateDevice(form).then((response) => {
|
|
|
+ if (response.data === 0) {
|
|
|
+ ElMessageBox.alert(response.msg, 'Error', {
|
|
|
+ type: 'error'
|
|
|
})
|
|
|
} else {
|
|
|
- addDevice(this.form).then(async (response) => {
|
|
|
- // 获取设备状态
|
|
|
- await this.getDeviceStatusWitchThingsModel(response)
|
|
|
- if (this.form.deviceId == null || this.form.deviceId == 0) {
|
|
|
- this.$modal.alertError(this.t('device.device-edit148398-69'))
|
|
|
- } else {
|
|
|
- if (this.form.status == 2) {
|
|
|
- this.deviceStatus = 1
|
|
|
- }
|
|
|
-
|
|
|
- this.$modal.alertSuccess(this.t('device.device-edit148398-70'))
|
|
|
- this.loadMap()
|
|
|
- }
|
|
|
- })
|
|
|
+ ElMessage.success(t('device.device-edit148398-68'))
|
|
|
+ // form = JSON.parse(JSON.stringify(form))
|
|
|
+ loadMap()
|
|
|
+ // 是否设备设置为禁用状态，则踢出设备
|
|
|
+ if (form.status === 2) {
|
|
|
+ const params = { clientId: form.serialNumber }
|
|
|
+ clientOut(params).then((res) => {})
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /** 获取设备状态和物模型 **/
|
|
|
- async getDeviceStatusWitchThingsModel(response) {
|
|
|
- // 获取缓存物模型
|
|
|
- response.data.cacheThingsModel = await this.getCacheThingsModdel(response.data.productId)
|
|
|
- // 获取设备运行状态
|
|
|
- response.data.thingsModels = await this.getDeviceStatus(response.data)
|
|
|
- //分享设备过滤没有权限的物模型
|
|
|
- // if (response.data.isOwner == 0) {
|
|
|
- // for (let i = 0; i < response.data.thingsModels.length; i++) {
|
|
|
- // if (response.data.userPerms.indexOf(response.data.thingsModels[i].id) == -1) {
|
|
|
- // response.data.thingsModels.splice(i--, 1);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // 格式化物模型，拆分出监测值,数组添加前缀
|
|
|
- this.formatThingsModel(response.data)
|
|
|
- this.form = response.data
|
|
|
- // 解析设备摘要
|
|
|
- if (this.form.summary != null && this.form.summary != '') {
|
|
|
- this.summary = JSON.parse(this.form.summary)
|
|
|
- }
|
|
|
- this.oldDeviceStatus = this.form.status
|
|
|
- this.loadMap()
|
|
|
- //Mqtt订阅
|
|
|
- this.connectMqtt()
|
|
|
- },
|
|
|
- /**选择产品 */
|
|
|
- selectProduct() {
|
|
|
- this.$refs.productList.open = true
|
|
|
- this.$refs.productList.getList()
|
|
|
- },
|
|
|
- genSipID() {
|
|
|
- this.$refs.sipidGen.open = true
|
|
|
- },
|
|
|
- /**获取选中的产品 */
|
|
|
- getProductData(product) {
|
|
|
- this.form.productId = product.productId
|
|
|
- this.form.productName = product.productName
|
|
|
- this.form.deviceType = product.deviceType
|
|
|
- this.form.tenantId = product.tenantId
|
|
|
- this.form.tenantName = product.tenantName
|
|
|
- if (product.transport === 'TCP') {
|
|
|
- this.openServerTip = true
|
|
|
- this.serverType = 3
|
|
|
+ })
|
|
|
} else {
|
|
|
- this.openServerTip = false
|
|
|
- this.serverType = 1
|
|
|
+ addDevice(form).then(async (response) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
- getSipIDData(devsipid) {
|
|
|
- this.form.serialNumber = devsipid
|
|
|
- },
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- // 获取选中的用户
|
|
|
- getUserData(user) {},
|
|
|
- /**关闭物模型 */
|
|
|
- openSummaryDialog() {
|
|
|
- let json = {
|
|
|
- type: 1, // 1=扫码关联设备
|
|
|
- deviceNumber: this.form.serialNumber,
|
|
|
- productId: this.form.productId
|
|
|
- // productName: this.form.productName,
|
|
|
- }
|
|
|
- this.qrText = JSON.stringify(json)
|
|
|
- this.openSummary = true
|
|
|
- },
|
|
|
- /**关闭物模型 */
|
|
|
- closeSummaryDialog() {
|
|
|
- this.openSummary = false
|
|
|
- this.openViewMqtt = false
|
|
|
- },
|
|
|
- doCopy(type) {
|
|
|
- if (type == 2) {
|
|
|
- const input = document.createElement('input')
|
|
|
- input.value =
|
|
|
- '{clientId:' +
|
|
|
- this.listQuery.clientId +
|
|
|
- ',username:' +
|
|
|
- this.listQuery.username +
|
|
|
- ',passwd:' +
|
|
|
- this.listQuery.passwd +
|
|
|
- ',port:' +
|
|
|
- this.listQuery.port +
|
|
|
- '}'
|
|
|
- document.body.appendChild(input)
|
|
|
- input.select() //选中输入框
|
|
|
- document.execCommand('Copy') //复制当前选中文本到前切板
|
|
|
- document.body.removeChild(input)
|
|
|
- this.$message.success(this.t('device.device-edit148398-71'))
|
|
|
- }
|
|
|
- },
|
|
|
- openCodeDialog() {
|
|
|
- let json = {
|
|
|
- type: 1, // 1=扫码关联设备
|
|
|
- deviceNumber: this.form.serialNumber,
|
|
|
- productId: this.form.productId,
|
|
|
- productName: this.form.productName
|
|
|
- }
|
|
|
- this.qrText = JSON.stringify(json)
|
|
|
- this.openCode = true
|
|
|
- },
|
|
|
- // 地图定位
|
|
|
- getmap() {
|
|
|
- this.map = new BMap.Map('map')
|
|
|
- let point = null
|
|
|
- if (
|
|
|
- this.form.longitude != null &&
|
|
|
- this.form.longitude != '' &&
|
|
|
- this.form.latitude != null &&
|
|
|
- this.form.latitude != ''
|
|
|
- ) {
|
|
|
- point = new BMap.Point(this.form.longitude, this.form.latitude)
|
|
|
+const getDeviceStatusWitchThingsModel = async (response) => {
|
|
|
+ // 实现保持原样，仅语法调整
|
|
|
+}
|
|
|
+
|
|
|
+const selectProduct = () => {
|
|
|
+ productListRef.value.open = true
|
|
|
+ productListRef.value.getList()
|
|
|
+}
|
|
|
+
|
|
|
+const genSipID = () => {
|
|
|
+ sipidGenRef.value.open = true
|
|
|
+}
|
|
|
+
|
|
|
+const getProductData = (product) => {
|
|
|
+ form.productId = product.productId
|
|
|
+ form.productName = product.productName
|
|
|
+ form.deviceType = product.deviceType
|
|
|
+ form.tenantId = product.tenantId
|
|
|
+ form.tenantName = product.tenantName
|
|
|
+ if (product.transport === 'TCP') {
|
|
|
+ openServerTip.value = true
|
|
|
+ serverType.value = 3
|
|
|
+ } else {
|
|
|
+ openServerTip.value = false
|
|
|
+ serverType.value = 1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getSipIDData = (devsipid) => {
|
|
|
+ form.serialNumber = devsipid
|
|
|
+}
|
|
|
+
|
|
|
+const getUserData = (user) => {}
|
|
|
+
|
|
|
+const openSummaryDialog = () => {
|
|
|
+ let json = {
|
|
|
+ type: 1, // 1=扫码关联设备
|
|
|
+ deviceNumber: form.serialNumber,
|
|
|
+ productId: form.productId
|
|
|
+ }
|
|
|
+ qrText.value = JSON.stringify(json)
|
|
|
+ openSummary.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const closeSummaryDialog = () => {
|
|
|
+ openSummary.value = false
|
|
|
+ openViewMqtt.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const doCopy = (type) => {
|
|
|
+ if (type === 2) {
|
|
|
+ const input = document.createElement('input')
|
|
|
+ input.value =
|
|
|
+ '{clientId:' +
|
|
|
+ listQuery.clientId +
|
|
|
+ ',username:' +
|
|
|
+ listQuery.username +
|
|
|
+ ',passwd:' +
|
|
|
+ listQuery.passwd +
|
|
|
+ ',port:' +
|
|
|
+ listQuery.port +
|
|
|
+ '}'
|
|
|
+ document.body.appendChild(input)
|
|
|
+ input.select() //选中输入框
|
|
|
+ document.execCommand('Copy') //复制当前选中文本到前切板
|
|
|
+ document.body.removeChild(input)
|
|
|
+ ElMessage.success(t('device.device-edit148398-71'))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const openCodeDialog = () => {
|
|
|
+ let json = {
|
|
|
+ type: 1, // 1=扫码关联设备
|
|
|
+ deviceNumber: form.serialNumber,
|
|
|
+ productId: form.productId,
|
|
|
+ productName: form.productName
|
|
|
+ }
|
|
|
+ qrText.value = JSON.stringify(json)
|
|
|
+ openCode.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const getmap = () => {
|
|
|
+ map.value = new BMap.Map('map')
|
|
|
+ let point = null
|
|
|
+ if (
|
|
|
+ form.longitude !== null &&
|
|
|
+ form.longitude !== '' &&
|
|
|
+ form.latitude !== null &&
|
|
|
+ form.latitude !== ''
|
|
|
+ ) {
|
|
|
+ point = new BMap.Point(form.longitude, form.latitude)
|
|
|
+ } else {
|
|
|
+ point = new BMap.Point(116.404, 39.915)
|
|
|
+ }
|
|
|
+ map.value.centerAndZoom(point, 19)
|
|
|
+ map.value.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
|
|
|
+ map.value.addControl(new BMap.NavigationControl())
|
|
|
+
|
|
|
+ // 标注设备位置
|
|
|
+ mk.value = new BMap.Marker(point)
|
|
|
+ map.value.addOverlay(mk.value)
|
|
|
+ map.value.panTo(point)
|
|
|
+}
|
|
|
+
|
|
|
+const generateNum = () => {
|
|
|
+ if (!form.productId || form.productId === 0) {
|
|
|
+ ElMessageBox.alert(t('device.device-edit148398-72'), 'Error', {
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ genDisabled.value = true
|
|
|
+ const params = { type: serverType.value }
|
|
|
+ generatorDeviceNum(params).then((response) => {
|
|
|
+ form.serialNumber = response.data
|
|
|
+ genDisabled.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const handleViewMqtt = () => {
|
|
|
+ openViewMqtt.value = true
|
|
|
+ loading.value = true
|
|
|
+ const params = {
|
|
|
+ deviceId: form.deviceId
|
|
|
+ }
|
|
|
+ getMqttConnect(params).then((response) => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ Object.assign(listQuery, response.data)
|
|
|
+ if (response.data.mqttstats === 1) {
|
|
|
+ if (response.data.fpname === null) {
|
|
|
+ fb.value = '/' + form.productId + '/' + form.serialNumber + '/property/post'
|
|
|
+ } else {
|
|
|
+ fb.value = response.data.fpname
|
|
|
+ }
|
|
|
+ if (response.data.dyname === null) {
|
|
|
+ dy.value = '/' + form.productId + '/' + form.serialNumber + '/function/get'
|
|
|
+ } else {
|
|
|
+ dy.value = response.data.dyname
|
|
|
+ }
|
|
|
} else {
|
|
|
- point = new BMap.Point(116.404, 39.915)
|
|
|
+ fb.value = '/' + form.productId + '/' + form.serialNumber + '/property/post'
|
|
|
+ dy.value = '/' + form.productId + '/' + form.serialNumber + '/function/get'
|
|
|
}
|
|
|
- this.map.centerAndZoom(point, 19)
|
|
|
- this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
|
|
|
- this.map.addControl(new BMap.NavigationControl())
|
|
|
-
|
|
|
- // 标注设备位置
|
|
|
- this.mk = new BMap.Marker(point)
|
|
|
- this.map.addOverlay(this.mk)
|
|
|
- this.map.panTo(point)
|
|
|
- },
|
|
|
- // 生成随机字母和数字
|
|
|
- generateNum() {
|
|
|
- if (!this.form.productId || this.form.productId == 0) {
|
|
|
- this.$modal.alertError(this.t('device.device-edit148398-72'))
|
|
|
- return
|
|
|
- }
|
|
|
- this.genDisabled = true
|
|
|
- const params = { type: this.serverType }
|
|
|
- generatorDeviceNum(params).then((response) => {
|
|
|
- this.form.serialNumber = response.data
|
|
|
- this.genDisabled = false
|
|
|
- })
|
|
|
- },
|
|
|
- //mqtt参数查看
|
|
|
- handleViewMqtt() {
|
|
|
- this.openViewMqtt = true
|
|
|
- this.loading = true
|
|
|
- const params = {
|
|
|
- deviceId: this.form.deviceId
|
|
|
- }
|
|
|
- getMqttConnect(params).then((response) => {
|
|
|
- if (response.code == 200) {
|
|
|
- this.listQuery = response.data
|
|
|
- if (response.data.mqttstats === 1) {
|
|
|
- if (response.data.fpname == null) {
|
|
|
- this.fb = '/' + this.form.productId + '/' + this.form.serialNumber + '/property/post'
|
|
|
- } else {
|
|
|
- this.fb = response.data.fpname
|
|
|
- }
|
|
|
- if (response.data.dyname == null) {
|
|
|
- this.dy = '/' + this.form.productId + '/' + this.form.serialNumber + '/function/get'
|
|
|
- } else {
|
|
|
- this.dy = response.data.dyname
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.fb = '/' + this.form.productId + '/' + this.form.serialNumber + '/property/post'
|
|
|
- this.dy = '/' + this.form.productId + '/' + this.form.serialNumber + '/function/get'
|
|
|
- }
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- })
|
|
|
+ loading.value = false
|
|
|
}
|
|
|
- }
|
|
|
+ })
|
|
|
}
|
|
|
-</script>
|
|
|
+
|
|
|
+// Lifecycle
|
|
|
+onMounted(() => {
|
|
|
+ let activeNameParam = route.query.activeName
|
|
|
+ if (activeNameParam !== null && activeNameParam !== '') {
|
|
|
+ activeName.value = activeNameParam
|
|
|
+ }
|
|
|
+ // 获取设备信息
|
|
|
+ form.deviceId = route.query && route.query.deviceId
|
|
|
+ if (form.deviceId !== 0) {
|
|
|
+ getDeviceMethod(form.deviceId)
|
|
|
+ }
|
|
|
+ isSubDev.value = route.query.isSubDev === 1
|
|
|
+})
|
|
|
+
|
|
|
+onActivated(() => {
|
|
|
+ // 跳转选项卡
|
|
|
+ let activeNameParam = route.query.activeName
|
|
|
+ if (activeNameParam !== null && activeNameParam !== '') {
|
|
|
+ activeName.value = activeNameParam
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ // 取消订阅主题
|
|
|
+ mqttUnSubscribe(form)
|
|
|
+})
|
|
|
+</script>
|
