Merge branch 'master' into 'master'

门诊住院数据大屏

See merge request lighter/vue-intergration-platform!35

src/api/tj-report/full-screen.js

@@ -0,0 +1,11 @@
+// 数据大屏请求
+import request from '../../utils/request'
+
+// 查询数据大屏展示数据
+export function selectFullScreenData(data) {
+    return request({
+        url: '/fullScreen/selectFullScreenData',
+        method: 'post',
+        data,
+    })
+}

src/components/fullScreen/fullPage/FullScreenThirdPage.vue

@@ -2,7 +2,7 @@
     <div id="data-view">
         <dv-full-screen-container>
             <div class="main-header">
-                <div class="mh-left">技术支持: {{ props.fullScreenFirst.dept }}</div>
+                <div class="mh-left">当前部门: {{ props.fullScreenFirst.dept }}</div>
                 <div class="mh-middle"><span class="marquee_txt">{{ props.fullScreenFirst.title }}</span></div>
                 <div class="mh-right">
                     <dv-border-box-2
@@ -13,22 +13,23 @@
             </div>
             <dv-border-box-1 class="main-container">
                 <div class="mc-top">
-                    <Top-Left-Cmp />
-                    <Top-Middle-Cmp />
-                    <Top-right-Cmp />
+                    <Top-Left-Cmp :topLeftData="topLeftData" />
+                    <Top-Middle-Cmp :dataInfo="dataInfo[7]" />
+                    <Top-right-Cmp :topRightData="topRightData" />
                 </div>
                 <div class="mc-bottom">
                     <dv-border-box-6 class="bottom-left-container">
                         <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
                         <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
-                        <Bottom-Left-Chart-1 />
-                        <Bottom-Left-Chart-2 />
+                        <Bottom-Left-Chart-1 :dataInfo="dataInfo[6]" />
+                        <Bottom-Left-Chart-2 :dataInfo="dataInfo[5]" />
                     </dv-border-box-6>
                     <div class="bottom-right-container">
-                        <Bottom-Right-Table-1 />
-                        <Bottom-Right-Table-2 />
-                        <Bottom-Right-Table-3 />
-                        <Bottom-Right-Table-4 />
+                        <Bottom-Right-Table-1 :dataInfo="dataInfo[0]" />
+                        <Bottom-Right-Table-2 :dataInfo="dataInfo[1]" />
+                        <Bottom-Right-Table-3 :dataInfo="dataInfo[2]" />
+                        <Bottom-Right-Table-4 :dataInfo="dataInfo[3]" />
+                        <Bottom-Right-Table-5 :dataInfo="dataInfo[4]" />
                     </div>
                 </div>
             </dv-border-box-1>
@@ -48,6 +49,9 @@ import BottomRightTable1 from '../thirdPage/BottomRightTable1.vue'
 import BottomRightTable2 from '../thirdPage/BottomRightTable2.vue'
 import BottomRightTable3 from '../thirdPage/BottomRightTable3.vue'
 import BottomRightTable4 from '../thirdPage/BottomRightTable4.vue'
