喀左大屏改造,追加监控轮播大屏组件

components/AiMonitorCarousel.vue

@@ -1,6 +1,9 @@
 <script>
+import AiMonitor from "./AiMonitor/AiMonitor.vue";
+
 export default {
   name: "AiMonitorCarousel",
+  components: {AiMonitor},
   props: {
     list: {default: () => []}
   }
@@ -10,11 +13,19 @@ export default {
 <template>
   <section class="AiMonitorCarousel">
     <el-carousel height="100%" indicator-position="none" arrow="hover">
-
+      <el-carousel-item v-for="item in list" :key="item.id">
+        <ai-monitor :src="item.src" :type="item.monitorType"/>
+      </el-carousel-item>
     </el-carousel>
   </section>
 </template>
 
 <style scoped lang="scss">
+.AiMonitorCarousel {
+  height: 100%;
 
+  .el-carousel {
+    height: inherit;
+  }
+}
 </style>

packages/bigscreen/designer/components/DataConfig.vue

@@ -46,6 +46,34 @@
       </ai-fold>
       <el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
     </template>
+    <template v-else-if="options.type=='monitorCarousel'">
+      <config-item label="监控列表">
+        <el-button type="text" icon="el-icon-plus" @click="options.list.push({})"/>
+      </config-item>
+      <el-table size="mini" :data="options.list" border :row-style="{backgroundColor:'transparent'}">
+        <el-table-column label="监控类型">
+          <template v-slot="{row}">
+            <ai-select size="mini" v-model="row.monitorType" :select-list="monitorTypes"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="监控地址">
+          <template v-slot="{row}">
+            <el-input v-if="['hik','dahua'].includes(row.monitorType)" size="mini" v-model="row.src" clearable/>
+            <div v-else-if="['cmcc','slw'].includes(row.monitorType)">
+              <el-input size="mini" v-model="row.api" clearable placeholder="请输入监控列表接口"/>
+              <ai-select v-model="row.did" :instance="instance" @change="handleMonitor(row)" size="mini"
+                         :prop="{label:'name'}" :condition="e=>!!e.name&&!!e.id" class="mar-t8" :action="row.api"/>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column width="60px" label="操作">
+          <template v-slot="{row,i}">
+            <el-button type="text" @click="$confirm('是否删除该监控?').then(()=>options.list.splice(i,1))">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
     <div class="layout-config__group" v-else-if="['hik','dahua'].includes(options.monitorType)">
       <h2>基础设置</h2>
       <config-item label="视频地址">
@@ -136,9 +164,12 @@ import 'brace/theme/monokai';
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import AiFold from "dui/packages/layout/AiFold.vue";
 import ChartPicker from "./chartPicker.vue";
-import {DvCompData} from "../config";
+import {DvCompData, monitorTypes} from "../config";
 import ConfigItem from "./configItem.vue";
 import DatasourcePicker from "./datasourcePicker.vue";
+import Template from "../../../../project/sass/apps/AppAskForm/components/Template.vue";
+import TableInputColumn from "../../../xbot/AppWorkOrderXbot/components/TableInputColumn.vue";
+import AiSelect from "dui/packages/basic/AiSelect.vue";
 
 export default {
   name: 'dataConfig',
@@ -160,7 +191,8 @@ export default {
       list: [],
       showMapEditor: false,
       form: {},
-      datasource: {}
+      datasource: {},
+      monitorTypes
     }
   },
   computed: {
@@ -169,6 +201,9 @@ export default {
     isPlot: v => v.options.type == 'plot'
   },
   components: {
+    AiSelect,
+    TableInputColumn,
+    Template,
     DatasourcePicker,
     ConfigItem,
     ChartPicker,
@@ -183,6 +218,9 @@ export default {
       this.$emit("change", values)
     } else if (this.isTable) {
       this.json = JSON.stringify(this.options.tableConfig)
+    } else if (this.options.type == "monitorCarousel") {
+      const {list = []} = this.options
+      this.$set(this.options, 'list', list)
     } else if (this.isPlot) {
       this.options.charts = this.options.charts.map(e => ({...e, ds: e}))
     }
@@ -222,6 +260,13 @@ export default {
         }
       })
     },
+    handleMonitor(row) {
+      this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${row.did}`).then(res => {
+        if (res.code == 0) {
+          this.$set(row, 'src', JSON.parse(res.data).url)
+        }
+      })
+    },
     onChooseChange() {
       let arr = []
       if (this.options.dataX && this.options.dataY.length) {
@@ -387,5 +432,31 @@ export default {
     text-align: right;
     margin-left: 30px;
   }
+
+  .el-table {
+    background-color: transparent;
+
+    tr {
+      background-color: transparent;
+    }
+
+    .el-table__cell {
+      color: white;
+      background-color: #1D2127 !important;
+
+      input:disabled {
+        background-color: transparent;
+        border-color: transparent;
+        color: white;
+        padding: 0;
+      }
+
+      &:last-of-type {
+        border-left: 1px solid #fff;
+      }
+    }
+  }
 }
+
+
 </style>

packages/bigscreen/designer/components/componentConfig.vue

@@ -56,12 +56,7 @@
         <div class="layout-config__item" v-if="config.type === 'monitor'">
           <label>视频类型</label>
           <div class="layout-config__item--right">
-            <el-select size="mini" v-model="config.monitorType" placeholder="请选择" clearable>
-              <el-option label="中国移动" value="cmcc"></el-option>
-              <el-option label="海康威视" value="hik"></el-option>
-              <el-option label="大华" value="dahua"></el-option>
-              <el-option label="视联网" value="slw"></el-option>
-            </el-select>
+            <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
           </div>
         </div>
         <div class="layout-config__item" v-if="config.type === 'AiRanking'">
@@ -235,7 +230,7 @@
 <script>
 import ConfigItem from "./configItem.vue";
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
-
+import {monitorTypes} from "../config";
 export default {
   name: 'componentConfig',
   components: {AiDialogBtn, ConfigItem},
@@ -256,7 +251,8 @@ export default {
         {label: '是', value: '1'},
         {label: '否', value: '0'}
       ],
-      dialog: {}
+      dialog: {},
+      monitorTypes
     }
   },
 }

packages/bigscreen/designer/config.js

@@ -799,3 +799,13 @@ export class DvCompData {
     })
   }
 }
+
+/**
+ * 监控类型
+ */
+export const monitorTypes = [
+  {dictName: "中国移动", dictValue: "cmcc"},
+  {dictName: "海康威视", dictValue: "hik"},
+  {dictName: "大华", dictValue: "dahua"},
+  {dictName: "视联网", dictValue: "slw"},
+]

ui/lib/styles/common.scss

@@ -23,7 +23,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   }
 }
 
-@each $v in (8, 10, 12, 14, 16, 20, 24, 32, 48, 56, 64, 80) {
+@each $v in (8, 10, 12, 14, 16, 20, 24, 27, 32, 48, 56, 64, 80) {
   //gap
   .gap-#{$v} {
     gap: #{$v}px

ui/packages/basic/AiSelect.vue

@@ -59,7 +59,8 @@ export default {
       default: () => ({})
     },
     filterable: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    condition: Function
   },
   data() {
     return {
@@ -89,11 +90,11 @@ export default {
   },
   methods: {
     getOptions() {
-      this.instance?.post(this.action, null, {
+      this.action && this.instance?.post(this.action, null, {
         params: {size: 999}
       }).then(res => {
         if (res?.data) {
-          this.options = res.data.records || res.data
+          this.options = (res.data.records || res.data || []).filter(e => !this.condition || this.condition(e))
         }
       }).then(() => this.handleSelect())
     },