Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/dialog/dialog.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="dialogPage">
-    <el-dialog
-      v-model="dialogShow"
-      width="80vw"
-      :show-close="false"
-      center
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-    >
+    <el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false"
+      :close-on-press-escape="false">
       <template #header="{ close, titleId, titleClass }">
         <div class="my-header">
           <el-icon size="26" color="#fff" @click="closeDialog">
@@ -20,31 +14,16 @@
         <div class="bo">
           <div class="title">
             <div class="title_top">
-              <img
-                src="@/assets/images/table_l.png"
-                alt=""
-                style="margin-right: 10px"
-              />
+              <img src="@/assets/images/table_l.png" alt="" style="margin-right:10px;" />
               <div class="name">{{ title }}详情</div>
-              <img
-                src="@/assets/images/table_r.png"
-                alt=""
-                style="margin-left: 10px"
-              />
+              <img src="@/assets/images/table_r.png" alt="" style="margin-left:10px;" />
             </div>
-            <img
-              class="title_botton"
-              src="@/assets/images/table_c.png"
-              alt=""
-            />
+            <img class="title_botton" src="@/assets/images/table_c.png" alt="" />
           </div>
         </div>
-        <el-table
-          :data="data.tableData"
-          height="430px"
-          :header-cell-style="{ background: '#008FCD' }"
-        >
-          <!-- <el-table-column
+        <div style="width: 100%; height: calc(100% - 110px);">
+          <el-table :data="data.tableData" height="100%" :header-cell-style="{ background: '#008FCD' }">
+            <!-- <el-table-column
             v-for="(item, index) in data.columns"
             :key="index"
             :property="item.property"
@@ -52,44 +31,23 @@
             :width="item.width"
             align="center"
           /> -->
-          <template v-for="item in data.columns">
-            <el-table-column
-              :key="item.label"
-              v-if="item.type === 'slot'"
-              :width="item.width"
-              :label="item.label"
-              :property="item.property"
-              align="center"
-            >
-              <template #default="scope">
-                <slot
-                  :name="item.property"
-                  :currentCol="item"
-                  :currentData="scope.row"
-                ></slot>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :key="item.label"
-              :property="item.property"
-              :label="item.label"
-              :width="item.width"
-              align="center"
-              v-else
-            />
-          </template>
-        </el-table>
+            <template v-for="item in data.columns">
+              <el-table-column :key="item.label" v-if="item.type === 'slot'" :width="item.width" :label="item.label"
+                :property="item.property" align="center">
+                <template #default="scope">
+                  <slot :name="item.property" :currentCol="item" :currentData="scope.row"></slot>
+                </template>
+              </el-table-column>
+              <el-table-column :key="item.label" :property="item.property" :label="item.label" :width="item.width"
+                align="center" v-else />
+            </template>
+          </el-table>
+        </div>
+
         <div class="pagePart">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            prev-text="上一页"
-            next-text="下一页"
-            @current-change="handle"
-            v-model:current-page="pagination.currentPage"
-          />
+          <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+            :total="pagination.total" prev-text="上一页" next-text="下一页" @current-change="handle"
+            v-model:current-page="pagination.currentPage" />
         </div>
       </div>
     </el-dialog>
