Your Name
2022-09-05 eafc031e3e6e48778d22b5455358273714944012
src/views/riskWarningSys/warningBigScreen/components/monitor.vue
对比新文件
@@ -0,0 +1,104 @@
<template>
   <div class="charts-cont">
      <div class="monitor" :id="monitor">
         <div>
            <img src="../../../../assets/warningScreen/video.png">
         </div>
      </div>
   </div>
</template>
<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
   interface stateType {
   }
   export default defineComponent({
      name: 'monitor',
      components: {},
      props:['allData'],
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const monitor = ref("eChartMon" + Date.now() + Math.random())
         const state = reactive<stateType>({
         })
         // 页面载入时执行方法
         onMounted(() => {
         });
         return {
            monitor,
            Search,
            ...toRefs(state)
         };
      },
   });
</script>
<style scoped lang="scss">
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5%;
      position: relative;
      .monitor{
         width: 100%;
         height: 100%;
         position: relative;
         border-radius: 8px;
         overflow: hidden;
         img{
            display: block;
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
         }
      }
   }
   .home-container {
      height: 100%;
      overflow: hidden;
      position: relative;
      .el-row{
         margin-bottom: 20px;
      }
      .el-row:last-child {
         margin-bottom: 0;
      }
      .el-input{
         width: 100% !important;
      }
      .el-date-editor::v-deep{
         width: 100%;
      }
      .el-select{
         width: 100%;
      }
      .el-cascader{
         width: 100% !important;
      }
   }
</style>