Merge branch 'linwenxin_dev' of https://gogs.zfire.top/zfire-front/zfire-newmall-admin into develop

src/api/bigView.js

@@ -0,0 +1,46 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 辅配件统计
+export function getMaterialStats(params) {
+  return request({
+    url: '/big/getLarge4',
+    method: 'post',
+    params
+  })
+}
+
+// 工单统计
+export function getWorkorderStats(params) {
+  return request({
+    url: '/big/getLarge5',
+    method: 'post',
+    params
+  })
+}
+
+// 订单统计
+export function getOrderStats(params) {
+  return request({
+    url: '/big/getLarge7',
+    method: 'post',
+    params
+  })
+}
+
+// 订单金额趋势
+export function getOrderTrend(params) {
+  return request({
+    url: '/big/getLarge8',
+    method: 'post',
+    params
+  })
+}
+
+// 订单金额趋势
+export function getWorkorderTrend(params) {
+  return request({
+    url: '/big/getLarge6',
+    method: 'post',
+    params
+  })
+}

src/api/common.js

@@ -9,6 +9,38 @@ export function lbsAmapRegion(params) {
   })
 }
 
+export function bigGetLarge1(params) {
+  return request({
+    url: '/big/getLarge1',
+    method: 'post',
+    params
+  })
+}
+
+export function bigGetLarge3(params) {
+  return request({
+    url: '/big/getLarge3',
+    method: 'post',
+    params
+  })
+}
+
+export function bigGetLarge2(params) {
+  return request({
+    url: '/big/getLarge2',
+    method: 'post',
+    params
+  })
+}
+
+export function bigGetLarge9(params) {
+  return request({
+    url: '/big/getLarge9',
+    method: 'post',
+    params
+  })
+}
+
 export function commonCompanywechatGet(params) {
   return request({
     url: '/common/companywechat/get',

src/components/moduleEnclosure.vue

@@ -50,22 +50,23 @@ export default {
   border: 3px solid #082570;
   border-image: linear-gradient(0deg, #34c7ff 0%, #26d5ff 51%, #34c7ff 100%) 3 3;
   box-sizing: border-box;
-  padding: 16px;
+  padding: 12px;
 }
 .am-moduleEnclosurecon {
   position: absolute;
-  top: 16px;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
+  top: 12px;
+  bottom: 12px;
+  left: 12px;
+  right: 12px;
   z-index: 999;
 }
 .am-moduleEnclosureTitle-div {
-  width: 100%;
   height: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-shrink: 0;
+  margin-right: 20px;
 }
 .am-moduleEnclosureTitle {
   width: 100%;
@@ -73,6 +74,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-top: -4px;
   font-size: 14px;
   font-family: Source Han Sans CN, Source Han Sans CN-Bold;

src/views/bigViews/dataView1/components/accessoryStatistics.vue

@@ -1,33 +1,33 @@
 <template>
 	<moduleEnclosure title="近30日辅配件统计">
-		<div class="heat-lay">
-			<div class="mode">
+		<div class="all-container">
+			<div class="item">
 				<div class="title">辅材销售</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.fcxs || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">辅材退货</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.fcth || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">配件销售</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.pjxs || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">配件退货</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.pjth || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">新件待返还</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.xjdfh || 0}}件</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">旧件待返还</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.jjdfh || 0}}件</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">旧件待返厂</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.jjdfc || 0}}件</div>
 			</div>
 		</div>
 	</moduleEnclosure>
@@ -35,46 +35,58 @@
 
 <script>
 	import moduleEnclosure from '@/components/moduleEnclosure.vue';
+	import { getMaterialStats } from '@/api/bigView.js';
+
 	export default {
 		components: {
 			moduleEnclosure,
 		},
+		
 		data() {
 			return {
-
+				statsData: {},
 			};
 		},
-		mounted() {
 
+		mounted() {
+			this.getData();
 		},
+
 		beforeUnmount() {
 
 		},
-		methods: {
 
+		methods: {
+			getData() {
+				getMaterialStats().then(res => {
+					this.statsData = res.data;
+				})
+			},
 		},
 	};
 </script>
 
 <style scoped lang="scss">
-	.heat-lay {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		padding-top: 20px;
-		.mode {
-			width: 25%;
-			.title {
-				font-size: 16px;
-				color: #ffffff;
-				margin-bottom: 10px;
-			}
-			.num {
-				color: #33a8c9;
-				font-size: 22px;
-				font-weight: bold;
-			}
+.all-container {
+	width: 100%;
+	height: 100%;
+	padding-top: 12px;
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	.item {
+		width: 25%;
+		height: 50%;
+		.title {
+			font-size: 14px;
+			color: #ffffff;
+			margin-bottom: 8px;
+		}
+		.num {
+			color: #33a8c9;
+			font-size: 18px;
+			font-weight: bold;
 		}
 	}
+}
 </style>

src/views/bigViews/dataView1/components/mapDataStatistics.vue

@@ -3,27 +3,27 @@
     <div class="heat-lay-flex">
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">今日新增安装单</div>
+          <div class="heat-item-style1-title">总运营商户（家）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
+            <div class="mainText">{{Number(info.companyNum)}}</div>
           </div>
         </div>
       </div>
       <div class="averticalBart"></div>
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">今日完工安装单</div>
+          <div class="heat-item-style1-title">总工程师（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
+            <div class="mainText">{{Number(info.allWorker)}}</div>
           </div>
         </div>
       </div>
       <div class="averticalBart"></div>
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">安装未完工累计</div>
+          <div class="heat-item-style1-title">总分销员（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
+            <div class="mainText">{{Number(info.allService)}}</div>
           </div>
         </div>
       </div>
@@ -34,9 +34,9 @@
           class="heat-item-style1"
           style="cursor: pointer"
         >
-          <div class="heat-item-style1-title">今日出勤师傅</div>
+          <div class="heat-item-style1-title">总用户数（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
+            <div class="mainText">{{Number(info.allUser)}}</div>
           </div>
         </div>
       </div>
@@ -45,40 +45,40 @@
     <div class="heat-lay-flex">
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">今日新增维修单</div>
+          <div class="heat-item-style1-title">今日登入商户（家）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
-            <div class="subText">55.9%</div>
+            <div class="mainText">{{Number(info.loginCompanyNum)}}</div>
+            <div class="subText">{{Number(info.loginCompanyNumPer)}}%</div>
           </div>
         </div>
       </div>
       <div class="averticalBarb"></div>
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">今日完工维修单</div>
+          <div class="heat-item-style1-title">今日登入工程师（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
-            <div class="subText">55.9%</div>
+            <div class="mainText">{{Number(info.loginAllWorker)}}</div>
+            <div class="subText">{{Number(info.loginAllWorkerPer)}}%</div>
           </div>
         </div>
       </div>
       <div class="averticalBarb"></div>
       <div class="heat-lay-item" style="width: 100%">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">维修未完工累计</div>
+          <div class="heat-item-style1-title">今日登入分销员（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
-            <div class="subText">55.9%</div>
+            <div class="mainText">{{Number(info.loginAllService)}}</div>
+            <div class="subText">{{Number(info.loginAllServicePer)}}%</div>
           </div>
         </div>
       </div>
       <div class="averticalBarb"></div>
       <div class="heat-lay-item">
         <div class="heat-item-style1">
-          <div class="heat-item-style1-title">今日回收工单</div>
+          <div class="heat-item-style1-title">今日登入用户（人）</div>
           <div class="fujimaintext">
-            <div class="mainText">6256</div>
-            <div class="subText">55.9%</div>
+            <div class="mainText">{{Number(info.loginAllUser)}}</div>
+            <div class="subText">{{Number(info.loginAllUserPer)}}%</div>
           </div>
         </div>
       </div>
@@ -87,23 +87,46 @@
 </template>
 
 <script>
+import { bigGetRegion, bigGetLarge1, bigGetLarge2 } from '@/api/common.js';
 export default {
   components: {  },
   data() {
     return {
-      
+      info:{
+        "allService": 0,
+        "allUser": 0,
+        "allWorker": 0,
+        "allWorkerOrderNum": 0,
+        "companyNum": 0,
+        "increOrderNum": 0,
+        "loginAllService": 0,
+        "loginAllServicePer": 0,
+        "loginAllUser": 0,
+        "loginAllUserPer": 0,
+        "loginAllWorker": 0,
+        "loginAllWorkerPer": 0,
+        "loginCompanyNum": 0,
+        "loginCompanyNumPer": 0,
+        "neverWorkerNum": 0,
+        "salesOrderNum": 0
+      }
     };
   },
   watch: {
     
   },
   mounted() {
-    
+    this.getBigGetLarge1()
   },
   beforeUnmount() {
   },
   methods: {
-   
+   getBigGetLarge1(pam){
+    bigGetLarge2(pam).then(res=>{
+      this.info = res.data
+      console.log(this.info,"niunpionpoimo;i")
+    })
+   }
   },
 };
 </script>

src/views/bigViews/dataView1/components/mapdata.vue

@@ -47,37 +47,36 @@ import zhejiang from './js/zhejiang.js';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import mapDataStatistics from './mapDataStatistics.vue';
 import * as echarts from 'echarts';
-import { bigGetRegion } from '@/api/common.js';
+import { bigGetRegion, bigGetLarge9 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  geoJsonData.features.forEach(feature => {
-    feature.geometry.coordinates[0].forEach(coord => {
-      minX = Math.min(minX, coord[0]);
-      minY = Math.min(minY, coord[1]);
-      maxX = Math.max(maxX, coord[0]);
-      maxY = Math.max(maxY, coord[1]);
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    geoJsonData.features.forEach((feature) => {
+        const coordinates = feature.geometry.coordinates;
+        const type = feature.geometry.type;
+        if (type === 'Polygon') {
+            coordinates.forEach((polygon) => {
+                polygon.forEach((coord) => {
+                    minX = Math.min(minX, coord[0]);
+                    minY = Math.min(minY, coord[1]);
+                    maxX = Math.max(maxX, coord[0]);
+                    maxY = Math.max(maxY, coord[1]);
+                });
+            });
+        } else if (type === 'MultiPolygon') {
+            coordinates.forEach((multiPolygon) => {
+                multiPolygon.forEach((polygon) => {
+                    polygon.forEach((coord) => {
+                        minX = Math.min(minX, coord[0]);
+                        minY = Math.min(minY, coord[1]);
+                        maxX = Math.max(maxX, coord[0]);
+                        maxY = Math.max(maxY, coord[1]);
+                    });
+                });
+            });
+        }
     });
-  });
-  return { minX, minY, maxX, maxY };
-}
-
-// 计算缩放比例
-function calculateZoom(boundingBox, containerWidth, containerHeight) {
-  const geoWidth = boundingBox.maxX - boundingBox.minX;
-  const geoHeight = boundingBox.maxY - boundingBox.minY;
-
-  // 打印调试信息
-  console.log('BoundingBox:', boundingBox);
-  console.log('GeoWidth:', geoWidth, 'GeoHeight:', geoHeight);
-
-  if (geoWidth === 0 || geoHeight === 0) {
-    return 1;  // 如果宽度或高度为0，返回默认缩放比例1
-  }
-
-  const scaleX = containerWidth / geoWidth;
-  const scaleY = containerHeight / geoHeight;
-  return Math.min(scaleX, scaleY);
+    return { minX, minY, maxX, maxY };
 }
 export default {
   components: {
@@ -101,121 +100,165 @@ export default {
       cIndex: 0,
       oldcIndex: 0,
       myChart: null,
+      getLarge9: []
     };
   },
   mounted() {
-    this.echart_7();
+    this.getbigGetLarge9();
+    
   },
   methods: {
-    echart_7() {
-      var that = this
-      if (that.myChart) {
-        that.myChart.dispose();
-      }
-      bigGetRegion({
+    getbigGetLarge9(){
+      bigGetLarge9().then(res=>{
+        this.getLarge9 = res.data
+        this.echart_7();
+      })
+    },
+    echart_7(pam={
         country: 100000,
         // province:"广东省",
         // city: "广州市"
-      }).then(res => {
-        // 初始化 ECharts 实例
-        that.myChart = echarts.init(document.getElementById('chart_7'));
-        const geoJsonData = JSON.parse(res.data)
-        // 假设第一个省份的中心点为地图的中心点
-        const center = geoJsonData.features[0].properties.center;
-        // 计算边界框
-        const boundingBox = calculateBoundingBox(geoJsonData);
-        // 获取容器尺寸
-        const containerWidth = that.myChart.getWidth();
-        const containerHeight = that.myChart.getHeight();
-        // 计算合适的缩放比例
-        const zoom = calculateZoom(boundingBox, containerWidth, containerHeight);
-        console.log(center, zoom)
-        // 注册地图
-        echarts.registerMap('china', geoJsonData);
-        // 指定城市和颜色
-        var cityColors = {
-          '北京市': '#ff7f50',
-          '上海': '#87cefa',
-          '广州': '#da70d6',
-          '深圳': '#32cd32',
-          '成都': '#6495ed'
-        };
-        // 构建 series 数据
-        var seriesData = Object.keys(cityColors).map(function (city) {
-          return {
-            name: city,
-            itemStyle: {
-              normal: {
-                areaColor: cityColors[city]
-              },
-              emphasis: {
-                areaColor: '#ffcc33'
-              }
-            }
-          };
-        });
-        // 配置项
-        var option = {
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b}'
-          },
-          geo: {
-            map: 'china',
-            roam: true,
-            zoom: isNaN(zoom) ? 1.2 : zoom, // 设置缩放比例
-            center: center,
-            itemStyle: {
-              normal: {
-                areaColor: '#eeeeee',
-                borderColor: '#111'
-              },
-              emphasis: {
-                areaColor: '#ffcc33'
+      }) {
+        var that = this;
+        if (that.myChart) {
+          that.myChart.dispose();
+        }
+        bigGetRegion(pam).then(res => {
+          // 初始化 ECharts 实例
+          that.myChart = echarts.init(document.getElementById('chart_7'));
+          const geoJsonData = JSON.parse(res.data);
+          // 计算边界框
+          const boundingBox = calculateBoundingBox(geoJsonData);
+          // 计算中心点
+          const center = [
+            (boundingBox.minX + boundingBox.maxX) / 2,
+            (boundingBox.minY + boundingBox.maxY) / 2
+          ];
+          echarts.registerMap('china', geoJsonData);
+          // 指定城市和颜色
+          var cityColors = {};
+          this.getLarge9.map(name => {
+            cityColors[name] = "#009eff";
+          });
+          // 构建 series 数据
+          var seriesData = Object.keys(cityColors).map(function (city) {
+            return {
+              name: city,
+              itemStyle: {
+                normal: {
+                  areaColor: cityColors[city],
+                  borderColor: 'rgba(0,0,0,0)'
+                },
+                emphasis: {
+                  areaColor: cityColors[city],
+                  borderColor: 'rgba(0,0,0,0)'
+                }
               }
+            };
+          });
+          // 配置项
+          var option = {
+            tooltip: {
+              trigger: 'item',
+              formatter: '{b}'
             },
-            regions: [
-              ...seriesData,
-              {
-                name: "南海诸岛",
-                itemStyle: {
-                  // 隐藏地图
-                  normal: {
-                    opacity: 0, // 为 0 时不绘制该图形
-                  }
+            geo: {
+              map: 'china',
+              roam: true,
+              zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
+              center: center,
+              itemStyle: {
+                normal: {
+                  areaColor: 'rgba(0,0,0,0)',
+                  borderColor: '#096DF3'
                 },
-                label: {
-                  show: false // 隐藏文字
+                emphasis: {
+                  areaColor: '#7024fb'
                 }
-              }
-            ]
-          },
-          series: [{
-            type: 'map',
-            map: 'china',
-            geoIndex: 0,
-            data: seriesData
-          }]
-        };
-        // 使用配置项生成图表
-        that.myChart.setOption(option);
-        // 鼠标点击事件
-        that.myChart.on('click', function (params) {
-          var cityName = params.name;
-          if (cityColors[cityName]) {
-            seriesData.forEach(function (city) {
-              if (city.name === cityName) {
-                city.itemStyle.normal.areaColor = '#ffcc33'; // 设置点击后的颜色
+              },
+              regions: [
+                ...seriesData,
+                {
+                  name: "南海诸岛",
+                  itemStyle: {
+                    normal: {
+                      opacity: 0,
+                    }
+                  },
+                  label: {
+                    show: false
+                  }
+                }
+              ]
+            },
+            series: [{
+              type: 'map',
+              map: 'china',
+              geoIndex: 0,
+              data: seriesData
+            }]
+          };
+          // 使用配置项生成图表
+          that.myChart.setOption(option);
+
+          // 监听点击事件
+          that.myChart.on('click', function (params) {
+            // 更新地区颜色
+            var updatedSeriesData = seriesData.map(function (item) {
+              if (item.name === params.name) {
+                return {
+                  name: item.name,
+                  itemStyle: {
+                    normal: {
+                      areaColor: 'red',
+                      borderColor: 'rgba(0,0,0,0)'
+                    },
+                    emphasis: {
+                      areaColor: 'none',
+                    }
+                  }
+                };
+              } else {
+                return {
+                  name: item.name,
+                  itemStyle: {
+                    normal: {
+                      areaColor: cityColors[item.name] || 'rgba(0,0,0,0)',
+                      borderColor: 'rgba(0,0,0,0)'
+                    },
+                    emphasis: {
+                      areaColor: 'none',
+                    }
+                  }
+                };
               }
             });
+
+            // 更新图表
             that.myChart.setOption({
+              geo: {
+                regions: [
+                  ...updatedSeriesData,
+                  {
+                    name: "南海诸岛",
+                    itemStyle: {
+                      normal: {
+                        opacity: 0,
+                      }
+                    },
+                    label: {
+                      show: false
+                    }
+                  }
+                ]
+              },
               series: [{
-                data: seriesData
+                data: updatedSeriesData
               }]
             });
-          }
+          });
         });
-      })
+
     },
   },
 };

src/views/bigViews/dataView1/components/orderAmountTrend.vue

@@ -1,43 +1,190 @@
 <template>
   <moduleEnclosure title="近30日订单金额趋势">
-    <div class="dvScrollBoardView">
-      
+    <div class="all-container">
+      <div id="orderEcharts2" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import img0 from '@/assets/xia.png';
-import img1 from '@/assets/shang.png';
-import img2 from '@/assets/y1.png';
-import img3 from '@/assets/y2.png';
-import img4 from '@/assets/y3.png';
-import { getQuery13, getQuery14 } from '@/api/bigView.js';
-var timeling = 5000;
+import { getOrderTrend } from '@/api/bigView.js';
+
 export default {
   components: {
     moduleEnclosure,
   },
+
   data() {
     return {
-     
+      
     };
   },
-  mounted() {
-    
+
+  async mounted() {
+    getOrderTrend().then(res => {
+      this.initEcharts(res.data);
+    })
   },
+
   beforeUnmount() {
     
   },
+
   methods: {
-    
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
+      }
+      
+      return dates;
+    },
+
+    initEcharts(data) {
+      var chartDom = document.getElementById('orderEcharts2');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: ''
+        },
+        tooltip: {
+          trigger: 'axis',
+          transitionDuration: 0,
+          backgroundColor: '#092a66',
+          borderColor: '#0462b5',
+          borderRadius: 8,
+          borderWidth: 2,
+          padding: [5, 10],
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dashed',
+              color: '#8AB1DC',
+            },
+          },
+          textStyle: {
+            color: '#ffffff'
+          }
+        },
+        legend: {
+          icon: 'circle',
+          data: ['新增销售金额', '新增辅材金额', '新增配件金额', '新增增值金额'],
+          textStyle: {
+            color: '#ffffff'
+          },
+          right: 0,
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // x轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // x轴辅助线颜色
+            }
+          },
+          data: this.getDate()
+        },
+        yAxis: {
+          type: 'value',
+          name: "（元）",
+          nameTextStyle: {
+            color: "#aaa",
+            nameLocation: "start",
+            align: 'right'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // y轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // y轴辅助线颜色
+            }
+          }
+        },
+        series: [
+          {
+            name: '新增销售金额',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: {
+              normal: {
+                color: '#FDFE02',
+              },
+            },
+            data: data.map(o => o.sxddje)
+          },
+          {
+            name: '新增辅材金额',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: {
+              normal: {
+                color: '#44E28F',
+              },
+            },
+            data: data.map(o => o.fcddje)
+          },
+          {
+            name: '新增配件金额',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: {
+              normal: {
+                color: '#41C5E2',
+              },
+            },
+            data: data.map(o => o.pjddje)
+          },
+          {
+            name: '新增增值金额',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: {
+              normal: {
+                color: '#D73A79',
+              },
+            },
+            data: data.map(o => o.zzddje)
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
-.dvScrollBoardView {
+.all-container {
   width: 100%;
   height: 100%;
   box-sizing: border-box;

src/views/bigViews/dataView1/components/orderStatistics.vue

@@ -1,225 +1,98 @@
 <template>
   <moduleEnclosure title="近30日累计订单统计">
-    <div
-      style="
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        padding-top: 12px;
-        position: relative;
-      "
-    >
-      <div
-        id="echarts5"
-        style="width: 100%; height: 100%"
-        class="echarts5div"
-      ></div>
+    <div class="all-container">
+      <div class="table-container">
+        <div class="th row">
+          <div>订单类型</div>
+          <div>累计订单数</div>
+          <div>累计订单金额</div>
+        </div>
+        <div class="td row">
+          <div>销售订单</div>
+          <div>{{statsData.sxdds}}</div>
+          <div>{{statsData.sxddje}}</div>
+        </div>
+        <div class="td row">
+          <div>辅材订单</div>
+          <div>{{statsData.fcdds}}</div>
+          <div>{{statsData.fcddje}}</div>
+        </div>
+        <div class="td row">
+          <div>配件订单</div>
+          <div>{{statsData.pjdds}}</div>
+          <div>{{statsData.pjddje}}</div>
+        </div>
+        <div class="td row">
+          <div>增值订单</div>
+          <div>{{statsData.zzdds}}</div>
+          <div>{{statsData.zzddje}}</div>
+        </div>
+      </div>
     </div>
   </moduleEnclosure>
 </template>
 
 <script>
-import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import * as echarts from 'echarts';
-import { getQuery8 } from '@/api/bigView.js';
-import { csize } from '@/utils/const.js';
-import bus from '@/utils/eventBus.js';
-export default {
-  components: { moduleEnclosure },
-  data() {
-    return {
-      myChart: null,
-      list: [],
-      aaaaa: false,
-    };
-  },
-  watch: {
-    aaaaa() {
-      if (this.aaaaa) {
-        bus.emit('autoplay', false);
-      } else {
-        bus.emit('autoplay', true);
-      }
+  import moduleEnclosure from '@/components/moduleEnclosure.vue';
+	import { getOrderStats } from '@/api/bigView.js';
+  export default {
+    components: { moduleEnclosure },
+
+    data() {
+      return {
+        statsData: {},
+      };
     },
-  },
-  mounted() {
-    // this.timeId = getQuery8((res) => {
-    //   this.echarts_5(res.data);
-    // }, 50000);
-  },
-  beforeUnmount() {
-    this.timeId();
-  },
-  methods: {
-    echarts_5(value = []) {
-      this.list = value.sort((a, b) => {
-        return b.cut - a.cut;
-      });
-      if (this.myChart) {
-        this.myChart.dispose();
-      }
-      this.myChart = new echarts.init(document.getElementById('echarts5'));
-      this.myChart.setOption({
-        tooltip: {
-          formatter: function (params) {
-            return `<div style="color:#fff;">${params.seriesName}: ${params.name} (${params.percent}%)</div>`;
-          },
-          trigger: 'item',
-          transitionDuration: 0,
-          backgroundColor: '#092a66',
-          borderColor: '#0462b5',
-          borderRadius: 8,
-          borderWidth: 2,
-          padding: [0, 0],
-          axisPointer: {
-            type: 'line',
-            lineStyle: {
-              type: 'dashed',
-              color: '#8AB1DC',
-            },
-          },
-        },
-        // visualMap: {
-        //   show: false,
-        //   min: 400,
-        //   max: 500,
-        //   inRange: {},
-        // },
-        series: [
-          {
-            name: '类型',
-            type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['50%', '50%'],
-            color: ['#21c8fb', '#ffc737', '#ea539b', '#59cfe6', '#8061ff'],
-            data: this.list
-              .slice(0, 8)
-              .map((item) => {
-                return {
-                  name: item.btype,
-                  value: item.cut,
-                };
-              })
-              .filter((item) => item.value > 0),
-            roseType: 'radius',
-            label: {
-              normal: {
-                formatter: ['{b|{b}:{d}%}', '{c|{c}单}'].join('\n'),
-                rich: {
-                  b: {
-                    color: '#fff',
-                    fontSize: csize(11),
-                    lineHeight: csize(11),
-                  },
-                  c: {
-                    color: 'rgb(98,137,169)',
-                    fontSize: csize(11),
-                    lineHeight: csize(11),
-                    height: csize(11),
-                  },
-                },
-              },
-            },
-            labelLine: {
-              normal: {
-                lineStyle: {
-                  color: 'rgb(98,137,169)',
-                },
-                smooth: 0.2,
-                length: 10,
-                length2: 20,
-              },
-            },
-          },
-        ],
-      });
+
+    mounted() {
+      this.getData();
+    },
+
+    beforeUnmount() {
+      
+    },
+
+    methods: {
+      getData() {
+				getOrderStats().then(res => {
+					this.statsData = res.data;
+				})
+			},
     },
-  },
-};
+  };
 </script>
 <style scoped lang="scss">
-.niiono {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1999;
-}
-.biuhoij {
-  display: inline-block;
-  position: absolute !important;
-  top: -8px;
-  right: -18px;
-}
-.minwiuhdu {
-  width: 150px;
-  text-align: right;
-}
-.setwidth {
-  width: 200px;
-  text-align: center;
-}
-table {
+.all-container {
   width: 100%;
-  border-collapse: collapse;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 12px;
+  position: relative;
 }
-
-table caption {
-  font-size: 2em;
-  font-weight: bold;
-  margin: 1em 0;
-}
-
-th,
-td {
-  border: 1px solid #ddd;
-  text-align: center;
-  padding: 6px 6px;
-}
-
-table thead tr {
-  background-color: #008c8c;
-  color: #fff;
-}
-
-table tbody tr:nth-child(odd) {
-  background-color: #eee;
-}
-
-table tbody tr:hover {
-  background-color: #ccc;
-}
-table tfoot tr td {
-  padding-right: 20px;
-}
-.echarts5div {
-  position: absolute;
-  left: 0;
-  bottom: -14px;
-}
-.classbtns {
-  width: 80px;
-  height: 28px;
+.table-container {
+  height: 100%;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  border: 2px solid #0e72e6;
-  cursor: pointer;
-  transform: translatex(-10px);
-  div {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    line-height: 28px;
-  }
-
-  div:nth-child(1) {
-    border-right: 2px solid #0e72e6;
-  }
-  .select {
-    background: #0e72e6;
-    color: #bbd4ff;
+  flex-direction: column;
+  justify-content: space-between;
+  .row {
+    display: flex;
+    &.th {
+      font-weight: bold;
+      color: #26A3CE;
+    }
+    &.td {
+      color: #ffffff;
+    }
+    div {
+      flex: 1;
+      font-size: 14px;
+      &:nth-child(2) {
+        text-align: center;
+      }
+      &:nth-child(3) {
+        text-align: right;
+      }
+    }
   }
 }
 </style>

src/views/bigViews/dataView1/components/orderTrend.vue

@@ -1,15 +1,16 @@
 <template>
   <moduleEnclosure title="近30日订单趋势">
-    <div id="main3" style="width: 100%; height: 100%"></div>
+    <div id="orderEcharts1" style="width: 100%; height: 100%"></div>
   </moduleEnclosure>
 </template>
 
 <script>
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
-import { getQuery10 } from '@/api/bigView.js';
+import { getOrderTrend } from '@/api/bigView.js';
 import { csize } from '@/utils/const.js';
 let myChart4;
+
 export default {
   components: {
     moduleEnclosure,
@@ -20,40 +21,50 @@ export default {
     };
   },
   mounted() {
-    // this.timeId = getQuery10((res) => {
-    //   this.init_myChart2(res.data);
-    // }, 40000);
+    getOrderTrend().then(res => {
+      this.initEcharts(res.data);
+    })
   },
+
   beforeUnmount() {
-    this.timeId();
+    
   },
+
   methods: {
-    init_myChart2(value) {
-      var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
-        return str1.slice(5);
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
+      }
+      
+      return dates;
+    },
+
+    initEcharts(data) {
+      var times = this.getDate();
+      var data1 = data.map((item) => {
+        return item.sxdds || 0;
+      });
+      var data2 = data.map((item) => {
+        return item.fcdds || 0;
       });
-      var data1 = value.map((item) => {
-        return item.completeOrder || 0;
+      var data3 = data.map((item) => {
+        return item.pjdds || 0;
       });
-      var data2 = value.map((item) => {
-        return item.totalOrder || 0;
+      var data4 = data.map((item) => {
+        return item.zzdds || 0;
       });
       if (myChart4) {
         myChart4.dispose();
       }
-      myChart4 = new echarts.init(document.getElementById('main3'));
+      myChart4 = new echarts.init(document.getElementById('orderEcharts1'));
       myChart4.setOption({
         tooltip: {
           trigger: 'axis',
-          formatter: function (params) {
-            var res = '';
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
-            }
-            return `<div style="color:#fff;">${res}</div>`;
-          },
           transitionDuration: 0,
           backgroundColor: '#092a66',
           borderColor: '#0462b5',
@@ -67,6 +78,9 @@ export default {
               color: '#8AB1DC',
             },
           },
+          textStyle: {
+            color: '#ffffff'
+          }
         },
         legend: {
           icon: 'circle',
@@ -75,18 +89,16 @@ export default {
           itemGap: 10,
           top: '16',
           right: '10',
-          data: ['维修新增', '维修完成'],
+          data: ['新增销售单', '新增辅材单', '新增配件单', '新增增值单'],
           textStyle: {
-            fontSize: csize(16),
-            color: '#8AB1DC',
+            color: '#ffffff',
           },
         },
         grid: {
-          x: csize(65),
-          y: csize(50),
-          x2: csize(30),
-          y2: csize(30),
-          containLabel: false,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
         xAxis: [
           {
@@ -96,7 +108,6 @@ export default {
               interval: Math.floor(times.length / 10),
               showMinLabel: true, //是否显示最小 tick 的 label
               showMaxLabel: true, //是否显示最大 tick 的 label
-              fontSize: csize(12),
             },
             axisLine: {
               show: false,
@@ -113,9 +124,11 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '单',
+            name: '（单/台）',
             nameTextStyle: {
-              fontSize: csize(16),
+              color: "#aaa",
+              nameLocation: "start",
+              // align: 'right'
             },
             axisLine: {
               show: false,
@@ -141,7 +154,7 @@ export default {
         ],
         series: [
           {
-            name: '维修新增',
+            name: '新增销售单',
             type: 'line',
             smooth: true,
             showSymbol: false,
@@ -160,11 +173,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
+                      color: 'rgba(253, 173, 96, 0.3)',
                     },
                     {
                       offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
+                      color: 'rgba(253, 173, 96, 0)',
                     },
                   ],
                   false
@@ -175,13 +188,13 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: '#F34799',
+                color: '#FDAD60',
               },
             },
             data: data1,
           },
           {
-            name: '维修完成',
+            name: '新增辅材单',
             type: 'line',
             smooth: true,
             showSymbol: false,
@@ -200,11 +213,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: 'rgba(0, 136, 212, 0.3)',
+                      color: 'rgba(68, 226, 143, 0.3)',
                     },
                     {
                       offset: 0.8,
-                      color: 'rgba(0, 136, 212, 0)',
+                      color: 'rgba(68, 226, 143, 0)',
                     },
                   ],
                   false
@@ -215,11 +228,91 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: '#38A0D6',
+                color: '#44E28F',
               },
             },
             data: data2,
           },
+          {
+            name: '新增配件单',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(160, 61, 239, 0.3)',
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(160, 61, 239, 0)',
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#A03DEF',
+              },
+            },
+            data: data3,
+          },
+          {
+            name: '新增增值单',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(65, 197, 226, 0.3)',
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(65, 197, 226, 0)',
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#41C5E2',
+              },
+            },
+            data: data4,
+          },
         ],
       });
     },

src/views/bigViews/dataView1/components/trendChart.vue

@@ -2,91 +2,75 @@
   <moduleEnclosure title="趋势图">
     <template v-slot:rightce>
       <div class="classbtns">
-        <div
-          @click="cindex = 0"
-          :class="{
-            select: cindex === 0,
-          }"
-        >
-          浏览量
+        <div @click="cindex = 0" :class="{
+          select: cindex === 0,
+        }">
+          浏览量(PV)
         </div>
-        <div
-          @click="cindex = 1"
-          :class="{
-            select: cindex === 1,
-          }"
-        >
-          访客量
+        <div @click="cindex = 1" :class="{
+          select: cindex === 1,
+        }">
+          访客量(UV)
         </div>
       </div>
     </template>
-    <el-carousel
-      height="100%"
-      style="width: 100%; height: 100%"
-      ref="elCarousel"
-      :autoplay="false"
-    >
-      <el-carousel-item v-for="(item, index) in 2" :key="index">
-        <div style="width: 100%; height: 100%">
-          <div
-            :id="`chartmain_${item}`"
-            style="width: 100%; height: 100%"
-          ></div>
-        </div>
-      </el-carousel-item>
-    </el-carousel>
+    <div style="width: 100%; height: 100%">
+      <div :id="`chartmain_fkell`" style="width: 100%; height: 100%"></div>
+    </div>
   </moduleEnclosure>
 </template>
 
 <script>
+import { bigGetLarge3 } from '@/api/common.js';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
-import { getQuery12 } from '@/api/bigView.js';
 import { csize } from '@/utils/const.js';
-let myChart, myChart2;
 export default {
   components: {
     moduleEnclosure,
   },
   data() {
     return {
-      cindex: -1,
-      myChart: null,
-      myChart2: null,
+      cindex: 0,
     };
   },
   mounted() {
-    // this.timeId = getQuery12((res) => {
-    //   this.eac(res.data);
-    //   this.init_myChart2(res.data);
-    // }, 70000);
-    this.cindex = 0;
+    this.getbigGetLarge3()
   },
   beforeUnmount() {
-    this.timeId();
+
   },
   watch: {
-    cindex(newVal, oldValue) {
-      if (oldValue !== -1) {
-        this.$refs.elCarousel.next();
-      }
-      if (this.timed) {
-        clearTimeout(this.timed);
-      }
-      this.timed = setTimeout(() => {
-        this.cindex = this.cindex ? 0 : 1;
-      }, 30000);
-    },
+    cindex(){
+      this.getbigGetLarge3()
+    }
   },
   methods: {
+    getbigGetLarge3() {
+      bigGetLarge3().then(res => {
+        this.eac(res.data)
+      })
+    },
     eac(value) {
+      var that = this
+      if (that.myChart) {
+        that.myChart.dispose();
+      }
       var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
+        var str1 = item.dstr.split(' ')[0];
         return str1.slice(5);
       });
       var data = value.map((item) => {
-        return item.badapp;
+        return item[["num", "userNum"][this.cindex]];
       });
+      // 计算刻度的间隔
+      var interval = Math.ceil((Math.max(...data) - Math.min(...data)) / 2); // 确保有 3 个刻度
+      interval = interval < 1 ? 1 : interval
+      // 计算 y 轴的最大值和最小值
+      var maxY = Math.ceil(Math.max(...data) / interval) * interval;
+      maxY = maxY < 3 ? 3 : maxY
+      var minY = Math.floor(Math.min(...data) / interval) * interval;
+      minY = minY < 1 ? 1 : minY
       var option = {
         tooltip: {
           trigger: 'axis',
@@ -113,10 +97,10 @@ export default {
           subtext: '',
         },
         grid: {
-          x: csize(65),
+          x: csize(40),
           y: csize(40),
-          x2: csize(30),
-          y2: csize(30),
+          x2: csize(20),
+          y2: csize(20),
         },
         xAxis: {
           data: times,
@@ -138,11 +122,15 @@ export default {
               color: '#8AB1DC',
             },
           },
+          boundaryGap: false,
         },
         yAxis: [
           {
+            min: minY,
+            max: maxY,
+            interval: interval,
             type: 'value',
-            name: '单位（单）',
+            name: '人（次）',
             nameTextStyle: {
               fontSize: csize(16),
             },
@@ -176,8 +164,10 @@ export default {
         series: [
           {
             // For shadow
-            type: 'bar',
+            type: 'line',
             barWidth: 10,
+            smooth: true,  // 设置平滑曲线
+            symbol: 'none',  // 隐藏节点
             itemStyle: {
               color: 'rgba(0,0,0,0.05)',
             },
@@ -187,8 +177,10 @@ export default {
             animation: false,
           },
           {
-            type: 'bar',
+            type: 'line',
             barWidth: 10,
+            smooth: true,  // 设置平滑曲线
+            symbol: 'none',  // 隐藏节点
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#0efdff' },
@@ -197,6 +189,18 @@ export default {
               ]),
               barBorderRadius: 5,
             },
+            areaStyle: {  // 设置阴影样式
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  // 线性渐变，从上到下
+                offset: 0,
+                color: 'rgba(45,77,149,1)'  // 阴影起始颜色
+              }, {  // 线性渐变，从上到下
+                offset: 0.5,
+                color: 'rgba(45,77,149,.5)'  // 阴影起始颜色
+              }, {
+                offset: 1,
+                color: 'rgba(45,77,149,.2)'  // 阴影结束颜色
+              }])
+            },
             emphasis: {
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -211,248 +215,8 @@ export default {
           },
         ],
       };
-      if (myChart) {
-        myChart.dispose();
-      }
-      myChart = new echarts.init(document.getElementById('chartmain_1'));
-      myChart.setOption(option);
-    },
-    init_myChart2(value) {
-      var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
-        return str1.slice(5);
-      });
-      var data = value.map((item) => {
-        return item.goodrate;
-      });
-      var data1 = value.map((item) => {
-        return item.insrate;
-      });
-      var data2 = value.map((item) => {
-        return item.reprate;
-      });
-      if (myChart2) {
-        myChart2.dispose();
-      }
-      myChart2 = new echarts.init(document.getElementById('chartmain_2'));
-      myChart2.setOption({
-        tooltip: {
-          trigger: 'axis',
-          formatter: function (params) {
-            var res = '';
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
-            }
-            return `<div style="color:#fff;">${res}</div>`;
-          },
-          transitionDuration: 0,
-          backgroundColor: '#092a66',
-          borderColor: '#0462b5',
-          borderRadius: 8,
-          borderWidth: 2,
-          padding: [5, 10],
-          axisPointer: {
-            type: 'line',
-            lineStyle: {
-              type: 'dashed',
-              color: '#8AB1DC',
-            },
-          },
-        },
-        legend: {
-          icon: 'circle',
-          itemWidth: 8,
-          itemHeight: 8,
-          itemGap: 10,
-          top: '16',
-          right: '10',
-          data: ['好评率', '安装评价率', '维修评价率'],
-          textStyle: {
-            fontSize: csize(16),
-            color: '#8AB1DC',
-          },
-        },
-        grid: {
-          x: csize(65),
-          y: csize(50),
-          x2: csize(30),
-          y2: csize(30),
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLabel: {
-              interval: Math.floor(times.length / 15),
-              showMinLabel: true, //是否显示最小 tick 的 label
-              showMaxLabel: true, //是否显示最大 tick 的 label
-              fontSize: csize(12),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            data: times,
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '单位（%）',
-            nameTextStyle: {
-              fontSize: csize(16),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisLabel: {
-              margin: 10,
-              textStyle: {
-                fontSize: csize(12),
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#364D95',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-        ],
-        series: [
-          {
-            name: '好评率',
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: '#F34799',
-              },
-            },
-            data: data,
-          },
-          {
-            name: '安装评价率',
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: '#1cc840',
-              },
-            },
-            data: data1,
-          },
-          {
-            name: '维修评价率',
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(0, 136, 212, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(0, 136, 212, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: '#43bbfb',
-              },
-            },
-            data: data2,
-          },
-        ],
-      });
+      that.myChart = new echarts.init(document.getElementById('chartmain_fkell'));
+      that.myChart.setOption(option);
     },
   },
 };
@@ -460,27 +224,34 @@ export default {
 
 <style scoped lang="scss">
 .classbtns {
-  width: 160px;
-  height: 28px;
+  width: 200px;
+  height: 30px;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  border: 2px solid #0e72e6;
   cursor: pointer;
-  div {
-    width: 50%;
+
+  div:nth-child(1),
+  div:nth-child(2) {
+    width: 48%;
     height: 100%;
     text-align: center;
     line-height: 28px;
+    border: 1px solid #0e72e6;
+    position: relative;
   }
+
   div:nth-child(1) {
-    border-right: 2px solid #0e72e6;
+    border-right: 1px solid #0e72e6;
   }
+
   .select {
     background: #0e72e6;
     color: #bbd4ff;
   }
 }
+
 ::v-deep .el-carousel__arrow,
 ::v-deep .el-carousel__indicators {
   display: none;

src/views/bigViews/dataView1/components/workOrderStatistics.vue

@@ -1,29 +1,37 @@
 <template>
 	<moduleEnclosure title="近30天累计工单统计">
-		<div id="main4" style="width: 100%; height: 100%">
-			<div class="mode mode1">
-				<div class="title">工单类型</div>
-				<div class="text">累计安装台数</div>
-				<div class="text">累计维修台数</div>
-				<div class="text">累计清洗台数</div>
-				<div class="text">增值服务工单</div>
-				<div class="text">维修工程工单</div>
-			</div>
-			<div class="mode mode2">
-				<div class="title">数量</div>
-				<div class="text">123412</div>
-				<div class="text">1225</div>
-				<div class="text">342</div>
-				<div class="text">234234</div>
-				<div class="text">6234</div>
-			</div>
-			<div class="mode mode3">
-				<div class="title">占比</div>
-				<div class="up">12%<i class="el-icon-top"></i></div>
-				<div class="up">45%<i class="el-icon-top"></i></div>
-				<div class="down">11%<i class="el-icon-bottom"></i></div>
-				<div class="up">20%<i class="el-icon-top"></i></div>
-				<div class="down">12%<i class="el-icon-bottom"></i></div>
+		<div class="all-container">
+			<div class="table-container">
+        <div class="th row">
+          <div>订单类型</div>
+          <div>数量</div>
+          <div>占比</div>
+        </div>
+        <div class="td row">
+          <div>累计安装台数</div>
+          <div>{{statsData.azgd || 0}}</div>
+          <div>{{statsData.azgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>累计维修台数</div>
+          <div>{{statsData.wxgd || 0}}</div>
+          <div>{{statsData.wxgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>累计清洗台数</div>
+          <div>{{statsData.qxgd || 0}}</div>
+          <div>{{statsData.qxgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>增值服务工单</div>
+          <div>{{statsData.zzgd || 0}}</div>
+          <div>{{statsData.zzgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>维保工程工单</div>
+          <div>{{statsData.wbgd || 0}}</div>
+          <div>{{statsData.wbgdzb || 0}}%</div>
+        </div>
 			</div>
 		</div>
 	</moduleEnclosure>
@@ -31,258 +39,71 @@
 
 <script>
 	import moduleEnclosure from '@/components/moduleEnclosure.vue';
-	import * as echarts from 'echarts';
-	import {
-		getQuery9
-	} from '@/api/bigView.js';
-	import {
-		csize
-	} from '@/utils/const.js';
-	let myChart1;
+	import { getWorkorderStats } from '@/api/bigView.js';
+
 	export default {
 		components: {
 			moduleEnclosure,
 		},
 		data() {
 			return {
-				myChart: null,
+				statsData: {},
 			};
 		},
+
 		mounted() {
-			this.timeId = getQuery9((res) => {
-				this.eac(res.data);
-			}, 60000);
+			this.getData();
 		},
+
 		beforeUnmount() {
-			this.timeId();
+			
 		},
+
 		methods: {
-			eac(value) {
-				var names = [];
-				var fz = 2000;
-				var values1 = [...value].sort((a, b) => {
-					return b.cut - a.cut;
-				});
-				var values2 = [...value].sort((a, b) => {
-					return b.machine_num - a.machine_num;
-				});
-				for (var i = 0; i < 4; i++) {
-					var name1 = values1[i].sales_type;
-					var name2 = values2[i].sales_type;
-					if (!~names.indexOf(name1)) {
-						names.push(name1);
-					}
-					if (!~names.indexOf(name2)) {
-						names.push(name2);
-					}
-				}
-				var obj = {
-					sales_type: '其他',
-					cut: 0,
-					machine_num: 0,
-				};
-				var list = value.filter((item) => {
-					if (
-						~names.indexOf(item.sales_type) ||
-						item.cut > fz ||
-						item.machine_num > fz
-					) {
-						return true;
-					} else {
-						obj.cut += item.cut;
-						obj.machine_num += item.machine_num;
-						return false;
-					}
-				});
-				list.push(obj);
-				var dataAxis = list.map((item) => item.sales_type);
-				var data1 = list.map((item) => item.cut);
-				var data2 = list.map((item) => item.machine_num);
-				var option = {
-					tooltip: {
-						trigger: 'axis',
-						formatter: function(params) {
-							var res = '新增工单' + ' : ' + params[0].value + '<br/>';
-							res += '设备总量' + ' : ' + params[1].value + '<br/>';
-							return `<div style="color:#fff;"><div>${params[0].name}</div>${res}</div>`;
-						},
-						transitionDuration: 0,
-						backgroundColor: '#092a66',
-						borderColor: '#0462b5',
-						borderRadius: 8,
-						borderWidth: 2,
-						padding: [5, 10],
-						axisPointer: {
-							type: 'line',
-							lineStyle: {
-								type: 'dashed',
-								color: '#8AB1DC',
-							},
-						},
-					},
-					title: {
-						text: '',
-						subtext: '',
-					},
-					legend: {
-						icon: 'circle',
-						itemWidth: 8,
-						itemHeight: 8,
-						itemGap: 10,
-						top: '16',
-						right: '10',
-						data: ['新增工单', '设备总量'],
-						textStyle: {
-							fontSize: csize(16),
-							color: '#8AB1DC',
-						},
-					},
-					grid: {
-						x: csize(65),
-						y: csize(50),
-						x2: csize(30),
-						y2: csize(30),
-					},
-					xAxis: {
-						data: dataAxis,
-						axisLabel: {
-							/*inside: true,*/
-							interval: 0,
-							textStyle: {
-								fontSize: csize(16),
-							},
-						},
-						axisTick: {
-							show: false,
-						},
-						axisLine: {
-							show: false,
-							symbol: ['none', 'arrow'],
-							symbolOffset: 12,
-							lineStyle: {
-								fontSize: csize(12),
-								color: '#8AB1DC',
-							},
-						},
-					},
-					yAxis: [{
-						type: 'value',
-						name: '单',
-						nameTextStyle: {
-							fontSize: csize(16),
-						},
-						axisLine: {
-							show: false,
-							lineStyle: {
-								color: '#8AB1DC',
-							},
-						},
-						axisLabel: {
-							margin: 10,
-							textStyle: {
-								fontSize: csize(12),
-							},
-						},
-						splitLine: {
-							lineStyle: {
-								color: '#364D95',
-							},
-						},
-						axisTick: {
-							show: false,
-						},
-					}, ],
-					dataZoom: [{
-						type: 'inside',
-					}, ],
-					series: [{
-							name: '新增工单',
-							type: 'bar',
-							barGap: 0.2,
-							barWidth: 8,
-							itemStyle: {
-								normal: {
-									show: true,
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-											offset: 0,
-											color: '#35d4cb',
-										},
-										{
-											offset: 1,
-											color: '#3cf8ed',
-										},
-									]),
-									barBorderRadius: 10,
-								},
-							},
-							data: data1,
-						},
-						{
-							name: '设备总量',
-							type: 'bar',
-							barGap: 0.2,
-							barWidth: 8,
-							itemStyle: {
-								normal: {
-									show: true,
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-											offset: 0,
-											color: '#3077bd',
-										},
-										{
-											offset: 1,
-											color: '#3d99fd',
-										},
-									]),
-									barBorderRadius: 10,
-								},
-							},
-							data: data2,
-						},
-					],
-				};
-				if (myChart1) {
-					myChart1.dispose();
-				}
-				myChart1 = new echarts.init(document.getElementById('main4'));
-				myChart1.setOption(option);
+			getData() {
+				getWorkorderStats().then(res => {
+					this.statsData = res.data;
+				})
 			},
 		},
 	};
 </script>
 
 <style scoped lang="scss">
-	#main4 {
-		display: flex;
-		padding-top: 20px;
-		.mode {
-			line-height: 34px;
-			.title {
-				font-size: 18px;
-				color: #1a8dc8;
-			}
-
-			.text {
-				color: #ffffff;
-				
-			}
-
-			.up {
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 12px;
+  position: relative;
+}
+.table-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .row {
+    display: flex;
+    &.th {
+      font-weight: bold;
+      color: #26A3CE;
+    }
+    &.td {
+      color: #ffffff;
+			div:last-child {
 				color: #e4f824;
 			}
-
-			.down {
-				color: #c81637;
-			}
-		}
-		.mode1{
-			width: 40%;
-		}
-		.mode2{
-			width: 40%;
-		}
-		.mode3{
-			width: 20%;
-		}
-	}
+    }
+    div {
+      flex: 1;
+      font-size: 14px;
+      &:nth-child(2) {
+        text-align: center;
+      }
+      &:nth-child(3) {
+        text-align: right;
+      }
+    }
+  }
+}
 </style>

src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -2,68 +2,86 @@
   <moduleEnclosure title="近30天工单趋势">
 	  <template v-slot:rightce>
 	    <div class="tabbar">
-	    	<div :class="tabIndex == index?'tab active':'tab'" v-for="(item,index) in tabs" :key="index" @click="tabIndex = index">{{item}}</div>
+	    	<div
+          class="tab"
+          :class="tabCurrent == item ? 'active' : ''"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="changeTab(item)">
+          {{item}}
+        </div>
 	    </div>
 	  </template>
-		
-    <div id="main2" style="width: 100%; height: 100%">
-			
-	</div>
+		<div class="all-container">
+      <div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
+    </div>
   </moduleEnclosure>
 </template>
 
 <script>
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
-import { getQuery11 } from '@/api/bigView.js';
-import { csize } from '@/utils/const.js';
-let myChart3;
+import { getWorkorderTrend } from '@/api/bigView.js';
+
 export default {
   components: {
     moduleEnclosure,
   },
   data() {
     return {
-		tabs: ['安装','维修','回收'],
-		tabIndex: 0,
-      myChart2: null,
+      tabList: [],
+      tabCurrent: '',
+      tableData: [],
     };
   },
+
   mounted() {
-    // this.timeId = getQuery11((res) => {
-    //   this.init_myChart2(res.data);
-    // }, 30000);
+    this.initData();
   },
+
   beforeUnmount() {
-    this.timeId();
+    
   },
+
   methods: {
-    init_myChart2(value) {
-      var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
-        return str1.slice(5);
-      });
-      var data1 = value.map((item) => {
-        return item.completeMachine;
-      });
-      var data2 = value.map((item) => {
-        return item.completeOrder;
-      });
-      if (myChart3) {
-        myChart3.dispose();
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
       }
-      myChart3 = new echarts.init(document.getElementById('main2'));
-      myChart3.setOption({
+      
+      return dates;
+    },
+
+    changeTab(item) {
+      this.tabCurrent = item;
+      this.initEcharts();
+    },
+
+    initData() {
+      getWorkorderTrend().then(res => {
+        this.tabList = res.data.map(o => o.lx);
+        this.tabCurrent = this.tabList[0];
+        this.tableData = res.data;
+        this.initEcharts();
+      })
+    },
+
+    initEcharts() {
+      var chartDom = document.getElementById('workorderEcharts1');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: ''
+        },
         tooltip: {
           trigger: 'axis',
-          formatter: function (params) {
-            var res = '';
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
-            }
-            return `<div style="color:#fff;">${res}</div>`;
-          },
           transitionDuration: 0,
           backgroundColor: '#092a66',
           borderColor: '#0462b5',
@@ -77,186 +95,124 @@ export default {
               color: '#8AB1DC',
             },
           },
+          textStyle: {
+            color: '#ffffff'
+          }
         },
         legend: {
           icon: 'circle',
-          itemWidth: 8,
-          itemHeight: 8,
-          itemGap: 10,
-          top: '16',
-          right: '10',
-          data: ['新增', '完成'],
+          data: ['已完工', '未完工'],
           textStyle: {
-            fontSize: csize(16),
-            color: '#8AB1DC',
+            color: '#ffffff'
           },
+          right: 0,
         },
         grid: {
-          x: csize(65),
-          y: csize(50),
-          x2: csize(30),
-          y2: csize(30),
-          containLabel: false,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLabel: {
-              interval: Math.floor(times.length / 10),
-              showMinLabel: true, //是否显示最小 tick 的 label
-              showMaxLabel: true, //是否显示最大 tick 的 label
-              fontSize: csize(12),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            data: times,
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // x轴文字颜色
+            }
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '单',
-            nameTextStyle: {
-              fontSize: csize(16),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisLabel: {
-              margin: 10,
-              textStyle: {
-                fontSize: csize(12),
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#364D95',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // x轴辅助线颜色
+            }
+          },
+          data: this.getDate()
+        },
+        yAxis: {
+          type: 'value',
+          name: "（单/台）",
+          nameTextStyle: {
+            color: "#aaa",
+            nameLocation: "start",
+            // align: 'right'
           },
-        ],
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // y轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // y轴辅助线颜色
+            }
+          }
+        },
         series: [
           {
-            name: '新增',
+            name: '已完工',
             type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
+            stack: 'Total',
             itemStyle: {
               normal: {
-                color: '#1cc840',
+                color: '#FDFE02',
               },
             },
-            data: data1,
+            data: this.tableData.find(o => o.lx == this.tabCurrent).unitNum
           },
           {
-            name: '完成',
+            name: '未完工',
             type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(0, 136, 212, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(0, 136, 212, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
+            stack: 'Total',
             itemStyle: {
               normal: {
-                color: '#43bbfb',
+                color: '#44E28F',
               },
             },
-            data: data2,
+            data: this.tableData.find(o => o.lx == this.tabCurrent).unitNumWwg
           },
-        ],
-      });
-    },
+        ]
+      };
+
+      option && myChart.setOption(option);
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
-	.tabbar{
-		display: flex;
-		.tab{
-			width: 50px;
-			color: #ffffff;
-			border: 1px solid #254280;
-			font-size: 12px;
-			font-weight: bold;
-			padding: 2px 0;
-			margin-right: 14px;
-			text-align: center;
-			cursor: pointer;
-		}
-		.active{
-			border: 1px solid #153781;
-			color: #1a8dc8;
-		}
-	}
-	#main2{
-		
-	}
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 16px;
+}
+.tabbar{
+  display: flex;
+  flex-wrap: wrap;
+  .tab{
+    width: 50px;
+    color: #ffffff;
+    border: 1px solid #254280;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 2px 0;
+    margin-right: 10px;
+    text-align: center;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .active{
+    border: 1px solid #153781;
+    color: #1a8dc8;
+  }
+}
 </style>

src/views/bigViews/dataView1/index.vue

@@ -34,15 +34,15 @@
           </div>
           <div style="width: 26%">
             <zj-page-container>
-              <div class="module-inner-margin h47">
+              <div class="module-inner-margin" style="height: 28%">
                 <orderStatistics />
               </div>
-              <div class="module-inner-margin h53">
+              <div class="module-inner-margin" style="height: 38%">
                 <orderTrend />
               </div>
               <div
                 class="module-inner-margin"
-                style="min-height: 30.32%; height: 30.32%"
+                style="min-height: 30.32%; height: 44.32%"
               >
                 <orderAmountTrend />
               </div>