跟新可视化样式

src/views/visualization/index.vue

@@ -20,29 +20,38 @@
                         <PieEcharts></PieEcharts>
                     </div>
                 </div>
-                <div class="leftOneBox">
-                    <div class="leftOBTitle">生产总值</div>
-                    <div class="leftOBContent">
+                <div class="leftTwoBox">
+                    <div class="leftGDPTitle">生产总值</div>
+                    <div class="leftGDPContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
-                <div class="leftOneBox">
-                    <div class="leftOBTitle">税收TOP10</div>
-                    <div class="leftOBContent">
-                    </div>
+                <div class="leftThreeBox">
+                    <div class="leftTaxationTitle">税收TOP10</div>
+                    <el-scrollbar height="calc(100% - 40px)">
+                        <div class="leftTaxationContent">
+                            <div class="LTCKing" v-for="(item, index) in RanKingData" :key="index">
+                                <div class="ranking">
+                                    <img :src=item.mig alt="">
+                                </div>
+                                <div class="companyName">{{ item.name }}</div>
+                                <div class="companyValue">65.21万元</div>
+                            </div>
+                        </div>
+                    </el-scrollbar>
                 </div>
                 <!-- <div>2</div> -->
             </div>
 
             <div class="boxBottom">
                 <div class="boxBttOne">
-                    <div class="leftOBTitle">税收TOP10</div>
+                    <div class="leftOBTitle">园区特色融资贷款</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
                 <div class="boxBttTwo">
-                    <div class="leftOBTitle">税收TOP10</div>
+                    <div class="leftOBTitle">企业管理</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
@@ -50,16 +59,25 @@
             </div>
 
             <div class="right">
-                <div class="leftOneBox">
-                    <div class="leftOBTitle">园区概况</div>
-                    <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
+                <div class="rightParkBox">
+                    <div class="rightParkTtile">园区概况</div>
+                    <div class="rightParkContent">
+                        <div class="RPCBox" v-for="(item, index) in parkData" :key="index">
+                            <div class="RPCBImg">
+                                <img :src=item.img alt="">
+                            </div>
+                            <div class="RPCBData">
+                                <div class="RPCBDNumber">{{ item.value }}</div>
+                                <div class="RPCBDName">{{ item.title }}</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="leftOneBox">
-                    <div class="leftOBTitle">行业合规</div>
-                    <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
+                <div class="rightIndustryComplianceBox">
+                    <div class="RICBTitle">行业合规</div>
+                    <div class="RICBTContent">
+                        <div></div>
+                        <div></div>
                     </div>
                 </div>
                 <div class="leftOneBox">
@@ -95,6 +113,91 @@ const data = reactive({
     },
 })
 const { queryParams } = toRefs(data)
