操作台

--- a/src/views/MaxScreen/index.scss
+++ b/src/views/MaxScreen/index.scss
@@ -0,0 +1,170 @@
 .box{
  width: 100vw;
  height: 100vh;
  color:  skyblue;
  background-image: url('../../assets/pageBg.png');
 }
 .titel{
  height: 110px;
  width: 100%;
  font-size: 38px;
  text-align: center;
  line-height: 80px;
  color: #00e4ff;
  position:relative;
 }
 .titel-line{
   background-image: url('../../assets/top-image/y2.png');
   position: absolute;
    width: 610px;
    height: 6px;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    background-repeat: no-repeat;
    text-align: center;
 }
 .titel-zjdh{
  position: absolute;
  width: 700px;
  height: 40px;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 20px;
  margin: auto;
  stroke: #00e4ff;
 }
 .titel-first-bg{
  background-image: url('../../assets/top-image/middle.png');
  position: absolute;
  background-size: 100% 100%;
  width: 659px;
  height: 78px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  
 }

 .titel-tow-bg{
  background-image: url('../../assets/top-image/direction.png');
  position: absolute;
  background-size: 100% 100%;
  width: 937px;
  height: 107px;
  left: 0;
  right: 0;
  bottom: -12px;
  margin: auto;
 }
 .titel-left-bg{
  background-image: url('../../assets/top-image/tleft.png');
  position: absolute;
  background-size: 100% 100%;
  width: 964px;
  height: 45px;
  bottom: 0px;
  right: 51%;
 }
 .titel-right-bg{
  background-image: url('../../assets/top-image/tright.png');
  position: absolute;
  background-size: 100% 100%;
  background-repeat:repeat;
  width: 964px;
  height: 45px;
  bottom: 0px;
  left:51%;
 }
 .dh-left{
  background-image: url('../../assets/top-image/top_h.png');
  position: absolute;
  background-size: 100% ;
  height: 71px;
  width: 490px;
  right: 50%;
  bottom: -5px;
 }

 .dh-right{
  background-image: url('../../assets/top-image/top_h.png');
  position: absolute;
  background-size: 100% ;
  height: 71px;
  width: 490px;
  left: 50%;
  bottom: -5px;
 }

 .titel-border-le{
  position: absolute;
  background-size: 100% 100%;
  background-repeat:repeat;
  bottom: 23px;
  // width: calc(100vw/2.75);
  left:0;
  right: 59%;
  border: 0.5px solid rgb(18, 194, 238);
 }

 .titel-border-re{
  position: absolute;
  background-size: 100% 100%;
  background-repeat:repeat;
  bottom: 21.5px;
  // width: calc(100vw/2.75);
  right:0px;
  left: 59%;
  border: 0.5px solid rgb(18, 194, 238);
 }

 .main-box{
  width: 100%;
  display: flex;
  height: calc(100vh - 30px);
  flex-direction: row;
  padding: 5px;
 }
 .main-left{
   flex: 1;
  //  border: 1px solid blue;
 }
 .main-center{
  flex: 1;
  top: 0;
 // border: 1px solid blue;
 }
 .main-right{
  flex: 1;
  //border: 1px solid blue;
 }
 .titel-time{
  position:fixed;
  top: 10px;
  right: 30px;
 
 }

 .row{
  display: flex;
  flex-direction: row;
 }
 .col{
  display: flex;
  flex-direction: column;
 }


 .dvborder-item{
  position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
 }

--- a/src/views/MaxScreen/index.tsx
+++ b/src/views/MaxScreen/index.tsx
@@ -0,0 +1,137 @@
 import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  renderSlot,
 } from 'vue';
 import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
 import PublicCom from '../../components/PublicCom/index'
 import { title, subtitle, moduleInfo } from '@/constant'
 import dayjs from 'dayjs'
 import './index.scss'
 import TweenMax from 'gsap'

 export default defineComponent({
  setup() {
    //#region 申明变量
    const login = ref<boolean>(true)
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })
    //#endregion

    //#region 调用函数
    // 生命周期
    onMounted(() => {
      handleTime();
      tweenmax();
    });
    //组件实例被卸载之前调用
    onBeforeUnmount(() => {
      clearInterval(timeInfo.setInterval)
    });

    //todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }
    //todo 处理时间监听 1s执行一次
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
        console.log(loading.value);
      }, 1000)
    }
    //todo 动画
    const tweenmax = () => {
      TweenMax.to('.dh-left', 2, { x: -1000, repeat: -1 });
      TweenMax.to('.dh-right', 2, { x: 1000, repeat: -1 });
    };

    //Login
    const LoginFunc = () => {
      login.value=false;
      cancelLoading();
    }
    //#endregion

    //#region 返回界面结构
    return () => {
      return (
        <dv-full-screen-container>
          <div class="box">
            {login.value ? <div>我是登录
              <button onClick={LoginFunc}>登录</button>
            </div> : (<div>
              {loading.value ? <dv-loading >Loading...</dv-loading> : (
              <div>
                {/* <!-- 标题 --> */}
                <div class="titel">
                  {/* 时间显示 */}
                  <dv-decoration-5 class='titel-zjdh' dur='4' />
                  <div class='titel-time' v-if='loading.value=false'>
                    <div>{timeInfo.dateYear} {timeInfo.dateDay} {timeInfo.dateWeek}</div>
                  </div>
                  <div class="titel-right-bg"></div>
                  <div class="titel-left-bg"></div>
                  <div class="titel-tow-bg"></div>
                  <div class="titel-first-bg"></div>
                  <div class="titel-line"></div>

                  <div class="titel-border-le"></div>
                  <div class="titel-border-re"></div>
                  {/* 动画组件 */}
                  <div class="dh-left"></div>
                  <div class="dh-right"></div>
                  <div>{title}</div>
                </div>
                {/* <!-- 下面部分 --> */}
                <div class="main-box">
                  {/* <!-- 左边 --> */}
                  <div class="main-left">
                    <PublicCom title='测试'>
                      {{
                        children: () => {
                          return (
                            <div>
                              <div id='bzt' style="width: 100%;height:400px;">

                              </div>
                            </div>
                          )
                        }
                      }}
                    </PublicCom>
                  </div>
                  {/* <!-- 中间 --> */}
                  <div class="main-center">
                  </div>
                  {/* <!-- 右边 --> */}
                  <div class="main-right">
                  </div>
                </div>
              </div>
            )}
            </div>)}
          </div>
        </dv-full-screen-container>
      );
    }
    //#endregion
  }
 });

--- a/+ 0
+++ b/+ 0
--- a/src/views/OperationConsole/ChargeMixture/MianView/index.tsx
+++ b/src/views/OperationConsole/ChargeMixture/MianView/index.tsx
@@ -0,0 +1,33 @@
 import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onBeforeUnmount,
    renderSlot,
  } from 'vue';


  export default defineComponent({
    //启动时候
    setup() {
      /** 
      *
      *子组件实例
      *
      */
      const FxcxRef = ref<any>()
      // 生命周期
      onMounted(() => {
        
      })
      return () => {
        return (
          <div id='mianView'></div>
        );
      }
    }
  
  });
  
  
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.tsx"],
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
Upphovsman	SHA1	Meddelande	Datum
NXX	9fa8c10bd0	操作台	1 år sedan
NXX	9b48fddde9	操作台	1 år sedan