修改优化医技报表

src/components/fullScreen/fullPage/FullScreenSecondPage.vue

@@ -1,18 +1,21 @@
 <template>
     <div id="data-view">
         <dv-full-screen-container>
-            <top-header />
+            <top-header :param="params" />
             <div class="main-content">
-                <digital-flop />
+                <digital-flop :digitalFlop="digitalFlopData" />
                 <div class="block-left-right-content">
-                    <ranking-board />
+                    <dv-border-box8 class="left-chart-container">
+                        <ranking-board :rankingMzjc="rankingMzjc" />
+                    </dv-border-box8>
                     <div class="block-top-bottom-content">
                         <div class="block-top-content">
-                            <rose-chart />
-                            <water-level-chart />
-                            <scroll-board />
+                            <rose-chart :roseZyjc="roseZyjc" />
+                            <!-- <water-level-chart :waterChart="waterChartData" /> -->
+                            <scroll-board :scrollMzCT="scrollMzCT" />
+                            <scroll-board-else :scrollCyCT="scrollCyCT" />
                         </div>
-                        <cards />
+                        <cards :cardsData="cardsData" />
                     </div>
                 </div>
             </div>
@@ -25,10 +28,93 @@ import topHeader from '../secondPage/topHeader.vue'
 import digitalFlop from '../secondPage/digitalFlop.vue'
 import rankingBoard from '../secondPage/rankingBoard.vue'
 import roseChart from '../secondPage/roseChart.vue'
-import waterLevelChart from '../secondPage/waterLevelChart.vue'
+// import waterLevelChart from '../secondPage/waterLevelChart.vue'
 import scrollBoard from '../secondPage/scrollBoard.vue'
+import scrollBoardElse from '../secondPage/scrollBoardElse.vue'
 import cards from '../secondPage/cards.vue'
 import '../common/common.css'
