graph ui beautified @2024年7月12日 by myz

src/views/ShowGraph.vue

@@ -1,42 +1,39 @@
-// Variable overrides first
-$primary: #900;
-$enable-shadows: true;
-$prefix: "mo-";
-
-// Then import Bootstrap
-@import "../node_modules/bootstrap/scss/bootstrap";
-import * as echarts from 'echarts';
-
-
-
 <template>
-<el-header class = 'containerHead'>
+<el-container class = 'h-full bg-blue-100'>
+  <el-header class = 'containerHead'>
 			<HeaderPage :pageTitle = 'pageTitle'></HeaderPage>
             <el-button class = 'btnReturnHomePage' @click="returnHome">
-                <el-tooltip content = '返回首页'>  
+                <el-tooltip content = '返回上一级'>  
-                    <el-icon><ArrowLeft /></el-icon>
+                    <el-icon><Back /></el-icon>
                 </el-tooltip>
             </el-button>
-		</el-header>
+  </el-header>
-  <el-container>
+  <el-container id = "containerMain">
-    <div class="container">
+    <div class="left-grid">
-      <div class="left-grid">
+      <el-card class = 'h-full w-full'>
-        <el-card>
+        <!-- 选项栏 -->
+        <div class="navbar bg-white flex justify-center pt-0">
+          <span class="text-2xl font-bold pt-0">绘图选项</span>
+        </div>
+        <!-- 多元素多性质比较项 -->
+        <div class = 'rounded-3xl bg-slate-100 shadow-md flex justify-between items-center font-bold pr-7'>
           <el-switch
-            v-model="OpenSelected"
+          v-model="OpenSelected"
-            class="ml-2"
+          class="ml-2 "
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
           />
           <p6 v-show= OpenSelected>启用多元素/多性质比较</p6>
           <p6 v-show= !OpenSelected>禁用多元素/多性质比较</p6>
-          <el-select v-model="Selectedcol" placeholder="Select" style="width: 240px" v-show="OpenSelected">
+        </div>
-            <el-option
+        <!-- 选择栏 -->
-              v-for="(item,index) in mycolumns"
+        <el-select v-model="Selectedcol" placeholder="Select" style="width: 100%; margin-top: 2%; margin-bottom: 2%" v-show="OpenSelected">
-              :key="index"
+        <el-option
-              :label="item.label"
+          v-for="(item,index) in mycolumns"
-              :value="item.prop"
+          :key="index"
-            />
+          :label="item.label"
-          </el-select>
+          :value="item.prop"
+        />
+        </el-select>
           <div v-show = OpenSelected>
             <div>
               <div style="max-width: 600px; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;" v-for="(i, index) in SelectedName" :key="index">  
@@ -47,91 +44,67 @@ import * as echarts from 'echarts';
             <div>
               <el-input
                 v-model="SelectNowName"
-                style="width: 240px"
+                style="width: 100%; margin-bottom: 2%"
                 placeholder="输入需要选择的实体名称"
                 clearable
               />
-              <el-button type="primary" @click="AddSelectedName">确定</el-button>
+              <button class="btn btn-accent w-full text-white" @click="AddSelectedName">确定</button>
             </div>
         </div>
-        <el-divider />
+      <el-divider />
-
+      <div class = 'w-full'>
-          <el-row>
+        <el-form class = 'w-full'>
-            <el-form>
+          <div class="demo-select">
-              <div class="demo-select">
+              <!-- 选项栏 -->
-                <div class="block">
+              <div class="navbar bg-white flex justify-center pt-0">
-                  <span class="demonstration">数据可视化</span>
+                <span class="text-2xl font-bold pt-0">数据可视化类型</span>
-                  <el-select v-model="selectedEntity" placeholder="选择生成的表格类型" style="width: 400px">
-                    <el-option
-                      v-for="entity in entityOptions"
-                      :key="entity.value"
-                      :label="entity.label"
-                      :value="entity.value"
-                    ></el-option>
-                  </el-select>
-                </div>
               </div>
