gx

src/view/sy.vue

@@ -10,10 +10,16 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span>
+                <span class="left">收入：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
+                >
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
+                <span class="left">支出：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
+                >
               </div>
             </div>
           </div>
@@ -21,10 +27,16 @@
             <div class="item_title"><span class="blue">工伤</span>保险</div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span>
+                <span class="left">收入：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
+                >
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
+                <span class="left">支出：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
+                >
               </div>
             </div>
           </div>
@@ -34,10 +46,16 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span>
+                <span class="left">收入：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
+                >
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
+                <span class="left">支出：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
+                >
               </div>
             </div>
           </div>
@@ -47,10 +65,16 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span>
+                <span class="left">收入：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
+                >
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
+                <span class="left">支出：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
+                >
               </div>
             </div>
           </div>
@@ -60,10 +84,16 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span>
+                <span class="left">收入：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
+                >
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
+                <span class="left">支出：</span
+                ><span class="right"
+                  >{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
+                >
               </div>
             </div>
           </div>
@@ -100,10 +130,12 @@
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span1">{{ jysyList[0].title }}</span>学校师生比
+                <span class="span1">{{ jysyList[0].title }}</span
+                >学校师生比
               </div>
               <div class="right">
-                <span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }}
+                <span class="span1">{{ jysyList[0].teacher }}</span
+                >:{{ jysyList[0].student }}
               </div>
             </div>
             <div class="left_2_bottom_item_xia">
@@ -113,7 +145,8 @@
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span2">{{ jysyList[1].title }}</span>学校师生比
+                <span class="span2">{{ jysyList[1].title }}</span
+                >学校师生比
               </div>
               <div class="right">
                 {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
@@ -166,23 +199,44 @@
         <ePie style="margin-bottom: 30px" :list="data.ageGroup"></ePie>
         <div class="table">
           <div class="table_choose">
-            <div :class="choose == '1' ? 'choose' : 'noChoose'" @click="change('1')">
+            <div
+              :class="choose == '1' ? 'choose' : 'noChoose'"
+              @click="change('1')"
+            >
               公共服务
             </div>
-            <div :class="choose == '2' ? 'choose' : 'noChoose'" @click="change('2')">
+            <div
+              :class="choose == '2' ? 'choose' : 'noChoose'"
+              @click="change('2')"
+            >
               企业服务
             </div>
-            <div :class="choose == '3' ? 'choose' : 'noChoose'" @click="change('3')">
+            <div
+              :class="choose == '3' ? 'choose' : 'noChoose'"
+              @click="change('3')"
+            >
               政务服务
             </div>
           </div>
-          <el-table :data="tableData" style="width: 100%; height: 272px" class="table_border" :row-style="rowState"
+          <el-table
-            :header-cell-style="tableHeaderColor">
+            :data="tableData"
+            style="width: 100%; height: 272px"
+            class="table_border"
+            :row-style="rowState"
+            :header-cell-style="tableHeaderColor"
+          >
             <el-table-column prop="company" label="企业名称" width="180" />
-            <el-table-column prop="address" label="项目事项牵头单位" width="180" />
+            <el-table-column
+              prop="address"
+              label="项目事项牵头单位"
+              width="180"
+            />
             <el-table-column prop="finish" label="完成情况">
               <template #default="scope">
-                <div style="letter-spacing: 3px" :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'">
+                <div
+                  style="letter-spacing: 3px"
+                  :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'"
+                >
                   {{ scope.row.finish ? "已完成" : "未完成" }}
                 </div>
               </template>
@@ -195,7 +249,11 @@
       <div class="flex1">
         <div class="yd_title mechanism"></div>
         <div class="ylws">
-          <div class="ylws_item" v-for="(item, index) in data.ylwsList" :key="index">
+          <div
+            class="ylws_item"
+            v-for="(item, index) in data.ylwsList"
+            :key="index"
+          >
             <div class="name">{{ item.name }}</div>
             <div class="value">{{ item.value }}</div>
           </div>
@@ -204,7 +262,11 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title service"></div>
         <div class="whsy">
-          <div class="whsy_item" v-for="(item, index) in data.whsyList" :key="index">
+          <div
+            class="whsy_item"
+            v-for="(item, index) in data.whsyList"
+            :key="index"
+          >
             <div class="name">{{ item.name }}</div>
             <div class="value">
               {{ item.value }}<span>{{ item.dw }}</span>
@@ -215,7 +277,11 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title last"></div>
         <div class="tysy">
-          <div class="tysy_item" v-for="(item, index) in data.tysyList" :key="index">
+          <div
+            class="tysy_item"
+            v-for="(item, index) in data.tysyList"
+            :key="index"
+          >
             <div class="value">
               {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
             </div>
@@ -226,7 +292,7 @@
       </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title last_1"></div>
-        <table class="table">
+        <!-- <table class="table">
           <tbody>
             <tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">
               <td>{{ item.name }}</td>
@@ -244,10 +310,92 @@
               </td>
             </tr>
           </tbody>
-        </table>
+        </table> -->
+        <div class="jtsyBox">
+          <div class="jtsyBoxtop">
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[0].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[0].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[0].key1 }}：
+                  <span>{{ data.jtsyList[0].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[0].key2 }}：
+                  <span>{{ data.jtsyList[0].key2_value }}</span>
                 </div>
               </div>