+import BottomRightTable5 from '../thirdPage/BottomRightTable5.vue'
+import { selectFullScreenData } from '../../../api/tj-report/full-screen.js'
+import { reactive, onMounted, Ref, ref, nextTick } from 'vue'
 
 const props = defineProps({
     fullScreenFirst: {
@@ -56,6 +60,86 @@ const props = defineProps({
     }
 })
 
+const queryTerm = reactive({
+    startTime: '',
+    endTime: '',
+    day7Ago: '',
+    day15Ago: '',
+    type: '',
+    reportType: '',
+});
+
+interface dataInfo {
+    reportId: string,
+    reportName: string,
+    overview: any,
+    unit: string,
+    dataList: Array<object>,
+}
+
+let returnData: Ref<Array<dataInfo>> = ref([])
+
+onMounted(() => {
+    queryTerm.startTime = props.fullScreenFirst.startTime
+    queryTerm.endTime = props.fullScreenFirst.endTime
+    queryTerm.type = props.fullScreenFirst.type
+
+    nextTick(() => {
+        query()
+    })
+
+})
+
+const dataInfo: Ref<Array<dataInfo>> = ref([])
+const topLeftData: Ref<Array<dataInfo>> = ref([])
+const topRightData: Ref<Array<dataInfo>> = ref([])
+const query = async () => {
+    dataInfo.value = []
+    selectFullScreenData(queryTerm)
+        .then((res) => {
+            returnData.value = res.data
+            returnData.value.forEach(e => {
+                if (e.reportId === 'mz_mzrs') {
+                    dataInfo.value[0] = e
+                } else if (e.reportId === 'cy_ryrs') {
+                    dataInfo.value[1] = e
+                } else if (e.reportId === 'zy_zyrs') {
+                    dataInfo.value[2] = e
+                } else if (e.reportId === 'mz_mzzsr') {
+                    dataInfo.value[3] = e
+                    topLeftData.value[0] = e
+                } else if (e.reportId === 'cw_zysr') {
+                    dataInfo.value[4] = e
+                    topLeftData.value[1] = e
+                } else if (e.reportId === 'cw_ssts') {
+                    dataInfo.value[5] = e
+                } else if (e.reportId === 'zy_cwsyl') {
+                    dataInfo.value[6] = e
+                } else if (e.reportId === 'mz_ybjjsr') {
+                    topLeftData.value[2] = e
+                } else if (e.reportId === 'zy_ybjjsr') {
+                    topLeftData.value[3] = e
+                } else if (e.reportId === 'cw_ylsr') {
+                    dataInfo.value[7] = e
+                    topRightData.value[0] = e
+                } else if (e.reportId === 'cw_ylypf') {
+                    topRightData.value[1] = e
+                } else if (e.reportId === 'cw_ylclf') {
+                    topRightData.value[2] = e
+                } else if (e.reportId === 'cw_yljyf') {
+                    topRightData.value[3] = e
+                }
+            })
+        }).catch(() => {
+
+        })
+}
+
+let wd = window.setInterval(() => {
+    clearInterval(wd)
+    query()
+}, 60000)
+
 </script>
   
 <style lang="scss" scoped>

src/components/fullScreen/thirdPage/BottomLeftChart1.vue

@@ -1,100 +1,109 @@
 <template>
-    <div class="bottom-left-chart-1">
-        <div class="header-name">机电设备完好率</div>
-        <div class="details-value"><span>99.01</span>%</div>
-        <dv-charts :option="option" />
+    <div id="leftChart2">
+        <div class="lc2-header" style="font-size: larger;">
+            {{ props.dataInfo.reportName }}
+        </div>
+        <div class="lc2-details">
+            <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}{{ props.dataInfo.unit
+            }}</span>
+        </div>
+        <dv-scroll-board ref="scrollBoard" :config="config" class="lc2-chart" @click="clickHandler" />
+        <dv-decoration2 style="height:10px;" />
     </div>
 </template>
-<script setup name='BottomLeftChart1' lang="ts">
-import { reactive } from 'vue'
+  
+<script setup name="LeftChart2" lang="ts">
+import { ref, Ref, onUpdated } from 'vue'
 
-const option = reactive({
-    series: [
-        {
-            type: 'pie',
-            data: [
-                { name: '监控系统', value: 93, radius: ['30%', '33%'] },
-                { name: '收费系统', value: 65, radius: ['32%', '35%'] },
-                { name: '通信系统', value: 32, radius: ['31%', '37%'] },
-                { name: '供配电系统', value: 44, radius: ['31%', '32%'] },
-                { name: '其它', value: 52, radius: ['32%', '35%'] }
-            ],
-            outsideLabel: {
-                labelLineEndLength: 20,
-                formatter: '{percent}%\n{name}',
-                style: {
-                    fill: '#fff'
-                }
-            }
-        },
-        {
-            name: 'decoration ring',
-            type: 'pie',
-            data: [
-                { value: 10, radius: ['50%', '53%'] }
-            ],
-            outsideLabel: {
-                show: false
-            },
-            pieStyle: {
-                fill: 'rgba(255, 255, 255, 0.2)'
-            }
-        },
-        {
-            name: 'decoration ring',
-            type: 'pie',
-            data: [
-                { value: 10, radius: ['45%', '46%'] }
-            ],
-            outsideLabel: {
-                show: false
-            },
-            pieStyle: {
-                fill: 'rgba(255, 255, 255, 0.2)'
-            }
-        }
-    ],
-    color: ['#00c0ff', '#3de7c9', '#fff', '#00c0ff', '#3de7c9', '#fff']
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
 })
 
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    header: Array<string>,
+    data: Array<Array<any>>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    indexHeader: string,
+    rowNum: number,
+    carousel: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    let str = props.dataInfo.reportName
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.header = ['科室', str]
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [50, 120]
+    config.value.align = ['center', 'left', 'center']
+    config.value.indexHeader = '序号'
+    config.value.rowNum = 6
+    config.value.carousel = 'page'
+})
+
+const clickHandler = (e: any) => {
+    console.log(e)
+}
+
 </script>
   
 <style lang="scss" scoped>
