From b5e0e31cb11b293e87560ce8e08a523fec9af5aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Mon, 21 Apr 2025 17:49:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=A4=A7=E5=B1=8F=E7=BB=BF?=
 =?UTF-8?q?=E5=8D=81=E5=AD=97=E5=8A=9F=E8=83=BD=E9=83=A8=E7=BD=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/andonManagement/sitesafegreencross.js |  67 ++++
 .../SmartScreen/SafeGreenCross/index.css      |  75 +++++
 .../SmartScreen/SafeGreenCross/index.vue      | 252 +++++++++++++++
 src/views/SmartScreen/index.vue               |   4 +
 .../SiteSafeGreenCross/index.vue              | 288 ++++++++++++++++++
 5 files changed, 686 insertions(+)
 create mode 100644 src/api/andonManagement/sitesafegreencross.js
 create mode 100644 src/views/SmartScreen/SafeGreenCross/index.css
 create mode 100644 src/views/SmartScreen/SafeGreenCross/index.vue
 create mode 100644 src/views/andonManagement/SiteSafeGreenCross/index.vue

diff --git a/src/api/andonManagement/sitesafegreencross.js b/src/api/andonManagement/sitesafegreencross.js
new file mode 100644
index 0000000..932019b
--- /dev/null
+++ b/src/api/andonManagement/sitesafegreencross.js
@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+/**
+ * 现场安全绿色十字架分页查询
+ * @param {查询条件} data
+ */
+export function listSiteSafeGreenCross(query) {
+    return request({
+        url: 'BZFM/SiteSafeGreenCross/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 新增现场安全绿色十字架
+ * @param data
+ */
+export function addSiteSafeGreenCross(data) {
+    return request({
+        url: 'BZFM/SiteSafeGreenCross',
+        method: 'post',
+        data: data
+    })
+}
+/**
+ * 修改现场安全绿色十字架
+ * @param data
+ */
+export function updateSiteSafeGreenCross(data) {
+    return request({
+        url: 'BZFM/SiteSafeGreenCross',
+        method: 'PUT',
+        data: data
+    })
+}
+/**
+ * 获取现场安全绿色十字架详情
+ * @param {Id}
+ */
+export function getSiteSafeGreenCross(id) {
+    return request({
+        url: 'BZFM/SiteSafeGreenCross/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 删除现场安全绿色十字架
+ * @param {主键} pid
+ */
+export function delSiteSafeGreenCross(pid) {
+    return request({
+        url: 'BZFM/SiteSafeGreenCross/delete/' + pid,
+        method: 'POST'
+    })
+}
+
+/**
+ * 现场安全绿色十字架大屏数据展示
+ */
+export function GetGreenCrossData() {
+    return request({
+        url: 'mes/AndonManagement/SafeGreenSmart/greencross',
+        method: 'get'
+    })
+}
diff --git a/src/views/SmartScreen/SafeGreenCross/index.css b/src/views/SmartScreen/SafeGreenCross/index.css
new file mode 100644
index 0000000..9828614
--- /dev/null
+++ b/src/views/SmartScreen/SafeGreenCross/index.css
@@ -0,0 +1,75 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+.background {
+    padding: 0;
+    margin: 0;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    /* background-color: black; */
+    background: url('./background/background.png') no-repeat;
+    background-size: 100% 100%;
+    /* -webkit-filter: brightness(0.1); */
+    /* filter: brightness(0.1); */
+    z-index: -1;
+}
+.border {
+    border: 2px solid #a9aabc;
+}
+.screen {
+    box-sizing: border-box;
+    padding: 20px; /* Default padding */
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    color: #eeeeee;
+    background-color: rgba(32, 163, 250, 0.2);
+}
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .screen {
+        padding: 10px;
+    }
+}
+
+@media (max-width: 992px) {
+    .screen {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 768px) {
+    .screen {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 576px) {
+    .screen {
+        padding: 2px;
+    }
+}
+.screen .header {
+    /* width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center; */
+}
+.screen .title {
+    font-size: 30px;
+    font-weight: 700;
+    color: #eeeeee;
+}
+.body {
+    display: flex;
+    flex-direction: column;
+}
+.box {
+    padding: 20px;
+}
diff --git a/src/views/SmartScreen/SafeGreenCross/index.vue b/src/views/SmartScreen/SafeGreenCross/index.vue
new file mode 100644
index 0000000..07f1d90
--- /dev/null
+++ b/src/views/SmartScreen/SafeGreenCross/index.vue
@@ -0,0 +1,252 @@
+<template>
+    <kbFullScreenBox>
+        <div class="screen">
+            <div class="header">
+                <kbHeader>生产安全绿色十字</kbHeader>
+            </div>
+            <kbGap></kbGap>
+            <div class="body">
+                <div class="main-title">{{ getDayTitle() }}</div>
+                <div class="main-content">
+                    <div class="main-top">
+                        <div v-for="(item, index) in topModel" :key="index" :class="getDateItemClass(item)">
+                            {{ item }}
+                        </div>
+                    </div>
+                    <div class="main-left">
+                        <div v-for="(item, index) in leftModel" :key="index" :class="getDateItemClass(item)">
+                            {{ item }}
+                        </div>
+                    </div>
+                    <div class="main-logo">
+                        <span class="logo-text">KJK</span>
+                    </div>
+                    <div class="main-right">
+                        <div v-for="(item, index) in rightModel" :key="index" :class="getDateItemClass(item)">
+                            {{ item }}
+                        </div>
+                    </div>
+                    <div class="main-bottom">
+                        <div v-for="(item, index) in bottomModel" :key="index" :class="getDateItemClass(item)">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+                <div class="color-scheme">
+                    <div class="scheme-item safe">安全</div>
+                    <div class="scheme-item warning">轻微事故</div>
+                    <div class="scheme-item danger">重大事故</div>
+                </div>
+            </div>
+            <div class="bottom-text">安全生产，挑战劳动 0 灾害！</div>
+        </div>
+    </kbFullScreenBox>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+/// ================ 基础组件导入 ======================
+import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
+import kbGap from '../可视化素材包/components/kbGap.vue'
+import kbHeader from '../可视化素材包/components/kbHeader.vue'
+import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
+import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
+import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
+import kbTitle from '../可视化素材包/components/kbTitle.vue'
+/// ================================================
+
+import { getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+
+/// =================== 获取工单数据 ======================
+import { GetGreenCrossData } from '@/api/andonManagement/sitesafegreencross.js'
+function initData() {
+    GetGreenCrossData().then((res) => {
+        if (res.code === 200) {
+            dateStatus.value = res.data
+        }
+    })
+}
+initData()
+
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        initData()
+    }, 1000 * 60 * 12)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ====================================================
+
+// 日期标题
+function getDayTitle() {
+    return `${proxy.$dayjs().format('YYYY年MM月')}度`
+}
+// 初始化绿十字矩阵
+const topModel = [1, 2, 3, 4, 5, 6]
+const leftModel = [7, 8, 9, 13, 14, 15, 19, 20, 21]
+const rightModel = [10, 11, 12, 16, 17, 18, 22, 23, 24]
+const bottomModel = [25, 26, 27, 28, 29, 30, 31, '', '']
+
+// 模拟每个日期的状态数据
+const dateStatus = ref([])
+
+// 根据日期获取对应的状态类名
+const getDateItemClass = (date) => {
+    const item = dateStatus.value.find((item) => item.safeDateInt === date)
+    const status = item ? item.safeNum : 0
+    if (status === 1) {
+        return 'date-item safe'
+    } else if (status === 2) {
+        return 'date-item warning'
+    } else if (status === 3) {
+        return 'date-item danger'
+    }
+    return 'date-item'
+}
+</script>
+
+<style scoped>
+@import './index.css';
+/* 基本样式 */
+.body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+.main-title {
+    width: 100%;
+    font-size: 36px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.main-content {
+    display: grid;
+    grid-template-columns: 20vw 16vw 20vw;
+    grid-template-rows: 26vh 20vh 26vh;
+    grid-template-areas:
+        '. main-top .'
+        'main-left main-logo main-right'
+        '. main-bottom .';
+    gap: 0;
+}
+.main-top,
+.main-left,
+.main-right,
+.main-bottom {
+    display: grid;
+    place-items: center;
+    border: 1px solid #fff;
+}
+.main-top {
+    grid-area: main-top;
+    grid-template-columns: repeat(3, 1fr);
+}
+.main-left {
+    grid-area: main-left;
+    grid-template-columns: repeat(3, 1fr);
+}
+.main-right {
+    grid-area: main-right;
+    grid-template-columns: repeat(3, 1fr);
+}
+.main-bottom {
+    grid-area: main-bottom;
+    grid-template-columns: repeat(3, 1fr);
+}
+.main-logo {
+    grid-area: main-logo;
+    border: 1px solid #fff;
+    display: grid;
+    place-items: center;
+}
+.date-item {
+    color: white;
+    text-align: center;
+    font-size: 16px;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    border: 1px solid #fff;
+}
+
+.date-item.safe {
+    background-color: green;
+}
+
+.date-item.warning {
+    background-color: yellow;
+    color: black;
+}
+
+.date-item.danger {
+    background-color: red;
+}
+
+.logo-text {
+    color: white;
+    font-size: 60px; /* 可根据需要调整字体大小 */
+    font-weight: bold;
+}
+
+.logo-placeholder {
+    width: 40%;
+    height: 40%;
+    border: 1px solid gray;
+}
+
+.color-scheme {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.scheme-item {
+    padding: 5px 10px;
+    border: 1px solid #fff;
+    white-space: nowrap;
+    color: white;
+}
+
+.scheme-item.safe {
+    background-color: green;
+}
+
+.scheme-item.warning {
+    background-color: yellow;
+    color: black;
+}
+
+.scheme-item.danger {
+    background-color: red;
+}
+
+.bottom-text {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    color: white;
+    margin-top: 20px;
+    padding-bottom: 20px;
+}
+</style>
diff --git a/src/views/SmartScreen/index.vue b/src/views/SmartScreen/index.vue
index 6e177c3..6107013 100644
--- a/src/views/SmartScreen/index.vue
+++ b/src/views/SmartScreen/index.vue
@@ -12,6 +12,9 @@
         <el-carousel-item :key="4">
             <DeviceScreen style="height: 100%"></DeviceScreen>
         </el-carousel-item>
+        <el-carousel-item :key="5">
+            <SafeGreenCross style="height: 100%"></SafeGreenCross>
+        </el-carousel-item>
     </el-carousel>
 </template>
 
@@ -20,6 +23,7 @@ import { default as OrderScreen } from '@/views/SmartScreen/OrderScreen/index'
 import { default as ReportScreen } from '@/views/SmartScreen/ReportScreen/index'
 import { default as QualityScreen } from '@/views/SmartScreen/QualityScreen/index'
 import { default as DeviceScreen } from '@/views/SmartScreen/DeviceScreen/index'
+import { default as SafeGreenCross } from '@/views/SmartScreen/SafeGreenCross/index'
 // 设备大屏
 // import { default as AndonFullScreen } from '@/views/andonManagement/analysis/fullscreen/index'
 // Andon大屏
diff --git a/src/views/andonManagement/SiteSafeGreenCross/index.vue b/src/views/andonManagement/SiteSafeGreenCross/index.vue
new file mode 100644
index 0000000..d849813
--- /dev/null
+++ b/src/views/andonManagement/SiteSafeGreenCross/index.vue
@@ -0,0 +1,288 @@
+<template>
+    <div>
+        <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
+            <el-form-item label="月份">
+                <el-date-picker :clearable="false" v-model="queryParams.month" type="month" placeholder="选择月份"> </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
+                <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 工具区域 -->
+        <el-row :gutter="15" class="mb10">
+            <el-col :span="1.5">
+                <el-button type="primary" v-hasPermi="['sitesafegreencross:add']" plain icon="plus" @click="handleAdd">
+                    {{ $t('btn.add') }}
+                </el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table
+            :data="dataList"
+            v-loading="loading"
+            ref="table"
+            border
+            header-cell-class-name="el-table-header-cell"
+            highlight-current-row
+            @sort-change="sortChange">
+            <el-table-column prop="safeDate" label="安全日期" align="center" />
+            <el-table-column label="安全状态" align="center">
+                <template #default="scope">
+                    <el-tag :type="getTagType(scope.row.safeNum)" :closable="false">
+                        {{ getSafeStatusText(scope.row.safeNum) }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="160">
+                <template #default="scope">
+                    <el-button
+                        type="success"
+                        size="small"
+                        icon="edit"
+                        title="编辑"
+                        v-hasPermi="['sitesafegreencross:edit']"
+                        @click="handleUpdate(scope.row)"></el-button>
+                    <el-button
+                        type="danger"
+                        size="small"
+                        icon="delete"
+                        title="删除"
+                        v-hasPermi="['sitesafegreencross:delete']"
+                        @click="handleDelete(scope.row)"></el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+        <el-dialog :title="title" :lock-scroll="false" v-model="open" modal-append-to-body :close-on-click-modal="false">
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+                <el-row :gutter="20">
+                    <el-col :lg="12">
+                        <el-form-item label="安全日期" prop="safeDate">
+                            <el-date-picker :clearable="false" v-model="form.safeDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD 00:00:00">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :lg="12">
+                        <el-form-item label="安全状态" prop="safeNum">
+                            <el-radio-group v-model="form.safeNum">
+                                <el-radio :value="1">绿色安全</el-radio>
+                                <el-radio :value="2">黄色轻微事故</el-radio>
+                                <el-radio :value="3">红色重大事故</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer v-if="opertype != 3">
+                <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
+                <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="sitesafegreencross">
+import {
+    listSiteSafeGreenCross,
+    addSiteSafeGreenCross,
+    delSiteSafeGreenCross,
+    updateSiteSafeGreenCross,
+    getSiteSafeGreenCross
+} from '@/api/andonManagement/sitesafegreencross.js'
+import { getCurrentInstance, ref, reactive, toRefs } from 'vue'
+import dayjs from 'dayjs'
+
+const { proxy } = getCurrentInstance()
+const ids = ref([])
+const loading = ref(false)
+const showSearch = ref(true)
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 50,
+    sort: '',
+    sortType: 'asc',
+    month: dayjs().format('YYYY-MM')
+})
+const columns = ref([])
+const total = ref(0)
+const dataList = ref([])
+const queryRef = ref()
+const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
+
+var dictParams = []
+
+function getList() {
+    loading.value = true
+    listSiteSafeGreenCross(queryParams).then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            dataList.value = data.result
+            total.value = data.totalNum
+            loading.value = false
+        }
+    })
+}
+
+// 查询
+function handleQuery() {
+    queryParams.pageNum = 1
+    getList()
+}
+
+// 重置查询操作
+function resetQuery() {
+    proxy.resetForm('queryRef')
+    queryParams.month = dayjs().format('YYYY-MM')
+    handleQuery()
+}
+// 自定义排序
+function sortChange(column) {
+    var sort = undefined
+    var sortType = undefined
+
+    if (column.prop != null && column.order != null) {
+        sort = column.prop
+        sortType = column.order
+    }
+    queryParams.sort = sort
+    queryParams.sortType = sortType
+    handleQuery()
+}
+
+/*************** form操作 ***************/
+const formRef = ref()
+const title = ref('')
+// 操作类型 1、add 2、edit 3、view
+const opertype = ref(0)
+const open = ref(false)
+const state = reactive({
+    single: true,
+    multiple: true,
+    form: {
+        safeDate: dayjs().format('YYYY-MM-DD 00:00:00'),
+        safeNum: 1
+    },
+    rules: {
+        safeDate: [{ required: true, message: '安全日期不能为空', trigger: 'blur' }],
+        safeNum: [{ required: true, message: '安全状态不能为空', trigger: 'change' }]
+    },
+    options: {}
+})
+
+const { form, rules, options, single, multiple } = toRefs(state)
+
+// 关闭dialog
+function cancel() {
+    open.value = false
+    reset()
+}
+
+// 重置表单
+function reset() {
+    form.value = {
+        safeDate: dayjs().format('YYYY-MM-DD 00:00:00'),
+        safeNum: 1
+    }
+    proxy.resetForm('formRef')
+}
+
+// 添加按钮操作
+function handleAdd() {
+    reset()
+    open.value = true
+    title.value = '添加现场安全绿色十字架'
+    opertype.value = 1
+}
+// 修改按钮操作
+function handleUpdate(row) {
+    reset()
+    const id = row.id || ids.value
+    getSiteSafeGreenCross(id).then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            open.value = true
+            title.value = '修改现场安全绿色十字架'
+            opertype.value = 2
+
+            form.value = {
+                safeDate: data.safeDate,
+                safeNum: data.safeNum
+            }
+        }
+    })
+}
+
+// 添加&修改 表单提交
+function submitForm() {
+    proxy.$refs['formRef'].validate((valid) => {
+        if (valid) {
+            if (form.value.id != undefined && opertype.value === 2) {
+                updateSiteSafeGreenCross(form.value).then((res) => {
+                    proxy.$modal.msgSuccess('修改成功')
+                    open.value = false
+                    getList()
+                })
+            } else {
+                addSiteSafeGreenCross(form.value).then((res) => {
+                    proxy.$modal.msgSuccess('新增成功')
+                    open.value = false
+                    getList()
+                })
+            }
+        }
+    })
+}
+
+// 删除按钮操作
+function handleDelete(row) {
+    const Ids = row.id || ids.value
+
+    proxy
+        .$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？', '警告', {
+            confirmButtonText: proxy.$t('common.ok'),
+            cancelButtonText: proxy.$t('common.cancel'),
+            type: 'warning'
+        })
+        .then(function () {
+            return delSiteSafeGreenCross(Ids)
+        })
+        .then(() => {
+            getList()
+            proxy.$modal.msgSuccess('删除成功')
+        })
+}
+
+// 根据安全状态返回 tag 类型
+function getTagType(safeNum) {
+    switch (safeNum) {
+        case 1:
+            return 'success'
+        case 2:
+            return 'warning'
+        case 3:
+            return 'danger'
+        default:
+            return 'info'
+    }
+}
+
+// 根据安全状态返回显示文本
+function getSafeStatusText(safeNum) {
+    switch (safeNum) {
+        case 1:
+            return '绿色安全'
+        case 2:
+            return '黄色轻微事故'
+        case 3:
+            return '红色重大事故'
+        default:
+            return '未知状态'
+    }
+}
+
+handleQuery()
+</script>