-    <Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title" :tableData="tableType.data" @close="close">
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[1].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[1].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[1].key1 }}：
+                  <span>{{ data.jtsyList[1].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[1].key2 }}：
+                  <span>{{ data.jtsyList[1].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="jtsyBoxbot">
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[2].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[2].key1 }}：
+                  <span>{{ data.jtsyList[2].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[2].key2 }}：
+                  <span>{{ data.jtsyList[2].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[3].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[3].key1 }}：
+                  <span>{{ data.jtsyList[3].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[3].key2 }}：
+                  <span>{{ data.jtsyList[3].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[4].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[4].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[4].key1 }}：
+                  <span>{{ data.jtsyList[4].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[4].key2 }}：
+                  <span>{{ data.jtsyList[4].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      @close="close"
+    >
     </Dialog>
   </div>
 </template>
@@ -259,75 +407,81 @@ import footerball from "../assets/images/sy/footerball.png";
 import baskerball from "../assets/images/sy/baskerball.png";
 import badminton from "../assets/images/sy/badminton.png";
 import running from "../assets/images/sy/running.png";
-import Dialog from "./dialog/dialog.vue";
 import tableTennis from "../assets/images/sy/tableTennis.png";
+
+import ggjtimg from "../assets/images/sy/ggjt.png";
+import ggjtimg1 from "../assets/images/sy/ggjt1.png";
+import ggjtimg2 from "../assets/images/sy/ggjt2.png";
+import ggjtimg3 from "../assets/images/sy/ggjt3.png";
+import ggjtimg4 from "../assets/images/sy/ggjt4.png";
+
+import Dialog from "./dialog/dialog.vue";
 import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import http from "@/utils/request.js";
-import { CircleCloseFilled } from '@element-plus/icons-vue'
+import { CircleCloseFilled } from "@element-plus/icons-vue";
 import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
 
 // 详情弹框
-const dialogShow = ref(false)
+const dialogShow = ref(false);
 const tableType = reactive({
-  title: '',
+  title: "",
   columns: [
     {
-      label: '姓名',
+      label: "姓名",
-      property: 'name',
+      property: "name",
-      width: '150'
+      width: "150",
     },
     {
-      label: '人员类别',
+      label: "人员类别",
-      property: 'type',
+      property: "type",
-      width: '150'
+      width: "150",
     },
     {
-      label: '就失业状态',
+      label: "就失业状态",
-      property: 'status',
+      property: "status",
-      width: '150'
+      width: "150",
     },
     {
-      label: '日期',
+      label: "日期",
-      property: 'date',
+      property: "date",
     },
     {
-      label: '地址',
+      label: "地址",
-      property: 'address',
+      property: "address",
     },
   ],
   data: [
     {
-      date: '2016-05-02',
+      date: "2016-05-02",
-      name: 'John Smith',
+      name: "John Smith",
-      address: 'No.1518,  Jinshajiang Road, Putuo District',
+      address: "No.1518,  Jinshajiang Road, Putuo District",
     },
     {
-      date: '2016-05-04',
+      date: "2016-05-04",
-      name: 'John Smith',
+      name: "John Smith",
-      address: 'No.1518,  Jinshajiang Road, Putuo District',
+      address: "No.1518,  Jinshajiang Road, Putuo District",
     },
     {
-      date: '2016-05-01',
+      date: "2016-05-01",
-      name: 'John Smith',
+      name: "John Smith",
-      address: 'No.1518,  Jinshajiang Road, Putuo District',
+      address: "No.1518,  Jinshajiang Road, Putuo District",
     },
     {
-      date: '2016-05-03',
+      date: "2016-05-03",
-      name: 'John Smith',
+      name: "John Smith",
-      address: 'No.1518,  Jinshajiang Road, Putuo District',
+      address: "No.1518,  Jinshajiang Road, Putuo District",
     },
-  ]
+  ],
-})
+});
 
 const showDialog = (title) => {
-  dialogShow.value = true
+  dialogShow.value = true;
-  tableType.title = title
+  tableType.title = title;
-}
+};
 
 const close = () => {
-  dialogShow.value = false
+  dialogShow.value = false;
-}
+};
-
 
 const data = reactive({
   PopulationData: {
@@ -527,6 +681,7 @@ const data = reactive({
       key1_value: "1172491",
       key2: "骑行时长",
       key2_value: "1283h",
+      img: ggjtimg,
     },
     {
       name: "电动单车",
@@ -534,6 +689,7 @@ const data = reactive({
       key1_value: "1172491",
       key2: "骑行时长",
       key2_value: "1283h",
+      img: ggjtimg1,
     },
     {
       name: "公共汽车",
@@ -541,6 +697,7 @@ const data = reactive({
       key1_value: "176",
       key2: "乘坐人次",
       key2_value: "239741",
+      img: ggjtimg2,
     },
     {
       name: "长途汽车",
@@ -548,6 +705,7 @@ const data = reactive({
       key1_value: "133",
       key2: "客流量",
       key2_value: "192874",
+      img: ggjtimg3,
     },
     {
       name: "高铁",
@@ -555,6 +713,7 @@ const data = reactive({
       key1_value: "23",
       key2: "客流量",
       key2_value: "113414",
+      img: ggjtimg4,
     },
   ],
 });
@@ -654,13 +813,15 @@ const jtsyList = ref([
 
 // 县城学校师生比样式
 const cs = computed(() => {
-  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student
+  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
+    jysyList.value[0].teacher + jysyList.value[0].student
   }`;
   return str;
 });
 // 农村学校师生比样式
 const nc = computed(() => {
-  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student
+  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
+    jysyList.value[1].teacher + jysyList.value[1].student
   }`;
   return str;
 });
@@ -834,10 +995,25 @@ onBeforeMount(async () => {
 .tabelPart {
   height: 60vh;
   padding: 16px;
-  background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
   box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
   border: 2px solid;
-  border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
 
   :deep(.el-table) {
     --el-table-bg-color: none;
@@ -1084,9 +1260,11 @@ onBeforeMount(async () => {
         color: #2ef1ff;
         line-height: 26px;
         text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
-        background: linear-gradient(270deg,
+        background: linear-gradient(
+          270deg,
           rgba(255, 255, 255, 0) 0%,
-            #3976a1 100%);
+          #3976a1 100%
+        );
       }
     }
   }
@@ -1443,7 +1621,7 @@ onBeforeMount(async () => {
         border-radius: 8px;
       }
     }
-    &_xia:nth-child(2){
+    &_xia:nth-child(2) {
       background-color: #475e73;
     }
   }
@@ -1569,6 +1747,111 @@ onBeforeMount(async () => {
     right: 50px;
   }
 }
+// 交通事业
+.jtsyBox {
+  width: 97%;
+  // background-color: skyblue;
+  display: flex;
+  flex-direction: column;
+
+  font-size: 14px;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+  font-family: PingFangSC, PingFang SC;
+
+  img {
+    width: 68px;
+    height: 96px;
+    margin-right: 4px;
+  }
+  .jtsyBoxtop {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 15px;
+    padding-top: 20px;
+    .jtsyBoxtop1 {
+      display: flex;
+      span {
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 0px 4px #12fbff;
+        text-align: left;
+        font-style: normal;
+      }
+      .jtsyname {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 2px 4px #35e0f9;
+        text-align: left;
+        font-style: normal;
+        position: relative; 
+      }
+      .jtsyname::after {
+        content: "";
+        display: block;
+        width: 60px;
+        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
+        position: absolute;
+        bottom: -6px; 
+        left: 0; 
+      }
+      .jtsytext {
+        margin-top: 14px;
+        margin-bottom: 2px;
+        // width: 80px;
+      }
+    }
+  }
+  .jtsyBoxbot {
+    display: flex;
+    justify-content: space-between;
+    .jtsyBoxtop1 {
+      display: flex;
+      span {
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 0px 4px #12fbff;
+        text-align: left;
+        font-style: normal;
+      }
+      .jtsyname {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 2px 4px #35e0f9;
+        text-align: left;
+        font-style: normal;
+        position: relative; 
+      }
+      .jtsyname::after {
+        content: "";
+        display: block;
+        width: 60px;
+        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
+        position: absolute;
+        bottom: -6px;
+        left: 0;
+      }
+      .jtsytext {
+        margin-top: 14px;
+        margin-bottom: 2px;
+      }
+    }
+  }
+}
 
 .table {
   width: 94%;
@@ -1584,9 +1867,11 @@ onBeforeMount(async () => {
       line-height: 40px;
       width: 170px;
       height: 40px;
-      background: linear-gradient(180deg,
+      background: linear-gradient(
+        180deg,
         rgba(0, 142, 255, 0.35) 0%,
-          rgba(0, 142, 255, 0.52) 100%);
+        rgba(0, 142, 255, 0.52) 100%
+      );
       box-shadow: inset 0px -2px 0px 0px #00b4ff;
       border-radius: 2px 0px 0px 2px;
       color: #ffffff;
@@ -1620,7 +1905,7 @@ onBeforeMount(async () => {
   padding-left: 10px;
 }
 
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #2f4b74;
 }