+import { selectFullScreenData } from '../../../api/tj-report/full-screen.js'
+import { reactive, onMounted, Ref, ref, nextTick } from 'vue'
+
+const props = defineProps({
+    fullScreenFirst: {
+        type: Object,
+        default: {}
+    }
+})
+
+const params = ref({})
+params.value = props.fullScreenFirst
+
+const queryTerm = reactive({
+    startTime: '',
+    endTime: '',
+    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 digitalFlopData: Ref<Array<dataInfo>> = ref([])
+const dataInfoData: Ref<Array<dataInfo>> = ref([])
+const cardsData: Ref<Array<dataInfo>> = ref([])
+const scrollMzCT: Ref<dataInfo> = ref({}) as any
+const scrollCyCT: Ref<dataInfo> = ref({}) as any
+const rankingMzjc: Ref<dataInfo> = ref({}) as any
+const roseZyjc: Ref<dataInfo> = ref({}) as any
+const query = async () => {
+    dataInfoData.value = []
+    digitalFlopData.value = []
+    await selectFullScreenData(queryTerm)
+        .then((res) => {
+            returnData.value = res.data
+            returnData.value.forEach(e => {
+                if (e.reportId === 'zy_zyrs') {
+                    dataInfoData.value[0] = e
+                } else if (e.reportId.startsWith('yj_')) {
+                    if (e.reportId.endsWith('mzct')) {
+                        scrollMzCT.value = e
+                    } else if (e.reportId.endsWith('cyct')) {
+                        scrollCyCT.value = e
+                    } else if (e.reportId === 'yj_cyjc') {
+                        roseZyjc.value = e
+                    } else if (e.reportId === 'yj_mzjc') {
+                        rankingMzjc.value = e
+                    }
+                    cardsData.value.push(e)
+                } else {
+                    digitalFlopData.value.push(e)
+                }
+            })
+        }).catch(() => {
+
+        })
+}
+
+let wd = window.setInterval(() => {
+    clearInterval(wd)
+    query()
+}, 60000)
+
 </script>
   
 <style lang="scss" scoped>
@@ -58,6 +144,18 @@ import '../common/common.css'
         margin-top: 20px;
     }
 
+    .left-chart-container {
+        width: 20%;
+        height: 800px;
+        padding: 10px;
+        display: flex;
+        box-sizing: border-box;
+
+        :deep(.border-box-content) {
+            flex-direction: column;
+        }
+    }
+
     .block-top-bottom-content {
         flex: 1;
         display: flex;

src/components/fullScreen/fullPage/FullScreenThirdPage.vue

@@ -95,7 +95,7 @@ const topLeftData: Ref<Array<dataInfo>> = ref([])
 const topRightData: Ref<Array<dataInfo>> = ref([])
 const query = async () => {
     dataInfo.value = []
-    selectFullScreenData(queryTerm)
+    await selectFullScreenData(queryTerm)
         .then((res) => {
             returnData.value = res.data
             returnData.value.forEach(e => {

src/components/fullScreen/secondPage/cards.vue

@@ -1,22 +1,22 @@
 <template>
     <div id="cards">
-        <div class="card-item" v-for="(card, i) in cards" :key="card.title">
+        <div class="card-item" v-for="card in cardsMore" :key="card.title">
             <div class="card-header">
                 <div class="card-header-left">{{ card.title }}</div>
-                <div class="card-header-right">{{ '0' + (i + 1) }}</div>
+                <!-- <div class="card-header-right">{{ '0' + (i + 1) }}</div> -->
             </div>
             <dv-charts class="ring-charts" :option="card.ring" />
             <div class="card-footer">
                 <div class="card-footer-item">
-                    <div class="footer-title">累计金额</div>
+                    <div class="footer-title">{{ card.leftName }}</div>
                     <div class="footer-detail">
-                        <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />元
+                        <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />人
                     </div>
                 </div>
                 <div class="card-footer-item">
-                    <div class="footer-title">巡查病害</div>
+                    <div class="footer-title">{{ card.rightName }}</div>
                     <div class="footer-detail">
-                        <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />处
+                        <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />人
                     </div>
                 </div>
             </div>
@@ -25,83 +25,200 @@
 </template>
   
 <script setup name='cards' lang="ts">
-import { reactive } from 'vue'
+import { watch, nextTick, ref, Ref } from 'vue'
 
-const randomExtend = (minNum: number, maxNum: number) => {
-    if (minNum > 100) {
-        return parseInt(Math.random() * minNum + 1 + '', 10)
-    } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum + '', 10)
+const props = defineProps({
+    cardsData: {
+        type: Object,
+        default: {}
     }
+})
+
+interface dataInfo {
+    reportId: string,
+    reportName: string,
+    overview: any,
+    unit: string,
 }
 
-const cards = new Array(5).fill(0).map((foo, i) => reactive({
-    title: '测试路段' + (i + i),
-    total: {
-        number: [randomExtend(9000, 10000)],
-        content: '{nt}',
-        textAlign: 'right',
-        style: {
-            fill: '#ea6027',
-            fontWeight: 'bold'
-        }
-    },
-    num: {
-        number: [randomExtend(30, 60)],
-        content: '{nt}',
-        textAlign: 'right',
-        style: {
-            fill: '#26fcd8',
-            fontWeight: 'bold'
-        }
-    },
-    ring: {
-        series: [
-            {
-                type: 'gauge',
-                startAngle: -Math.PI / 2,
-                endAngle: Math.PI * 1.5,
-                arcLineWidth: 13,
-                radius: '80%',
-                data: [
-                    { name: '资金占比', value: randomExtend(40, 60) }
-                ],
-                axisLabel: {
-                    show: false
-                },
-                axisTick: {
-                    show: false
-                },
-                pointer: {
-                    show: false
-                },
-                backgroundArc: {
+interface arrInfo {
+    title: string,
+    unit: string,
+    total: number,
+    leftName: string,
+    rightName: string,
+    leftNum: number,
+    rightNum: number,
+}
+
+interface cardType {
+    title: string,
+    leftName: string,
+    rightName: string,
+    total: object,
+    num: object,
+    ring: object,
+}
+
+let ctData: Ref<arrInfo> = ref({}) as any
+let drData: Ref<arrInfo> = ref({}) as any
+let cgzData: Ref<arrInfo> = ref({}) as any
+let ccData: Ref<arrInfo> = ref({}) as any
+let csData: Ref<arrInfo> = ref({}) as any
+
+const cardsInfo: Ref<Array<arrInfo>> = ref([])
+const cardsMore: Ref<Array<cardType>> = ref([])
+
+watch(() => props.cardsData, () => {
+    ctData.value = {} as any
+    drData.value = {} as any
+    cgzData.value = {} as any
+    ccData.value = {} as any
+    csData.value = {} as any
+
+    cardsMore.value = []
+    cardsInfo.value = []
+
+    nextTick(() => {
+        props.cardsData.forEach((e: dataInfo) => {
+            if (e.reportId.endsWith('ct')) {
+                if (e.reportId.endsWith('mzct')) {
+                    ctData.value.title = 'CT人数'
+                    ctData.value.leftName = e.reportName
+                    ctData.value.leftNum = Number(e.overview)
+                } else if (e.reportId.endsWith('cyct')) {
+                    ctData.value.unit = e.unit
+                    ctData.value.rightName = e.reportName
+                    ctData.value.rightNum = Number(e.overview)
+                }
+            } else if (e.reportId.endsWith('dr')) {
+                if (e.reportId.endsWith('mzdr')) {
+                    drData.value.title = 'DR人数'
+                    drData.value.leftName = e.reportName
+                    drData.value.leftNum = Number(e.overview)
+                } else if (e.reportId.endsWith('cydr')) {
+                    drData.value.unit = e.unit
+                    drData.value.rightName = e.reportName
+                    drData.value.rightNum = Number(e.overview)
+                }
+            } else if (e.reportId.endsWith('cgz')) {
+                if (e.reportId.endsWith('mzcgz')) {
+                    cgzData.value.title = '磁共振人数'
+                    cgzData.value.leftName = e.reportName
+                    cgzData.value.leftNum = Number(e.overview)
+                } else if (e.reportId.endsWith('cycgz')) {
+                    cgzData.value.unit = e.unit
+                    cgzData.value.rightName = e.reportName
+                    cgzData.value.rightNum = Number(e.overview)
+                }
+            } else if (e.reportId.endsWith('cc')) {
+                if (e.reportId.endsWith('mzcc')) {
+                    ccData.value.title = '彩超人数'
+                    ccData.value.leftName = e.reportName
+                    ccData.value.leftNum = Number(e.overview)
+                } else if (e.reportId.endsWith('cycc')) {
+                    ccData.value.unit = e.unit
+                    ccData.value.rightName = e.reportName
+                    ccData.value.rightNum = Number(e.overview)
+                }
+            } else if (e.reportId.endsWith('cs')) {
+                if (e.reportId.endsWith('mzcs')) {
+                    csData.value.title = '超声检查人数'
+                    csData.value.leftName = e.reportName
+                    csData.value.leftNum = Number(e.overview)
+                } else if (e.reportId.endsWith('cycs')) {
+                    csData.value.unit = e.unit
+                    csData.value.rightName = e.reportName
+                    csData.value.rightNum = Number(e.overview)
+                }
+            }
+
+        })
+
+        ctData.value.total = Number.isNaN(ctData.value.leftNum + ctData.value.rightNum) ? 0 : ctData.value.leftNum + ctData.value.rightNum
+        drData.value.total = Number.isNaN(drData.value.leftNum + drData.value.rightNum) ? 0 : drData.value.leftNum + drData.value.rightNum
+        cgzData.value.total = Number.isNaN(cgzData.value.leftNum + cgzData.value.rightNum) ? 0 : cgzData.value.leftNum + cgzData.value.rightNum
+        ccData.value.total = Number.isNaN(ccData.value.leftNum + ccData.value.rightNum) ? 0 : ccData.value.leftNum + ccData.value.rightNum
+        csData.value.total = Number.isNaN(csData.value.leftNum + csData.value.rightNum) ? 0 : csData.value.leftNum + csData.value.rightNum
+        cardsInfo.value.push(ctData.value)
+        cardsInfo.value.push(drData.value)
+        cardsInfo.value.push(cgzData.value)
+        cardsInfo.value.push(ccData.value)
+        cardsInfo.value.push(csData.value)
+
+        cardsInfo.value.forEach((f: arrInfo) => {
+            let d = {
+                title: f.title,
+                leftName: f.leftName,
+                rightName: f.rightName,
+                total: {
+                    number: [f.leftNum],
+                    content: '{nt}',
+                    textAlign: 'right',
                     style: {
-                        stroke: '#224590'
+                        fill: '#ea6027',
+                        fontWeight: 'bold'
                     }
                 },
-                details: {
-                    show: true,
-                    formatter: '资金占比{value}%',
+                num: {
+                    number: [f.rightNum],
+                    content: '{nt}',
+                    textAlign: 'right',
                     style: {
-                        fill: '#1ed3e5',
-                        fontSize: 20
+                        fill: '#26fcd8',
+                        fontWeight: 'bold'
                     }
+                },
+                ring: {
+                    series: [
+                        {
+                            type: 'gauge',
+                            startAngle: -Math.PI / 2,
+                            endAngle: Math.PI * 1.5,
+                            arcLineWidth: 13,
+                            radius: '80%',
+                            data: [
+                                { name: '总人数', value: f.total }
+                            ],
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            pointer: {
+                                show: false
+                            },
+                            backgroundArc: {
+                                style: {
+                                    stroke: '#224590'
+                                }
+                            },
+                            details: {
+                                show: true,
+                                formatter: '总人数{value}',
+                                style: {
+                                    fill: '#1ed3e5',
+                                    fontSize: 20
+                                }
+                            }
+                        }
+                    ],
+                    color: ['#03d3ec']
                 }
             }
-        ],
-        color: ['#03d3ec']
-    }
-}))
 
-setInterval(randomExtend, 3000)
+            cardsMore.value.push(d)
+        })
+    })
+}, { deep: true, immediate: true })
 </script>
   
 <style lang="scss">
 #cards {
     display: flex;
     justify-content: space-between;
-    height: 45%;
+    height: 43%;
 
     .card-item {
         background-color: rgba(6, 30, 93, 0.5);
@@ -144,12 +261,13 @@ setInterval(randomExtend, 3000)
     .card-footer-item {
         padding: 5px 10px 0px 10px;
         box-sizing: border-box;
-        width: 40%;
+        width: 45%;
         background-color: rgba(6, 30, 93, 0.7);
         border-radius: 3px;
 
         .footer-title {
             font-size: 15px;
+            text-align: center;
             margin-bottom: 5px;
         }
 

src/components/fullScreen/secondPage/digitalFlop.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="digital-flop">
-        <div class="digital-flop-item" v-for="item in state.digitalFlopData" :key="item.title">
+        <div class="digital-flop-item" v-for="item in digitalFlopData" :key="item.title">
             <div class="digital-flop-title">{{ item.title }}</div>
             <div class="digital-flop">
                 <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
@@ -13,139 +13,52 @@
 </template>
   
 <script setup name='digitalFlop' lang="ts">
-import { reactive } from 'vue'
+import { Ref, ref, nextTick, watch } from 'vue'
 
-const randomExtend = (minNum: number, maxNum: number) => {
-    if (minNum > 100) {
-        return parseInt(Math.random() * minNum + 1 + '', 10)
-    } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum + '', 10)
+const props = defineProps({
+    digitalFlop: {
+        type: Object,
+        default: {}
     }
+})
+
+interface dataInfo {
+    reportName: string,
+    overview: any,
+    unit: string,
 }
 
-const state = reactive({
-    digitalFlopData: [
-        {
-            title: '管养里程',
-            number: {
-                number: [randomExtend(20000, 30000)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#4d99fc',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '公里'
-        },
-        {
-            title: '桥梁',
-            number: {
-                number: [randomExtend(20, 30)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#f46827',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '座'
-        },
-        {
-            title: '涵洞隧道',
-            number: {
-                number: [randomExtend(20, 30)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#40faee',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '匝道',
-            number: {
-                number: [randomExtend(10, 20)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#4d99fc',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '隧道',
-            number: {
-                number: [randomExtend(5, 10)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#f46827',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '服务区',
-            number: {
-                number: [randomExtend(5, 10)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#40faee',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '收费站',
-            number: {
-                number: [randomExtend(5, 10)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#4d99fc',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '超限站',
-            number: {
-                number: [randomExtend(5, 10)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#f46827',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        },
-        {
-            title: '停车区',
-            number: {
-                number: [randomExtend(5, 10)],
-                content: '{nt}',
-                textAlign: 'right',
-                style: {
-                    fill: '#40faee',
-                    fontWeight: 'bold'
-                }
-            },
-            unit: '个'
-        }
-    ]
-})
+interface arrInfo {
+    title: string,
+    number: object,
+    unit: string,
+}
+
+let digitalFlopData: Ref<Array<arrInfo>> = ref([])
+
+watch(() => props.digitalFlop, () => {
+    digitalFlopData.value = []
+
+    nextTick(() => {
+        props.digitalFlop.forEach((e: dataInfo) => {
+            let v: number = parseFloat(e.overview)
+            let d = {
+                title: e.reportName,
+                number: {
+                    number: [v],
+                    content: '{nt}',
+                    style: {
+                        fill: '#4d99fc',
+                        fontWeight: 'bold'
+                    }
+                },
+                unit: e.unit
+            }
+            digitalFlopData.value.push(d)
+        })
+    })
+},{deep: true, immediate: true})
 
-setInterval(randomExtend, 3000)
 </script>
   
 <style lang="scss">
@@ -180,6 +93,7 @@ setInterval(randomExtend, 3000)
     .digital-flop-title {
         font-size: 20px;
         margin-bottom: 20px;
+        text-align: center;
     }
 
     .digital-flop {

src/components/fullScreen/secondPage/rankingBoard.vue

@@ -1,77 +1,89 @@
 <template>
     <div id="ranking-board">
-        <div class="ranking-board-title">巡查上报记录数量</div>
+        <div class="ranking-board-title">
+            {{ props.rankingMzjc.reportName }}
+            {{ props.rankingMzjc.overview }}
+            {{ props.rankingMzjc.unit }}
+        </div>
         <dv-scroll-ranking-board :config="config" />
     </div>
 </template>
   
 <script setup name='rankingBoard' lang="ts">
-import { reactive } from 'vue'
-const config = reactive({
-    data: [
-        {
-            name: '日常养护',
-            value: 55
-        },
-        {
-            name: '交通事故',
-            value: 120
-        },
-        {
-            name: '路面',
-            value: 78
-        },
-        {
-            name: '桥通',
-            value: 66
-        },
-        {
-            name: '计日工',
-            value: 80
-        },
-        {
-            name: '路基',
-            value: 45
-        },
-        {
-            name: '交安设施',
-            value: 29
-        },
-        {
-            name: '除雪',
-            value: 29
-        },
-        {
-            name: '绿化',
-            value: 29
-        }
-    ],
-    rowNum: 9
+import { watch, nextTick, Ref, ref } from 'vue'
+
+const props = defineProps({
+    rankingMzjc: {
+        type: Object,
+        default: {}
+    }
 })
 
+interface dataInfo {
+    x: string,
+    y: number
+}
+
+interface configType {
+    name: string,
+    value: number
+}
+
+let config: Ref<object> = ref({})
+
+watch(() => props.rankingMzjc, () => {
+
+    if (props.rankingMzjc.dataList) {
+        let dd: Array<configType> = []
+        nextTick(() => {
+            props.rankingMzjc.dataList.forEach((e: dataInfo) => {
+                let de: configType = {} as any
+                de.name = e.x
+                de.value = e.y
+                dd.push(de)
+            })
+
+            let d = {
+                data: dd,
+                rowNum: 9
+            }
+
+            config.value = d
+        })
+
+    }
+
+}, { deep: true, immediate: true })
+
 </script>
   
 <style lang="scss">
 #ranking-board {
-    width: 20%;
+    width: 100%;
+    height: 100%;
     box-shadow: 0 0 3px blue;
     display: flex;
+    flex-grow: 0;
     flex-direction: column;
     background-color: rgba(6, 30, 93, 0.5);
     border-top: 2px solid rgba(1, 153, 209, .5);
     box-sizing: border-box;
-    padding: 0px 30px;
+    padding: 0px 10px;
 
     .ranking-board-title {
         font-weight: bold;
         height: 50px;
         display: flex;
         align-items: center;
+        text-align: center;
+        justify-content: center;
         font-size: 20px;
     }
 
     .dv-scroll-ranking-board {
-        flex: 1;
+        flex: 2;
+        overflow: hidden;
+        height: calc(100% - 50px);
     }
 }
 </style>

src/components/fullScreen/secondPage/roseChart.vue

@@ -1,64 +1,127 @@
 <template>
     <div id="rose-chart">
-        <div class="rose-chart-title">累计计量资金分布</div>
-        <dv-charts :option="option" />
+        <div class="rose-chart-title">
+            {{ props.roseZyjc.reportName }}
+            {{ props.roseZyjc.overview }}
+            {{ props.roseZyjc.unit }}
+        </div>
+        <dv-charts :option="config" />
     </div>
 </template>
   
 <script setup name='roseChart' lang="ts">
-import { reactive } from 'vue'
+import { watch, nextTick, Ref, ref } from 'vue'
 
-const randomExtend = (minNum: number, maxNum: number) => {
-    if (minNum > 100) {
-        return parseInt(Math.random() * minNum + 1 + '', 10)
-    } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum + '', 10)
+const props = defineProps({
+    roseZyjc: {
+        type: Object,
+        default: {}
     }
+})
+
+interface dataInfo {
+    x: string,
+    y: number
 }
 
-const option = reactive({
-    series: [
-        {
-            type: 'pie',
-            radius: '50%',
-            roseSort: false,
-            data: [
-                { name: '路基', value: randomExtend(40, 70) },
-                { name: '交安设施', value: randomExtend(20, 30) },
-                { name: '日常养护', value: randomExtend(10, 50) },
-                { name: '桥通', value: randomExtend(5, 20) },
-                { name: '交通事故', value: randomExtend(40, 50) },
-                { name: '路面', value: randomExtend(20, 30) },
-                { name: '绿化', value: randomExtend(5, 10) },
-                { name: '计日工', value: randomExtend(20, 35) },
-                { name: '除雪', value: randomExtend(5, 10) }
-            ],
-            insideLabel: {
-                show: false
-            },
-            outsideLabel: {
-                formatter: '{name} {percent}%',
-                labelLineEndLength: 20,
-                style: {
-                    fill: '#fff'
-                },
-                labelLineStyle: {
-                    stroke: '#fff'
+interface configType {
+    name: string,
+    value: number
+}
+
+let config: Ref<object> = ref({})
+
+watch(() => props.roseZyjc, () => {
+    let sum = Number(props.roseZyjc.overview)
+
+    if (props.roseZyjc.dataList) {
+        let dd: Array<configType> = []
+        let qt: configType = {} as any
+        nextTick(() => {
+            let qthj: number = 0
+            props.roseZyjc.dataList.forEach((e: dataInfo, index: number) => {
+                if (index > 10) {
+                    qthj = qthj + e.y
+                } else {
+                    let de: configType = {} as any
+                    de.name = e.x
+                    de.value = e.y
+                    dd.push(de)
                 }
-            },
-            roseType: true
-        }
-    ],
-    color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
-})
+            })
+
+            qt.name = '其他项目'
+            qt.value = qthj
+            dd.push(qt)
 
-setInterval(randomExtend, 3000)
+            let showData: Array<configType> = []
+            let max = 0
+
+            dd.forEach(item => {
+                if (item.value >= max) {
+                    max = item.value
+                }
+            })
+
+            // 放大规则
+            var number = Math.round(max * 0.5)
+
+            showData = dd.map(item => {
+                return {
+                    value: number + item.value,
+                    name: item.name
+                }
+            })
+
+            let d = {
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '55%',
+                        roseSort: false,
+                        data: showData,
+                        insideLabel: {
+                            show: false
+                        },
+                        labelLine: {
+                            normal: {
+                                length: 5
+                            }
+                        },
+                        outsideLabel: {
+                            // formatter: '{name} {value} ({percent}%)',
+                            formatter: function (param: configType) {
+                                if(param.name === qt.name){
+                                    return qt.name + ': ' + qt.value + ' ' + ((qt.value / sum) * 100).toFixed(2) + '%'
+                                } else {
+                                    return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100).toFixed(2) + '%'
+                                }
+                            },
+                            labelLineEndLength: 20,
+                            style: {
+                                fill: '#fff'
+                            },
+                            labelLineStyle: {
+                                stroke: '#fff'
+                            }
+                        },
+                        roseType: true
+                    }
+                ],
+            }
+
+            config.value = d
+        })
+
+    }
+
+}, { deep: true, immediate: true })
 
 </script>
   
 <style lang="scss">
 #rose-chart {
-    width: 30%;
+    width: 54%;
     height: 100%;
     background-color: rgba(6, 30, 93, 0.5);
     border-top: 2px solid rgba(1, 153, 209, .5);
@@ -71,6 +134,8 @@ setInterval(randomExtend, 3000)
         font-size: 20px;
         display: flex;
         align-items: center;
+        justify-content: center;
+        align-items: center;
     }
 
     .dv-charts-container {

src/components/fullScreen/secondPage/scrollBoard.vue

@@ -5,37 +5,58 @@
 </template>
   
 <script setup name='scrollBoard' lang="ts">
-import { reactive } from 'vue'
-
-const config = reactive({
-    header: ['时间', '病害信息', '数量', '标段'],
-    data: [
-        ['2019-07-01 19:25:00', '路面危害-松散', '5', 'xxxxxxx'],
-        ['2019-07-02 17:25:00', '路面危害-路面油污清理', '13', 'xxxxxxx'],
-        ['2019-07-03 16:25:00', '交安设施-交通标志牌结构', '6', 'xxxxxxx'],
-        ['2019-07-04 15:25:00', '路基危害-防尘网', '2', 'xxxxxxx'],
-        ['2019-07-05 14:25:00', '交安设施-交通标志牌结构', '1', 'xxxxxxx'],
-        ['2019-07-06 13:25:00', '路面危害-松散', '3', 'xxxxxxx'],
-        ['2019-07-07 12:25:00', '路基危害-防尘网', '4', 'xxxxxxx'],
-        ['2019-07-08 11:25:00', '路面危害-路面油污清理', '2', 'xxxxxxx'],
-        ['2019-07-09 10:25:00', '交安设施-交通标志牌结构', '5', 'xxxxxxx'],
-        ['2019-07-10 09:25:00', '路基危害-防尘网', '3', 'xxxxxxx']
-    ],
-    index: true,
-    columnWidth: [50, 170, 300],
-    align: ['center'],
-    rowNum: 7,
-    headerBGC: '#1981f6',
-    headerHeight: 45,
-    oddRowBGC: 'rgba(0, 44, 81, 0.8)',
-    evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+import { watch, ref, Ref, nextTick } from 'vue'
+
+const props = defineProps({
+    scrollMzCT: {
+        type: Object,
+        default: {}
+    }
 })
 
+interface dataInfo {
+    x: string,
+    y: string
+}
+
+let config: Ref<object> = ref({})
+
+watch(() => props.scrollMzCT, () => {
+
+    if (props.scrollMzCT.dataList) {
+        let dd: Array<Array<string>> = []
+        nextTick(() => {
+            props.scrollMzCT.dataList.forEach((e: dataInfo) => {
+                let de: Array<string> = []
+                de[0] = e.x
+                de[1] = e.y
+                dd.push(de)
+            })
+            let d = {
+                header: ['科室', props.scrollMzCT.reportName],
+                indexHeader: '序号',
+                data: dd,
+                index: true,
+                columnWidth: [80, 150],
+                align: ['center', 'left', 'center'],
+                rowNum: 7,
+                headerBGC: '#1981f6',
+                headerHeight: 45,
+                oddRowBGC: 'rgba(0, 44, 81, 0.8)',
+                evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+            }
+
+            config.value = d
+        })
+    }
+
+}, { deep: true, immediate: true })
+
 </script>
   
 <style lang="scss">
 #scroll-board {
-    width: 50%;
+    width: 23%;
     box-sizing: border-box;
     margin-left: 20px;
     height: 100%;

src/components/fullScreen/secondPage/scrollBoardElse.vue

@@ -0,0 +1,65 @@
+<template>
+    <div id="scroll-board">
+        <dv-scroll-board :config="config" />
+    </div>
+</template>
+  
+<script setup name='scrollBoard' lang="ts">
+import { watch, ref, Ref, nextTick } from 'vue'
+
+const props = defineProps({
+    scrollCyCT: {
+        type: Object,
+        default: {}
+    }
+})
+
+interface dataInfo {
+    x: string,
+    y: string
+}
+
+let config: Ref<object> = ref({})
+
+watch(() => props.scrollCyCT, () => {
+
+    if (props.scrollCyCT.dataList) {
+        let dd: Array<Array<string>> = []
+        nextTick(() => {
+            props.scrollCyCT.dataList.forEach((e: dataInfo) => {
+                let de: Array<string> = []
+                de[0] = e.x
+                de[1] = e.y
+                dd.push(de)
+            })
+            let d = {
+                header: ['科室', props.scrollCyCT.reportName],
+                indexHeader: '序号',
+                data: dd,
+                index: true,
+                columnWidth: [80, 150],
+                align: ['center', 'left', 'center'],
+                rowNum: 7,
+                headerBGC: '#1981f6',
+                headerHeight: 45,
+                oddRowBGC: 'rgba(0, 44, 81, 0.8)',
+                evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+            }
+
+            config.value = d
+        })
+    }
+
+}, { deep: true, immediate: true })
+
+</script>
+  
+<style lang="scss">
+#scroll-board {
+    width: 23%;
+    box-sizing: border-box;
+    margin-left: 20px;
+    height: 100%;
+    overflow: hidden;
+}
+</style>

src/components/fullScreen/secondPage/topHeader.vue

@@ -3,12 +3,17 @@
         <dv-decoration-8 class="header-left-decoration" />
         <dv-decoration-5 class="header-center-decoration" />
         <dv-decoration-8 class="header-right-decoration" :reverse="true" />
-        <div class="center-title">施工养护综合数据</div>
+        <div class="center-title">{{ props.param.title }}</div>
     </div>
 </template>
   
 <script setup name='topHeader' lang="ts">
-
+const props = defineProps({
+    param: {
+        type: Object,
+        default: {}
+    }
+})
 </script>
   
 <style lang="scss">

src/components/fullScreen/secondPage/waterLevelChart.vue

@@ -1,9 +1,17 @@
 <template>
     <div id="water-level-chart">
-        <div class="water-level-chart-title">计划资金累计完成情况</div>
+        <div class="water-level-chart-title">病危病重在院人数占比</div>
 
         <div class="water-level-chart-details">
-            累计完成<span>235,680</span>元
+            危重病人数: <span>
+                {{
+                    Number.isNaN(Number(props.waterChart[1]?.overview)) ? 0 : Number(props.waterChart[1]?.overview) +
+                        Number(props.waterChart[2]?.overview)
+                }}
+            </span>
+            {{
+                props.waterChart[0]?.unit
+            }}
         </div>
 
         <div class="chart-container">
@@ -13,19 +21,56 @@
 </template>
   
 <script setup name='waterLevelChart' lang="ts">
-import { reactive } from 'vue'
+import { watch, Ref, ref, nextTick } from 'vue'
 
-const config = reactive({
-    data: [45],
-    shape: 'round',
-    waveHeight: 25,
-    waveNum: 2
+const props = defineProps({
+    waterChart: {
+        type: Object,
+        default: {}
+    }
 })
+
+interface dataInfo {
+    data: Array<number>,
+    shape: string,
+    waveHeight: number,
+    waveNum: number,
+}
+
+let config: Ref<dataInfo> = ref({}) as any
+
+watch(() => props.waterChart, () => {
+
+    nextTick(() => {
+        let m = Number(props.waterChart[1]?.overview) + Number(props.waterChart[2]?.overview)
+        if (!Number.isNaN(m)) {
+            let n = Number((m / props.waterChart[0]?.overview * 100).toFixed(2))
+            let l = {
+                data: [n],
+                shape: 'round',
+                waveHeight: 25,
+                waveNum: 2
+            }
+            config.value = l
+        } else {
+            let l = {
+                data: [0],
+                shape: 'round',
+                waveHeight: 25,
+                waveNum: 2
+            }
+            config.value = l
+        }
+
+    })
+
+}, { deep: true, immediate: true })
+
 </script>
   
 <style lang="scss">
 #water-level-chart {
-    width: 20%;
+    width: 25%;
     box-sizing: border-box;
     margin-left: 20px;
     background-color: rgba(6, 30, 93, 0.5);

src/views/settings/Test.vue

@@ -1,12 +1,12 @@
 <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">门诊-住院数据大屏</el-button>
+  <el-button icon="Search" type="primary" @click="selectFullScreen2">门诊-住院医技</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>
   <el-dialog v-model="fullDrawer2" fullscreen destroy-on-close>
-    <FullScreenSecondPage :fullScreenFirst="fullScreenFirst" />
+    <FullScreenSecondPage :fullScreenFirst="fullScreenSecond" />
   </el-dialog>
   <el-dialog v-model="fullDrawer3" fullscreen destroy-on-close>
     <FullScreenThirdPage :fullScreenFirst="fullScreenFirst" />
@@ -30,6 +30,15 @@ const params = reactive({
   endTime: dateS + ' 23:59:59',
 })
 
+const params2 = reactive({
+  dept: '信息中心',
+  title: '长沙泰和医院医技诊间数据一览表',
+  type: 'yj',
+  reportType: 'yj',
+  startTime: dateS + ' 00:00:00',
+  endTime: dateS + ' 23:59:59',
+})
+
 const fullDrawer1 = ref(false)
 const fullScreenFirst = ref({})
 const selectFullScreen1 = () => {
@@ -38,8 +47,9 @@ const selectFullScreen1 = () => {
 }
 
 const fullDrawer2 = ref(false)
+const fullScreenSecond = ref({})
 const selectFullScreen2 = () => {
-  fullScreenFirst.value = params
+  fullScreenSecond.value = params2
   fullDrawer2.value = true
 
 }
@@ -51,12 +61,6 @@ const selectFullScreen3 = () => {
 
 }
 
-const fullDrawer4 = ref(false)
-const selectFullScreen4 = () => {
-  fullScreenFirst.value = params
-  fullDrawer4.value = true
-}
-
 </script>
 
 <style lang="scss" scoped>