@@ -153,14 +111,15 @@ watch(
   () => props.dialogShow,
   (newVal, oldVal) => {
     dialogShow.value = newVal;
+    data.tableData = props.tableData;
     data.columns = props.columns;
   }
 );
 watch(
-  () => props.tableData,
-  (newVal, oldVal) => {
-    data.tableData = props.tableData;
-  }
+ () => props.tableData,
+(newVal, oldVal) => {
+ data.tableData = props.tableData;
+ }
 );
 // 使用生命钩子
 onMounted(() => {
@@ -192,25 +151,18 @@ const handle = (current) => {
 .tabelPart {
   height: 80vh;
   padding: 16px;
-  background: linear-gradient(
-      270deg,
+  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(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%
-    );
+      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,
+  border-image: linear-gradient(180deg,
       rgba(21, 150, 255, 1),
-      rgba(0, 157, 227, 0)
-    )
-    2 2;
+      rgba(0, 157, 227, 0)) 2 2;
 
   :deep(.el-table) {
     --el-table-bg-color: none;
@@ -228,6 +180,7 @@ const handle = (current) => {
   display: flex;
   align-items: center;
   justify-content: center;
+
   :deep(.el-pagination) {
     --el-pagination-button-disabled-bg-color: none;
     --el-pagination-bg-color: none;
@@ -235,25 +188,31 @@ const handle = (current) => {
     --el-pagination-button-color: #fff;
     color: #fff;
   }
+
   :deep(.el-pagination button:disabled) {
     background-color: rgba(0, 116, 255, 0) !important;
   }
 }
+
 .bo {
   width: 100%;
   display: flex;
 }
+
 .title {
   margin: 10px auto;
   display: flex;
   flex-direction: column;
+
   &_top {
     display: flex;
     align-items: end;
+
     img {
       height: 33px;
       width: 33px;
     }
+
     .name {
       font-family: PangMenZhengDao, PangMenZhengDao;
       font-weight: 600;
@@ -264,10 +223,13 @@ const handle = (current) => {
       font-style: normal;
       letter-spacing: 2px;
       background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
-      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
     }
   }
+
   &_botton {
     margin-top: 5px;
     height: 19px;

src/view/echarts_yl/ylXZZC.vue

@@ -262,7 +262,6 @@ const setChart = () => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
   myChart.on("click", function (params) {
-    console.log(params);
     emit('village',params.name);
   });
 };

src/view/yl.vue

@@ -44,7 +44,10 @@
           :year="data.leftTopYear"
         ></ePie2>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title left_2">
           <span class="text">
             <img
@@ -86,7 +89,10 @@
           :year="data.leftCenterYear"
         />
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title left_3">
           <span class="text">
             <img
@@ -158,8 +164,15 @@
             <div>
               <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
             </div>
-            <img src="@/assets/YLimg/ylimg11.png" alt="" />
-            <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
+            <img
+              src="@/assets/YLimg/ylimg11.png"
+              alt=""
+            />
+            <img
+              class="historyimg"
+              src="@/assets/YLimg/ylimg5.png"
+              alt=""
+            />
           </div>
           <!-- <div class="history1">
             <div>
@@ -172,8 +185,15 @@
             <div>
               <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
             </div>
-            <img src="@/assets/YLimg/ylimg12.png" alt="" />
-            <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
+            <img
+              src="@/assets/YLimg/ylimg12.png"
+              alt=""
+            />
+            <img
+              class="historyimg"
+              src="@/assets/YLimg/ylimg10.png"
+              alt=""
+            />
           </div>
         </div>
       </div>
@@ -182,13 +202,25 @@
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
-              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
+              <img
+                class="serviceimg"
+                src="@/assets/YLimg/ylimg8.png"
+                alt=""
+              />
               <ylSMFW></ylSMFW>
             </div>
             <div class="medicalService">
-              <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
+              <img
+                class="serviceimg"
+                src="@/assets/YLimg/ylimg9.png"
+                alt=""
+              />
               <div class="medicalServiceTop">
-                <img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
+                <img
+                  class="ylimg"
+                  src="@/assets/YLimg/ylimg1.png"
+                  alt=""
+                />
                 <span>36,234</span>
               </div>
             </div>
@@ -203,9 +235,26 @@
             alt=""
           />
         </div>
-        <ylXZZC :list1="data.zccs1" :list2="data.zccs2" @village='chooseVillage'></ylXZZC>
+        <ylXZZC
+          :list1="data.zccs1"
+          :list2="data.zccs2"
+          @village='chooseVillage'
+        ></ylXZZC>
       </div>
     </div>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="pagination"
+      @close="close"
+      @handle="handlePagination"
+    >
+      <template #yxstatus="{ currentCol, currentData }">
+        <div>-------------</div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
@@ -221,6 +270,7 @@ import ePie3d from "./echarts_yl/pie3d.vue";
 import ylJHSY from "./echarts_yl/ylJHSY.vue";
 import ylSMFW from "./echarts_yl/ylSMFW.vue";
 import ylXZZC from "./echarts_yl/ylXZZC.vue";
+import Dialog from "./dialog/dialog.vue";
 import { ref, onMounted, onBeforeMount, reactive } from "vue";
 import http from "@/utils/request.js";
 const leftchoose = ref({
@@ -228,11 +278,114 @@ const leftchoose = ref({
   second: "1",
   third: "1",
 });
+// 详情弹框
+const dialogShow = ref(false);
+const tableType = reactive({
+  title: "",
+  columns: [
+    {
+      label: "照料中心名称",
+      property: "sdailycarecentername",
+      width: '200'
+    },
+    {
+      label: "老人名称",
+      property: "scustomername",
+      width: '150'
+    },
+    {
+      label: "所属区域",
+      property: "scasecadebareaname",
+      width: '200'
+    },
+    {
+      label: "详细地址",
+      property: "saddress",
+      width: '400'
+    },
+    {
+      label: "订单创建时间",
+      property: "dtcreatetime",
+      width: '250'
+    },
+    {
+      label: "订单结束时间",
+      property: "dtfinishtime",
+      width: '250'
+    },
+    {
+      label: "菜品信息",
+      property: "dishesmealnames",
+      width: '400'
+    },
+    {
+      label: "优惠金额",
+      property: "categorymoney",
+      width: '150'
+    },
+
+    {
+      label: "实际支付金额",
+      property: "actualprice",
+      width: '150'
+    },
+    {
+      label: "订单类型",
+      property: "iordertype",
+      width: '200'
+    },
+    {
+      label: "就餐时间",
+      property: "itimetype",
+      width: '150'
+    },
+    {
+      label: "订单状态",
+      property: "sstatus",
+      width: '200'
+    },
+  ],
+  data: [
+    {
+      sdailycarecentername: "2016-05-02",
+      scustomername: "John Smith",
+      saddress: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+  ],
+});
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 20,
+  currentPage: 1,
+});
 const change = (name, index) => {
   leftchoose.value[name] = index;
 };
-const chooseVillage=(village)=>{
-  console.log(village);
+const chooseVillage = (village) => {
+  tableType.title = village
+  getTownDetail()
+}
+const close = () => {
+  dialogShow.value = false;
+};
+const handlePagination = (current) => {
+  pagination.currentPage = current
+  getTownDetail()
+};
+const getTownDetail = () => {
+  let params = {
+    scasecadebareaname: tableType.title,
+    page: pagination.currentPage,
+    size: pagination.pageSize
+  }
+  http.get("/api/ggfwyth/zcxxList",params).then((res) => {
+    if (res.code == 200) {
+      
+      tableType.data = res.data
+      dialogShow.value = true;
+    }
+  });
 }
 const data = reactive({
   leftTop1: [],
@@ -862,4 +1015,15 @@ const getData = async () => {
     color: #ffffff;
   }
 }
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #2f4b74;
+}
+
+::v-deep .el-table__empty-block {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
 </style>