flx：工作票新增风险状态

src/router/index.js

@@ -4695,6 +4695,12 @@ const routes2 = [{
         component: (resolve) =>
             require(["@/views/companyAdmin/companyBigScreen/aIEarlyWarn/index.vue"], resolve),
     },
+    {
+        path: "/companyAdmin/highRiskOperation",
+        name: "highRiskOperation",
+        component: (resolve) =>
+            require(["@/views/companyAdmin/companyBigScreen/highRiskOperation/index.vue"], resolve),
+    },
     {
         path: "/companyAdmin/videoSurveillance",
         name: "videoSurveillance",

src/views/companyAdmin/companyBigScreen/components/header.vue

@@ -1,54 +1,60 @@
 <template>
-  <div class="header-wrap">
-    <div class="left-text">
-      <div class="left-text_title">
-        <img
-          @click="handleEdit"
-          class="edit-icon"
-          src="@/assets/images/companyBigScreen/card-edit-icon.png"
-          alt="icon"
-        />
-        {{customInfo.name || '智慧工地企业版数据大屏'}}
-      </div>
-      <div
-        class="left-text_image"
-        @click="onRouterLink('/companyAdmin/terminalOperation')"
-      >
-        运营场站
-      </div>
-      <div
-        class="left-text_image"
-        @click="onRouterLink('/companyAdmin/videoSurveillance')"
-      >
-        视频监控
-      </div>
-      <div
-        class="left-text_image"
-        @click="onRouterLink('/companyAdmin/aIEarlyWarn')"
-      >
-        AI预警
-      </div>
-    </div>
-    <!-- <div class="nav-list">
+    <div class="header-wrap">
+        <div class="left-text">
+            <div class="left-text_title">
+                <img
+                    @click="handleEdit"
+                    class="edit-icon"
+                    src="@/assets/images/companyBigScreen/card-edit-icon.png"
+                    alt="icon"
+                />
+                {{ customInfo.name || "智慧工地企业版数据大屏" }}
+            </div>
+            <div
+                class="left-text_image"
+                @click="onRouterLink('/companyAdmin/terminalOperation')"
+            >
+                运营场站
+            </div>
+            <div
+                class="left-text_image"
+                @click="onRouterLink('/companyAdmin/videoSurveillance')"
+            >
+                视频监控
+            </div>
+            <div
+                class="left-text_image"
+                @click="onRouterLink('/companyAdmin/aIEarlyWarn')"
+            >
+                AI预警
+            </div>
+            <div
+                class="left-text_image"
+                @click="onRouterLink('/companyAdmin/highRiskOperation')"
+            >
+                高风险作业
+            </div>
+        </div>
+        <!-- <div class="nav-list">
       <div class="nav-item" :class="{ 'nav-active': pageIndex == 1 }" @click="changeNav(1)">集团中心</div>
       <div class="nav-item right-nav" :class="{ 'nav-active': pageIndex == 2 }">视频中心</div>
     </div> -->
-    <div class="right-box">
-      <span class="date">{{ nowDate }}</span>
-      <span class="time"><i class="el-icon-time"></i>{{ nowTime }}</span>
-      <div class="weather-box">
-        <div class="line"></div>
-        <span>{{ weatherInfo.tem }}℃</span>
-        <span>{{ weatherInfo.wea }}</span>
-      </div>
-      <div class="close-btn" @click="closeFn">
-        <i class="el-icon-switch-button"></i>
-        <span>退出</span>
-        <!-- <img src="@/assets/images/bigScreen/icon-close.png" /> -->
-      </div>
+        <div class="right-box">
+            <span class="date">{{ nowDate }}</span>
+            <span class="time"><i class="el-icon-time"></i>{{ nowTime }}</span>
+            <div class="weather-box">
+                <div class="line"></div>
+                <span>{{ weatherInfo.tem }}℃</span>
+                <span>{{ weatherInfo.wea }}</span>
+            </div>
+            <div class="close-btn" @click="closeFn">
+                <i class="el-icon-switch-button"></i>
+                <span>退出</span>
+                <!-- <img src="@/assets/images/bigScreen/icon-close.png" /> -->
+            </div>
+        </div>
+        <HeaderDialog ref="headerDialogRef" @refresh="getDeviceConfig" />
     </div>
-    <HeaderDialog ref="headerDialogRef" @refresh="getDeviceConfig" />
-  </div>
 </template>
 
 <script>
@@ -56,270 +62,274 @@ import moment from "moment";
 import HeaderDialog from "./headerDialog.vue";
 import { getWeatherLiveData } from "@/assets/js/api/environmentManage";
 import { getQueryBySnCompanyInfo } from "@/assets/js/api/companyBigScreen";
-import { queryCustomConfig } from '@/assets/js/api/common'
+import { queryCustomConfig } from "@/assets/js/api/common";
 export default {
-  naem: "headers",
-  components: { HeaderDialog },
-  data() {
-    return {
-      pageIndex: 1,
-      nowDate: "",
-      nowTime: "",
-      timer: null,
-      weatherInfo: {},
-      customInfo: {},
-      customData: {},
-      isEdit: false,
-    };
-  },
-  mounted() {
-    this.timer = setInterval(() => {
-      let date = new Date();
-      this.nowDate = moment(date).format("YYYY年MM月DD日");
-      this.nowTime = moment(date).format("HH:mm:ss");
-    }, 1000);
-    this.getCompanyInfoData();
-    this.getCustomConfig();
-  },
-  beforeDestroy() {
-    this.timer = null;
-  },
-  methods: {
-    async getCustomConfig() {
-      const res = await queryCustomConfig({
-        configKey: "company_header1",
-        projectSn: this.$store.state.userInfo.sn,
-      });
-      console.log(res);
-      this.isEdit = res.result?.id ? true : false
-      if (res.result) {
-        const { data: curIsCustom } = JSON.parse(res.result.configValue || '{}');
-        console.log(112333, curIsCustom)
-        this.customInfo = curIsCustom
-        this.customData = res.result
-      }
+    naem: "headers",
+    components: { HeaderDialog },
+    data() {
+        return {
+            pageIndex: 1,
+            nowDate: "",
+            nowTime: "",
+            timer: null,
+            weatherInfo: {},
+            customInfo: {},
+            customData: {},
+            isEdit: false,
+        };
     },
-    getDeviceConfig() {
-      console.log(111);
-      this.getCustomConfig();
+    mounted() {
+        this.timer = setInterval(() => {
+            let date = new Date();
+            this.nowDate = moment(date).format("YYYY年MM月DD日");
+            this.nowTime = moment(date).format("HH:mm:ss");
+        }, 1000);
+        this.getCompanyInfoData();
+        this.getCustomConfig();
     },
-    handleEdit() {
-      this.$refs.headerDialogRef.showModal(this.isEdit ? this.customData : null)
+    beforeDestroy() {
+        this.timer = null;
     },
-    async getCompanyInfoData() {
-      const res = await getQueryBySnCompanyInfo({
-        sn: this.$store.state.userInfo.sn,
-      });
-      console.log(res);
-      this.loadWeather(res.result.cityCode);
+    methods: {
+        async getCustomConfig() {
+            const res = await queryCustomConfig({
+                configKey: "company_header1",
+                projectSn: this.$store.state.userInfo.sn,
+            });
+            console.log(res);
+            this.isEdit = res.result?.id ? true : false;
+            if (res.result) {
+                const { data: curIsCustom } = JSON.parse(
+                    res.result.configValue || "{}"
+                );
+                console.log(112333, curIsCustom);
+                this.customInfo = curIsCustom;
+                this.customData = res.result;
+            }
+        },
+        getDeviceConfig() {
+            console.log(111);
+            this.getCustomConfig();
+        },
+        handleEdit() {
+            this.$refs.headerDialogRef.showModal(
+                this.isEdit ? this.customData : null
+            );
+        },
+        async getCompanyInfoData() {
+            const res = await getQueryBySnCompanyInfo({
+                sn: this.$store.state.userInfo.sn,
+            });
+            console.log(res);
+            this.loadWeather(res.result.cityCode);
+        },
+        onRouterLink(path) {
+            this.$router.push(path);
+        },
+        changeNav(val) {
+            this.pageIndex = val;
+            this.$emit("changeType", val);
+        },
+        closeFn() {
+            // window.close()
+            // this.$router.back()
+            // 退出到企业首页
+            this.$router.push("/firm/projectManage");
+        },
+        loadWeather(cityCode) {
+            getWeatherLiveData({ cityid: cityCode || "" }).then((res) => {
+                this.weatherInfo = res.result;
+                console.log(this.weatherInfo);
+            });
+        },
     },
-    onRouterLink(path) {
-      this.$router.push(path);
-    },
-    changeNav(val) {
-      this.pageIndex = val;
-      this.$emit("changeType", val);
-    },
-    closeFn() {
-      // window.close()
-      // this.$router.back()
-      // 退出到企业首页
-      this.$router.push("/firm/projectManage");
-    },
-    loadWeather(cityCode) {
-      getWeatherLiveData({ cityid: cityCode || "" }).then((res) => {
-        this.weatherInfo = res.result;
-        console.log(this.weatherInfo);
-      });
-    },
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .header-wrap {
-  width: 100%;
-  height: 66px;
-  text-align: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  background: url("~@/assets/images/companyBigScreen/header-bg.png") center
-    no-repeat;
-  background-size: 100%;
-  .left-text {
+    width: 100%;
+    height: 66px;
+    text-align: center;
     position: absolute;
-    left: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
-    font-weight: 500;
-    font-size: 32px;
-    color: #ffffff;
-    line-height: 32px;
-    display: flex;
-    align-items: center;
-    .left-text_title {
-      position: relative;
-      &:hover {
-        .edit-icon {
-          visibility: visible;
-        }
-      }
-      .edit-icon {
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background: url("~@/assets/images/companyBigScreen/header-bg.png") center
+        no-repeat;
+    background-size: 100%;
+    .left-text {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        transform: translateX(-50%);
-        visibility: hidden;
-        width: 20px;
-        height: 20px;
-        cursor: pointer;
-        user-select: none;
-        -webkit-user-drag: none;
-        z-index: 10;
-      }
+        left: 30px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 32px;
+        color: #ffffff;
+        line-height: 32px;
+        display: flex;
+        align-items: center;
+        .left-text_title {
+            position: relative;
+            &:hover {
+                .edit-icon {
+                    visibility: visible;
+                }
+            }
+            .edit-icon {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                transform: translateX(-50%);
+                visibility: hidden;
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                user-select: none;
+                -webkit-user-drag: none;
+                z-index: 10;
+            }
+        }
+        .left-text_image {
+            font-size: 20px;
+            color: #00f6ff;
+            margin-left: 13px;
+            width: 104px;
+            height: 45px;
+            background-image: url("~@/assets/images/companyBigScreen/stat-bg.png");
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
     }
-    .left-text_image {
-      font-size: 20px;
-      color: #00f6ff;
-      margin-left: 13px;
-      width: 104px;
-      height: 45px;
-      background-image: url("~@/assets/images/companyBigScreen/stat-bg.png");
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
 }
 .header-wrap2 {
-  width: 100%;
-  height: 45px;
-  text-align: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  background: url("~@/assets/images/bigScreen/hengTong_title.png") center
-    no-repeat;
-  background-size: 103%;
-  .left-text {
-    color: #02fbe2;
+    width: 100%;
+    height: 45px;
+    text-align: center;
     position: absolute;
-    left: 48px;
-    line-height: 32px;
-    font-size: 10px;
-  }
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background: url("~@/assets/images/bigScreen/hengTong_title.png") center
+        no-repeat;
+    background-size: 103%;
+    .left-text {
+        color: #02fbe2;
+        position: absolute;
+        left: 48px;
+        line-height: 32px;
+        font-size: 10px;
+    }
 }
 .nav-list {
-  color: #fff;
-  font-size: 16px;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  height: 40px;
-  width: 35%;
-  justify-content: space-between;
-  align-items: center;
+    color: #fff;
+    font-size: 16px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    height: 40px;
+    width: 35%;
+    justify-content: space-between;
+    align-items: center;
 }
 .nav-item {
-  padding: 0 40px;
-  height: 40px;
-  line-height: 36px;
-  position: relative;
-  cursor: pointer;
+    padding: 0 40px;
+    height: 40px;
+    line-height: 36px;
+    position: relative;
+    cursor: pointer;
 }
 .nav-active {
-  color: #02fbe2;
+    color: #02fbe2;
 }
 .nav-active::after {
-  content: "";
-  border-bottom: 1px dashed rgba(2, 251, 226, 1);
-  position: absolute;
-  bottom: 8px;
-  left: 50%;
-  height: 11px;
-  display: block;
-  width: 73px;
-  transform: translateX(-50%);
-  background: linear-gradient(
-    to top,
-    rgba(2, 251, 226, 0.7),
-    rgba(2, 251, 226, 0)
-  );
+    content: "";
+    border-bottom: 1px dashed rgba(2, 251, 226, 1);
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    height: 11px;
+    display: block;
+    width: 73px;
+    transform: translateX(-50%);
+    background: linear-gradient(
+        to top,
+        rgba(2, 251, 226, 0.7),
+        rgba(2, 251, 226, 0)
+    );
 }
 .right-box {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  .date {
-    background: rgba(34, 33, 37, 0.5);
-    border: 1px solid #3e3c42;
-    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
-    font-weight: 500;
-    font-size: 20px;
-    color: #ffffff;
-    line-height: 24px;
-    padding: 4px 30px;
-    margin-right: 30px;
-  }
-  .time {
-    font-family: Alibaba Sans, Alibaba Sans;
-    font-weight: 500;
-    font-size: 20px;
-    color: #dfdaee;
-    line-height: 24px;
-    margin-right: 30px;
-    i {
-      margin-right: 2px;
-    }
-  }
-  .weather-box {
     display: flex;
     align-items: center;
-    margin-right: 30px;
-    .line {
-      width: 4px;
-      height: 20px;
-      background: #959397;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    .date {
+        background: rgba(34, 33, 37, 0.5);
+        border: 1px solid #3e3c42;
+        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 20px;
+        color: #ffffff;
+        line-height: 24px;
+        padding: 4px 30px;
+        margin-right: 30px;
     }
-    span {
-      font-family: Segoe UI, Segoe UI;
-      font-weight: 400;
-      font-size: 20px;
-      color: #dfdaee;
-      line-height: 26px;
-      margin-left: 12px;
+    .time {
+        font-family: Alibaba Sans, Alibaba Sans;
+        font-weight: 500;
+        font-size: 20px;
+        color: #dfdaee;
+        line-height: 24px;
+        margin-right: 30px;
+        i {
+            margin-right: 2px;
+        }
     }
-  }
-  .close-btn {
-    margin-right: 30px;
-    padding: 4px 20px;
-    background: rgba(0, 107, 255, 0.5);
-    border: 1px solid #006bff;
-    cursor: pointer;
-    i {
-      font-size: 20px;
-      color: #ffffff;
-      margin-right: 2px;
+    .weather-box {
+        display: flex;
+        align-items: center;
+        margin-right: 30px;
+        .line {
+            width: 4px;
+            height: 20px;
+            background: #959397;
+        }
+        span {
+            font-family: Segoe UI, Segoe UI;
+            font-weight: 400;
+            font-size: 20px;
+            color: #dfdaee;
+            line-height: 26px;
+            margin-left: 12px;
+        }
     }
-    span {
-      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 24px;
-      color: #ffffff;
+    .close-btn {
+        margin-right: 30px;
+        padding: 4px 20px;
+        background: rgba(0, 107, 255, 0.5);
+        border: 1px solid #006bff;
+        cursor: pointer;
+        i {
+            font-size: 20px;
+            color: #ffffff;
+            margin-right: 2px;
+        }
+        span {
+            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+            font-weight: 500;
+            font-size: 20px;
+            line-height: 24px;
+            color: #ffffff;
+        }
     }
-  }
 }
 </style>

src/views/companyAdmin/companyBigScreen/highRiskOperation/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="bigScreen-wrap">
+        <NewHeader
+            @refresh="onRefresh"
+            :title="'甘肃华润新能源智慧电站'"
+        ></NewHeader>
+        <!-- <HomeworkControlProcess ref="homeworkRef"></HomeworkControlProcess> -->
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import NewHeader from "@/views/companyAdmin/companyBigScreen/components/newHeader.vue";
+// import HomeworkControlProcess from "./homeworkControlProcess.vue";
+const homeworkRef = ref(null);
+const onRefresh = () => {
+    console.log("刷新");
+    homeworkRef.value.onRefresh();
+};
+// 生命周期钩子
+onMounted(() => {});
+</script>
+  
+<style lang="less" scoped>
+.bigScreen-wrap {
+    width: 100%;
+    height: 100%;
+    min-width: 1680px;
+    // min-height: 1080px;
+    position: relative;
+    color: #fff;
+    // background: #0a141c;
+    background: url("~@/assets/images/companyBigScreen/big-screen-bg.png")
+        center no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+}
+</style>
+