-              <!-- 动态输入组件 -->
+              <el-select v-model="selectedEntity" placeholder="选择生成的表格类型" style="width: 400px; margin-bottom: 2%;">
-              <component 
+                <el-option
-                :is="currentComponent" 
+                  v-for="entity in entityOptions"
-                ref="dynamicComponent" 
+                  :key="entity.value"
-                @change="handlerow"
+                  :label="entity.label"
-                @update:selectedEntity="handleSelectedEntity" 
+                  :value="entity.value"
-                @update:selectedrow="handleSelectedRow" 
+                ></el-option>
-                @update:selectedChartType="handleSelectedChartType" 
+              </el-select>
-                @update:selectedrow2="handleSelectedRow2" 
+          </div>
-                @update:selectedrow3="handleSelectedRow3" 
+          <!-- 动态输入组件 -->
-                @update:selectedcul1="handleUpdateSelectedCul"
+          <component 
-                @update:selectedcul2="handleUpdateSelectedCul"
+            :is="currentComponent" 
-                @update:selectedcul3="handleUpdateSelectedCul"
+            ref="dynamicComponent" 
-                :rowOptions="convertedColumns" 
+            @change="handlerow"
-                :rowOptions2="convertedColumns" 
+            @update:selectedEntity="handleSelectedEntity" 
-                :Message1="SendOpenSelected"
+            @update:selectedrow="handleSelectedRow" 
-                :Message2="SendOpenSelected"
+            @update:selectedChartType="handleSelectedChartType" 
-                :Message3="SendOpenSelected"
+            @update:selectedrow2="handleSelectedRow2" 
-                :Message4="SendOpenSelected"
+            @update:selectedrow3="handleSelectedRow3" 
-              >
+            @update:selectedcul1="handleUpdateSelectedCul"
-              </component>
+            @update:selectedcul2="handleUpdateSelectedCul"
-              <!-- <el-card v-if="entity">
+            @update:selectedcul3="handleUpdateSelectedCul"
-          <el-row>
+            :rowOptions="convertedColumns" 
-            <el-table
+            :rowOptions2="convertedColumns" 
-              :data="columnData"
+            :Message1="SendOpenSelected"
-              :show-header="true"
+            :Message2="SendOpenSelected"
-              :max-height="200"
+            :Message3="SendOpenSelected"
-               @selection-change="handleSelectionChange"
+            :Message4="SendOpenSelected"
-              stripe
+          >
-            >
+          </component>
-            <el-table-column type="selection" width="55" style="background-color: black;"/>
+        </el-form>
-            <el-table-column
+        <el-footer class = 'p-0'>
-        prop="name"
+          <button class = 'btn text-white w-full btn-accent' @click="handleGenerateChart">
-        label="对象"
+            绘图
-        header-style="background-color: black; color: white;"
+          </button>
-        style="text-align: center;">
+        </el-footer>
-      </el-table-column>
-                  
-            </el-table>
-          </el-row>
-        </el-card> -->
-              <el-form-item>
-                <el-button type="primary" size="medium" @click="handleGenerateChart">
-                  点击生成图表
-                </el-button>
-              </el-form-item>
-            </el-form>
-          </el-row>
-        </el-card>
       </div>
-      <div class="right-grid" v-if="hasUpperContent">
+      </el-card>
-   
+    </div>
-          <el-button type="danger" @click="clearchart">取消</el-button>
+    <div class="right-grid" v-if="hasUpperContent">
-          <div ref="chartContainer" class="chart-container"></div>
+        <button>取消</button>
-       
+        <div ref="chartContainer" class="chart-container"></div>  
-       
+    </div>
-        </div>
+      <div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
-        <div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
-      </div>
-  
   </el-container>
+</el-container>
 </template>
 
 <script>
@@ -139,7 +112,6 @@ import * as echarts from 'echarts';
 import { ref } from 'vue'
 
 import { markRaw } from 'vue';
-import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
 import Entity1Form from '@/components/graph/Entity1Form.vue';
 import Entity2Form from '@/components/graph/Entity2Form.vue';