-.bottom-left-chart-1 {
-    position: relative;
+#leftChart2 {
+    width: 50%;
+    margin: 10px 5px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
 
-    .header-name {
-        height: 150px;
-        line-height: 150px;
-        font-size: 20px;
-        text-align: center;
+    .lc2-header {
+        height: 20px;
+        line-height: 20px;
+        font-size: 16px;
+        text-indent: 20px;
+        margin-top: 10px;
     }
 
-    .details-value {
+    .lc2-details {
         height: 40px;
-        font-size: 30px;
-        font-weight: bold;
-        text-align: center;
+        font-size: 16px;
+        margin-top: 2px;
+        // display: flex;
+        // align-items: center;
+        // text-indent: 20px;
 
         span {
-            color: #00c0ff;
-            font-size: 45px;
+            color: #096dd9;
+            font-weight: bold;
+            font-size: 35px;
+            margin-left: 20px;
         }
     }
 
-    .dv-charts-container {
-        height: calc(100% - 190px);
-    }
-
-    .decoration-ring {
-        position: absolute;
-        width: 200px;
-        height: 200px;
-        border-radius: 50%;
-        border: 5px solid fade(#fefefe, 30);
-        top: 190px;
-        left: 50%;
-        transform: translateX(-50%);
+    .lc2-chart {
+        margin-top: 4px;
+        height: calc(100% - 80px);
     }
 }
 </style>

src/components/fullScreen/thirdPage/BottomLeftChart2.vue

@@ -1,82 +1,92 @@
 <template>
-    <div class="bottom-left-chart-2">
-        <div class="header-name">任务维修平均用时</div>
-        <div class="details-value"><span>55.1</span>小时</div>
-        <dv-charts :option="option" />
+    <div class="bottom-left-chart-1">
+        <div class="table-name">
+            <img src="../img/icon4.png" />
+            {{ props.dataInfo.reportName }}: &nbsp;
+            <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+            {{ props.dataInfo.unit }}
+        </div>
+
+        <dv-scroll-board :config="config" />
+        <dv-decoration2 style="height:10px;" />
     </div>
 </template>
   
-<script setup name='BottomLeftChart2' lang="ts">
-import { reactive } from 'vue'
+<script setup name='BottomRightTable1' lang="ts">
+import { ref, Ref, onUpdated } from 'vue'
 
-const option = reactive({
-    series: [
-        {
-            type: 'gauge',
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-                { name: '8小时以内', value: 25, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] },
-                { name: '24小时以内', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '52%' },
-                { name: '48小时以内', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '44%' },
-                { name: '72小时以内', value: 35, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '36%' },
-                { name: '大于72小时', value: 25, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '28%' }
-            ],
-            axisLabel: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            pointer: {
-                show: false
-            },
-            dataItemStyle: {
-                lineCap: 'round'
-            },
-            backgroundArc: {
-                show: false
-            },
-            details: {
-                show: true,
-                formatter: '{name} ',
-                position: 'start',
-                offset: [-10, 0],
-                style: {
-                    fill: '#fff',
-                    fontSize: 12,
-                    textAlign: 'right'
-                }
-            }
-        }
-    ]
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [50, 120]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
 })
 </script>
   
-<style lang="scss" scoped>
-.bottom-left-chart-2 {
-    .header-name {
-        height: 150px;
-        line-height: 150px;
-        font-size: 20px;
-        text-align: center;
+<style lang="scss">
+.bottom-left-chart-1 {
+    width: calc(25% + 10px);
+    margin: 0 5px;
+    padding-top: 18px;
+    text-align: center;
+
+    .border-box-content {
+        padding: 20px;
+        box-sizing: border-box;
     }
 
-    .details-value {
-        height: 40px;
-        font-size: 30px;
-        font-weight: bold;
-        text-align: center;
+    .table-name {
+        height: 45px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 15px;
 
-        span {
-            color: #00c0ff;
-            font-size: 45px;
+        img {
+            width: 40px;
+            height: 40px;
+            margin-right: 5px;
         }
     }
 
-    .dv-charts-container {
-        height: calc(100% - 190px);
+    .dv-scroll-board {
+        height: calc(100% - 98px);
     }
 }
 </style>

src/components/fullScreen/thirdPage/BottomRightTable1.vue

@@ -2,7 +2,10 @@
     <div class="bottom-right-table-1">
         <dv-border-box-6>
             <div class="table-name">
-                <img src="../img/icon1.png" />人员贡献排行榜
+                <img src="../img/icon2.png" />
+                {{ props.dataInfo.reportName }}: &nbsp;
+                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+                {{ props.dataInfo.unit }}
             </div>
 
             <dv-scroll-board :config="config" />
@@ -11,26 +14,49 @@
 </template>
   
 <script setup name='BottomRightTable1' lang="ts">
-import { reactive } from 'vue'
+import { ref, Ref, onUpdated, nextTick } from 'vue'
 
-const config = reactive({
-    data: [
-        ['张三', '月累计排除故障：4起'],
-        ['李四', '月累计排除故障：3起'],
-        ['王五', '月累计排除故障：3起'],
-        ['赵六', '月累计排除故障：3起'],
-        ['钱七', '月累计排除故障：2起'],
-        ['孙八', '月累计排除故障：2起'],
-        ['杨九', '月累计排除故障：2起'],
-        ['吴十', '月累计排除故障：2起'],
-        ['李雷', '月累计排除故障：2起'],
-        ['韩梅梅', '月累计排除故障：2起']
-    ],
-    index: true,
-    columnWidth: [45, 70],
-    align: ['center', 'left', 'left'],
-    oddRowBGC: 'rgba(9, 37, 50, 0.4)',
-    evenRowBGC: 'rgba(10, 32, 50, 0.3)'
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []  
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [45, 100]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
 })
 </script>
   

src/components/fullScreen/thirdPage/BottomRightTable2.vue

@@ -2,7 +2,10 @@
     <div class="bottom-right-table-2">
         <dv-border-box-6>
             <div class="table-name">
-                <img src="../img/icon2.png" />故障设备排行榜
+                <img src="../img/icon2.png" />
+                {{ props.dataInfo.reportName }}: &nbsp;
+                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+                {{ props.dataInfo.unit }}
             </div>
 
             <dv-scroll-board :config="config" />
@@ -11,22 +14,49 @@
 </template>
   
 <script setup name='BottomRightTable2' lang="ts">
-import { reactive } from 'vue'
-
-const config = reactive({
-    data: [
-        ['液晶显示器', '月累计：4起'],
-        ['收费键盘', '月累计：3起'],
-        ['车牌识别仪', '月累计：3起'],
-        ['自动栏杆机', '月累计：3起'],
-        ['称重仪表盘', '月累计：2起'],
-        ['门架机柜空调', '月累计：1起']
-    ],
-    index: true,
-    columnWidth: [45, 120],
-    align: ['center', 'left', 'left'],
-    oddRowBGC: 'rgba(9, 37, 50, 0.4)',
-    evenRowBGC: 'rgba(10, 32, 50, 0.3)'
+import { ref, Ref, onUpdated } from 'vue'
+
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [45, 100]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
 })
 </script>
   

src/components/fullScreen/thirdPage/BottomRightTable3.vue

@@ -2,7 +2,10 @@
     <div class="bottom-right-table-3">
         <dv-border-box-6>
             <div class="table-name">
-                <img src="../img/icon3.png" />常见故障排行
+                <img src="../img/icon2.png" />
+                {{ props.dataInfo.reportName }}: &nbsp;
+                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+                {{ props.dataInfo.unit }}
             </div>
 
             <dv-scroll-board :config="config" />
@@ -11,22 +14,49 @@
 </template>
   
 <script setup name='BottomRightTable3' lang="ts">
-import { reactive } from 'vue'
-
-const config = reactive({
-    data: [
-        ['栏杆机不抬杆', '月累计：4起'],
-        ['栏杆机落杆', '月累计：3起'],
-        ['光端机故障', '月累计：3起'],
-        ['票据打印机', '月累计：3起'],
-        ['视频花屏', '月累计：2起'],
-        ['车牌识别仪', '月累计：1起']
-    ],
-    index: true,
-    columnWidth: [45, 120],
-    align: ['center', 'left', 'left'],
-    oddRowBGC: 'rgba(9, 37, 50, 0.4)',
-    evenRowBGC: 'rgba(10, 32, 50, 0.3)'
+import { ref, Ref, onUpdated } from 'vue'
+
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [45, 100]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
 })
 </script>
   

src/components/fullScreen/thirdPage/BottomRightTable4.vue

@@ -2,7 +2,10 @@
     <div class="bottom-right-table-4">
         <dv-border-box-6>
             <div class="table-name">
-                <img src="../img/icon4.png" />故障位置排行榜
+                <img src="../img/icon3.png" />
+                {{ props.dataInfo.reportName }}: &nbsp;
+                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+                {{ props.dataInfo.unit }}
             </div>
             <dv-scroll-board :config="config" />
         </dv-border-box-6>
@@ -10,22 +13,49 @@
 </template>
   
 <script setup name='BottomRightTable4' lang="ts">
-import { reactive } from 'vue'
-
-const config = reactive({
-    data: [
-        ['收费广场', '月累计：4起'],
-        ['外场道路', '月累计：3起'],
-        ['运维分中心', '月累计：3起'],
-        ['服务区', '月累计：3起'],
-        ['备件库房', '月累计：2起'],
-        ['其他', '月累计：1起']
-    ],
-    index: true,
-    columnWidth: [45, 100],
-    align: ['center', 'left', 'left'],
-    oddRowBGC: 'rgba(9, 37, 50, 0.4)',
-    evenRowBGC: 'rgba(10, 32, 50, 0.3)'
+import { ref, Ref, onUpdated } from 'vue'
+
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [45, 80]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
 })
 </script>
   

src/components/fullScreen/thirdPage/BottomRightTable5.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="bottom-right-table-4">
+        <dv-border-box-6>
+            <div class="table-name">
+                <img src="../img/icon3.png" />
+                {{ props.dataInfo.reportName }}: &nbsp;
+                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
+                {{ props.dataInfo.unit }}
+            </div>
+            <dv-scroll-board :config="config" />
+        </dv-border-box-6>
+    </div>
+</template>
+  
+<script setup name='BottomRightTable4' lang="ts">
+import { ref, Ref, onUpdated } from 'vue'
+
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+interface figType {
+    data: Array<any>,
+    index: boolean,
+    columnWidth: Array<any>,
+    align: Array<any>,
+    oddRowBGC: string,
+    evenRowBGC: string,
+}
+
+const dataArr: Ref<Array<any>> = ref([])
+const config = ref({} as figType)
+
+onUpdated(async () => {
+    dataArr.value = []
+    let unit = props.dataInfo.unit
+    if (props.dataInfo.dataList) {
+        await props.dataInfo.dataList.forEach((e: dataType) => {
+            let d: Array<string> = []
+            d[0] = e.x
+            d[1] = e.y + unit
+            dataArr.value.push(d)
+        })
+    }
+    config.value.data = dataArr.value
+    config.value.index = true
+    config.value.columnWidth = [45, 80]
+    config.value.align = ['center', 'left', 'left']
+    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
+    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
+})
+</script>
+  
+<style lang="scss">
+.bottom-right-table-4 {
+    width: calc(25% + 10px);
+    height: 100%;
+    margin: 0 -5px;
+
+    .border-box-content {
+        padding: 20px;
+        box-sizing: border-box;
+    }
+
+    .table-name {
+        height: 45px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 15px;
+
+        img {
+            width: 40px;
+            height: 40px;
+            margin-right: 5px;
+        }
+    }
+
+    .dv-scroll-board {
+        height: calc(100% - 60px);
+    }
+}
+</style>

src/components/fullScreen/thirdPage/TopLeftCmp.vue

@@ -2,24 +2,38 @@
     <div class="top-left-cmp">
         <div class="dc-left">
             <dv-border-box-5>
-                <div class="main-value"><span>10</span>件</div>
-                <div class="compare-value"><span>同比</span>81</div>
-                <div class="compare-value"><span>环比</span>15</div>
+                <div class="main-value"><span>{{ props.topLeftData[2]?.overview }}</span>
+                    {{ props.topLeftData[2]?.unit }}</div>
+                <div class="compare-value">收入占比&nbsp;&nbsp;
+                    <span>
+                        {{ Number.isNaN((props.topLeftData[2]?.overview / props.topLeftData[0]?.overview * 100)) ? 0 :
+                                (props.topLeftData[2]?.overview / props.topLeftData[0]?.overview * 100).toFixed(2)
+                        }} %
+                    </span>
+                </div>
             </dv-border-box-5>
             <div class="dc-text">
-                运维人均工作量
+                {{ props.topLeftData[3]?.reportName }}
                 <dv-decoration-3 style="width:200px;height:20px;" />
             </div>
         </div>
         <div class="dc-right">
             <div class="dc-text">
-                当月维修任务量
+                {{ props.topLeftData[2]?.reportName }}
                 <dv-decoration-3 style="width:200px;height:20px;" />
             </div>
             <dv-border-box-5 :reverse="true">
-                <div class="main-value"><span>0.2</span>件 / 日</div>
-                <div class="compare-value"><span>同比</span>66</div>
-                <div class="compare-value"><span>环比</span>9</div>
+                <div class="main-value"><span>{{ props.topLeftData[3]?.overview }}</span>
+                    {{ props.topLeftData[3]?.unit }}</div>
+                <div class="compare-value">收入占比&nbsp;&nbsp;
+                    <span>
+                        {{ Number.isNaN((props.topLeftData[3]?.overview / (props.topLeftData[1]?.overview * 10000) *
+        100)) ? 0 : (props.topLeftData[3]?.overview / (props.topLeftData[1]?.overview * 10000) *
+            100).toFixed(2)
+                        }}
+                        %
+                    </span>
+                </div>
             </dv-border-box-5>
         </div>
     </div>
@@ -27,6 +41,13 @@
   
 <script setup name='TopLeftCmp' lang="ts">
 
+const props = defineProps({
+    topLeftData: {
+        type: Object,
+        default: {}
+    }
+})
+
 </script>
   
 <style lang="scss">
@@ -74,10 +95,11 @@
 
     .main-value {
         font-weight: bold;
-        font-size: 30px;
+        font-size: 24px;
+        padding-top: 30px;
 
         span {
-            font-size: 50px;
+            font-size: 24px;
             color: #00c0ff;
             margin-right: 15px;
         }
@@ -89,7 +111,8 @@
         font-size: 18px;
 
         span {
-            margin-right: 30px;
+            margin-right: 15px;
+            color: #00c0ff;
         }
     }
 }

src/components/fullScreen/thirdPage/TopMiddleCmp.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="top-middle-cmp">
         <div class="chart-name">
-            设备完好率月趋势
+            {{ props.dataInfo.reportName }}<br />(今日：{{ indays }})
             <dv-decoration-3 style="width:200px;height:20px;" />
         </div>
         <dv-charts :option="option" />
@@ -9,11 +9,39 @@
 </template>
   
 <script setup name='TopMiddleCmp' lang="ts">
-import { reactive } from 'vue'
+import { reactive, onUpdated, ref, Ref, nextTick } from 'vue'
+import { getDayAgo } from '../../../utils/date'
 
-const option = reactive({
+const props = defineProps({
+    dataInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+const indays = ref('')
+
+const day7Ago = reactive([
+    getDayAgo(-6, '/', 0), 
+    getDayAgo(-5, '/', 0), 
+    getDayAgo(-4, '/', 0), 
+    getDayAgo(-3, '/', 0), 
+    getDayAgo(-2, '/', 0), 
+    getDayAgo(-1, '/', 0), 
+    getDayAgo(0, '/', 0), 
+])
+
+interface dataType {
+    x: string,
+    y: string
+}
+
+const dataArrX: Ref<Array<any>> = ref([])
+const dataArrY: Ref<Array<any>> = ref([])
+
+let option = ref({
     legend: {
-        data: ['设备完好率'],
+        data: [''],
         textStyle: {
             fill: '#fff'
         }
@@ -32,11 +60,7 @@ const option = reactive({
         }
     },
     xAxis: {
-        data: [
-            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06',
-            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
-            '10/12', '10/13', '10/14', '10/15'
-        ],
+        data: day7Ago as Array<any>,
         boundaryGap: false,
         axisLine: {
             style: {
@@ -67,25 +91,20 @@ const option = reactive({
                 fill: '#999'
             },
             formatter(val: any) {
-                return val.value.toFixed(2)
+                return Number.isNaN(val.value) ? 0 : val.value.toFixed(2)
             }
         },
         axisTick: {
             show: false
         },
-        min: 98,
-        max: 100,
-        interval: 0.5
+        min: 0,
+        // max: 1000,
     },
     series: [
         {
-            data: [
-                99.56, 99.66, 99.84, 99.22, 99.11, 99.45,
-                99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
-                99.15, 99.45, 99.64, 99.89
-            ],
+            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
             type: 'line',
-            name: '设备完好率',
+            name: '',
             label: {
                 show: true
             },
@@ -103,6 +122,30 @@ const option = reactive({
         }
     ]
 })
+
+onUpdated(async () => {
+    dataArrX.value = []
+    dataArrY.value = []
+
+    let unit = props.dataInfo.unit
+    await nextTick(() => {
+        if (props.dataInfo.dataList) {
+            props.dataInfo.dataList.forEach((e: dataType) => {
+                dataArrX.value.push(e.x)
+                dataArrY.value.push(e.y)
+            })
+
+            option.value.legend.data[0] = props.dataInfo.reportName
+            option.value.xAxis.data = dataArrX.value
+            option.value.series[0].data = dataArrY.value
+            option.value.series[0].name = props.dataInfo.reportName
+
+            indays.value = props.dataInfo.dataList[props.dataInfo.dataList.length - 1].y + unit
+        }
+    })
+
+})
+
 </script>
   
 <style lang="scss">
@@ -110,6 +153,7 @@ const option = reactive({
     position: relative;
     padding: 0 50px;
     box-sizing: border-box;
+    display: flexbox;
 
     .chart-name {
         position: absolute;

src/components/fullScreen/thirdPage/TopRightCmp.vue

@@ -1,33 +1,63 @@
 <template>
     <div class="top-right-cmp">
         <div class="chart-name">
-            设备故障月趋势
-            <dv-decoration-3 style="width:200px;height:20px;" />
+            医疗分类收入(单位：{{ props.topRightData[0]?.unit }})
+            <dv-decoration-3 style="width:240px;height:20px;" />
         </div>
-        <dv-charts :option="option" />
+        <dv-charts :option="dsfg" />
     </div>
 </template>
   
 <script setup name='TopRightCmp' lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref, onUpdated, Ref, nextTick } from 'vue'
+import { getDayAgo } from '../../../utils/date.js'
 
-const option = reactive({
+const props = defineProps({
+    topRightData: {
+        type: Object,
+        default: {}
+    }
+})
+
+const day7Ago = reactive([
+    getDayAgo(-6, '/', 0),
+    getDayAgo(-5, '/', 0),
+    getDayAgo(-4, '/', 0),
+    getDayAgo(-3, '/', 0),
+    getDayAgo(-2, '/', 0),
+    getDayAgo(-1, '/', 0),
+    getDayAgo(0, '/', 0),
+])
+
+interface dataType {
+    x: string,
+    y: string,
+}
+
+const dataArrA: Ref<Array<any>> = ref([])
+const dataArrB: Ref<Array<any>> = ref([])
+const dataArrC: Ref<Array<any>> = ref([])
+const dataArrD: Ref<Array<any>> = ref([])
+const dataArrE: Ref<Array<any>> = ref([])
+const dataArrX: Ref<Array<any>> = ref([])
+
+let dsfg = ref({
     legend: {
         data: [
             {
-                name: '收费系统',
+                name: '医疗服务收入',
                 color: '#00baff'
             },
             {
-                name: '监控系统',
+                name: '药品收入',
                 color: '#ff5ca9'
             },
             {
-                name: '通信系统',
+                name: '耗材收入',
                 color: '#3de7c9'
             },
             {
-                name: '供配电系统',
+                name: '检验检查收入',
                 color: '#f5d94e'
             }
         ],
@@ -36,13 +66,12 @@ const option = reactive({
         }
     },
     xAxis: {
-        data: [
-            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
-        ],
+        name: '日期',
+        data: day7Ago,
         axisLine: {
             style: {
                 stroke: '#999'
-            }
+            },
         },
         axisLabel: {
             style: {
@@ -53,67 +82,130 @@ const option = reactive({
             show: false
         }
     },
-    yAxis: {
-        data: 'value',
-        splitLine: {
-            show: false
-        },
-        axisLine: {
-            style: {
-                stroke: '#999'
-            }
-        },
-        axisLabel: {
-            style: {
-                fill: '#999'
-            }
-        },
-        axisTick: {
-            show: false
+    yAxis: [
+        {
+            data: 'value',
+            splitLine: {
+                show: false
+            },
+            axisLine: {
+                style: {
+                    stroke: '#999'
+                }
+            },
+            axisLabel: {
+                style: {
+                    fill: '#999'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            min: 0,
         },
-        min: 0,
-        max: 9
-    },
+        {
+            data: 'value',
+            position: 'right',
+            splitLine: {
+                show: false
+            },
+            axisLine: {
+                style: {
+                    stroke: '#999'
+                }
+            },
+            axisLabel: {
+                style: {
+                    fill: '#999'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            min: 0,
+            max: 120,
+            interval: 20,
+        }
+    ],
     series: [
         {
-            name: '收费系统',
-            data: [
-                3.5, 4.5, 7.5, 8.5, 8.5, 7.5, 3.5
-            ],
+            name: '医疗服务收入',
+            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
             type: 'bar',
             label: {
-                show: true
+                show: true,
+                position: 'top',
+                style: {
+                    fill: '#00baff'
+                }
             },
             barStyle: {
-                fill: 'rgba(0, 186, 255, 0.4)'
+                fill: '#00baff'
             }
         },
         {
-            name: '监控系统',
-            data: [
-                2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
-            ],
-            type: 'line',
+            name: '药品收入',
+            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
+            type: 'bar',
             label: {
-                show: true
-            },
-            lineStyle: {
-                stroke: '#ff5ca9'
-            },
-            linePoint: {
-                radius: 4,
+                show: true,
+                position: 'top',
                 style: {
-                    fill: '#ff5ca9',
-                    stroke: 'transparent'
+                    fill: '#ff5ca9'
                 }
+            },
+            barStyle: {
+                fill: '#ff5ca9'
             }
         },
+        // {
+        //     name: '耗材收入',
+        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
+        //     type: 'bar',
+        //     label: {
+        //         show: true
+        //     },
+        //     // yAxisIndex: 1,
+        //     barStyle: {
+        //         fill: '#00db95'
+        //     }
+        // },
+        // {
+        //     name: '检验检查收入',
+        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
+        //     type: 'bar',
+        //     label: {
+        //         show: true
+        //     },
+        //     yAxisIndex: 1,
+        //     barStyle: {
+        //         fill: '#f5d94e'
+        //     }
+        // },
+        // {
+        //     name: '药品收入',
+        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
+        //     type: 'line',
+        //     stack: 'a',
+        //     label: {
+        //         show: true
+        //     },
+        //     lineStyle: {
+        //         stroke: '#ff5ca9'
+        //     },
+        //     linePoint: {
+        //         radius: 4,
+        //         style: {
+        //             fill: '#ff5ca9',
+        //             stroke: 'transparent'
+        //         }
+        //     }
+        // },
         {
-            name: '通信系统',
-            data: [
-                1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
-            ],
+            name: '耗材收入',
+            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
             type: 'line',
+            yAxisIndex: 1,
             smooth: true,
             label: {
                 show: true
@@ -133,14 +225,14 @@ const option = reactive({
             }
         },
         {
-            data: [
-                0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
-            ],
+            name: '检验检查收入',
+            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
             type: 'line',
+            yAxisIndex: 1,
             label: {
-                show: true
+                show: true,
+                offset: [0, -16],
             },
-            name: '供配电系统',
             lineArea: {
                 show: true,
                 gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
@@ -158,6 +250,55 @@ const option = reactive({
         }
     ]
 })
+
+
+onUpdated(async () => {
+    dataArrA.value = []
+    dataArrB.value = []
+    dataArrC.value = []
+    dataArrD.value = []
+    dataArrE.value = []
+    dataArrX.value = []
+
+    await nextTick(() => {
+        if (props.topRightData) {
+            props.topRightData[0].dataList.forEach((e: dataType) => {
+                dataArrX.value.push(e.x)
+                dataArrA.value.push(e.y)
+            })
+
+            props.topRightData[1].dataList.forEach((e: dataType) => {
+                dataArrB.value.push(e.y)
+            })
+
+            props.topRightData[2].dataList.forEach((e: dataType) => {
+                dataArrC.value.push(e.y)
+            })
+
+            props.topRightData[3].dataList.forEach((e: dataType) => {
+                dataArrD.value.push(e.y)
+            })
+
+            for (let i in day7Ago) {
+                dataArrE.value[i] = Number((dataArrA.value[i] - dataArrB.value[i] - dataArrC.value[i] - dataArrD.value[i]).toFixed(2))
+            }
+
+            dsfg.value.legend.data[1].name = props.topRightData[1].reportName
+            dsfg.value.legend.data[2].name = props.topRightData[2].reportName
+            dsfg.value.legend.data[3].name = props.topRightData[3].reportName
+            dsfg.value.xAxis.data = dataArrX.value
+            dsfg.value.series[0].data = dataArrE.value
+            dsfg.value.series[1].data = dataArrB.value
+            dsfg.value.series[1].name = props.topRightData[1].reportName
+            dsfg.value.series[2].data = dataArrC.value
+            dsfg.value.series[2].name = props.topRightData[2].reportName
+            dsfg.value.series[3].data = dataArrD.value
+            dsfg.value.series[3].name = props.topRightData[3].reportName
+        }
+    })
+
+})
+
 </script>
   
 <style lang="scss">

src/utils/date.js

@@ -202,3 +202,41 @@ export function getDateTiffDays(value) {
     // value---最近天数
     return moment(new Date().getTime() - value * 1000 * 24 * 60 * 60).format('YYYY-MM-DD hh:mm:ss')
 }
+
+// 获取前day的日期(arr是日期拼接符，默认'-')
+export function getDayAgo(day, arr, type) {
+
+    var today = new Date();
+    // 日期拼接符
+    if (!arr) {
+        arr = '-'
+    }
+
+    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
+    //注意，这行是关键代码
+    today.setTime(targetday_milliseconds);
+    var tYear = today.getFullYear();
+    var tMonth = today.getMonth();
+    var tDate = today.getDate();
+    tMonth = doHandleMonth(tMonth + 1);
+    tDate = doHandleMonth(tDate);
+
+    // 显示年月
+    if (1 === type) {
+        return tYear + arr + tMonth
+    } else if (2 === type) {
+        // 显示月日
+        return tMonth + arr + tDate;
+    } else {
+        // 显示年月日
+        return tYear + arr + tMonth + arr + tDate;
+    }
+}
+
+function doHandleMonth(month) {
+    var m = month;
+    if (month.toString().length == 1) {
+        m = "0" + month;
+    }
+    return m;
+}

src/views/settings/Test.vue

@@ -1,8 +1,7 @@
 <template>
   <el-button icon="Search" type="primary" @click="selectFullScreen1">查询Page1</el-button>
   <el-button icon="Search" type="primary" @click="selectFullScreen2">查询Page2</el-button>
-  <el-button icon="Search" type="primary" @click="selectFullScreen3">查询Page3</el-button>
-  <!-- <el-button icon="Search" type="primary" @click="selectFullScreen4">测试Page4</el-button> -->
+  <el-button icon="Search" type="primary" @click="selectFullScreen3">门诊-住院数据大屏</el-button>
   <el-dialog v-model="fullDrawer1" fullscreen destroy-on-close>
     <FullScreenFirstPage :fullScreenFirst="fullScreenFirst" />
   </el-dialog>
@@ -12,9 +11,6 @@
   <el-dialog v-model="fullDrawer3" fullscreen destroy-on-close>
     <FullScreenThirdPage :fullScreenFirst="fullScreenFirst" />
   </el-dialog>
-  <el-dialog v-model="fullDrawer4" fullscreen destroy-on-close>
-    <FullIndex :fullScreenFirst="fullScreenFirst" />
-  </el-dialog>
 </template>
 
 <script setup name='Test' lang="ts">
@@ -22,11 +18,16 @@ import { ref, reactive } from 'vue'
 import FullScreenFirstPage from '../../components/fullScreen/fullPage/FullScreenFirstPage.vue'
 import FullScreenSecondPage from '../../components/fullScreen/fullPage/FullScreenSecondPage.vue'
 import FullScreenThirdPage from '../../components/fullScreen/fullPage/FullScreenThirdPage.vue'
-//import FullIndex from '../../components/fullScreen/fullPage/FullIndex.vue'
+import { getDate } from '../../utils/date.js'
 
+let dateS = getDate()
 const params = reactive({
   dept: '信息中心',
   title: '长沙泰和医院门诊-住院诊间数据一览表',
+  type: 'cw',
+  reportType: 'cw',
+  startTime: dateS + ' 00:00:00',
+  endTime: dateS + ' 23:59:59',
 })
 
 const fullDrawer1 = ref(false)