feat:视频预览模块初始新增，页面初始布局。

<template>

    <div class="app-container home">

      <TabTitle :text="nowText" />

      <el-row :gutter="10">

        <el-col :xs="0" :sm="2" :md="3" :lg="4">

          <el-card class="left-list">

            <div class="head-container">

               <el-input

                  v-model="deptName"

                  placeholder="请输入部门名称"

                  clearable

                  prefix-icon="Search"

                  style="margin-bottom: 20px"

               />

            </div>

            <div class="head-container">

               <el-tree

                  :data="deptOptions"

                  :props="{ label: 'label', children: 'children' }"

                  :expand-on-click-node="false"

                  :filter-node-method="filterNode"

                  ref="deptTreeRef"

                  node-key="id"

                  highlight-current

                  default-expand-all

                  @node-click="handleNodeClick"

               />

            </div> 

          </el-card>

        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16">

          <el-scrollbar height="700px">

            <el-card class="right-list">

            <template v-slot:header>

              <div class="cleartitle" style="justify-content: flex-start">

                <img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>视频预览</span>

              </div>

            </template>

            <el-row :gutter="10" class="mb8">

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                     @click="handleUpdate"

                  >一分屏</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                     @click="handleUpdate"

                  >四分屏</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                     @click="handleDelete"

                  >六分屏</el-button>

               </el-col>

            </el-row>

            <div class="alg-list">

              <el-card  v-for="item in algorithmList" :key="item.name" class="alg-item" shadow="hover">

                <template v-slot:header>

                  <div class="cleartitle">

                    <span>{{item.name}}</span>

                    <el-tag

                      :type="'success'"

                      effect="dark"

                    >

                      {{ 'success'}}

                    </el-tag>

                  </div>

                </template>

                <template v-slot:default >

                  <img

                    src="@/assets/images/picStream.png"

                    style="width: 100%"

                  />

                  <p style="color: #999999;font-size: 12px;">

                    通过摄像头识别吸烟行为的智能算法

                  </p>

                  <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >

                    <el-button link type="primary" icon="Edit" @click="handleUpdate(item)" >修改</el-button>

                    <el-button link type="primary" icon="Delete" @click="handleDelete(item)">删除</el-button>

                    <el-dropdown trigger="click" @command="handleSetSize">

                      <el-button link type="primary">

                        <el-icon class="el-icon--right">

                        <arrow-down />

                      </el-icon>更多</el-button>

                      <template #dropdown>

                        <el-dropdown-menu>

                          <el-dropdown-item :command="'卸载'">

                            {{ '卸载' }}

                          </el-dropdown-item>

                          <el-dropdown-item :command="'导入'">

                            {{ '导入' }}

                          </el-dropdown-item>

                          <el-dropdown-item :command="'下载'">

                            {{ '下载' }}

                          </el-dropdown-item>

                        </el-dropdown-menu>

                      </template>

                    </el-dropdown>

                  </div>

                </template>

              </el-card>

            </div>

          </el-card>

          </el-scrollbar>

        </el-col>

        <el-col :xs="0" :sm="2" :md="3" :lg="4">

          <el-card class="left-list">

            <template v-slot:header>

              <div class="cleartitle" style="justify-content: flex-start">

                <img src="@/assets/images/logo_video.png" width="25px" alt="">  <span>实时预警</span>

              </div>

            </template>

          </el-card>

        </el-col>

      </el-row>

    </div>

</template>

<script setup name="Index">

  import { ArrowDown } from '@element-plus/icons-vue'

  import { Search } from '@element-plus/icons-vue'

  const { proxy } = getCurrentInstance();

  const algFormRef = ref(null)

  const nowText=ref('视频预览')

  const deptName = ref("");

  const algorithmList=reactive([

    {

      name:"我的算法",

      value:1

    },

    {

      name:"最新算法",

      value:2

    },

    {

      name:"基础算法",

      value:3

    },

    {

      name:"智慧煤矿",

      value:4

    },

    {

      name:"智慧能源",

      value:5

    },

    {

      name:"智慧校园",

      value:6

    },

    {

      name:"智慧港口",

      value:7

    },

    {

      name:"智慧煤矿",

      value:8

    },

    {

      name:"智慧能源",

      value:9

    },

    {

      name:"智慧校园",

      value:10

    },

  ])

  const data = reactive({

    form: {},

    queryParams: {

      postCode: undefined,

      searchValue: '',

      status: undefined

    },

    rules: {

      postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],

      postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],

      postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],

    }

  });

  const { queryParams, form, rules } = toRefs(data);

  // function closeNow(){

  //     const routerArr=useTagsViewStore().visitedViews

  //     const nowPath=location.pathname

  //     return routerArr.filter(item=>{return item.path==nowPath })[0]

  // }

  // setTimeout(() => {

  //   nowText=closeNow()

  // }, 500);

  // function goTarget(url) {

  //   window.open(url, '__blank')

  // }

  function handAdd(row){

    algFormRef.value.handleAdd()

  }

  function handleSetSize(row) {

    console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)

    // reset();

    // const postId = row.postId || ids.value;

    // getPost(postId).then(response => {

    //   form.value = response.data;

    //   open.value = true;

    //   title.value = "修改岗位";

    // });

  }

  function handleUpdate(row) {

    // reset();

    // const postId = row.postId || ids.value;

    // getPost(postId).then(response => {

    //   form.value = response.data;

    //   open.value = true;

    //   title.value = "修改岗位";

    // });

  }

  /** 删除按钮操作 */

  function handleDelete(row) {

    // const postIds = row.postId || ids.value;

    // proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {

    //   return delPost(postIds);

    // }).then(() => {

    //   getList();

    //   proxy.$modal.msgSuccess("删除成功");

    // }).catch(() => {});

  }

  </script>

  <style scoped lang="scss">

   .left-list{

    min-height: 700px;

   }

   .right-list{

    min-height: 700px;

    .alg-list{

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

      gap: 16px;

      .alg-item{

        width: 100%;

        min-height: 350px;

        cursor: pointer;

        position: relative;

      }

    }

   }

   .cleartitle{

    font-size: 16px;

    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center

  }

  </style>

 No newline at end of file