@@ -147,8 +119,7 @@ import Entity3Form from '@/components/graph/Entitu3Form.vue';
 import Entity4Form from '@/components/graph/Entity4Form.vue';
 // import Entity5Form from '@/components/graph//Entity5Form.vue';
 import HeaderPage from "@/components/HeaderPage.vue";
-import { avatarEmits } from 'element-plus';
+
-import AddDialog from '@/components/components_cluespage/AddDialog.vue';
 export default {
 
   components: {
@@ -156,7 +127,6 @@ export default {
     Entity2Form,
     Entity3Form,
     Entity4Form,
-   
     HeaderPage
   },
   props: ['columns','tabledata'],
@@ -167,7 +137,7 @@ export default {
       selectedColumnData:Array, 
       xz:[],
       yz:[],
-      pageTitle:'图形可视化',
+      pageTitle:'线索可视化',
       mytable:[],
       mycolumns:'',
       item:[],
@@ -196,32 +166,14 @@ export default {
 
       SelectedName: [],
       SelectNowName: ref(''),
-      OpenSelected: ref(false),
+      OpenSelected: ref(true),
       Selectedcol:"",
 
         //传送点
       Selectedcul:[],
     };
   },
-  // watch: {
-  //   mytable: {
-  //     handler(newVal, oldVal) {
-  //       console.log('mytable changed');
-  //       console.log('New Value:', newVal);
-  //       console.log('Old Value:', oldVal);
-  //       // 在这里可以添加你希望在mytable变化时执行的逻辑
-  //     },
-  //     deep: true // 如果需要深度监听对象内部的变化，可以设置deep为true
-  //   }
-  // },
   computed: {
-    // entity()
-    // {
-    //   if (this.selectedEntity=='entity5')
-    //   return 1;
-    // else
-    // return 0;
-    // },
     columnData() {
       if (this.srow)
     {
@@ -261,11 +213,8 @@ export default {
   },
   created()
   {
-    //console.log(this.$route.params.tabledata)
     this.mytable=JSON.parse(this.$route.params.tabledata);
     this.mycolumns = JSON.parse(this.$route.params.columns);
-    
-      //  console.log('Parsed columns:', this.mycolumns,this.table);
   },
   methods: {
     isValidDate(year, month, day) {  
@@ -300,80 +249,10 @@ export default {
         this.SelectNowName = '';
       }
     }, 
-
-
-
-    // handleSelectionChange(selection) {
-    //         // 在这里处理选择变化，selection 是选中的行数据数组
-    //         let obj=selection.map(item=>item.name)
-    //         // console.log(obj)
-    //         this.selectedColumnData =selection.map(item=>item.name)
-           
-    //         // console.log( this.selectedColumnData);
-    //         // console.log('选择的行数据:', selection);
-    //     },
     returnHome(){
     
       window.history.back();
         },
-//         extractThreeColumns(tableData) {
-//     let extractedData = tableData.map(row => ({
-//         month: row[this.srow3],
-//         product: row[this.srow],
-//         amount: row[this.srow2]
-//     }));
-
-//     return extractedData;
-// },
-//     count_sum_time()
-//     {
-
-//       this.hasUpperContent = true;
-//     let counts = {};
-//     let salesData=this.extractThreeColumns(this.mytable);
-//     // console.log(salesData)
-//     // 遍历销售记录数组，填充 counts 对象
-//     salesData.forEach(record => {
-//         let { month, product, amount } = record;
-//         let currentMonth=new Date(month)
-//         let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
-//         if (!counts[monthKey1]) {
-//             counts[monthKey1] = {};
-//         }
-//         if ( !counts[monthKey1][product])
-//         counts[monthKey1][product] = amount;
-//       else
-//       counts[monthKey1][product] += amount;
-//     });
-
-//     // 现在 counts 对象包含了每个月份每种产品的销售额信息
-   
-//     const products = this.selectedColumnData;
-//     let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
-
-//     // Create the structure similar to 'source'
-//     let result = [['product', ...years]];
-
-//     products.forEach(product => {
-//         let rowData = [product];
-// for (let i = 0; i < years.length; i++) {
-//     rowData.push(0);
-// }
-//         result.push(rowData);
-//     });
-//     products.forEach(product=>
-//     {
-//       years.forEach(year => {
-//         if (counts[year][product])
-//             result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
-//           else
-//           result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
-//         });
-//     }
-//     )
-//     // console.log(result)
-//     return result;
-// },
     countsumbystring() {
       // 创建一个对象来存储每个名字对应的实数总和
       this.hasUpperContent = true;
@@ -428,9 +307,7 @@ export default {
       let num=cul[i].match(/\d+/)
     foundLabel = this.mycolumns[num-1].label;
     selectname.push(foundLabel)
-    
+
-    
-    
   }
 }
 
@@ -1656,6 +1533,7 @@ currentDate.setDate(currentDate.getDate()+1);
   border-radius: 2%;
   padding: 20px;
   height: 100%;
+  width: 28%;
 }
  
 .right-grid {
@@ -1663,11 +1541,9 @@ currentDate.setDate(currentDate.getDate()+1);
   border-radius: 2%;
   padding: 20px;
   height: 100%;
+  width: 72%;
+
 }
-
-
-
-
 .chart-container {
   width: 90%;
   height: 90%;
@@ -1706,7 +1582,7 @@ currentDate.setDate(currentDate.getDate()+1);
 
 .containerHead{
 	padding:0;
-	height:8%;
+	height:6%;
 	padding :0;
     width: 100%;
     display:flex;
@@ -1722,5 +1598,19 @@ currentDate.setDate(currentDate.getDate()+1);
     width: 3%;
     font-weight: 25px;
 }
+.el-button{
+	background-color: transparent;
+	margin:2;
+	padding:2;
+	border: 0;
+	color: #0e5858;
+	font-size: 24px;
+}
+.el-button:hover{
+	background-color: rgba(255, 255, 255, 0.7);
+}
+#containerMain{
+  background-color: #f5f6fa;
+}
 </style>
 

src/views/newHomePage.vue

@@ -6,10 +6,9 @@
       </HeaderPage>
     </el-header>
     <el-main style="padding:0; height:94%; display: flex; width:100%;" >
-      <el-container id = "container_Statistics">
+      <el-container id = "container_Statistics" class ='flex justify-center p-2 '>
-        <el-header class = 'flex justify-center h-1/5 pt-3'>
+          <div class="stats stats-vertical shadow bg-white text-gray-900 w-full">
-          <div class="stats stats-vertical lg:stats-horizontal shadow bg-white text-gray-900">
+            <div class="stat w-full">
-            <div class="stat">
               <div class="stat-title text-gray-700">已导入的线索库数量</div>
               <div class="stat-value">31K</div>
               <div class="stat-desc">文件导入/已经存储的线索库</div>
@@ -26,57 +25,6 @@
             <div class="stat-desc">删除的记录(批量/单条)</div>
            </div>
           </div>
-        </el-header>
-        <div class="hero bg-white-200 min-h-screen">
-          <div class="hero-content text-center">
-            <div class="max-w-md">
-              <h1 class="text-5xl font-bold">你好，欢迎来到线索库管理系统</h1>
-              <p class="py-6">
-                提供直观的线索库管理工具
-              </p>
-              <button class="btn btn-primary">Get Started</button>
-            </div>
-          </div>
-        </div>
-        <!-- <el-main>
-          <div class="carousel rounded-box">
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
-                alt="Burger" />
-            </div>
-            <div class="carousel-item">
-              <img
-                src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
-                alt="Burger" />
-            </div>
-          </div>
-        </el-main> -->
       </el-container>
       <el-container id = "container_Tools_Main" class ='shadow-lg'>
         <!--这是主体的头栏用于防止工具等-->
@@ -228,7 +176,7 @@ export default{
 }
 /* 工具栏和主体样式 */
 #container_Tools_Main{
-  width: 50%;
+  width: 90%;
   padding: 0;
   margin: 0;
   height:100%;
@@ -246,6 +194,6 @@ export default{
 }
 #container_Statistics{
   background-color: #f5f6fa;
-  width:50%;
+  width:20%;;
 }
 </style>