+import one from '@/assets/visualizationimg/one.png';
+import two from '@/assets/visualizationimg/two.png';
+import three from '@/assets/visualizationimg/three.png';
+import four from '@/assets/visualizationimg/four.png';
+import five from '@/assets/visualizationimg/five.png';
+import six from '@/assets/visualizationimg/six.png';
+import seven from '@/assets/visualizationimg/seven.png';
+import eight from '@/assets/visualizationimg/eight.png';
+import nine from '@/assets/visualizationimg/nine.png';
+import ten from '@/assets/visualizationimg/ten.png';
+
+import parkOne from '@/assets/visualizationimg/parkOne.png';
+import parktwo from '@/assets/visualizationimg/parktwo.png';
+import parkthree from '@/assets/visualizationimg/parkthree.png';
+import parkfour from '@/assets/visualizationimg/parkfour.png';
+import parkfive from '@/assets/visualizationimg/parkfive.png';
+import parksix from '@/assets/visualizationimg/parksix.png';
+
+const parkData = [{
+    title: '入驻企业',
+    value: 123,
+    img: parkOne
+}, {
+    title: '占地面积',
+    value: 400,
+    img: parktwo
+}, {
+    title: '产业资源',
+    value: 12,
+    img: parkthree
+}, {
+    title: '规划面积',
+    value: 900,
+    img: parkfour
+}, {
+    title: '总产值',
+    value: 12,
+    img: parkfive
+}, {
+    title: '总利润',
+    value: 11,
+    img: parksix
+}]
+
+const RanKingData = [{
+    name: '湖南骏泰新材料科技有限责任公司',
+    value: '66.25',
+    mig: one
+}, {
+    name: '湖南正清制药集团股份有限公司',
+    value: '66.25',
+    mig: two
+}, {
+    name: '湖南兴怀新材料科技有限公司',
+    value: '66.25',
+    mig: three
+}, {
+    name: '金升阳（怀化）科技有限公司',
+    value: '66.25',
+    mig: four
+}, {
+    name: '怀化恒枫饮料有限公司',
+    value: '66.25',
+    mig: five
+}, {
+    name: '怀化金弘再生资源有限公司',
+    value: '66.25',
+    mig: six
+}, {
+    name: '湖南骏泰生物质发电有限责任公司',
+    value: '66.25',
+    mig: seven
+}, {
+    name: '湖南红宝科技开发有限公司',
+    value: '',
+    mig: eight
+}, {
+    name: '湖南诚路管业科技有限公司',
+    value: '66.25',
+    mig: nine
+}, {
+    name: '湖南湘鹤集团电缆科技股份有限公司',
+    value: '66.25',
+    mig: ten
+}]
 
 const gradationMun = [{
     name: "3A级企业",
@@ -312,6 +415,7 @@ onBeforeUnmount(() => {
         position: relative;
 
         .left {
+            left: 20px;
             float: left;
             position: relative;
             margin-left: -100%;
@@ -321,12 +425,16 @@ onBeforeUnmount(() => {
             top: 60px;
             z-index: 999;
 
-            .leftOneBox {
+            .leftOneBox,
+            .leftTwoBox,
+            .leftThreeBox {
                 height: 30%;
                 background-color: rgba($color: #000000, $alpha: .3);
                 margin-bottom: 14px;
 
-                .leftOBTitle {
+                .leftOBTitle,
+                .leftGDPTitle,
+                .leftTaxationTitle {
                     height: 40px;
                     color: white;
                     line-height: 40px;
@@ -336,8 +444,41 @@ onBeforeUnmount(() => {
                     background-size: 100% 100%;
                 }
 
-                .leftOBContent {
+                .leftOBContent,
+                .leftGDPContent,
+                .leftTaxationContent {
                     height: calc(100% - 40px);
+
+                    .LTCKing {
+                        display: flex;
+                        color: white;
+                        // justify-content: space-between;
+                        align-items: center;
+                        background-image: url("../../assets/visualizationimg/rankingbu.png");
+                        background-size: 100% 100%;
+                        padding: 10px 10px;
+
+                        .ranking {
+                            width: 25px;
+                            height: 25px;
+                            margin-right: 10px;
+
+                            img {
+                                width: 25px;
+                                height: 25px;
+                            }
+                        }
+
+                        .companyName {
+                            flex: 1;
+                            font-size: 16px;
+                            font-weight: 500;
+                        }
+
+                        .companyValue {
+                            color: #DFD92C;
+                        }
+                    }
                 }
             }
         }
@@ -347,8 +488,8 @@ onBeforeUnmount(() => {
             z-index: 999;
             height: 270px;
             bottom: 0;
-            width: 900px;
-            left: 510px;
+            width: 860px;
+            left: 530px;
             display: flex;
             background-color: rgba($color: #000000, $alpha: .3);
 
@@ -407,6 +548,7 @@ onBeforeUnmount(() => {
         }
 
         .right {
+            right: 20px;
             float: left;
             position: relative;
             margin-left: -500px;
@@ -416,12 +558,16 @@ onBeforeUnmount(() => {
             top: 60px;
             z-index: 999;
 
-            .leftOneBox {
+            .leftOneBox,
+            .rightParkBox,
+            .rightIndustryComplianceBox {
                 height: 30%;
                 background-color: rgba($color: #000000, $alpha: .3);
                 margin-bottom: 14px;
 
-                .leftOBTitle {
+                .leftOBTitle,
+                .rightParkTtile,
+                .RICBTitle {
                     height: 40px;
                     color: white;
                     line-height: 40px;
@@ -433,6 +579,59 @@ onBeforeUnmount(() => {
 
                 .leftOBContent {
                     height: calc(100% - 40px);
+
+                }
+
+                .rightParkContent {
+                    height: calc(100% - 40px);
+                    display: grid;
+                    grid-template-columns: repeat(3, 33.33%);
+                    grid-template-rows: repeat(2, 50%);
+                    align-items: center;
+
+                    .RPCBox {
+                        width: 100%;
+                        height: 70%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .RPCBImg {
+                            width: 60px;
+                            height: 60px;
+                        }
+
+                        .RPCBData {
+                            margin-left: 10px;
+
+                            .RPCBDNumber {
+                                font-weight: normal;
+                                font-size: 24px;
+                                color: #21F2FF;
+                            }
+
+                            .RPCBDName {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #C9E2FF;
+                            }
+                        }
+                    }
+                }
+
+                .RICBTContent {
+                    height: calc(100% - 40px);
+                    display: grid;
+                    grid-template-columns: repeat(1, 100%);
+                    grid-template-rows: repeat(2, 50%);
+                    align-items: center;
+
+                    div {
+                        width: 100%;
+                        height: 100%;
+                        background-image: url("../../assets/visualizationimg/imdustryCompliance.png");
+                        background-size: 100% 100%;
+                    }
                 }
             }
         }