|
|
@@ -0,0 +1,258 @@
|
|
|
+ <template>
|
|
|
+ <div class="video-setting">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <tree></tree>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <test v-model="queryParams" :form-config="queryForm"></test>
|
|
|
+
|
|
|
+ <el-table :data="tableList" v-loading="loading">
|
|
|
+ <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" />
|
|
|
+ <el-table-column :label="$t('management.video_setting.title')" align="center" prop="title" />
|
|
|
+ <el-table-column :label="$t('management.video_setting.status')" align="center" prop="status" />
|
|
|
+ <el-table-column :label="$t('management.video_setting.duration')" align="center" prop="duration" width="120" />
|
|
|
+ <el-table-column :label="$t('management.video_setting.size')" align="center" prop="size" width="120" />
|
|
|
+ <el-table-column :label="$t('create_time')" align="center" prop="create_time" />
|
|
|
+ <el-table-column :label="$t('update_time')" align="center" prop="update_time" width="120" />
|
|
|
+ <el-table-column :label="$t('operation')" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="handleDelete(scope.row)">{{ $t('delete') }} </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
+
|
|
|
+ <el-dialog title="添加设备" v-if="open" :visible.sync="open" width="30%">
|
|
|
+ <test ref="test" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
|
|
|
+ </el-dialog>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import * as API from '@/api/management/video-setting.js'
|
|
|
+ import * as APISelect from '@/api/Internet-of-things/select.js'
|
|
|
+ import test from '@/components/form-test/index.vue'
|
|
|
+ import tree from './tree.vue'
|
|
|
+ export default {
|
|
|
+ name: 'equipment-management',
|
|
|
+ components: { test,tree },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ keyword: '',
|
|
|
+ tdaApplicationId: '',
|
|
|
+ tdaProductId: '',
|
|
|
+ },
|
|
|
+
|
|
|
+ queryForm: {
|
|
|
+ keyword: {
|
|
|
+ label: this.$t('management.video_setting.keyword'),
|
|
|
+ span: 6,
|
|
|
+ },
|
|
|
+ tdaApplicationId: {
|
|
|
+ label: this.$t('management.video_setting.tdaApplicationId'),
|
|
|
+ span: 6,
|
|
|
+ type: 'select',
|
|
|
+ data: [],
|
|
|
+ keyName: 'id',
|
|
|
+ labelName: 'appName',
|
|
|
+ },
|
|
|
+ tdaProductId: {
|
|
|
+ label: this.$t('management.video_setting.tdaProductId'),
|
|
|
+ span: 6,
|
|
|
+ type: 'select',
|
|
|
+ data: [],
|
|
|
+ keyName: 'id',
|
|
|
+ labelName: 'name',
|
|
|
+ },
|
|
|
+ operation: {
|
|
|
+ // 搜索按钮操作
|
|
|
+ query: () => {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 重置按钮操作
|
|
|
+ reset: () => {
|
|
|
+ this.queryParams = { pageNum: 1, pageSize: 10, keyword: '', tdaApplicationId: '', name: '' }
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ otherButton: {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: this.$t('management.video_setting.addEquipment'),
|
|
|
+ methodsText: 'add',
|
|
|
+ type: 'primary',
|
|
|
+ add: () => {
|
|
|
+ this.handleAdd()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tableList: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ open: false,
|
|
|
+ title: '',
|
|
|
+ dialogParams: {
|
|
|
+ tdaApplicationId: '',
|
|
|
+ tdaProductId: '',
|
|
|
+ nodeId: '',
|
|
|
+ deviceName: '',
|
|
|
+ secret: 'Fjhx@2012#',
|
|
|
+ },
|
|
|
+ dialogForm: {
|
|
|
+ loadingStatus: false,
|
|
|
+ tdaApplicationId: {
|
|
|
+ label: this.$t('management.video_setting.applicationName'),
|
|
|
+ type: 'select',
|
|
|
+ data: [],
|
|
|
+ keyName: 'id',
|
|
|
+ labelName: 'appName',
|
|
|
+ },
|
|
|
+ tdaProductId: {
|
|
|
+ label: this.$t('management.video_setting.productName'),
|
|
|
+ type: 'select',
|
|
|
+ data: [],
|
|
|
+ keyName: 'id',
|
|
|
+ labelName: 'name',
|
|
|
+ },
|
|
|
+ deviceName: {
|
|
|
+ label: this.$t('management.video_setting.deviceName'),
|
|
|
+ },
|
|
|
+ nodeId: {
|
|
|
+ label: this.$t('management.video_setting.nodeId'),
|
|
|
+ span: 2,
|
|
|
+ },
|
|
|
+ secret: {
|
|
|
+ label: this.$t('management.video_setting.secret'),
|
|
|
+ disabled: true,
|
|
|
+ span: 2,
|
|
|
+ },
|
|
|
+ otherButton: {
|
|
|
+ align: 'center',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: this.$t('cancelText'),
|
|
|
+ methodsText: 'cancel',
|
|
|
+ cancel: () => {
|
|
|
+ this.open = false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.$t('submitText'),
|
|
|
+ methodsText: 'submit',
|
|
|
+ type: 'primary',
|
|
|
+ submit: () => {
|
|
|
+ this.handleSubmit()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dialogRules: {
|
|
|
+ tdaApplicationId: [{ required: true, message: this.$t('management.video_setting.tdaApplicationIdRules'), trigger: 'change' }],
|
|
|
+ tdaProductId: [{ required: true, message: this.$t('management.video_setting.tdaProductIdRules'), trigger: 'change' }],
|
|
|
+ deviceName: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
|
|
|
+ nodeId: [{ required: true, message: this.$t('management.video_setting.nodeIdRules'), trigger: 'blur' }],
|
|
|
+ secret: [{ required: true, message: this.$t('management.video_setting.secretRules'), trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //this.getSelectList()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ this.getTree()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ API.videoInfoPage(this.queryParams).then(
|
|
|
+ (res) => {
|
|
|
+ this.total = res.data.data.total
|
|
|
+ this.tableList = res.data.data.records
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log('tdaDevicePage: ' + err)
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ )
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.dialogParams = {
|
|
|
+ tdaApplicationId: '',
|
|
|
+ tdaProductId: '',
|
|
|
+ nodeId: '',
|
|
|
+ deviceName: '',
|
|
|
+ secret: 'Fjhx@2012#',
|
|
|
+ }
|
|
|
+ this.open = true
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ this.$refs.test.$refs['form'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.dialogForm.loadingStatus = true
|
|
|
+ API.videoInfoAdd(this.dialogParams).then(
|
|
|
+ () => {
|
|
|
+ this.msgSuccess(this.$t('addSuccess'))
|
|
|
+ this.open = false
|
|
|
+ this.dialogForm.loadingStatus = false
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log('tdaDeviceAdd: ' + err)
|
|
|
+ this.dialogForm.loadingStatus = false
|
|
|
+ },
|
|
|
+ )
|
|
|
+ // } else {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // const errorDiv = document.getElementsByClassName('is-error')
|
|
|
+ // errorDiv[0].scrollIntoView()
|
|
|
+ // }, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm(this.$t('askDeleteData'), {
|
|
|
+ confirmButtonText: this.$t('submitText'),
|
|
|
+ cancelButtonText: this.$t('cancelText'),
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ API.videoInfoDelete({ id: row.id }).then(() => {
|
|
|
+ this.msgSuccess(this.$t('deleteSuccess'))
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+
|
|
|
+ .box-card {
|
|
|
+ height: calc(100vh - 110px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
asd26269546