改了很多东西

.gitignore

@@ -3,4 +3,5 @@
 /springboot/src/main/resources/application-druid.yml
 
 /files
-/springboot/src/main/resources/application-druid.yml
+/springboot/src/main/resources/application-druid.yml
+

.idea/ApifoxUploaderProjectSetting.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ApifoxUploaderProjectSetting">
+    <option name="apifoxAccessToken" value="APS-yGqeTJjXjnqiYd2CemExbEP1HQSB8xVi" />
+    <option name="apifoxProjectIds">
+      <array>
+        <option value="# ModuleName:ProjectID" />
+        <option value="" />
+        <option value="course_scheduling_system:3891794" />
+        <option value="errand:3891794" />
+        <option value="" />
+        <option value="springboot:4261030" />
+      </array>
+    </option>
+    <option name="yapiTokens" value="" />
+  </component>
+</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ES6UnusedImports" enabled="false" level="WARNING" enabled_by_default="false" />
+  </profile>
+</component>

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ASMSmaliIdeaPluginConfiguration">
     <asm skipDebug="true" skipFrames="true" skipCode="false" expandFrames="false" />

.idea/modules.xml

@@ -2,6 +2,8 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
+      <module fileurl="file://$PROJECT_DIR$/vue3.iml" filepath="$PROJECT_DIR$/vue3.iml" />
+      <module fileurl="file://$PROJECT_DIR$/vue3_js.iml" filepath="$PROJECT_DIR$/vue3_js.iml" />
       <module fileurl="file://$PROJECT_DIR$/.idea/农妙果蔬通.iml" filepath="$PROJECT_DIR$/.idea/农妙果蔬通.iml" />
     </modules>
   </component>

springboot/pom.xml

@@ -38,7 +38,11 @@
             <artifactId>mybatis-spring-boot-starter</artifactId>
             <version>2.2.1</version>
         </dependency>
-
+        <dependency>
+            <groupId>com.alibaba</groupId>
+            <artifactId>fastjson</artifactId>
+            <version>1.2.74</version>
+        </dependency>
         <dependency>
             <groupId>com.github.pagehelper</groupId>
             <artifactId>pagehelper-spring-boot-starter</artifactId>
@@ -57,6 +61,12 @@
             <artifactId>hutool-all</artifactId>
             <version>5.8.18</version>
         </dependency>
+        <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
+<!--        <dependency>-->
+<!--            <groupId>com.baomidou</groupId>-->
+<!--            <artifactId>mybatis-plus-boot-starter</artifactId>-->
+<!--            <version>3.5.2</version>-->
+<!--        </dependency>-->
 
         <dependency>
             <groupId>com.auth0</groupId>
@@ -79,6 +89,20 @@
             <artifactId>lombok</artifactId>
             <optional>true</optional>
         </dependency>
+
+        <!-- https://mvnrepository.com/artifact/junit/junit -->
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <version>4.13.2</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.baomidou</groupId>
+            <artifactId>mybatis-plus-core</artifactId>
+            <version>3.5.4.1</version>
+        </dependency>
+
     </dependencies>
 
     <build>

springboot/src/main/java/Test/testApplication.java

@@ -0,0 +1,20 @@
+package Test;
+
+import cn.hutool.json.JSONObject;
+import cn.hutool.json.JSONUtil;
+
+/**
+ * 功能：
+ *
+ * @author 熊浩毅
+ * @time 2024-04-30 22:43
+ * @Description
+ */
+
+public class testApplication {
+
+    public static   void main(String[] args) {
+
+    }
+
+}

springboot/src/main/java/com/example/common/enums/OrderStatus.java

@@ -0,0 +1,45 @@
+package com.example.common.enums;
+
+import lombok.Data;
+
+
+public enum OrderStatus {
+    CANCEL("已取消",0),
+    // 商家自动接单 直接跳转到待出餐！
+    NO_OUT("待接单",1),
+    ACCEPT("已接单",2), //骑手待接单
+    NO_ARRIVE("待送达",3), // 骑手
+    ARRIVED("已送达",4),
+    NO_RECEIVE("待收货",5),
+//    NO_COMMENT("待评价",6),
+    DONE("已完成",6),
+    ;
+    private String value;
+    private Integer order; //次序
+    OrderStatus(String value, Integer order){
+        this.value=value;
+    }
+
+    @Override
+    public String toString() {
+        return value ;
+    }
+
+    public String getValue() {
+        return value;
+    }
+
+    public void setValue(String value) {
+        this.value = value;
+    }
+
+    public Integer getOrder() {
+        return order;
+    }
+
+    public void setOrder(Integer order) {
+        this.order = order;
+    }
+
+
+}

springboot/src/main/java/com/example/controller/ProductypeController.java → springboot/src/main/java/com/example/controller/AddressController.java

@@ -1,29 +1,41 @@
 package com.example.controller;
 
 import com.example.common.Result;
-import com.example.entity.Productype;
-import com.example.service.ProductypeService;
+import com.example.entity.Address;
+import com.example.service.AddressService;
 import com.github.pagehelper.PageInfo;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 前端操作接口
+ * Address用户地址接口
  **/
 @RestController
-@RequestMapping("/productype")
-public class ProductypeController {
+@RequestMapping("/address")
+public class AddressController {
 
     @Resource
-    private ProductypeService productypeService;
+    private AddressService addressService;
 
     /**
-     * 新增
+     * 获取用户id的地址
+     * @param userId
+     * @return
+     */
+    @GetMapping("/getByUserId/{userId}")
+    public Result getByUserId(@PathVariable Integer userId){
+        Address address = new Address();
+        address.setUserId(userId);
+        return Result.success( addressService.selectAll(address));
+    }
+
+    /**
+     * 添加用户收货地址
      */
     @PostMapping("/add")
-    public Result add(@RequestBody Productype productype) {
-        productypeService.add(productype);
+    public Result add(@RequestBody Address address) {
+        addressService.add(address);
         return Result.success();
     }
 
@@ -32,7 +44,7 @@ public class ProductypeController {
      */
     @DeleteMapping("/delete/{id}")
     public Result deleteById(@PathVariable Integer id) {
-        productypeService.deleteById(id);
+        addressService.deleteById(id);
         return Result.success();
     }
 
@@ -41,7 +53,7 @@ public class ProductypeController {
      */
     @DeleteMapping("/delete/batch")
     public Result deleteBatch(@RequestBody List<Integer> ids) {
-        productypeService.deleteBatch(ids);
+        addressService.deleteBatch(ids);
         return Result.success();
     }
 
@@ -49,8 +61,8 @@ public class ProductypeController {
      * 修改
      */
     @PutMapping("/update")
-    public Result updateById(@RequestBody Productype productype) {
-        productypeService.updateById(productype);
+    public Result updateById(@RequestBody Address address) {
+        addressService.updateById(address);
         return Result.success();
     }
 
@@ -59,16 +71,16 @@ public class ProductypeController {
      */
     @GetMapping("/selectById/{id}")
     public Result selectById(@PathVariable Integer id) {
-        Productype productype = productypeService.selectById(id);
-        return Result.success(productype);
+        Address address = addressService.selectById(id);
+        return Result.success(address);
     }
 
     /**
      * 查询所有
      */
     @GetMapping("/selectAll")
-    public Result selectAll(Productype productype) {
-        List<Productype> list = productypeService.selectAll(productype);
+    public Result selectAll(Address address) {
+        List<Address> list = addressService.selectAll(address);
         return Result.success(list);
     }
 
@@ -76,10 +88,10 @@ public class ProductypeController {
      * 分页查询
      */
     @GetMapping("/selectPage")
-    public Result selectPage(Productype productype,
+    public Result selectPage(Address address,
                              @RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize) {
-        PageInfo<Productype> page = productypeService.selectPage(productype, pageNum, pageSize);
+        PageInfo<Address> page = addressService.selectPage(address, pageNum, pageSize);
         return Result.success(page);
     }
 

springboot/src/main/java/com/example/controller/AdminController.java

@@ -9,7 +9,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 管理员前端操作接口
+ * Admin管理员接口
  **/
 @RestController
 @RequestMapping("/admin")

springboot/src/main/java/com/example/controller/AdminstoreController.java

@@ -10,7 +10,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 店铺管理员
+ * Adminstore店铺管理员
  */
 @RestController
 @RequestMapping("/adminstore")

springboot/src/main/java/com/example/controller/AuditsController.java

@@ -11,7 +11,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 申请审核表前端操作接口
+ * Audits申请审核表接口
  **/
 @RestController
 @RequestMapping("/audits")

springboot/src/main/java/com/example/controller/FileController.java

@@ -20,7 +20,6 @@ import java.net.URLEncoder;
 @RequestMapping("/files")
 @Slf4j
 public class FileController {
-
     // 文件上传存储路径
     private static final String filePath = System.getProperty("user.dir") + "/files/";
 

springboot/src/main/java/com/example/controller/NoticeController.java

@@ -9,7 +9,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 公告信息表前端操作接口
+ * Notice公告信息接口
  **/
 @RestController
 @RequestMapping("/notice")

springboot/src/main/java/com/example/controller/OrdersController.java

@@ -1,6 +1,8 @@
 package com.example.controller;
 
+import cn.hutool.core.date.LocalDateTimeUtil;
 import com.example.common.Result;
+import com.example.common.enums.OrderStatus;
 import com.example.entity.Orders;
 import com.example.service.OrdersService;
 import com.github.pagehelper.PageInfo;
@@ -9,7 +11,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 订单表前端操作接口
+ * Orders订单表接口
  **/
 @RestController
 @RequestMapping("/orders")
@@ -19,11 +21,38 @@ public class OrdersController {
     private OrdersService ordersService;
 
     /**
-     * 新增
+     * 创建订单返回生成的订单信息
+     * 传参：
+     * @param orders
+     * @return 订单信息
      */
-    @PostMapping("/add")
-    public Result add(@RequestBody Orders orders) {
-        ordersService.add(orders);
+    @PostMapping("createOrder")
+    public Result createOrder(@RequestBody Orders orders){
+        return Result.success(ordersService.add(orders));
+    }
+
+    /**
+     * 商家修改状态为订单已送达
+     * 传参 ： id
+     * @param orders {id 只需订单id}
+     * @return null
+     */
+    @PostMapping("setOrdersStateArrived")
+    public Result setOrdersArrived(@RequestBody Orders orders){
+        orders.setOrderState(String.valueOf(OrderStatus.ARRIVED));
+        ordersService.updateById(orders);
+        return Result.success();
+    }
+
+    /**
+     * 商家修改状态为订单已完成
+     * @param orders {id 只需订单id}
+     * @return null
+     */
+    @PostMapping("ordersFinished")
+    public Result setOrdersState(@RequestBody Orders orders){
+        orders.setOrderState(String.valueOf(OrderStatus.DONE));
+        ordersService.updateById(orders);
         return Result.success();
     }
 

springboot/src/main/java/com/example/controller/ProductController.java

@@ -9,7 +9,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 前端操作接口
+ * Product产品接口
  **/
 @RestController
 @RequestMapping("/product")

springboot/src/main/java/com/example/controller/ProductTypeController.java

@@ -0,0 +1,97 @@
+package com.example.controller;
+
+import com.example.common.Result;
+import com.example.entity.ProductType;
+import com.example.service.ProductTypeService;
+import com.github.pagehelper.PageInfo;
+import org.springframework.web.bind.annotation.*;
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * ProductType产品类型接口
+ **/
+@RestController
+@RequestMapping("/productType")
+public class ProductTypeController {
+
+    @Resource
+    private ProductTypeService productTypeService;
+
+    /**
+     * 新增
+     */
+    @PostMapping("/add")
+    public Result add(@RequestBody ProductType productType) {
+        productTypeService.add(productType);
+        return Result.success();
+    }
+
+    /**
+     * 删除
+     */
+    @DeleteMapping("/delete/{id}")
+    public Result deleteById(@PathVariable Integer id) {
+        productTypeService.deleteById(id);
+        return Result.success();
+    }
+
+    /**
+     * 批量删除
+     */
+    @DeleteMapping("/delete/batch")
+    public Result deleteBatch(@RequestBody List<Integer> ids) {
+        productTypeService.deleteBatch(ids);
+        return Result.success();
+    }
+
+    /**
+     * 修改
+     */
+    @PutMapping("/update")
+    public Result updateById(@RequestBody ProductType productType) {
+        productTypeService.updateById(productType);
+        return Result.success();
+    }
+
+    /**
+     * 根据ID查询
+     */
+    @GetMapping("/selectById/{id}")
+    public Result selectById(@PathVariable Integer id) {
+        ProductType productType = productTypeService.selectById(id);
+        return Result.success(productType);
+    }
+
+    /**
+     * 查询所有
+     */
+    @GetMapping("/selectAll")
+    public Result selectAll(ProductType productType) {
+        List<ProductType> list = productTypeService.selectAll(productType);
+        return Result.success(list);
+    }
+
+    /**
+     * TODO
+     * 根据shopId查询店铺商品
+     * @param shopId
+     * @return
+     */
+    @GetMapping("/selectByShopId")
+    public Result selectByShopId(Integer shopId){
+
+        return Result.success(productTypeService.selectByShopId(shopId));
+    }
+    /**
+     * 分页查询
+     */
+    @GetMapping("/selectPage")
+    public Result selectPage(ProductType productType,
+                             @RequestParam(defaultValue = "1") Integer pageNum,
+                             @RequestParam(defaultValue = "10") Integer pageSize) {
+        PageInfo<ProductType> page = productTypeService.selectPage(productType, pageNum, pageSize);
+        return Result.success(page);
+    }
+
+}

springboot/src/main/java/com/example/controller/SaleStatementController.java

@@ -1,5 +1,6 @@
 package com.example.controller;
 
+import cn.hutool.json.JSONUtil;
 import com.example.common.Result;
 import com.example.entity.SaleStatement;
 import com.example.service.SaleStatementService;
@@ -9,7 +10,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 销量表前端操作接口
+ * SaleStatement销量表接口
  **/
 @RestController
 @RequestMapping("/saleStatement")
@@ -17,6 +18,38 @@ public class SaleStatementController {
     @Resource
     private SaleStatementService saleStatementService;
 
+    /**
+     * 商品售出完成时间和商品id进行报表查询
+     * @param productId
+     * @param timeStart
+     * @param timeOver
+     * @return 该商品在timeStart~timeOver之间的销售量，销售额度
+     */
+    @GetMapping("/getByPId")
+    public Result getByPId(Integer productId,String timeStart, String timeOver){
+        SaleStatement pre = new SaleStatement();
+        pre.setTimeOver(timeOver);
+        pre.setTimeStart(timeStart);
+        pre.setProductId(productId);
+
+        return Result.success(saleStatementService.selectByRange(pre));
+    }
+
+    /**
+     * 获取所有时间内的报表信息
+     * @param timeStart 起始时间
+     * @param timeOver 截止时间
+     * @return
+     */
+    @GetMapping("/getAllP")
+    public Result getByAllP(String timeStart, String timeOver){
+        SaleStatement pre = new SaleStatement();
+        pre.setTimeOver(timeOver);
+        pre.setTimeStart(timeStart);
+
+        return Result.success(saleStatementService.selectByRange(pre));
+    }
+
     /**
      * 新增
      */

springboot/src/main/java/com/example/controller/StoreController.java

@@ -9,7 +9,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 前端操作接口
+ * Store店铺接口
  **/
 @RestController
 @RequestMapping("/store")
@@ -18,6 +18,26 @@ public class StoreController {
     @Resource
     private StoreService storeService;
 
+    /**
+     * 获取店铺商品类型根据shopId
+     * @param shopId
+     * @return Result{ProductTypes}
+     */
+    @GetMapping("/getStoreProductTypesById")
+    public Result getStoreProductTypesById(Integer shopId){
+        return Result.success(storeService.selectProductsTypesByShopId(shopId));
+    }
+
+    /**
+     * 根据Id获取店铺商品信息
+     * @param storeId
+     * @return Result{Product}
+     */
+    @GetMapping("/getStoreProducts")
+    public Result getStoreProductsByStoreId(Integer storeId){
+        return Result.success(storeService.selectProducts(storeId));
+    }
+
     /**
      * 新增
      */

springboot/src/main/java/com/example/controller/TestController.java

@@ -0,0 +1,24 @@
+package com.example.controller;
+
+import cn.hutool.json.JSONUtil;
+import com.example.common.Result;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * 功能：
+ *
+ * @author 熊浩毅
+ * @time 2024-04-30 22:50
+ * @Description
+ */
+@RestController
+@RequestMapping("test")
+public class TestController {
+    @GetMapping("/getJson")
+    public Result getJson(){
+        return Result.success( JSONUtil.parseObj("{a : 1 , b:[ 'a','bc']}"));
+    }
+
+}

springboot/src/main/java/com/example/controller/UserController.java

@@ -9,7 +9,7 @@ import javax.annotation.Resource;
 import java.util.List;
 
 /**
- * 客户表前端操作接口
+ * User客户接口
  **/
 @RestController
 @RequestMapping("/user")

springboot/src/main/java/com/example/entity/Address.java

@@ -0,0 +1,72 @@
+package com.example.entity;
+
+import java.io.Serializable;
+
+/**
+ * 用户地址表
+*/
+public class Address implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    /** 地址id */
+    private Integer id;
+    /** 用户id */
+    private Integer userId;
+    /** 地址 */
+    private String address;
+    /** 门牌号 */
+    private String doorNo;
+    /** 收货电话 */
+    private String phone;
+    /** 收货人姓名 */
+    private String recipientName;
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public Integer getUserId() {
+        return userId;
+    }
+
+    public void setUserId(Integer userId) {
+        this.userId = userId;
+    }
+
+    public String getAddress() {
+        return address;
+    }
+
+    public void setAddress(String address) {
+        this.address = address;
+    }
+
+    public String getDoorNo() {
+        return doorNo;
+    }
+
+    public void setDoorNo(String doorNo) {
+        this.doorNo = doorNo;
+    }
+
+    public String getPhone() {
+        return phone;
+    }
+
+    public void setPhone(String phone) {
+        this.phone = phone;
+    }
+
+    public String getRecipientName() {
+        return recipientName;
+    }
+
+    public void setRecipientName(String recipientName) {
+        this.recipientName = recipientName;
+    }
+
+}

springboot/src/main/java/com/example/entity/Admin.java

@@ -2,6 +2,7 @@ package com.example.entity;
 
 import java.io.Serializable;
 
+
 /**
  * 管理员
  */

springboot/src/main/java/com/example/entity/Adminstore.java

@@ -1,10 +1,13 @@
 package com.example.entity;
 
+import lombok.Data;
+
 import java.io.Serializable;
 
 /**
  * 管理员
 */
+@Data
 public class Adminstore extends Account implements Serializable {
     private static final long serialVersionUID = 1L;
 
@@ -24,69 +27,10 @@ public class Adminstore extends Account implements Serializable {
     private String phone;
     /** 邮箱 */
     private String email;
-
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public String getUsername() {
-        return username;
-    }
-
-    public void setUsername(String username) {
-        this.username = username;
-    }
-
-    public String getPassword() {
-        return password;
-    }
-
-    public void setPassword(String password) {
-        this.password = password;
-    }
-
-    public String getName() {
-        return name;
-    }
-
-    public void setName(String name) {
-        this.name = name;
-    }
-
-    public String getAvatar() {
-        return avatar;
-    }
-
-    public void setAvatar(String avatar) {
-        this.avatar = avatar;
-    }
-
-    public String getRole() {
-        return role;
-    }
-
-    public void setRole(String role) {
-        this.role = role;
-    }
-
-    public String getPhone() {
-        return phone;
-    }
-
-    public void setPhone(String phone) {
-        this.phone = phone;
-    }
-
-    public String getEmail() {
-        return email;
-    }
-
-    public void setEmail(String email) {
-        this.email = email;
-    }
+    /** 地址*/
+    private Integer addressId;
+    // 联合内容
+    /** */
+    private Address address;
 
 }

springboot/src/main/java/com/example/entity/Orders.java

@@ -1,18 +1,24 @@
 package com.example.entity;
 
+import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.json.JSONUtil;
+import lombok.Data;
+
 import java.io.Serializable;
 import java.math.BigDecimal;
+import java.util.List;
 
 /**
  * 订单表
 */
+@Data
 public class Orders implements Serializable {
     private static final long serialVersionUID = 1L;
 
     /** id */
     private Integer id;
     /** 实付金额 */
-    private BigDecimal bitPay;
+    private BigDecimal bidPay;
     /** 应付金额 */
     private BigDecimal originPay;
     /** 下单用户id */
@@ -31,93 +37,15 @@ public class Orders implements Serializable {
     private String transCode;
     /** 订单类型id */
     private Integer orderTypeId;
+    /** 店铺id */
+    private Integer storeId;
+    /** 商品清单 */
+    private List<Product> orderProductsLists;
 
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public BigDecimal getBitPay() {
-        return bitPay;
-    }
-
-    public void setBitPay(BigDecimal bitPay) {
-        this.bitPay = bitPay;
-    }
-
-    public BigDecimal getOriginPay() {
-        return originPay;
-    }
-
-    public void setOriginPay(BigDecimal originPay) {
-        this.originPay = originPay;
-    }
-
-    public Integer getUserId() {
-        return userId;
-    }
-
-    public void setUserId(Integer userId) {
-        this.userId = userId;
-    }
-
-    public Integer getAddressId() {
-        return addressId;
-    }
-
-    public void setAddressId(Integer addressId) {
-        this.addressId = addressId;
-    }
-
-    public String getTimePre() {
-        return timePre;
-    }
-
-    public void setTimePre(String timePre) {
-        this.timePre = timePre;
-    }
-
-    public String getTimeOrder() {
-        return timeOrder;
-    }
-
-    public void setTimeOrder(String timeOrder) {
-        this.timeOrder = timeOrder;
-    }
-
-    public String getOrderState() {
-        return orderState;
-    }
-
-    public void setOrderState(String orderState) {
-        this.orderState = orderState;
-    }
-
-    public String getOrderRemark() {
-        return orderRemark;
-    }
-
-    public void setOrderRemark(String orderRemark) {
-        this.orderRemark = orderRemark;
-    }
-
-    public String getTransCode() {
-        return transCode;
-    }
-
-    public void setTransCode(String transCode) {
-        this.transCode = transCode;
-    }
-
-    public Integer getOrderTypeId() {
-        return orderTypeId;
-    }
+    // 连表查询W
+    private User user;
+    private Address address;
+//    private Store store;
 
-    public void setOrderTypeId(Integer orderTypeId) {
-        this.orderTypeId = orderTypeId;
-    }
 
 }

springboot/src/main/java/com/example/entity/Product.java

@@ -1,11 +1,15 @@
 package com.example.entity;
 
+import lombok.Data;
+
 import java.io.Serializable;
 import java.math.BigDecimal;
+import java.util.List;
 
 /**
  * 
 */
+@Data
 public class Product implements Serializable {
     private static final long serialVersionUID = 1L;
 
@@ -18,66 +22,15 @@ public class Product implements Serializable {
     /** 产品图标url */
     private String productIcons;
     /** 产品类型ids */
-    private String productTypeIds;
+    private Integer [] productTypeIds;
     /** 定价 */
     private BigDecimal productBidPrice;
     /** 实付价格 */
     private BigDecimal productSellPrice;
-
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public String getProductState() {
-        return productState;
-    }
-
-    public void setProductState(String productState) {
-        this.productState = productState;
-    }
-
-    public String getProductName() {
-        return productName;
-    }
-
-    public void setProductName(String productName) {
-        this.productName = productName;
-    }
-
-    public String getProductIcons() {
-        return productIcons;
-    }
-
-    public void setProductIcons(String productIcons) {
-        this.productIcons = productIcons;
-    }
-
-    public String getProductTypeIds() {
-        return productTypeIds;
-    }
-
-    public void setProductTypeIds(String productTypeIds) {
-        this.productTypeIds = productTypeIds;
-    }
-
-    public BigDecimal getProductBidPrice() {
-        return productBidPrice;
-    }
-
-    public void setProductBidPrice(BigDecimal productBidPrice) {
-        this.productBidPrice = productBidPrice;
-    }
-
-    public BigDecimal getProductSellPrice() {
-        return productSellPrice;
-    }
-
-    public void setProductSellPrice(BigDecimal productSellPrice) {
-        this.productSellPrice = productSellPrice;
-    }
+// 联合属性
+    private List<ProductType> productTypes;
+    /** 数量 */
+    // 帮助属性
+    private Integer count ;
 
 }

springboot/src/main/java/com/example/entity/ProductType.java

@@ -0,0 +1,29 @@
+package com.example.entity;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * 
+*/
+@Data
+public class ProductType implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    /** id */
+    private Integer id;
+    /** 产品类型名称 */
+    private String productTypeName;
+    // 联合属性  ---------------------
+//    private String productState;
+//    /** 产品名称 */
+//    private String productTypeName;
+//    /** 产品图标url */
+//    private String productIcons;
+//    /** 定价 */
+//    private BigDecimal productBidPrice;
+//    /** 实付价格 */
+//    private BigDecimal productSellPrice;
+
+}

springboot/src/main/java/com/example/entity/Productype.java

@@ -1,32 +0,0 @@
-package com.example.entity;
-
-import java.io.Serializable;
-
-/**
- * 
-*/
-public class Productype implements Serializable {
-    private static final long serialVersionUID = 1L;
-
-    /** id */
-    private Integer id;
-    /** 产品名称 */
-    private String productName;
-
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public String getProductName() {
-        return productName;
-    }
-
-    public void setProductName(String productName) {
-        this.productName = productName;
-    }
-
-}

springboot/src/main/java/com/example/entity/SaleStatement.java

@@ -1,11 +1,14 @@
 package com.example.entity;
 
+import lombok.Data;
+
 import java.io.Serializable;
 import java.math.BigDecimal;
 
 /**
  * 销量表
 */
+@Data
 public class SaleStatement implements Serializable {
     private static final long serialVersionUID = 1L;
 
@@ -21,53 +24,10 @@ public class SaleStatement implements Serializable {
     private Integer productId;
     /** 金额 */
     private BigDecimal amount;
-
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public Integer getShopId() {
-        return shopId;
-    }
-
-    public void setShopId(Integer shopId) {
-        this.shopId = shopId;
-    }
-
-    public Integer getCount() {
-        return count;
-    }
-
-    public void setCount(Integer count) {
-        this.count = count;
-    }
-
-    public String getTimeOver() {
-        return timeOver;
-    }
-
-    public void setTimeOver(String timeOver) {
-        this.timeOver = timeOver;
-    }
-
-    public Integer getProductId() {
-        return productId;
-    }
-
-    public void setProductId(Integer productId) {
-        this.productId = productId;
-    }
-
-    public BigDecimal getAmount() {
-        return amount;
-    }
-
-    public void setAmount(BigDecimal amount) {
-        this.amount = amount;
-    }
+    // 其他辅助变量
+    /** 用于筛选的起始时间*/
+    private String timeStart;
+    /** 最近天数 */
+    private String recentDay;
 
 }

springboot/src/main/java/com/example/entity/Store.java

@@ -1,62 +1,53 @@
 package com.example.entity;
 
+import lombok.Data;
+
 import java.io.Serializable;
+import java.math.BigDecimal;
+import java.util.List;
 
 /**
  * 
 */
+@Data
 public class Store implements Serializable {
     private static final long serialVersionUID = 1L;
 
     /** id */
     private Integer id;
+    /** 店铺名称*/
+    private String storeName;
     /** 店铺主id */
     private Integer ownerId;
     /** 产品列表ids */
-    private String productsIds;
+    private Integer [] productsIds;
     /** 地址列表ids */
     private String addressIds;
-    /**  */
-    private String productTypeIds;
-
-    public Integer getId() {
-        return id;
-    }
-
-    public void setId(Integer id) {
-        this.id = id;
-    }
-
-    public Integer getOwnerId() {
-        return ownerId;
-    }
-
-    public void setOwnerId(Integer ownerId) {
-        this.ownerId = ownerId;
-    }
-
-    public String getProductsIds() {
-        return productsIds;
-    }
-
-    public void setProductsIds(String productsIds) {
-        this.productsIds = productsIds;
-    }
-
-    public String getAddressIds() {
-        return addressIds;
-    }
-
-    public void setAddressIds(String addressIds) {
-        this.addressIds = addressIds;
-    }
-
-    public String getProductTypeIds() {
-        return productTypeIds;
-    }
-
-    public void setProductTypeIds(String productTypeIds) {
-        this.productTypeIds = productTypeIds;
-    }
-
+    /** 产品类型列表 */
+    private Integer [] productTypeIds;
+    /** 店铺封面图片*/
+    private String storePicUrl;
+    // 联合属性
+    private List<Product> products;
+    private List<ProductType>productTypes;
+    private Address address;
+    private Adminstore adminstore;
+    //    产品表联合
+    /** id */
+    private Integer productId;
+    /** 产品状态 */
+    private String productState;
+    /** 产品名称 */
+    private String productName;
+    /** 产品图标url */
+    private String productIcons;
+    /** 定价 */
+    private BigDecimal productBidPrice;
+    /** 实付价格 */
+    private BigDecimal productSellPrice;
+    //     类型表联合
+    /** id */
+    private Integer productTypeId;
+    /** 产品类型名称 */
+    private String productTypeName;
 }

springboot/src/main/java/com/example/mapper/AddressMapper.java

@@ -0,0 +1,36 @@
+package com.example.mapper;
+
+import com.example.entity.Address;
+import java.util.List;
+
+/**
+ * 操作address相关数据接口
+*/
+public interface AddressMapper {
+
+    /**
+      * 新增
+    */
+    int insert(Address address);
+
+    /**
+      * 删除
+    */
+    int deleteById(Integer id);
+
+    /**
+      * 修改
+    */
+    int updateById(Address address);
+
+    /**
+      * 根据ID查询
+    */
+    Address selectById(Integer id);
+
+    /**
+      * 查询所有
+    */
+    List<Address> selectAll(Address address);
+
+}

springboot/src/main/java/com/example/mapper/AdminstoreMapper.java

@@ -34,7 +34,6 @@ public interface AdminstoreMapper {
       * 查询所有
     */
     List<Adminstore> selectAll(Adminstore adminstore);
-
     @Select("select * from adminstore where username = #{username}")
     Adminstore selectByUsername (String username);
 }

springboot/src/main/java/com/example/mapper/ProductTypeMapper.java

@@ -0,0 +1,37 @@
+package com.example.mapper;
+
+import com.example.entity.ProductType;
+import java.util.List;
+
+/**
+ * 操作product_type相关数据接口
+*/
+public interface ProductTypeMapper {
+
+    /**
+      * 新增
+    */
+    int insert(ProductType productType);
+
+    /**
+      * 删除
+    */
+    int deleteById(Integer id);
+
+    /**
+      * 修改
+    */
+    int updateById(ProductType productType);
+
+    /**
+      * 根据ID查询
+    */
+    ProductType selectById(Integer id);
+
+    /**
+      * 查询所有
+    */
+    List<ProductType> selectAll(ProductType productType);
+
+    List<ProductType> selectByShopId(Integer shopId);
+}

springboot/src/main/java/com/example/mapper/ProductypeMapper.java

@@ -1,36 +0,0 @@
-package com.example.mapper;
-
-import com.example.entity.Productype;
-import java.util.List;
-
-/**
- * 操作product_type相关数据接口
-*/
-public interface ProductypeMapper {
-
-    /**
-      * 新增
-    */
-    int insert(Productype productype);
-
-    /**
-      * 删除
-    */
-    int deleteById(Integer id);
-
-    /**
-      * 修改
-    */
-    int updateById(Productype productype);
-
-    /**
-      * 根据ID查询
-    */
-    Productype selectById(Integer id);
-
-    /**
-      * 查询所有
-    */
-    List<Productype> selectAll(Productype productype);
-
-}

springboot/src/main/java/com/example/mapper/SaleStatementMapper.java

@@ -33,4 +33,19 @@ public interface SaleStatementMapper {
     */
     List<SaleStatement> selectAll(SaleStatement saleStatement);
 
+    /**
+     * 根据商品售出完成时间和商品id进行查询
+     * 需要携带店铺id，日期范围，
+     * @return 返回特定商品在对应日期销售额度
+     */
+    SaleStatement selectOneProductWithRange(SaleStatement saleStatement);
+    /**
+     * 筛选店铺商品种类在日期范围的销售额度
+     * @return 返回
+     */
+    List<SaleStatement> selectKindsProductWithRange(SaleStatement saleStatement);
+
+    /**
+     * 店铺的总销量
+     */
 }

springboot/src/main/java/com/example/mapper/StoreMapper.java

@@ -1,5 +1,6 @@
 package com.example.mapper;
 
+import com.example.entity.ProductType;
 import com.example.entity.Store;
 import java.util.List;
 
@@ -33,4 +34,8 @@ public interface StoreMapper {
     */
     List<Store> selectAll(Store store);
 
+    /**
+     * shopId获取店铺商品类型
+     */
+    Store selectProductsTypes(Integer shopId);
 }

springboot/src/main/java/com/example/service/AddressService.java

@@ -0,0 +1,73 @@
+package com.example.service;
+
+import com.example.entity.Address;
+import com.example.mapper.AddressMapper;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import javax.annotation.Resource;
+import org.springframework.stereotype.Service;
+import java.util.List;
+
+/**
+ * 用户地址表业务处理
+ **/
+@Service
+public class AddressService {
+
+    @Resource
+    private AddressMapper addressMapper;
+
+    /**
+     * 新增
+     */
+    public void add(Address address) {
+        addressMapper.insert(address);
+    }
+
+    /**
+     * 删除
+     */
+    public void deleteById(Integer id) {
+        addressMapper.deleteById(id);
+    }
+
+    /**
+     * 批量删除
+     */
+    public void deleteBatch(List<Integer> ids) {
+        for (Integer id : ids) {
+            addressMapper.deleteById(id);
+        }
+    }
+
+    /**
+     * 修改
+     */
+    public void updateById(Address address) {
+        addressMapper.updateById(address);
+    }
+
+    /**
+     * 根据ID查询
+     */
+    public Address selectById(Integer id) {
+        return addressMapper.selectById(id);
+    }
+
+    /**
+     * 查询所有
+     */
+    public List<Address> selectAll(Address address) {
+        return addressMapper.selectAll(address);
+    }
+
+    /**
+     * 分页查询
+     */
+    public PageInfo<Address> selectPage(Address address, Integer pageNum, Integer pageSize) {
+        PageHelper.startPage(pageNum, pageSize);
+        List<Address> list = addressMapper.selectAll(address);
+        return PageInfo.of(list);
+    }
+
+}

springboot/src/main/java/com/example/service/OrdersService.java

@@ -1,11 +1,29 @@
 package com.example.service;
 
+import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.util.IdUtil;
+import cn.hutool.json.JSONUtil;
+import com.example.common.enums.OrderStatusDELIVERY;
+import com.example.common.enums.OrderStatusToShop;
+import com.example.common.enums.OrderType;
+import com.example.common.enums.ResultCodeEnum;
+import com.example.entity.Account;
 import com.example.entity.Orders;
+import com.example.entity.Product;
+import com.example.entity.User;
+import com.example.exception.CustomException;
 import com.example.mapper.OrdersMapper;
+import com.example.mapper.ProductMapper;
+import com.example.mapper.UserMapper;
+import com.example.utils.TokenUtils;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
 import javax.annotation.Resource;
+
+import com.github.pagehelper.util.StringUtil;
 import org.springframework.stereotype.Service;
+
+import java.math.BigDecimal;
 import java.util.List;
 
 /**
@@ -16,14 +34,40 @@ public class OrdersService {
 
     @Resource
     private OrdersMapper ordersMapper;
+    @Resource
+    private UserMapper userMapper;
+    @Resource
+    private ProductMapper productMapper;
+    static final Integer costTime = 1200; //1200s 20分支
 
     /**
-     * 新增
+     * 小程序下单新增，点击下单
      */
-    public void add(Orders orders) {
+    public Orders add(Orders orders) {
+        Account currentUser = TokenUtils.getCurrentUser();
+        User user = userMapper.selectById(currentUser.getId());
+        BigDecimal account = user.getAccount(); // 获取余额
+        BigDecimal cost = new BigDecimal(0),t_cost; //记录花费了多少钱
+
+        // 扣除钱包余额
+        if(account.doubleValue() < cost.doubleValue()){
+            throw new CustomException(ResultCodeEnum.ACCOUNT_LIMIT_ERROR);
+        }
+        user.setAccount(account.subtract(cost));
+        userMapper.updateById(user); //更新扣费
+        orders.setOrderState("待送达");
+        orders.setUserId(currentUser.getId()); // 设置用户id
+        orders.setTransCode(IdUtil.getSnowflakeNextIdStr()); // 随机创建一个交易单号
+        orders.setTimeOrder(DateUtil.now()); // 创建订单时间
+
+        // 如果是外卖：这个是预计送达时间 ，如果是自提 这个是预计可取餐时间
+        orders.setTimePre(String.valueOf(DateUtil.offsetSecond(DateUtil.dateSecond(),11))); //预计送达时间
+
         ordersMapper.insert(orders);
+        Orders resOrders = ordersMapper.selectById(orders.getId());
+        return resOrders;
+        //this.setCache(orders.getId()); // 设置缓存 但是这里插入前是没有orders的id的应该怎么处理
     }
-
     /**
      * 删除
      */

springboot/src/main/java/com/example/service/ProductTypeService.java

@@ -0,0 +1,81 @@
+package com.example.service;
+
+import com.example.entity.ProductType;
+import com.example.mapper.ProductTypeMapper;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import javax.annotation.Resource;
+import org.springframework.stereotype.Service;
+import java.util.List;
+
+/**
+ * 业务处理
+ **/
+@Service
+public class ProductTypeService {
+
+    @Resource
+    private ProductTypeMapper productTypeMapper;
+
+    /**
+     * 新增
+     */
+    public void add(ProductType productType) {
+        productTypeMapper.insert(productType);
+    }
+
+    /**
+     * 删除
+     */
+    public void deleteById(Integer id) {
+        productTypeMapper.deleteById(id);
+    }
+
+    /**
+     * 批量删除
+     */
+    public void deleteBatch(List<Integer> ids) {
+        for (Integer id : ids) {
+            productTypeMapper.deleteById(id);
+        }
+    }
+
+    /**
+     * 修改
+     */
+    public void updateById(ProductType productType) {
+        productTypeMapper.updateById(productType);
+    }
+
+    /**
+     * 根据ID查询
+     */
+    public ProductType selectById(Integer id) {
+        return productTypeMapper.selectById(id);
+    }
+
+    /**
+     * 查询所有
+     */
+    public List<ProductType> selectAll(ProductType productType) {
+        return productTypeMapper.selectAll(productType);
+    }
+
+    /**
+     * 分页查询
+     */
+    public PageInfo<ProductType> selectPage(ProductType productType, Integer pageNum, Integer pageSize) {
+        PageHelper.startPage(pageNum, pageSize);
+        List<ProductType> list = productTypeMapper.selectAll(productType);
+        return PageInfo.of(list);
+    }
+
+    /**
+     * 根据id查询店铺商品类型
+     * @param shopId
+     * @return
+     */
+    public List<ProductType> selectByShopId(Integer shopId){
+        return productTypeMapper.selectByShopId(shopId);
+    }
+}

springboot/src/main/java/com/example/service/ProductypeService.java

@@ -1,73 +0,0 @@
-package com.example.service;
-
-import com.example.entity.Productype;
-import com.example.mapper.ProductypeMapper;
-import com.github.pagehelper.PageHelper;
-import com.github.pagehelper.PageInfo;
-import javax.annotation.Resource;
-import org.springframework.stereotype.Service;
-import java.util.List;
-
-/**
- * 业务处理
- **/
-@Service
-public class ProductypeService {
-
-    @Resource
-    private ProductypeMapper productypeMapper;
-
-    /**
-     * 新增
-     */
-    public void add(Productype productype) {
-        productypeMapper.insert(productype);
-    }
-
-    /**
-     * 删除
-     */
-    public void deleteById(Integer id) {
-        productypeMapper.deleteById(id);
-    }
-
-    /**
-     * 批量删除
-     */
-    public void deleteBatch(List<Integer> ids) {
-        for (Integer id : ids) {
-            productypeMapper.deleteById(id);
-        }
-    }
-
-    /**
-     * 修改
-     */
-    public void updateById(Productype productype) {
-        productypeMapper.updateById(productype);
-    }
-
-    /**
-     * 根据ID查询
-     */
-    public Productype selectById(Integer id) {
-        return productypeMapper.selectById(id);
-    }
-
-    /**
-     * 查询所有
-     */
-    public List<Productype> selectAll(Productype productype) {
-        return productypeMapper.selectAll(productype);
-    }
-
-    /**
-     * 分页查询
-     */
-    public PageInfo<Productype> selectPage(Productype productype, Integer pageNum, Integer pageSize) {
-        PageHelper.startPage(pageNum, pageSize);
-        List<Productype> list = productypeMapper.selectAll(productype);
-        return PageInfo.of(list);
-    }
-
-}

springboot/src/main/java/com/example/service/SaleStatementService.java

@@ -16,7 +16,12 @@ public class SaleStatementService {
 
     @Resource
     private SaleStatementMapper saleStatementMapper;
-
+    /**
+     * 筛选特定时间内的商品销售额和销售量
+     */
+    public SaleStatement selectByRange(SaleStatement saleStatement){
+        return  saleStatementMapper.selectOneProductWithRange(saleStatement);
+    }
     /**
      * 新增
      */

springboot/src/main/java/com/example/service/StoreService.java

@@ -1,5 +1,7 @@
 package com.example.service;
 
+import com.example.entity.Product;
+import com.example.entity.ProductType;
 import com.example.entity.Store;
 import com.example.mapper.StoreMapper;
 import com.github.pagehelper.PageHelper;
@@ -70,4 +72,18 @@ public class StoreService {
         return PageInfo.of(list);
     }
 
+    /**
+     * shopId获取店铺商品类型
+     * @param shopId
+     * @return
+     */
+    public List<ProductType> selectProductsTypesByShopId(Integer shopId) {
+        return storeMapper.selectProductsTypes(shopId).getProductTypes();
+    }
+    public List<Store> selectProducts(Integer storeId){
+        Store store = new Store();
+        store.setId(storeId);
+//        List<Product> products = storeMapper.selectAll(store);
+        return  storeMapper.selectAll(store);
+    }
 }

springboot/src/main/java/com/example/typeHandler/AbstractObjectTypeHandler.java

@@ -0,0 +1,59 @@
+//package com.example.typeHandler;
+//
+//import com.alibaba.fastjson.JSON;
+//import com.example.utils.JsonUtil;
+//import com.github.pagehelper.util.StringUtil;
+//import org.apache.ibatis.type.BaseTypeHandler;
+//import org.apache.ibatis.type.JdbcType;
+//
+//import java.sql.CallableStatement;
+//import java.sql.PreparedStatement;
+//import java.sql.ResultSet;
+//import java.sql.SQLException;
+//
+///**
+// * @Title: AbstractObjectTypeHandler
+// * @Description: mysql存储json的字段类型转换抽象类
+// */
+//// @Slf4j
+//// @MappedJdbcTypes(JdbcType.VARCHAR)
+//public abstract class AbstractObjectTypeHandler<T> extends BaseTypeHandler<T> {
+//
+//    @Override
+//    public void setNonNullParameter(PreparedStatement ps, int i, T parameter, JdbcType jdbcType) throws SQLException {
+//        if (null != parameter) {
+//            ps.setString(i, JsonUtil.obj2json(parameter));
+//        }
+//    }
+//
+//    @Override
+//    public T getNullableResult(ResultSet rs, String columnName) throws SQLException {
+//        return deserialize(rs.getString(columnName));
+//    }
+//
+//    @Override
+//    public T getNullableResult(ResultSet rs, int columnIndex) throws SQLException {
+//        return deserialize(rs.getString(columnIndex));
+//    }
+//
+//    @Override
+//    public T getNullableResult(CallableStatement cs, int columnIndex) throws SQLException {
+//        return deserialize(cs.getString(columnIndex));
+//    }
+//
+//    /**
+//     * @Description: json反序列化
+//     * @param data
+//     * @return
+//     */
+//    private T deserialize(String data) {
+//        return StringUtil.isEmpty(data) ? null : string2Obj(data);
+//    }
+//
+//    // 重点，解析方法，子类可重写json解析
+//    @SuppressWarnings("unchecked")
+//    protected T string2Obj(String jsonString) {
+//        Class<T> clazz = (Class<T>)getRawType();
+//        return JSON.parseObject(jsonString, clazz);
+//    }
+//}

springboot/src/main/java/com/example/typeHandler/ArrayIntegerTypeHadnler.java

@@ -0,0 +1,70 @@
+package com.example.typeHandler;
+
+import org.apache.ibatis.type.BaseTypeHandler;
+import org.apache.ibatis.type.JdbcType;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.sql.CallableStatement;
+import java.sql.PreparedStatement;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+
+/**
+ * 功能：
+ * 数据库定义了类型 Array<Integer> 需要配置typeHandler
+ * @author 熊浩毅
+ * @time 2024-02-10 20:07
+ * @Description
+ */
+public class ArrayIntegerTypeHadnler extends BaseTypeHandler<Integer[]> {
+    private static Logger log = LoggerFactory.getLogger(ArrayIntegerTypeHadnler.class);
+    @Override
+    public void setNonNullParameter(PreparedStatement ps, int i, Integer[] params, JdbcType jdbcType) throws SQLException {
+        StringBuffer sb = new StringBuffer();
+        sb.append("[");
+        for(Integer param : params){
+            sb.append(param+",");
+        }
+        sb.deleteCharAt(sb.length()-1);
+        sb.append("]");
+        log.warn(sb.toString());
+        ps.setString(i,sb.toString());
+    }
+
+    @Override
+    public Integer[] getNullableResult(ResultSet resultSet, String columnName) throws SQLException {
+        return convertToArray(resultSet.getString(columnName));
+    }
+
+    @Override
+    public Integer[] getNullableResult(ResultSet resultSet, int index) throws SQLException {
+        return convertToArray(resultSet.getString(index));
+    }
+
+    @Override
+    public Integer[] getNullableResult(CallableStatement callableStatement, int columnIndex) throws SQLException {
+        return convertToArray(callableStatement.getString(columnIndex));
+    }
+
+    /**
+     * 转换回数组
+     * @param stringValue
+     * @return
+     */
+    private Integer[] convertToArray(String stringValue) {
+        if (stringValue == null || stringValue.isEmpty()) {
+            return null;
+        }
+        // 假设数据库中的格式是类似 "[1,2,3]" 的字符串，需要去除首尾的方括号，然后按逗号分割
+        stringValue = stringValue.substring(1, stringValue.length() - 1);
+        String[] stringArray = stringValue.split(",");
+        Integer[] intArray = new Integer[stringArray.length];
+        for (int i = 0; i < stringArray.length; i++) {
+            intArray[i] = Integer.parseInt(stringArray[i].trim());
+        }
+        return intArray;
+    }
+
+}
+

springboot/src/main/java/com/example/typeHandler/ArrayStringTypeHandler.java

@@ -0,0 +1,58 @@
+package com.example.typeHandler;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.apache.ibatis.type.BaseTypeHandler;
+import org.apache.ibatis.type.JdbcType;
+
+import java.sql.CallableStatement;
+import java.sql.PreparedStatement;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.List;
+
+/**
+ * 功能： List <String>
+ *
+ * @author 熊浩毅
+ * @time 2024-02-17 15:33
+ * @Description
+ */
+public class ArrayStringTypeHandler extends BaseTypeHandler<List<String>> {
+    private static final ObjectMapper objectMapper =new ObjectMapper();
+    @Override
+    public void setNonNullParameter(PreparedStatement preparedStatement, int i, List<String> stringList, JdbcType jdbcType) throws SQLException {
+        preparedStatement.setString(i, toJson(stringList));
+    }
+
+    @Override
+    public List<String> getNullableResult(ResultSet resultSet, String s) throws SQLException {
+        return fromJson(resultSet.getString(s));
+    }
+
+    @Override
+    public List<String> getNullableResult(ResultSet resultSet, int columnIndex) throws SQLException {
+        return fromJson(resultSet.getString(columnIndex));
+    }
+
+    @Override
+    public List<String> getNullableResult(CallableStatement callableStatement, int columnIndex) throws SQLException {
+        return fromJson(callableStatement.getString(columnIndex));
+    }
+
+    private String toJson(List<String> object) {
+        try {
+            return objectMapper.writeValueAsString(object);
+        } catch (Exception e) {
+            throw new RuntimeException("Error converting object to JSON string", e);
+        }
+    }
+
+    private List<String> fromJson(String json) {
+        try {
+            return objectMapper.readValue(json, new TypeReference<List<String>>() {});
+        } catch (Exception e) {
+            throw new RuntimeException("Error converting JSON string to object", e);
+        }
+    }
+}

springboot/src/main/java/com/example/typeHandler/JsonTypeHandler.java

@@ -0,0 +1,61 @@
+package com.example.typeHandler;
+
+/**
+ * 功能：
+ *
+ * @author 熊浩毅
+ * @time 2024-05-02 9:25
+ * @Description
+ */
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.apache.ibatis.type.BaseTypeHandler;
+import org.apache.ibatis.type.JdbcType;
+
+import java.io.IOException;
+import java.sql.CallableStatement;
+import java.sql.PreparedStatement;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.List;
+
+public class JsonTypeHandler<T> extends BaseTypeHandler<List<T>> {
+
+    private static final ObjectMapper objectMapper = new ObjectMapper();
+
+    @Override
+    public void setNonNullParameter(PreparedStatement ps, int i, List<T> parameter, JdbcType jdbcType) throws SQLException {
+        try {
+            String json = objectMapper.writeValueAsString(parameter);
+            ps.setString(i, json);
+        } catch (JsonProcessingException e) {
+            throw new SQLException("Error converting object to JSON string", e);
+        }
+    }
+
+    @Override
+    public List<T> getNullableResult(ResultSet rs, String columnName) throws SQLException {
+        return parseJson(rs.getString(columnName));
+    }
+
+    @Override
+    public List<T> getNullableResult(ResultSet rs, int columnIndex) throws SQLException {
+        return parseJson(rs.getString(columnIndex));
+    }
+
+    @Override
+    public List<T> getNullableResult(CallableStatement cs, int columnIndex) throws SQLException {
+        return parseJson(cs.getString(columnIndex));
+    }
+
+    private List<T> parseJson(String json) throws SQLException {
+        if (json == null) {
+            return null;
+        }
+        try {
+            return objectMapper.readValue(json, List.class);
+        } catch (IOException e) {
+            throw new SQLException("Error converting JSON string to object", e);
+        }
+    }
+}

springboot/src/main/java/com/example/utils/DateUtil.java

@@ -0,0 +1,153 @@
+//package com.example.utils;
+//
+//import java.text.ParseException;
+//import java.text.SimpleDateFormat;
+//import java.util.Date;
+//import java.util.concurrent.TimeUnit;
+//
+//import org.apache.commons.lang3.StringUtils;
+//
+///**
+// * @Title: DateUtils
+// * @Description: 日期工具类
+// */
+//public class DateUtil {
+//
+//    /** 分 */
+//    public static final long MINUTE_TTL = 60 * 1000L;
+//    /** 时 */
+//    public static final long HOURS_TTL = 60 * 60 * 1000L;
+//    /** 半天 */
+//    public static final long HALF_DAY_TTL = 12 * 60 * 60 * 1000L;
+//    /** 天 */
+//    public static final long DAY_TTL = 24 * 60 * 60 * 1000L;
+//    /** 月 */
+//    public static final long MONTH_TTL = 30 * 24 * 60 * 60 * 1000L;
+//    /** 时间格式(yyyy-MM-dd) */
+//    public final static String DATE_PATTERN = "yyyy-MM-dd";
+//    /** 时间格式(yyyy-MM-dd'T'HH:mm:ss.SSSZ) */
+//    public final static String DATE_TIME_PATTERN = "yyyy-MM-dd'T'HH:mm:ssZ";
+//
+//    private static ThreadLocal<SimpleDateFormat> simpleDateFormatThreadLocal = new ThreadLocal<SimpleDateFormat>() {
+//        @Override
+//        protected SimpleDateFormat initialValue() {
+//            return new SimpleDateFormat(DATE_TIME_PATTERN);
+//        }
+//    };
+//
+//    public static Long getSystemTimeSeconds() {
+//        return System.currentTimeMillis() / 1000L;
+//    }
+//
+//    /**
+//     * @Description:   将时间戳转换为时间
+//     * 输入形如：148851067484755 输出形如：2017-03-03T11:11:14.000+0800
+//     * 异常格式返回-1
+//     * @param s
+//     * @return
+//     */
+//    public static String getTimestampDateTimeLong(Long s) {
+//        String res;
+//        Date date = new Date(s * 1000);
+//        res = simpleDateFormatThreadLocal.get().format(date);
+//        return res;
+//    }
+//
+//    /**
+//     *
+//     * @Description: 将时间戳转换为时间
+//     * @param s 毫秒数
+//     * @return
+//     */
+//    public static String getTimestampDateLong(Long s) {
+//        return simpleDateFormatThreadLocal.get().format(new Date(s));
+//    }
+//
+//    /**
+//     *
+//     * @Description: 日期格式化 日期格式为：yyyy-MM-dd
+//     * @param date  日期
+//     * @return 返回yyyy-MM-dd格式日期
+//     */
+//    public static String formatShort(Date date) {
+//        return format(date, DATE_PATTERN);
+//    }
+//
+//    /**
+//     *
+//     * @Description: 日期格式化 日期格式为：yyyy-MM-dd'T'HH:mm:ss.SSSZ
+//     * @param date 日期
+//     * @return 返回
+//     */
+//    public static String formatLong(Date date) {
+//        return format(date, DATE_TIME_PATTERN);
+//    }
+//
+//    /**
+//     *
+//     * @Description: 格式化时间
+//     * @param date
+//     * @param pattern
+//     * @return
+//     */
+//    public static String format(Date date, String pattern) {
+//        if (date != null) {
+//            SimpleDateFormat df = null;
+//            if (DATE_TIME_PATTERN.equals(pattern)) {
+//                df = simpleDateFormatThreadLocal.get();
+//            } else {
+//                df = new SimpleDateFormat(pattern);
+//            }
+//            return df.format(date);
+//        }
+//        return null;
+//    }
+//
+//    /**
+//     *
+//     * @Description: 字符串转时间
+//     * @param strDate
+//     * @return
+//     * @throws ParseException
+//     */
+//    public static Date stringLongToDate(String strDate) throws ParseException {
+//        return stringToDate(strDate, DATE_TIME_PATTERN);
+//    }
+//
+//    public static Date stringShortToDate(String strDate) throws ParseException {
+//        return stringToDate(strDate, DATE_PATTERN);
+//    }
+//
+//    /**
+//     * 字符串转换成日期
+//     * @param strDate 日期字符串
+//     * @param pattern 日期的格式
+//     * @throws ParseException
+//     */
+//    public static Date stringToDate(String strDate, String pattern) throws ParseException {
+//        if (StringUtils.isBlank(strDate)) {
+//            return null;
+//        }
+//        SimpleDateFormat df = null;
+//        if (DATE_TIME_PATTERN.equals(pattern)) {
+//            df = simpleDateFormatThreadLocal.get();
+//        } else {
+//            df = new SimpleDateFormat(pattern);
+//        }
+//        return df.parse(strDate);
+//    }
+//
+//    /**
+//     * @Description: 日期计算
+//     * @param oldDate
+//     * @param addValue
+//     * @param unit
+//     * @return
+//     */
+//    public static Date add(Date oldDate, Long addValue, TimeUnit unit) {
+//        long milliseconds = oldDate.getTime();
+//        milliseconds += unit.toMillis(addValue);
+//        return new Date(milliseconds);
+//    }
+//
+//}

springboot/src/main/java/com/example/utils/JsonUtil.java

@@ -0,0 +1,168 @@
+//package com.example.utils;
+//import java.lang.reflect.Type;
+//import java.util.ArrayList;
+//import java.util.List;
+//
+//import com.alibaba.fastjson.JSON;
+//import com.alibaba.fastjson.JSONObject;
+//import com.alibaba.fastjson.serializer.SerializerFeature;
+//
+//import cn.hutool.core.lang.TypeReference;
+//import cn.hutool.core.util.TypeUtil;
+//
+///**
+// * @Title: JsonUtil
+// * @Description: Json工具类，暂时内部使用fastjson实现
+// * @version V1.0
+// */
+//public class JsonUtil {
+//    private JsonUtil() {}
+//
+//    public static String obj2json(Object obj) {
+//        return obj2json(obj, DateUtil.DATE_TIME_PATTERN);
+//    }
+//
+//    /**
+//     *
+//     * @Description:
+//     * @param obj
+//     * @param beIgnoreNull 是否忽略null值
+//     * @param beFormat  是否格式化
+//     * @param dataFormat  指定日期格式化
+//     * @return
+//     */
+//    public static String obj2json2(Object obj, boolean beIgnoreNull, boolean beFormat, String dataFormat) {
+//        List<SerializerFeature> features = new ArrayList<>();
+//        if (!beIgnoreNull) {
+//            features.add(SerializerFeature.WriteMapNullValue);
+//            features.add(SerializerFeature.DisableCircularReferenceDetect);
+//            features.add(SerializerFeature.WriteNullStringAsEmpty);
+//            features.add(SerializerFeature.WriteNullListAsEmpty);
+//            features.add(SerializerFeature.WriteDateUseDateFormat);
+//        }
+//        if (beFormat) {
+//            features.add(SerializerFeature.PrettyFormat);
+//        }
+//        features.add(SerializerFeature.WriteDateUseDateFormat);
+//        return obj2json2(obj, dataFormat, features.toArray(new SerializerFeature[] {}));
+//    }
+//
+//    public static String obj2json2(Object obj, boolean beIgnoreNull, boolean beFormat) {
+//        return obj2json2(obj, beIgnoreNull, beFormat, DateUtil.DATE_TIME_PATTERN);
+//    }
+//
+//    public static String obj2json2(Object obj, boolean beIgnoreNull) {
+//        return obj2json2(obj, beIgnoreNull, false);
+//    }
+//
+//    public static String obj2json2(Object obj) {
+//        return obj2json2(obj, false);
+//    }
+//
+//    /**
+//     *
+//     * @Description: 对象转json
+//     * @param obj
+//     *            对象
+//     * @param beFormat
+//     *            是否格式化
+//     * @return json字符串
+//     */
+//    public static String obj2json(Object obj, boolean beFormat) {
+//        return obj2json2(obj, false, beFormat);
+//    }
+//
+//    /**
+//     *
+//     * @Description: 对象转json
+//     * @param obj
+//     * @param dataFormat 日期格式
+//     * @return
+//     *
+//     * 如果java bean的Date类型属性需要特殊处理，使用注解
+//     * @com.alibaba.fastjson.annotation.JSONField
+//     */
+//    public static String obj2json(Object obj, String dataFormat) {
+//        return obj2json2(obj, false, false, dataFormat);
+//    }
+//
+//    private static String obj2json2(Object obj, String dataFormat, SerializerFeature... feature) {
+//        String defaultFormat = JSONObject.DEFFAULT_DATE_FORMAT;
+//        JSONObject.DEFFAULT_DATE_FORMAT = dataFormat;
+//        String json = JSON.toJSONString(obj, feature);
+//        JSONObject.DEFFAULT_DATE_FORMAT = defaultFormat;
+//        return json;
+//    }
+//
+//    /**
+//     *
+//     * @Description: xml转json
+//     * @param xml
+//     * @return json字符串
+//     */
+//    public static String xml2json(String xml) {
+//        return cn.hutool.json.JSONUtil.xmlToJson(xml).toJSONString(0);
+//    }
+//
+//    /**
+//     *
+//     * @Description: json转对象
+//     * @param jsonString
+//     * @param beanClass
+//     * @return 实体类对象
+//     */
+//    public static <T> T json2Obj(String jsonString, Class<T> beanClass) {
+//        return JSON.parseObject(jsonString, beanClass);
+//    }
+//
+//    /**
+//     *
+//     * @Description JSON字符串转为实体类对象，转换异常将被抛出
+//     *
+//     * @param <T>
+//     *            Bean类型
+//     * @param jsonString
+//     *            JSON字符串
+//     * @param typeReference
+//     *            {@link TypeReference}类型参考子类，可以获取其泛型参数中的Type类型
+//     * @param ignoreError
+//     *            是否忽略错误
+//     * @return 实体类对象
+//     */
+//    public static <T> T json2Obj(String jsonString, com.sf.nwms.core.util.lang.TypeReference<T> typeReference,
+//                                 boolean ignoreError) {
+//        /* return cn.hutool.json.JSONUtil.toBean(jsonString, TypeUtil.getTypeArgument(typeReference.getClass()),
+//            ignoreError);*/
+//        return json2Obj(jsonString, typeReference);
+//    }
+//
+//    /**
+//     *
+//     * @Description:
+//     * @param <T>
+//     * @param jsonString
+//     * @param typeReference
+//     * @return
+//     *
+//     * eg: JsonUtil.json2Obj(jsonString, new com.sf.nwms.core.util.lang.TypeReference<List<JavaBean>())
+//     */
+//    public static <T> T json2Obj(String jsonString, com.sf.nwms.core.util.lang.TypeReference<T> typeReference) {
+//        return JSON.parseObject(jsonString, TypeUtil.getTypeArgument(typeReference.getClass()));
+//    }
+//
+//    /**
+//     *
+//     * @Description: json转对象
+//     * @param jsonString
+//     *            json字符串
+//     * @param beanType
+//     *            实体类对象类型
+//     * @param ignoreError
+//     *            是否忽略错误
+//     * @return 实体类对象
+//     */
+//    public static <T> T json2Obj(String jsonString, Type beanType, boolean ignoreError) {
+//        return JSON.parseObject(jsonString, beanType);
+//    }
+//
+//}

springboot/src/main/java/com/example/utils/generate/CodeGenerator.java

@@ -32,15 +32,15 @@ public class CodeGenerator {
      * 主类  生成代码
      */
     public static void main(String[] args) {
-        String tableName = "audits";
+        String tableName = "orders";
         // 生成Entity
-        EntityGenerator.generate(tableName);
+//        EntityGenerator.generate(tableName);
         // 生成Mapper #
-        MapperGenerator.generate(tableName);
+//        MapperGenerator.generate(tableName);
         // 生成Service #
-        ServiceGenerator.generate(tableName);
+//        ServiceGenerator.generate(tableName);
         // 生成Controller #
-        ControllerGenerator.generate(tableName);
+//        ControllerGenerator.generate(tableName);
         // 生成Vue
         VueGenerator.generate(tableName);
     }

springboot/src/main/resources/mapper/AddressMapper.xml

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.example.mapper.AddressMapper">
+
+    <sql id="Base_Column_List">
+        id,user_id,address,door_no,phone,recipient_name
+    </sql>
+
+    <select id="selectAll" resultType="com.example.entity.Address">
+        select
+        <include refid="Base_Column_List" />
+        from address
+        <where>
+            <if test="id != null"> and id = #{id}</if>
+            <if test="userId != null"> and user_id = #{userId}</if>
+            <if test="address != null"> and address like concat('%', #{address}, '%')</if>
+            <if test="doorNo != null"> and door_no like concat('%', #{doorNo}, '%')</if>
+            <if test="phone != null"> and phone like concat('%', #{phone}, '%')</if>
+            <if test="recipientName != null"> and recipient_name like concat('%', #{recipientName}, '%')</if>
+        </where>
+        order by id desc
+    </select>
+
+    <select id="selectById" resultType="com.example.entity.Address">
+        select
+        <include refid="Base_Column_List" />
+        from address
+        where id = #{id}
+    </select>
+
+    <delete id="deleteById">
+        delete from address
+        where  id = #{id}
+    </delete>
+
+    <insert id="insert" parameterType="com.example.entity.Address" useGeneratedKeys="true">
+        insert into address
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="id != null">id,</if>
+            <if test="userId != null">user_id,</if>
+            <if test="address != null">address,</if>
+            <if test="doorNo != null">door_no,</if>
+            <if test="phone != null">phone,</if>
+            <if test="recipientName != null">recipient_name,</if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="id != null">#{id},</if>
+            <if test="userId != null">#{userId},</if>
+            <if test="address != null">#{address},</if>
+            <if test="doorNo != null">#{doorNo},</if>
+            <if test="phone != null">#{phone},</if>
+            <if test="recipientName != null">#{recipientName},</if>
+        </trim>
+    </insert>
+
+    <update id="updateById" parameterType="com.example.entity.Address">
+        update address
+        <set>
+            <if test="userId != null">
+                user_id = #{userId},
+            </if>
+            <if test="address != null">
+                address = #{address},
+            </if>
+            <if test="doorNo != null">
+                door_no = #{doorNo},
+            </if>
+            <if test="phone != null">
+                phone = #{phone},
+            </if>
+            <if test="recipientName != null">
+                recipient_name = #{recipientName},
+            </if>
+        </set>
+        where id = #{id} 
+    </update>
+
+</mapper>

springboot/src/main/resources/mapper/AdminstoreMapper.xml

@@ -5,7 +5,7 @@
 <mapper namespace="com.example.mapper.AdminstoreMapper">
 
     <sql id="Base_Column_List">
-        id,username,password,name,avatar,role,phone,email
+        id,username,password,name,avatar,role,phone,email,address
     </sql>
 
     <select id="selectAll" resultType="com.example.entity.Adminstore">
@@ -21,6 +21,7 @@
             <if test="role != null"> and role like concat('%', #{role}, '%')</if>
             <if test="phone != null"> and phone like concat('%', #{phone}, '%')</if>
             <if test="email != null"> and email like concat('%', #{email}, '%')</if>
+            <if test="address != null"> and address = #{address}</if>
         </where>
         order by id desc
     </select>
@@ -32,7 +33,6 @@
         where id = #{id}
     </select>
 
-
     <delete id="deleteById">
         delete from adminstore
         where  id = #{id}
@@ -49,6 +49,7 @@
             <if test="role != null">role,</if>
             <if test="phone != null">phone,</if>
             <if test="email != null">email,</if>
+            <if test="address != null">address,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="id != null">#{id},</if>
@@ -59,6 +60,7 @@
             <if test="role != null">#{role},</if>
             <if test="phone != null">#{phone},</if>
             <if test="email != null">#{email},</if>
+            <if test="address != null">#{address},</if>
         </trim>
     </insert>
 
@@ -86,6 +88,9 @@
             <if test="email != null">
                 email = #{email},
             </if>
+            <if test="address != null">
+                address = #{address},
+            </if>
         </set>
         where id = #{id} 
     </update>

springboot/src/main/resources/mapper/OrdersMapper.xml

@@ -5,16 +5,60 @@
 <mapper namespace="com.example.mapper.OrdersMapper">
 
     <sql id="Base_Column_List">
-        id,bit_pay,origin_pay,user_id,address_id,time_pre,time_order,order_state,order_remark,trans_code,order_type_id
+        id,bid_pay,origin_pay,user_id,address_id,time_pre,time_order,order_state,order_remark,trans_code,order_products_lists,store_id
     </sql>
+    <resultMap id="ForProductList" type="com.example.entity.Orders">
+        <id property="id" column="id"/>
+        <result property="bidPay" column="bid_pay"/>
+        <result property="originPay" column="origin_pay"/>
+        <result property="userId" column="user_id"/>
+        <result property="addressId" column="address_id"/>
+        <result property="timePre" column="time_pre"/>
+        <result property="timeOrder" column="time_order"/>
+        <result property="orderState" column="order_state"/>
+        <result property="transCode" column="trans_code"/>
+        <result property="orderRemark" column="order_remark"/>
+        <result property="storeId" column="store_id"/>
 
-    <select id="selectAll" resultType="com.example.entity.Orders">
+        <association property="user" javaType="com.example.entity.User">
+            <id property="id" column="user_id"/>
+            <result property="username" column="username"/>
+            <result property="role" column="role"/>
+            <result property="phone" column="phone"/>
+            <result property="name" column="name"/>
+            <result property="sex" column="sex"/>
+            <result property="openid" column="openid"/>
+        </association>
+
+        <association property="address" javaType="com.example.entity.Address">
+            <id property="id" column="address_id"/>
+            <result property="userId" column="user_id"/>
+            <result property="address" column="address"/>
+            <result property="doorNo" column="door_no"/>
+            <result property="phone" column="phone"/>
+            <result property="recipientName" column="recipient_name"/>
+        </association>
+
+        <collection property="orderProductsLists" column="order_products_lists" javaType="list"  ofType="com.example.entity.Product">
+            <id property="id" column="product_id"/>
+            <result property="productName" column="product_name"/>
+            <result property="count" column="count"/>
+        </collection>
+    </resultMap>
+
+    <!--    <include refid="Base_Column_List" />-->
+    <select id="selectAll" resultMap="ForProductList">
         select
-        <include refid="Base_Column_List" />
+            orders.*,address.*,user.*,
+
+            address.id as addressId, user.id as userId
         from orders
+        left join address on address.id = orders.address_id
+        left join user on user.id = orders.user_id
+
         <where>
-            <if test="id != null"> and id = #{id}</if>
-            <if test="bitPay != null"> and bit_pay = #{bitPay}</if>
+            <if test="id != null"> and orders.id = #{id}</if>
+            <if test="bidPay != null"> and bid_pay = #{bidPay}</if>
             <if test="originPay != null"> and origin_pay = #{originPay}</if>
             <if test="userId != null"> and user_id = #{userId}</if>
             <if test="addressId != null"> and address_id = #{addressId}</if>
@@ -23,16 +67,19 @@
             <if test="orderState != null"> and order_state like concat('%', #{orderState}, '%')</if>
             <if test="orderRemark != null"> and order_remark like concat('%', #{orderRemark}, '%')</if>
             <if test="transCode != null"> and trans_code like concat('%', #{transCode}, '%')</if>
-            <if test="orderTypeId != null"> and order_type_id = #{orderTypeId}</if>
+            <if test="storeId != null"> and store_id = #{storeId}</if>
         </where>
-        order by id desc
+        order by orders.id desc
     </select>
 
-    <select id="selectById" resultType="com.example.entity.Orders">
+    <select id="selectById" resultMap="ForProductList">
         select
-        <include refid="Base_Column_List" />
+            orders.*,address.*,user.*,
+            address.id as addressId, user.id as userId
         from orders
-        where id = #{id}
+                 left join address on address.id = orders.address_id
+                 left join user on user.id = orders.user_id
+        where orders.id = #{id}
     </select>
 
     <delete id="deleteById">
@@ -40,11 +87,11 @@
         where  id = #{id}
     </delete>
 
-    <insert id="insert" parameterType="com.example.entity.Orders" useGeneratedKeys="true">
+    <insert id="insert" parameterType="com.example.entity.Orders" useGeneratedKeys="true" keyProperty="id">
         insert into orders
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="id != null">id,</if>
-            <if test="bitPay != null">bit_pay,</if>
+            <if test="bidPay != null">bid_pay,</if>
             <if test="originPay != null">origin_pay,</if>
             <if test="userId != null">user_id,</if>
             <if test="addressId != null">address_id,</if>
@@ -54,10 +101,12 @@
             <if test="orderRemark != null">order_remark,</if>
             <if test="transCode != null">trans_code,</if>
             <if test="orderTypeId != null">order_type_id,</if>
+            <if test="orderProductsLists !=null">order_products_lists,</if>
+            <if test="storeId != null">store_id,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="id != null">#{id},</if>
-            <if test="bitPay != null">#{bitPay},</if>
+            <if test="bidPay != null">#{bidPay},</if>
             <if test="originPay != null">#{originPay},</if>
             <if test="userId != null">#{userId},</if>
             <if test="addressId != null">#{addressId},</if>
@@ -67,14 +116,16 @@
             <if test="orderRemark != null">#{orderRemark},</if>
             <if test="transCode != null">#{transCode},</if>
             <if test="orderTypeId != null">#{orderTypeId},</if>
+            <if test="orderProductsLists !=null">#{orderProductsLists,jdbcType=VARCHAR,typeHandler=com.example.typeHandler.JsonTypeHandler},</if>
+            <if test="storeId != null">#{storeId},</if>
         </trim>
     </insert>
 
     <update id="updateById" parameterType="com.example.entity.Orders">
         update orders
         <set>
-            <if test="bitPay != null">
-                bit_pay = #{bitPay},
+            <if test="bidPay != null">
+                bid_pay = #{bidPay},
             </if>
             <if test="originPay != null">
                 origin_pay = #{originPay},
@@ -103,6 +154,9 @@
             <if test="orderTypeId != null">
                 order_type_id = #{orderTypeId},
             </if>
+            <if test="storeId != null">
+                store_id = #{storeId},
+            </if>
         </set>
         where id = #{id} 
     </update>

springboot/src/main/resources/mapper/ProductMapper.xml

@@ -5,23 +5,39 @@
 <mapper namespace="com.example.mapper.ProductMapper">
 
     <sql id="Base_Column_List">
-        id,product_state,product_name,product_icons,product_ids,product_bid_price,product_sell_price
+        product.id,product_state,product_name,product_icons,product_type_ids,product_bid_price,product_sell_price
     </sql>
+    <resultMap id="productWithProductType" type="com.example.entity.Product">
+        <id property="id" column="id"></id>
+        <result property="productState" column="product_state"/>
+        <result property="productName" column="product_name"/>
+        <result property="productIcons" column="product_icons"/>
+        <result property="productBidPrice" column="product_bid_price"/>
+        <result property="productSellPrice" column="product_sell_price"/>
+        <result property="productTypeIds" column="product_type_ids" jdbcType="VARCHAR" typeHandler="com.example.typeHandler.ArrayIntegerTypeHadnler" />
+<!--        店铺产品联合属性 List -->
+        <collection property="productTypes" javaType="list" ofType="com.example.entity.ProductType">
+            <id property="id" column="productTypeId"/>
+            <result property="productTypeName" column="productTypeName"/>
+        </collection>
+    </resultMap>
 
-    <select id="selectAll" resultType="com.example.entity.Product">
-        select
-        <include refid="Base_Column_List" />
-        from product
+    <select id="selectAll" resultMap="productWithProductType">
+        select product.*,
+               product_type.id as productTypeId,
+               product_type_name as productTypeName
+        from  product
+        left join  product_type on JSON_CONTAINS(product.product_type_ids,CAST(product_type.id  as JSON),'$')
         <where>
-            <if test="id != null"> and id = #{id}</if>
+            <if test="id != null"> and product.id = #{id}</if>
             <if test="productState != null"> and product_state like concat('%', #{productState}, '%')</if>
             <if test="productName != null"> and product_name like concat('%', #{productName}, '%')</if>
             <if test="productIcons != null"> and product_icons like concat('%', #{productIcons}, '%')</if>
-            <if test="productTypeIds != null"> and product_type_ids like concat('%', #{productIds}, '%')</if>
+            <if test="productTypeIds != null"> and product_type_ids like concat('%', #{productIds,jdbcType=VARCHAR,typeHandler=com.example.typeHandler.ArrayIntegerTypeHadnler}, '%')</if>
             <if test="productBidPrice != null"> and product_bid_price = #{productBidPrice}</if>
             <if test="productSellPrice != null"> and product_sell_price = #{productSellPrice}</if>
         </where>
-        order by id desc
+        order by product_type.id desc
     </select>
 
     <select id="selectById" resultType="com.example.entity.Product">
@@ -70,8 +86,8 @@
             <if test="productIcons != null">
                 product_icons = #{productIcons},
             </if>
-            <if test="productIds != null">
-                product_type_ids = #{productTypeIds},
+            <if test="productTypeIds != null">
+                product_type_ids = #{productTypeIds,jdbcType=VARCHAR,typeHandler=com.example.typeHandler.ArrayIntegerTypeHadnler},
             </if>
             <if test="productBidPrice != null">
                 product_bid_price = #{productBidPrice},

springboot/src/main/resources/mapper/ProductTypeMapper.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.example.mapper.ProductTypeMapper">
+
+    <sql id="Base_Column_List">
+        id,product_name
+    </sql>
+<!--    联合属性    -->
+<!--    <resultMap id="productTypeWithAssociate" type="com.example.entity.ProductType">-->
+<!--        <id property="id" column="id"></id>-->
+<!--        <id property="productTypeName" column="product_type_name"/>-->
+<!--        <id property="productIds" column="product_ids" jdbcType="VARCHAR" typeHandler="com.example.typeHandler.ArrayIntegerTypeHadnler"/>-->
+<!--        <association property="address" javaType="com.example.entity.Address">-->
+<!--            <id property="id" column="address_id"/>-->
+
+<!--        </association>-->
+<!--        <association property="user" javaType="com.example.entity.User">-->
+<!--            <id property="id" column="user_id"/>-->
+<!--            <id property="username" column="username"/>-->
+<!--            <id property="role" column="role"/>-->
+<!--            <id property="phone" column="user_phone"/>-->
+<!--            <id property="name" column="name"/>-->
+<!--        </association>-->
+<!--        <collection property="products" javaType="list" ofType="com.example.entity.Product">-->
+<!--            <id property="id" column="product_id"/>-->
+<!--            <id property="name" column="product_name"/>-->
+<!--            <id property="originPrice" column="origin_price"/>-->
+<!--            <id property="avatar" column="product_avatar"/>-->
+<!--        </collection>-->
+<!--    </resultMap>-->
+
+    <select id="selectAll" resultType="com.example.entity.ProductType">
+        select
+        <include refid="Base_Column_List" />
+        from product_type
+        <where>
+            <if test="id != null"> and id = #{id}</if>
+            <if test="productName != null"> and product_name like concat('%', #{productName}, '%')</if>
+        </where>
+        order by id desc
+    </select>
+
+    <select id="selectById" resultType="com.example.entity.ProductType">
+        select
+        <include refid="Base_Column_List" />
+        from product_type
+        where id = #{id}
+    </select>
+    <select id="selectByShopId" resultType="com.example.entity.ProductType">
+        select *
+        from product_type
+        left join store on JSON_CONTAINS(product_type.product_type_ids,CAST(store.id as JSON),'$')
+
+    </select>
+
+    <delete id="deleteById">
+        delete from product_type
+        where  id = #{id}
+    </delete>
+
+    <insert id="insert" parameterType="com.example.entity.ProductType" useGeneratedKeys="true">
+        insert into product_type
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="id != null">id,</if>
+            <if test="productName != null">product_name,</if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="id != null">#{id},</if>
+            <if test="productName != null">#{productName},</if>
+        </trim>
+    </insert>
+
+    <update id="updateById" parameterType="com.example.entity.ProductType">
+        update product_type
+        <set>
+            <if test="productName != null">
+                product_name = #{productName},
+            </if>
+        </set>
+        where id = #{id} 
+    </update>
+
+</mapper>

springboot/src/main/resources/mapper/ProductypeMapper.xml

@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE mapper
-        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
-        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.example.mapper.ProductypeMapper">
-
-    <sql id="Base_Column_List">
-        id,product_name
-    </sql>
-
-    <select id="selectAll" resultType="com.example.entity.Productype">
-        select
-        <include refid="Base_Column_List" />
-        from product_type
-        <where>
-            <if test="id != null"> and id = #{id}</if>
-            <if test="productName != null"> and product_name like concat('%', #{productName}, '%')</if>
-        </where>
-        order by id desc
-    </select>
-
-    <select id="selectById" resultType="com.example.entity.Productype">
-        select
-        <include refid="Base_Column_List" />
-        from product_type
-        where id = #{id}
-    </select>
-
-    <delete id="deleteById">
-        delete from product_type
-        where  id = #{id}
-    </delete>
-
-    <insert id="insert" parameterType="com.example.entity.Productype" useGeneratedKeys="true">
-        insert into product_type
-        <trim prefix="(" suffix=")" suffixOverrides=",">
-            <if test="id != null">id,</if>
-            <if test="productName != null">product_name,</if>
-        </trim>
-        <trim prefix="values (" suffix=")" suffixOverrides=",">
-            <if test="id != null">#{id},</if>
-            <if test="productName != null">#{productName},</if>
-        </trim>
-    </insert>
-
-    <update id="updateById" parameterType="com.example.entity.Productype">
-        update product_type
-        <set>
-            <if test="productName != null">
-                product_name = #{productName},
-            </if>
-        </set>
-        where id = #{id} 
-    </update>
-
-</mapper>

springboot/src/main/resources/mapper/SaleStatementMapper.xml

@@ -77,4 +77,5 @@
         where id = #{id} 
     </update>
 
+<!--    根据时间范围和特定商品id筛选 ，没有id则是 所有商品  -->
 </mapper>

springboot/src/main/resources/mapper/StoreMapper.xml

@@ -5,23 +5,96 @@
 <mapper namespace="com.example.mapper.StoreMapper">
 
     <sql id="Base_Column_List">
-        id,owner_id,products_ids,address_ids,product_type_ids
+        id,store_id,owner_id,products_ids,address_ids,product_type_ids
     </sql>
+    <resultMap id="storeWithType" type="com.example.entity.Store">
+        <id property="id" column="id"></id>
+        <result property="storeName" column="store_name"/>
+        <result property="productState" column="product_state"/>
+        <result property="productName" column="product_name"/>
+        <result property="productBidPrice" column="product_bid_price"/>
+        <result property="productSellPrice" column="product_sell_price"/>
+        <result property="productTypeIds" column="product_type_ids" jdbcType="VARCHAR" typeHandler="com.example.typeHandler.ArrayIntegerTypeHadnler" />
+        <result property="storePicUrl" column="store_pic_url"/>
+        <result property="addressIds" column="address_ids"/>
+        <result property="productsIds" column="product_ids" jdbcType="VARCHAR" typeHandler="com.example.typeHandler.ArrayIntegerTypeHadnler"/>
+        <result property="ownerId" column="owner_id" />
+<!--        店铺老板信息-->
+        <association property="adminstore" javaType="com.example.entity.Adminstore">
+            <result property="username" column="username" />
+            <result property="name" column="name" />
+            <result property="phone" column="phone" />
+            <result property="email" column="email" />
+        </association>
+<!--    地址表-->
+        <association property="address" javaType="com.example.entity.Address">
+            <id property="id" column="address_id"/>
+            <id property="userId" column="user_id"/>
+            <id property="address" column="address"/>
+            <id property="doorNo" column="door_no"/>
+            <id property="phone" column="phone"/>
+            <id property="recipientName" column="recipient_name"/>
+        </association>
+        <!--         产品List-->
+        <collection property="products" javaType="list" ofType="com.example.entity.Product">
+            <id property="id" column="productId"/>
+            <result property="productState" column="product_state"/>
+            <result property="productName" column="product_name"/>
+            <result property="productIcons" column="product_icons"/>
+            <result property="productSellPrice" column="product_sell_price"/>
+            <result property="productBidPrice" column="product_bid_price"/>
+        </collection>
+        <collection property="productTypes" javaType="list" ofType="com.example.entity.ProductType">
+            <id property="id" column="productId"/>
+            <result property="productTypeName" column="productTypeName"/>
+        </collection>
+    </resultMap>
 
-    <select id="selectAll" resultType="com.example.entity.Store">
+    <!--    获取店铺商品类型    -->
+    <!--    获取店铺商品类型    -->
+    <select id="selectProductsTypes" resultMap="storeWithType">
         select
-        <include refid="Base_Column_List" />
+        store.*,
+        product_type.id as productId,
+        product_type.product_type_name as productTypeName
         from store
+        left join product_type on JSON_CONTAINS(store.product_type_ids,CAST(product_type.id as JSON),'$')
         <where>
-            <if test="id != null"> and id = #{id}</if>
-            <if test="ownerId != null"> and owner_id = #{ownerId}</if>
-            <if test="productsIds != null"> and products_ids like concat('%', #{productsIds}, '%')</if>
-            <if test="addressIds != null"> and address_ids like concat('%', #{addressIds}, '%')</if>
-            <if test="productTypeIds != null"> and product_type_ids like concat('%', #{productTypeIds}, '%')</if>
+            <if test="id!=null" >and store.id = #{id}</if>
         </where>
-        order by id desc
     </select>
 
+        <select id="selectAll" resultMap="storeWithType">
+            select
+            store.*, product.*,address.*,adminstore.*,
+            adminstore.id as adminstoreId ,
+            address.id as addressId,
+            product.id as productId,
+            product_type.id as productId, product_type.product_type_name as productTypeName
+            from store
+            left join product_type on JSON_CONTAINS(store.product_type_ids,CAST(product_type.id as JSON),'$')
+            left join product on JSON_CONTAINS(store.products_ids,CAST(product.id as JSON),'$')
+            left join address on address.id = store.address_id
+            left join adminstore on adminstore.id = store.owner_id
+            <where>
+                <if test="id!=null" >and store.id = #{id}</if>
+            </where>
+        </select>
+
+<!--    <select id="selectAll" resultType="com.example.entity.Store">-->
+<!--        select-->
+<!--        <include refid="Base_Column_List" />-->
+<!--        from store-->
+<!--        <where>-->
+<!--            <if test="id != null"> and id = #{id}</if>-->
+<!--            <if test="ownerId != null"> and owner_id = #{ownerId}</if>-->
+<!--            <if test="productsIds != null"> and products_ids like concat('%', #{productsIds}, '%')</if>-->
+<!--            <if test="addressIds != null"> and address_ids like concat('%', #{addressIds}, '%')</if>-->
+<!--            <if test="productTypeIds != null"> and product_type_ids like concat('%', #{productTypeIds,jdbcType=VARCHAR,typeHandler=com.example.typeHandler.ArrayIntegerTypeHadnler}, '%')</if>-->
+<!--        </where>-->
+<!--        order by id desc-->
+<!--    </select>-->
+
     <select id="selectById" resultType="com.example.entity.Store">
         select
         <include refid="Base_Column_List" />
@@ -29,6 +102,8 @@
         where id = #{id}
     </select>
 
+
+
     <delete id="deleteById">
         delete from store
         where  id = #{id}
@@ -38,17 +113,21 @@
         insert into store
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="id != null">id,</if>
+            <if test="storeName != null">store_name,</if>
             <if test="ownerId != null">owner_id,</if>
             <if test="productsIds != null">products_ids,</if>
             <if test="addressIds != null">address_ids,</if>
             <if test="productTypeIds != null">product_type_ids,</if>
+            <if test="storePicUrl!=null">store_pic_url,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="id != null">#{id},</if>
+            <if test="storeName != null">#{storeName},</if>
             <if test="ownerId != null">#{ownerId},</if>
             <if test="productsIds != null">#{productsIds},</if>
             <if test="addressIds != null">#{addressIds},</if>
             <if test="productTypeIds != null">#{productTypeIds},</if>
+            <if test="storePicUrl!=null">#{storePicUrl},</if>
         </trim>
     </insert>
 
@@ -58,6 +137,9 @@
             <if test="ownerId != null">
                 owner_id = #{ownerId},
             </if>
+            <if test="storeName != null">
+                store_name = #{storeName},
+            </if>
             <if test="productsIds != null">
                 products_ids = #{productsIds},
             </if>
@@ -67,6 +149,9 @@
             <if test="productTypeIds != null">
                 product_type_ids = #{productTypeIds},
             </if>
+            <if test="storePicUrl !=null">
+                store_pic_url = #{storePicUrl},
+            </if>
         </set>
         where id = #{id} 
     </update>

uniapp/index.html

@@ -15,6 +15,6 @@
   </head>
   <body>
     <div id="app"><!--app-html--></div>
-    <script type="module" src="/main.js"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>

vue/package-lock.json

@@ -12,11 +12,15 @@
         "core-js": "^3.8.3",
         "echart": "^0.1.3",
         "echarts": "^5.5.0",
+        "echarts-extension-amap": "^1.12.0",
+        "echarts-wordcloud": "^2.1.0",
         "element-china-area-data": "^6.1.0",
         "element-ui": "^2.15.14",
         "highcharts": "^11.4.1",
         "jquery": "^3.7.1",
+        "swiper": "^11.1.1",
         "vue": "^2.6.14",
+        "vue-echarts": "^6.6.9",
         "vue-router": "^3.5.1"
       },
       "devDependencies": {
@@ -4826,6 +4830,19 @@
         "zrender": "5.5.0"
       }
     },
+    "node_modules/echarts-extension-amap": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmmirror.com/echarts-extension-amap/-/echarts-extension-amap-1.12.0.tgz",
+      "integrity": "sha512-JpCCLhafpUGSfMcAB44lTnjnNuYWQ1jPuyvOF3t/zziQ1jbDjGLTkhIFenpKMuZOz9GzS4tREXL/zGeNrZpxDw=="
+    },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
@@ -8507,6 +8524,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -9130,6 +9152,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.1.tgz",
+      "integrity": "sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
@@ -9520,6 +9550,52 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "6.6.9",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.6.9.tgz",
+      "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.5",
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.4.1",
+        "vue": "^2.6.12 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

vue/package.json

@@ -11,11 +11,15 @@
     "core-js": "^3.8.3",
     "echart": "^0.1.3",
     "echarts": "^5.5.0",
+    "echarts-extension-amap": "^1.12.0",
+    "echarts-wordcloud": "^2.1.0",
     "element-china-area-data": "^6.1.0",
     "element-ui": "^2.15.14",
     "highcharts": "^11.4.1",
     "jquery": "^3.7.1",
+    "swiper": "^11.1.1",
     "vue": "^2.6.14",
+    "vue-echarts": "^6.6.9",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {

vue/public/api.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+const config = {
+	// baseURL: process.env.baseURL
+	baseURL: 'http://localhost:3000/data/',
+	timeout: 1000,
+	headers: {
+		'Content-Type': 'application/json',
+	},
+};
+const api = axios.create(config);
+
+// 默认 post 请求，使用 application/json 形式
+api.defaults.headers.post['Content-Type'] = 'application/json';
+
+/**
+ * 接口地址配置
+ */
+const server_urls = {
+	//地图数据接口
+	map_url: 'mapdata.json',
+};
+
+export default {
+	name: "api", // 加载地图信息
+	loadMapData:function(callback){
+		axios({
+			method: 'get',
+			url: config.baseURL + server_urls.map_url,
+			headers: {
+				'Content-Type': 'application/json; charset=utf-8',
+			},
+		}).then(response => {
+			callback && callback(response);
+		})
+	}
+}

vue/public/config.js

@@ -0,0 +1,216 @@
+export default {
+	colors: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)", '#9689FF', '#FF8A26', '#5FB878', '#73c0de',
+		'#4ED33C',
+		'#FF5252', '#01AAED', '#FF5722',
+		'#6648FF', '#2A8BFD', '#BAFF7F', '#00FAC1', '#00CAFF', '#FDE056', 'rgba(245, 166, 35, 1)',
+		'#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'
+	],
+	bmapstyle: {
+		styleJson: [{
+				featureType: "water",
+				elementType: "all",
+				stylers: {
+					color: "#021019"
+				}
+			},
+			{
+				featureType: "highway",
+				elementType: "geometry.fill",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "highway",
+				elementType: "geometry.stroke",
+				stylers: {
+					color: "#147a92"
+				}
+			},
+			{
+				featureType: "arterial",
+				elementType: "geometry.fill",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "arterial",
+				elementType: "geometry.stroke",
+				stylers: {
+					color: "#0b3d51"
+				}
+			},
+			{
+				featureType: "local",
+				elementType: "geometry",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "land",
+				elementType: "all",
+				stylers: {
+					color: "#08304b"
+				}
+			},
+			{
+				featureType: "railway",
+				elementType: "geometry.fill",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "railway",
+				elementType: "geometry.stroke",
+				stylers: {
+					color: "#08304b"
+				}
+			},
+			{
+				featureType: "subway",
+				elementType: "geometry",
+				stylers: {
+					lightness: -70
+				}
+			},
+			{
+				featureType: "building",
+				elementType: "geometry.fill",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "all",
+				elementType: "labels.text.fill",
+				stylers: {
+					color: "#857f7f"
+				}
+			},
+			{
+				featureType: "all",
+				elementType: "labels.text.stroke",
+				stylers: {
+					color: "#000000"
+				}
+			},
+			{
+				featureType: "building",
+				elementType: "geometry",
+				stylers: {
+					color: "#022338"
+				}
+			},
+			{
+				featureType: "green",
+				elementType: "geometry",
+				stylers: {
+					color: "#062032"
+				}
+			},
+			{
+				featureType: "boundary",
+				elementType: "all",
+				stylers: {
+					color: "#1e1c1c"
+				}
+			},
+			{
+				featureType: "manmade",
+				elementType: "geometry",
+				stylers: {
+					color: "#022338"
+				}
+			},
+			{
+				featureType: "poi",
+				elementType: "all",
+				stylers: {
+					visibility: "off"
+				}
+			},
+			{
+				featureType: "all",
+				elementType: "labels.icon",
+				stylers: {
+					visibility: "off"
+				}
+			},
+			{
+				featureType: "all",
+				elementType: "labels.text.fill",
+				stylers: {
+					color: "#2da0c6",
+					visibility: "on"
+				}
+			},
+			{
+				featureType: "background",
+				elementType: "all",
+				stylers: {
+					color: "#200000"
+				}
+			}
+		]
+	},
+	defaultconfig: [{
+		key: 'theme',
+		value: 'dark',
+		label: '界面主题',
+		type: 'select',
+		required: true,
+		options: [{
+			value: 'dark',
+			label: '深色主题'
+		}, {
+			value: 'red',
+			label: '紅色主题'
+		}]
+	}, {
+		key: 'refreshtime',
+		value: 10 * 1000,
+		label: '刷新时间',
+		type: 'number',
+		required: true
+	}, {
+		key: 'turntime',
+		value: 20 * 1000,
+		label: '切换时间',
+		type: 'select',
+		required: true,
+		options: [{
+			value: 20 * 1000,
+			label: '20秒'
+		}, {
+			value: 60 * 1000,
+			label: '1分钟'
+		}, {
+			value: 2 * 60 * 1000,
+			label: '2分钟'
+		}, {
+			value: 5 * 60 * 1000,
+			label: '5分钟'
+		}]
+	}, {
+		key: 'serverurl',
+		value: '/',
+		label: '接口地址',
+		type: 'text',
+		required: true
+	}],
+	/**
+	 * 获取系统配置
+	 */
+	getConfig: function() {
+		var config = localStorage.getItem("config");
+		if (!config) {
+			config = this.defaultconfig;
+		} else {
+			config = JSON.parse(config);
+		}
+		return config;
+	}
+}

vue/public/utils.js

@@ -0,0 +1,172 @@
+import {
+	ElMessage
+} from 'element-plus'
+import {
+	ElMessageBox
+} from 'element-plus'
+
+export default {
+	name: "utils",
+	/**
+	 * 保存界面配置参数
+	 * @param {Object} config
+	 */
+	saveConfig: function(config) {
+		localStorage.setItem("config", JSON.stringify(config));
+	},
+	showerror: function(msg) {
+		ElMessage.error(msg);
+	},
+	showconfirm: function(msg) {
+		ElMessageBox.confirm(
+				msg,
+				'提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning',
+				}
+			)
+			.then(() => {
+				ElMessage({
+					type: 'success',
+					message: '退出成功',
+				})
+			})
+			.catch(() => {})
+	},
+	/**
+	 * 创建图表标题
+	 * @param {Object} title
+	 */
+	createChartTitle: function(title) {
+		return {
+			text: title,
+			textStyle: {
+				color: "#fff",
+				fontWeight: 'normal'
+			},
+			x: 'center',
+			y: '10'
+		}
+	},
+	/**
+	 * 创建图表背景
+	 * @param {Object} title
+	 */
+	createChartGaid: function(left, right, top, bottom) {
+		return {
+			left: left ? left : '30',
+			right: right ? right : '10',
+			top: top ? top : '50px',
+			bottom: bottom ? bottom : '40'
+		}
+	},
+	/**
+	 * 创建图表背景
+	 * @param {Object} title
+	 */
+	createChartBaseOption: function(title, left, right, top, bottom, categorys) {
+		return {
+			title: this.createChartTitle(title),
+			tooltip: {
+				show: true,
+				trigger: 'axis'
+			},
+			grid: this.createChartGaid(left, right, top, bottom),
+			xAxis: {
+				type: 'category',
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: this.getChartXColor()
+					}
+				},
+				axisLabel: {
+					color: this.getChartXTextColor()
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false,
+				data: categorys
+			},
+			yAxis: {
+				type: 'value',
+				axisLabel: {
+					color: this.getChartYTextColor(),
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: this.getChartXColor()
+					}
+				},
+				splitLine: {
+					lineStyle: {
+						color: this.getChartYColor(),
+						type: 'dashed'
+					},
+				}
+			}
+		}
+	},
+	/**
+	 * 获取x轴颜色
+	 * @param {Object} title
+	 */
+	getChartXColor: function() {
+		// return '#85C1D9'
+		return '#00FAC166'
+	},
+	/**
+	 * 获取x轴文本颜色
+	 * @param {Object} title
+	 */
+	getChartXTextColor: function() {
+		// return '#8BC4F2'
+		// return '#F56C6Cbb'
+		return '#ffffffdd'
+	},
+	/**
+	 * 获取y轴颜色
+	 * @param {Object} title
+	 */
+	getChartYColor: function() {
+		// return '#355C84'
+		return '#00FAC166'
+	},
+	/**
+	 * 获取y轴文本颜色
+	 * @param {Object} title
+	 */
+	getChartYTextColor: function() {
+		// return '#8BC4F2'
+		// return '#F56C6Cbb'
+		return '#ffffffdd'
+	}
+}
+
+Date.prototype.format = function(fmt) {
+	var o = {
+		"M+": this.getMonth() + 1, //月份 
+		"d+": this.getDate(), //日 
+		"h+": this.getHours(), //小时 
+		"m+": this.getMinutes(), //分 
+		"s+": this.getSeconds(), //秒 
+		"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
+		"S": this.getMilliseconds() //毫秒 
+	};
+	if (/(y+)/.test(fmt)) {
+		fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+	}
+	for (var k in o) {
+		if (new RegExp("(" + k + ")").test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
+				.length)));
+		}
+	}
+	return fmt;
+}

vue/src/App.vue

@@ -3,3 +3,10 @@
     <router-view/>
   </div>
 </template>
+
+<script>
+
+export default {
+
+}
+</script>

vue/src/main.js

@@ -1,18 +1,20 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from '../src/router/index'
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+// import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/css/global.css'
 import '@/assets/css/theme/index.css'
 import request from "@/utils/request";
 import * as echarts from "echarts";
-Vue.config.productionTip = false
 
+// import 'element-plus/dist/index.css'
+
+Vue.config.productionTip = false
+//
 Vue.prototype.$echarts= echarts
 Vue.prototype.$request = request
 Vue.prototype.$baseUrl = process.env.VUE_APP_BASEURL
-
 Vue.use(ElementUI, {size: "small"})
 new Vue({
     router,

vue/src/router/index.js

@@ -68,6 +68,33 @@ const routes = [
   { path: '/register', name: 'Register', meta: { name: '注册' }, component: () => import('../views/Register.vue') },
   { path: '*', name: 'NotFound', meta: { name: '无法访问' }, component: () => import('../views/404.vue') },
   { path: '/testEcharts' , name:'testEcharts' ,meta:{name:"测试echarts"} ,component:()=>import('../views/manager/Shop/echarts.vue')},
+  // {
+  //   path:'/visibleView',
+  //   redirect: '/visibleView/index',
+  //   name:'可视化界面',
+  //   children:[
+  //     {
+  //       path: '/visibleView/index',
+  //       component: import('../views/VisibleView/index.vue')
+  //     },
+  //     {
+  //       path: '/visibleView/crop',
+  //       component: import('../views/VisibleView/crop.vue')
+  //     },
+  //     {
+  //       path: '/visibleView/environment',
+  //       component: import('../views/VisibleView/environment.vue')
+  //     },
+  //     {
+  //       path: '/visibleView/device',
+  //       component: import('../views/VisibleView/device.vue')
+  //     },
+  //     {
+  //       path: '/visibleView/market',
+  //       component: import('../views/VisibleView/market.vue')
+  //     }
+  //   ]
+  // }
 ]
 
 const router = new VueRouter({

vue/src/views/VisibleView/crop.vue

@@ -0,0 +1,521 @@
+<template>
+	<el-row>
+		<el-col :span="6">
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">基本情况</div>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<football />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{size}}</span>
+									<span style="font-size:20px;margin-left:5px">㎡</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">种植面积</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<user />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{count}}</span>
+									<span style="font-size:20px;margin-left:5px">户</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">农户数量</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<cellphone />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{devicecount}}</span>
+									<span style="font-size:20px;margin-left:5px">个</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">注册设备</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 55)/2+'px'}">
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<SetUp />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{category}}</span>
+									<span style="font-size:20px;margin-left:5px">种</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">作物种类</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<money />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{cost}}</span>
+									<span style="font-size:20px;margin-left:5px">元</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">作物销量</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<basketball />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{deviceonlinecount}}</span>
+									<span style="font-size:20px;margin-left:5px">个</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">活跃设备</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}">
+				<div class="itemtitle" style="">视频监控</div>
+				<div style="padding:10px">
+					<div>
+						<div v-for="(item,index) in videos" class="vidoeitem" :style="{height:(((height-80)/3 - 10 - 35 - 20)/2)+'px'}">
+							<div class="flex" style="height:30px;line-height: 30px;">
+								<div class="flex_item" style="font-size:16px">
+									{{item.name}}
+								</div>
+								<div class="flex_item" style="font-size:12px;text-align: right;padding-right:10px">
+									<span v-if="item.status == '1'" style="color:#00FAC1">监测正常</span>
+									<span v-if="item.status != '1'" style="color:#FF5722">监测异常</span>
+								</div>
+							</div>
+							<div style="position: relative;width:100%;margin: 0 auto;">
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;top:0px;width:20px;height:2px;:"></div>
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;top:0px;width:2px;height:20px;"></div>
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;top:0px;width:20px;height:2px;"></div>
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;top:0px;width:2px;height:20px;"></div>
+								
+								<div class="inner" :style="{height:(((height-80)/3 - 10 - 35 - 20 - 30 - 30)/2)+'px'}">
+									<img :src="item.url" style="height:100%;width:105%"/>
+								</div>
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;bottom:0px;width:20px;height:2px;"></div>
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;left:0px;bottom:0px;width:2px;height:20px;"></div>
+								
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;bottom:0px;width:20px;height:2px;"></div>
+								<div :style="{background:item.status == '1'?'#00FAC1':'#FF5722'}" style="position: absolute;right:10px;bottom:0px;width:2px;height:20px;"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">作物种类</div>
+				<!-- 展示字符云，各种作物占比 -->
+				<v-chart ref="cropchart" :style="{height:(((height-80)/3 - 20)+'px')}" :option="cropoption" />
+			</div>
+		</el-col>
+		<el-col :span="18" >
+			<div style="padding:10px;position: relative;">
+				<!-- 展示可搜索的地图 -->
+				<div id="mapchart" style="position: relative;" :style="{height:(height-80 - 20)+'px'}"></div>
+				
+				<div style="position: absolute;left:0px;top:0px;width:20px;height:2px;background:#FF5722"></div>
+				<div style="position: absolute;left:0px;top:0px;width:2px;height:20px;background:#FF5722"></div>
+				
+				<div style="position: absolute;right:10px;top:0px;width:20px;height:2px;background:#FF5722"></div>
+				<div style="position: absolute;right:10px;top:0px;width:2px;height:20px;background:#FF5722"></div>
+				
+				<div style="position: absolute;left:0px;bottom:0px;width:20px;height:2px;background:#FF5722"></div>
+				<div style="position: absolute;left:0px;bottom:0px;width:2px;height:20px;background:#FF5722"></div>
+				
+				<div style="position: absolute;right:10px;bottom:0px;width:20px;height:2px;background:#FF5722"></div>
+				<div style="position: absolute;right:10px;bottom:0px;width:2px;height:20px;background:#FF5722"></div>
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script>
+	import $ from 'jquery'
+	import config from '/public/config.js'
+	import utils from '/public/utils.js'
+	import api from '/public/api.js'
+	import VChart, {
+		THEME_KEY
+	} from "vue-echarts";
+
+	import * as echarts from 'echarts';
+	import 'echarts-extension-amap';
+
+	import 'echarts-wordcloud';
+		
+	export default{
+		components: {
+			VChart
+		},
+		provide: {
+			[THEME_KEY]: "dark"
+		},
+		data(){
+			 return{
+				height: $(window).height(),
+				size: (Math.random(100) * 1000).toFixed(0),
+				count: (Math.random(100) * 1000).toFixed(0),
+				category: (Math.random(100) * 1000).toFixed(0),
+				cost: (Math.random(100) * 1000).toFixed(0),
+				devicecount: (Math.random(100) * 1000).toFixed(0),
+				deviceonlinecount: (Math.random(100) * 100).toFixed(0),
+				videos:[{
+					id:1,
+					name:'摄像001',
+					url:'/src/assets111.webp',
+					status:'1'
+				},{
+					id:2,
+					name:'摄像002',
+					url:'/src/assets/imgs/222.webp',
+					status:'2'
+				},{
+					id:3,
+					name:'摄像003',
+					url:'/src/assets/imgs/333.webp',
+					status:'1'
+				},{
+					id:4,
+					name:'摄像004',
+					url:'/src/assets/imgs/444.webp',
+					status:'1'
+				}],
+				categorys:['玉米', '水稻', '小麦', '大豆', '青稞', '蔬菜', '水果', '花卉', '薯类', '药材', '蚕豆', '油籽', '蔓青', '大芥', '花生',
+					'胡麻', '大麻', '向日葵', '梨', '苹果', '桃', '杏', '核桃', '李子', '樱桃', '草莓', '酸梨', '野杏', '毛桃', '苞瑙', '山樱桃',
+					'沙棘', '草莓'
+				],
+				cropoption: {},
+				charts: {},
+				timer: null,
+			 }
+		},
+		mounted:function(){
+			var that = this;
+			$(window).resize(function() {
+				this.height = $(window).height() - this.titleheight;
+			
+				for (var key in that.charts) {
+					that.charts[key].resize();
+				}
+				that.$refs['cropchart'].resize();
+			});
+			
+			
+			this.loadData();
+			
+			//开始定时刷新报表数据
+			this.startRefreshChart();
+		},
+		unmounted:function(){
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+		methods: {
+			/**
+			 * 定时刷新报表数据
+			 */
+			startRefreshChart: function() {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				var that = this;
+			
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
+				var refreshtime = 60 * 1000;
+				config.getConfig().forEach(function(item, index) {
+					if (item.key == 'refreshtime') {
+						refreshtime = item.value;
+					}
+				});
+			
+				this.timer = setInterval(function() {
+					that.size = (Math.random(100) * 1000).toFixed(0);
+					that.count = (Math.random(100) * 1000).toFixed(0);
+					that.category = (Math.random(100) * 1000).toFixed(0);
+					that.cost = (Math.random(100) * 1000).toFixed(0);
+					that.devicecount = (Math.random(100) * 1000).toFixed(0);
+					that.deviceonlinecount = (Math.random(100) * 100).toFixed(0);
+					//------------------------------
+					that.cropoption.series[0].data = [];
+					that.categorys.forEach(function(item, index) {
+						that.cropoption.series[0].data.push({
+							name: item,
+							value: (Math.random(100) * 1000).toFixed(0),
+							textStyle: {
+								color: config.colors[index % config.colors.length]
+							}
+						});
+					})
+				}, refreshtime);
+			},
+			loadData: function() {
+				var that = this;
+				api.loadMapData(function(res) {
+					if (!res || res.status != 200) {
+						utils.showerror("数据加载失败！");
+						return;
+					}
+					that.initMapChart(res);
+				});
+				this.cropoption = this.initcropoption();
+			},
+			initcropoption: function() {
+				var data = [];
+				this.categorys.forEach(function(item, index) {
+					data.push({
+						name: item,
+						value: (Math.random(100) * 1000).toFixed(0),
+						textStyle: {
+							color: config.colors[index % config.colors.length]
+						}
+					});
+				})
+				return {
+					backgroundColor:'#000000',
+					tooltip: {
+						show: true,
+						position: 'top',
+						textStyle: {
+							fontSize: 14
+						}
+					},
+					grid: {
+						top: '40px'
+					},
+					series: [{
+						type: "wordCloud",
+						// 网格大小，各项之间间距
+						gridSize: 20,
+						// 形状 circle 圆，cardioid  心， diamond 菱形，
+						// triangle-forward 、triangle 三角，star五角星
+						shape: 'circle',
+						// 字体大小范围
+						sizeRange: [12, 30],
+						// 文字旋转角度范围
+						rotationRange: [0, 90],
+						// 旋转步值
+						rotationStep: 90,
+						// 自定义图形
+						// maskImage: maskImage,
+						left: 'center',
+						top: '40px',
+						right: null,
+						bottom: null,
+						// 画布宽
+						width: '90%',
+						// 画布高
+						height: '80%',
+						// 是否渲染超出画布的文字
+						drawOutOfBound: false,
+						data: data
+					}]
+				};
+			},
+			initMapChart: function(res) {
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
+				var values = [];
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
+					values.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
+						.toFixed(0));
+				}
+			
+				var option = {
+					geoCoordMap: res.data.geoCoordMap,
+					title: utils.createChartTitle('产区概览'),
+					amap: {
+						rotateEnable: true,
+						pitchEnable: true,
+						pitch: 45,
+						// rotation: -45,
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
+						viewMode: '3D',
+						// 高德地图支持的初始化地图配置
+						// 高德地图初始中心经纬度
+						center: [116.436561, 39.897346],
+						// 高德地图初始缩放级别
+						zoom: 9,
+						// 是否开启resize
+						resizeEnable: true,
+						// 自定义地图样式主题
+						mapStyle: 'amap://styles/darkblue',
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
+						renderOnMoving: true,
+						// ECharts 图层的 zIndex 默认 2000
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
+						echartsLayerZIndex: 2019,
+						// 设置 ECharts 图层是否可交互 默认为 true
+						// 设置为 false 可实现高德地图自身图层交互
+						// 此配置项从 v1.9.0 起开始支持
+						echartsLayerInteractive: true,
+						// 是否启用大数据模式 默认为 false
+						// 此配置项从 v1.9.0 起开始支持
+						layers: [new AMap.TileLayer.Satellite()],
+						largeMode: false
+						// 说明：如果想要添加卫星、路网等图层
+						// 暂时先不要使用layers配置，因为存在Bug
+						// 建议使用amap.add的方式，使用方式参见最下方代码
+					},
+					series: [{
+						type: 'effectScatter',
+						// 使用百度地图坐标系
+						coordinateSystem: 'amap',
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+						// symbol: 'image://http://localhost:3000/src/assets/imgs/video.png',
+						symbol: 'pin',
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+						symbolSize: [20, 20],
+						itemStyle: {
+							normal: {
+								color: '#FF5252', //标志颜色
+							}
+						},
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
+						data: values,
+						rippleEffect: {
+							scale: 6,
+							brushType: "stroke"
+						},
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
+					}]
+				}
+				// 使用刚指定的配置项和数据显示图表。
+				mapchart.setOption(option);
+			
+				// 获取 ECharts 高德地图组件
+				var amapComponent = mapchart.getModel().getComponent('amap');
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
+				var amap = amapComponent.getAMap();
+				// 添加控件
+				amap.addControl(new AMap.Scale());
+				amap.addControl(new AMap.ToolBar());
+				amap.addControl(new AMap.ControlBar({
+					position: {
+						left: '10px',
+						top: '10px'
+					},
+					showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
+				}));
+				amap.addControl(new AMap.MapType({
+					defaultType: 1,
+					position: {
+						right: '30px',
+						top: '10px'
+					}
+				}));
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
+				amapComponent.setEChartsLayerInteractive(false);
+				
+				var disProvince = new AMap.DistrictLayer.Province({
+					zIndex: 1000,
+					adcode: [110000],
+					depth: 2,
+					styles: {
+						'fill': function(properties) {
+							// properties为可用于做样式映射的字段，包含
+							// NAME_CHN:中文名称
+							// adcode_pro
+							// adcode_cit
+							// adcode
+							// console.log(properties)
+							var adcode = properties.adcode;
+							// var colors = {};
+							// if (!colors[adcode]) {
+							// 	var gb = Math.random() * 155 + 50;
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
+							// }
+							// return colors[adcode];
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
+								'#2aa7ee', '#0270f2', '#488cf7'
+							];
+							return colors[adcode % colors.length] + 'aa';
+			
+							// return 'red';
+						},
+						'province-stroke': 'cornflowerblue',
+						'city-stroke': 'white', // 中国地级市边界
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
+					}
+				});
+				disProvince.setMap(amap);
+			
+				this.charts['mapchart'] = mapchart;
+				
+				// setTimeout(function(){
+				// 	amap.setZoom(10,false,30000);
+				// 	amap.setPitch(45,false,30000);
+				// },1000);
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.chart {
+		padding: 10px;
+		overflow: hidden;
+	}
+	
+	.itemtitle {
+		background: linear-gradient(to right, #40a55f, #000, #000);
+		height: 35px;
+		line-height: 35px;
+		padding-left: 10px;
+	}
+	.vidoeitem{
+		width:50%;display: inline-block;
+		position: relative;
+	}
+	.inner{
+		width:90%;
+	}
+</style>

vue/src/views/VisibleView/device.vue

@@ -0,0 +1,595 @@
+<template>
+	<!-- 设备种类
+	设备状态
+	设备告警
+	设备分布 -->
+	<el-row>
+		<el-col :span="18">
+			<div style="padding:10px;position: relative;">
+				<!-- 展示可搜索的地图 -->
+				<div id="mapchart" style="position: relative;" :style="{height:(height-80 - 20)+'px'}"></div>
+			</div>
+		</el-col>
+		<el-col :span="6">
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">设备种类</div>
+				<v-chart ref="categorychart" :style="{height:(((height-80)/3 - 20 - 35)+'px')}" :option="categorychart" />
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">设备状态</div>
+				<v-chart ref="statuschart" :style="{height:(((height-80)/3 - 20 - 35)+'px')}" :option="statuschart" />
+			</div>
+			<div class="chart" :style="{height:((height-80)/3+15)+'px'}">
+				<div class="itemtitle" style="">设备告警</div>
+				<div :style="{height:(((height-80)/3)+'px')}">
+					<div v-for="(item,index) in alerts" class="alertitem" >
+						<div class="innner flex">
+							<div><el-icon size="22" style="position: relative;top:2px;color:#FF5722"><warning /></el-icon></div>
+							<div class="flex_item title">{{item.title}}</div>
+							<div style="width:200px;font-size:12px;text-align: right;padding-right: 15px;">时间：{{item.date}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+
+<script>
+	import $ from 'jquery'
+	import config from '/public/config.js'
+	import utils from '/public/utils.js'
+	import api from '/public/api.js'
+	import VChart, {
+		THEME_KEY
+	} from "vue-echarts";
+
+	import * as echarts from 'echarts';
+	import 'echarts-extension-amap';
+
+	import 'echarts-wordcloud';
+		
+	export default{
+		components: {
+			VChart
+		},
+		provide: {
+			[THEME_KEY]: "dark"
+		},
+		data(){
+			 return{
+				height: $(window).height(),
+				categorychart: {},
+				statuschart: {},
+				charts: {},
+				timer: null,
+				alerts:[{
+					id:1,
+					title:'设备0011离线了',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备002电量低',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备003型号差',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备005被拆卸',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备006离线了',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备0011离线了',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备0011离线了',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备0011离线了',
+					date:'2022-04-10 23:12:11'
+				},{
+					id:1,
+					title:'设备0011离线了',
+					date:'2022-04-10 23:12:11'
+				}]
+			 }
+		},
+		mounted:function(){
+			var that = this;
+			$(window).resize(function() {
+				this.height = $(window).height() - this.titleheight;
+			
+				for (var key in that.charts) {
+					that.charts[key].resize();
+				}
+				that.$refs['categorychart'].resize();
+				that.$refs['statuschart'].resize();
+			});
+			
+			this.loadData();
+			
+			//开始定时刷新报表数据
+			this.startRefreshChart();
+		},
+		unmounted:function(){
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+		methods: {
+			/**
+			 * 定时刷新报表数据
+			 */
+			startRefreshChart: function() {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				var that = this;
+			
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
+				var refreshtime = 60 * 1000;
+				config.getConfig().forEach(function(item, index) {
+					if (item.key == 'refreshtime') {
+						refreshtime = item.value;
+					}
+				});
+			
+				this.timer = setInterval(function() {
+					let echartData = [{
+						name: "监控摄像头",
+						value: (Math.random(100) * 100).toFixed(0)
+					},
+					{
+						name: "雨水采集器",
+						value: (Math.random(100) * 100).toFixed(0)
+					},
+					{
+						name: "土壤湿度检测仪",
+						value: (Math.random(100) * 100).toFixed(0)
+					},
+					{
+						name: "温度检测器",
+						value: (Math.random(100) * 100).toFixed(0)
+					},
+					{
+						name: "土壤元素检测",
+						value: (Math.random(100) * 100).toFixed(0)
+					},
+					{
+						name: "空气湿度检测仪",
+						value: (Math.random(100) * 100).toFixed(0)
+					}];
+					let total = echartData.reduce((a, b) => {
+					    return a + b.value * 1
+					}, 0);
+					that.categorychart.title[0].text = '{name|总量}\n{val|' + total + '}';
+					that.categorychart.series[0].data = echartData;
+					
+					that.statuschart.series[0].data[0].value = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
+				}, refreshtime);
+			},
+			loadData: function() {
+				var that = this;
+				api.loadMapData(function(res) {
+					if (!res || res.status != 200) {
+						utils.showerror("数据加载失败！");
+						return;
+					}
+					that.initMapChart(res);
+				});
+				
+				this.categorychart = this.initcategorychart();
+				this.statuschart = this.initstatuschart();
+			},
+			initcategorychart: function(res) {
+				let bgColor = '#001037';
+				let title = '总量';
+				let color = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7','#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'];
+				let echartData = [{
+					name: "监控摄像头",
+					value: (Math.random(100) * 100).toFixed(0)
+				},
+				{
+					name: "雨水采集器",
+					value: (Math.random(100) * 100).toFixed(0)
+				},
+				{
+					name: "土壤湿度检测仪",
+					value: (Math.random(100) * 100).toFixed(0)
+				},
+				{
+					name: "温度检测器",
+					value: (Math.random(100) * 100).toFixed(0)
+				},
+				{
+					name: "土壤元素检测",
+					value: (Math.random(100) * 100).toFixed(0)
+				},
+				{
+					name: "空气湿度检测仪",
+					value: (Math.random(100) * 100).toFixed(0)
+				}];
+				let total = echartData.reduce((a, b) => {
+				    return a + b.value * 1
+				}, 0);
+				return {
+					backgroundColor: '#000000',//此处背景色需要共主题处获取
+					color: color,
+					title: [{
+						text: '{name|' + title + '}\n{val|' + total + '}',
+						top: 'center',
+						left: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									fontSize: 12,
+									fontWeight: 'normal',
+									color: '#fefefe',
+									padding: [10, 0]
+								},
+								val: {
+									fontSize: 16,
+									fontWeight: 'bolder',
+									color: '#fefefe',
+								}
+							}
+						}
+					}],
+					series: [{
+						type: 'pie',
+						roseType: 'radius',
+						radius: ['25%', '60%'],
+						center: ['50%', '50%'],
+						data: echartData,
+						hoverAnimation: false,
+						itemStyle: {
+							normal: {
+								borderColor: bgColor,
+								borderWidth: 1
+							}
+						},
+						labelLine: {
+							normal: {
+								length: 10,
+								length2: 20
+							}
+						},
+						label: {
+							normal: {
+								formatter: params => {
+									return (
+										'{icon|●}{name|' + params.name + '}\n{value|' +
+										params.value + '}'
+									);
+								},
+								rich: {
+									icon: {
+										fontSize: 12,
+										color: 'inherit'
+									},
+									name: {
+										fontSize: 12,
+										padding: [0, 0, 0, 10],
+										color: '#fefefe'
+									},
+									value: {
+										fontSize: 12,
+										fontWeight: 'bolder',
+										padding: [10, 0, 0, 20],
+										color: 'inherit'
+										// color: '#333333'
+									}
+								}
+							}
+						},
+					}]
+				};
+			},
+			initstatuschart: function(res) {
+				var indicator = [{
+					text: '正常设备',
+					max: 100,
+				},
+				{
+					text: '故障设备',
+					max: 100
+				},
+				{
+					text: '报警设备',
+					max: 100
+				},
+				{
+					text: '离线设备',
+					max: 100,
+					//  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
+				}];
+				var dataArr = [
+				    {
+				        value: [24, 35, 22, 33, 20, 16],
+				        itemStyle: {
+				            normal: {
+				                lineStyle: {
+									width:1,
+				                    color: '#FF8A26',
+				                },
+				                shadowColor: '#FF8A26',
+				                shadowBlur: 10,
+				            },
+				        },
+				        areaStyle: {
+							normal: { // 单项区域填充样式
+								color: {
+									type: 'radial',
+									x: 0.5, //右
+									y: 0.5, //下
+									r: 1,
+									colorStops: [{
+										offset: 1,
+										color: '#FF8A26'
+									}, {
+										offset: 0,
+										color: 'rgba(0,0,0,0)'
+									}],
+									globalCoord: false
+								},
+								opacity: 0.8 // 区域透明度
+							}
+						}
+				    }
+				];
+				var colorArr = ['#FF8A26']; //颜色
+				return {
+				    backgroundColor: '#000000',
+				    color: colorArr,
+				    radar: {
+				        shape: 'polygon',
+				        name: {
+				            textStyle: {
+				                color: '#fff',
+				                fontSize: 14
+				            },
+				        },
+				        label:{
+							distance:5,  
+				        },
+						radius:'60%',
+				        indicator: indicator,
+				        splitNumber:3,
+				        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+				            show: true,
+				            areaStyle: { // 分隔区域的样式设置。
+				                color: ['rgba(24,60,108,.5)', 'rgba(15,36,80,.5)','rgba(12,25,59,.5)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+				            }
+				        },
+				        axisLine: { //指向外圈文本的分隔线样式
+				            lineStyle: {
+				                color: utils.getChartXColor()
+				            }
+				        },
+				        splitLine: {
+				            lineStyle: {
+				                color: utils.getChartXColor(), // 分隔线颜色
+				                width: 1, // 分隔线线宽
+				            }
+				        },
+				    },
+				    series: [{
+				        type: 'radar',
+				        symbolSize: 5,
+				        data: dataArr
+				    }]
+				};
+			},
+			initMapChart: function(res) {
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
+				var values1 = [];
+				var values2 = [];
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
+					if(i%2 == 0){
+						values1.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
+							.toFixed(0));
+					}else{
+						values2.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
+							.toFixed(0));
+					}
+				}
+			
+				var option = {
+					geoCoordMap: res.data.geoCoordMap,
+					title: utils.createChartTitle('设备分布概览'),
+					legend:{
+						bottom:'0',
+						x:'center',
+						data:['正常设备','异常设备'],
+						textStyle:{
+							color:'#fff'
+						}
+					},
+					amap: {
+						rotateEnable: true,
+						pitchEnable: true,
+						pitch: 45,
+						// rotation: -45,
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
+						viewMode: '3D',
+						// 高德地图支持的初始化地图配置
+						// 高德地图初始中心经纬度
+						center: [116.436561, 39.897346],
+						// 高德地图初始缩放级别
+						zoom: 9,
+						// 是否开启resize
+						resizeEnable: true,
+						// 自定义地图样式主题
+						mapStyle: 'amap://styles/darkblue',
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
+						renderOnMoving: true,
+						// ECharts 图层的 zIndex 默认 2000
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
+						echartsLayerZIndex: 2019,
+						// 设置 ECharts 图层是否可交互 默认为 true
+						// 设置为 false 可实现高德地图自身图层交互
+						// 此配置项从 v1.9.0 起开始支持
+						echartsLayerInteractive: true,
+						// 是否启用大数据模式 默认为 false
+						// 此配置项从 v1.9.0 起开始支持
+						layers: [new AMap.TileLayer.Satellite()],
+						largeMode: false
+						// 说明：如果想要添加卫星、路网等图层
+						// 暂时先不要使用layers配置，因为存在Bug
+						// 建议使用amap.add的方式，使用方式参见最下方代码
+					},
+					series: [{
+						name:'正常设备',
+						type: 'effectScatter',
+						// 使用百度地图坐标系
+						coordinateSystem: 'amap',
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
+						symbol: 'pin',
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+						symbolSize: [20, 20],
+						itemStyle: {
+							normal: {
+								color: '#FF5252', //标志颜色
+							}
+						},
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
+						data: values1,
+						rippleEffect: {
+							scale: 6,
+							brushType: "stroke"
+						},
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
+					},{
+						name:'异常设备',
+						type: 'effectScatter',
+						// 使用百度地图坐标系
+						coordinateSystem: 'amap',
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
+						symbol: 'pin',
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+						symbolSize: [20, 20],
+						itemStyle: {
+							normal: {
+								color: '#00FAC1', //标志颜色
+							}
+						},
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
+						data: values2,
+						rippleEffect: {
+							scale: 6,
+							brushType: "stroke"
+						},
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
+					}]
+				}
+				// 使用刚指定的配置项和数据显示图表。
+				mapchart.setOption(option);
+			
+				// 获取 ECharts 高德地图组件
+				var amapComponent = mapchart.getModel().getComponent('amap');
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
+				var amap = amapComponent.getAMap();
+				// 添加控件
+				amap.addControl(new AMap.Scale());
+				amap.addControl(new AMap.ToolBar());
+				amap.addControl(new AMap.ControlBar({
+					position: {
+						left: '10px',
+						top: '10px'
+					},
+					showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
+				}));
+				// amap.addControl(new AMap.MapType({
+				// 	defaultType: 1,
+				// 	position: {
+				// 		right: '30px',
+				// 		top: '10px'
+				// 	}
+				// }));
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
+				amapComponent.setEChartsLayerInteractive(false);
+				
+				var disProvince = new AMap.DistrictLayer.Province({
+					zIndex: 1000,
+					adcode: [110000],
+					depth: 2,
+					styles: {
+						'fill': function(properties) {
+							// properties为可用于做样式映射的字段，包含
+							// NAME_CHN:中文名称
+							// adcode_pro
+							// adcode_cit
+							// adcode
+							// console.log(properties)
+							var adcode = properties.adcode;
+							// var colors = {};
+							// if (!colors[adcode]) {
+							// 	var gb = Math.random() * 155 + 50;
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
+							// }
+							// return colors[adcode];
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
+								'#2aa7ee', '#0270f2', '#488cf7'
+							];
+							return colors[adcode % colors.length] + 'aa';
+			
+							// return 'red';
+						},
+						'province-stroke': 'cornflowerblue',
+						'city-stroke': 'white', // 中国地级市边界
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
+					}
+				});
+				disProvince.setMap(amap);
+			
+				this.charts['mapchart'] = mapchart;
+				
+				// setTimeout(function(){
+				// 	amap.setZoom(9,false,30000);
+				// 	amap.setPitch(45,false,30000);
+				// },1000);
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.chart {
+		padding: 10px;
+		overflow: hidden;
+	}
+	
+	.itemtitle {
+		background: linear-gradient(to right, #40a55f, #000, #000);
+		height: 35px;
+		line-height: 35px;
+		padding-left: 10px;
+	}
+	.alertitem{
+		line-height: 30px;
+		height: 30px;
+		font-size: 14px;
+		color:#fff;
+		background-color: #FF572233;
+		padding-left: 15px;
+		border-radius: 35px;
+		margin-top: 10px;
+	}
+	.alertitem .title{
+		margin-left: 5px;
+		text-align: left;
+		font-size: 14px;
+	}
+</style>
+

vue/src/views/VisibleView/environment.vue

@@ -0,0 +1,1253 @@
+<template>
+	<!-- 天气相关情况：温度、湿度、降雨量、光照、二氧化碳等 -->
+	<!-- 土壤相关情况：PH值、虫灾情况、土壤盐度、灌溉情况、风向、风速、实时天气情况 -->
+	<el-row>
+		<el-col :span="7">
+			<!-- 实时天气情况 -->
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">实时天气情况</div>
+				<div style="padding:10px;;">
+					<div class="flex" style="height:30px;line-height: 30px;">
+						<div class="flex_item">
+							<el-icon style="position: relative;top:2px">
+								<add-location />
+							</el-icon>
+							<span style="margin-left: 5px;">北京</span>
+						</div>
+						<div class="flex_item" style="text-align: right;color:#999;font-size:12px">高德地图</div>
+					</div>
+					<!-- TODO 此处的尺寸写死不太对，需要自适应 -->
+					<div style="height: 100px;margin-top: 20px" class="flex">
+						<div class="flex_item">
+							<div class="flex" style="line-height:35px;text-align: center;">
+								<div class="flex_item">
+									<div style="font-size:20px;color:#FF5252">{{wendu}}℃</div>
+									<div>温度</div>
+								</div>
+								<div class="name_v_border"></div>
+								<div class="flex_item">
+									<div style="font-size:20px;color:#5FB878">东南</div>
+									<div>风向</div>
+								</div>
+							</div>
+							<div class="name_border"></div>
+							<div class="flex" style="line-height:35px;text-align: center;">
+								<div class="flex_item">
+									<div style="font-size:20px;color:#2A8BFD">{{fensu}}km/h</div>
+									<div>分速</div>
+								</div>
+								<div class="name_v_border"></div>
+								<div class="flex_item">
+									<div style="font-size:20px;color:#4adeca">{{shidu}}rh</div>
+									<div>湿度</div>
+								</div>
+							</div>
+						</div>
+						<div style="width:100px;line-height:30px;">
+							<div style="text-align: center;padding-top: 20px;">
+								<img src="../assets/5.png" style="width:60px" />
+								<div style="font-size: 28px;">晴</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 土地类型分布，旱地、水地、山地 -->
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}">
+				<div class="itemtitle" style="">耕地类型分布</div>
+				<v-chart ref="categorychart" :style="{height:(((height-80)/3 - 30 - 15)+'px')}"
+					:option="categorychart" />
+			</div>
+			<!-- 历史降雨量走势 -->
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
+				<div class="itemtitle" style="">降雨量走势</div>
+				<v-chart ref="yushuichart" :style="{height:(((height-80)/3 - 30 - 15)+'px')}" :option="yushuichart" />
+			</div>
+		</el-col>
+		<el-col :span="10">
+			<!-- 当前光照、湿度、温度等 -->
+			<div class="chart" :style="{height:(height-80 - 20)+'px'}">
+				<div class="itemtitle" style="">光照、湿度、温度、氮磷钾含量</div>
+				<div>
+					<div class="flex">
+						<div class="flex_item">
+							<!-- 土壤温度 -->
+							<v-chart ref="tempchart" :style="{height:((height-80 - 65)/3+'px')}" :option="tempchart" />
+						</div>
+						<div class="flex_item">
+							<!-- 土壤湿度 -->
+							<v-chart ref="shiduchart" :style="{height:((height-80 - 65)/3+'px')}"
+								:option="shiduchart" />
+						</div>
+					</div>
+					<div class="name_border"></div>
+					<div class="flex">
+						<div class="flex_item">
+							<!-- 光照情况 -->
+							<v-chart ref="ligtechart" :style="{height:((height-80 - 65)/3+'px')}"
+								:option="ligtechart" />
+						</div>
+						<div class="flex_item">
+							<!-- 土壤磷含量 -->
+							<v-chart ref="linchart" :style="{height:((height-80 - 65)/3+'px')}" :option="linchart" />
+						</div>
+					</div>
+					<div class="name_border"></div>
+					<div class="flex">
+						<div class="flex_item">
+							<!-- 土壤氮含量 -->
+							<v-chart ref="danchart" :style="{height:((height-80 - 65)/3+'px')}" :option="danchart" />
+						</div>
+						<div class="flex_item">
+							<!-- 土壤钾含量 -->
+							<v-chart ref="jiachart" :style="{height:((height-80 - 65)/3+'px')}" :option="jiachart" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-col>
+		<el-col :span="7">
+			<!-- PH值 -->
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
+				<div class="itemtitle" style="">土壤PH值</div>
+
+				<v-chart ref="phchart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="phchart" />
+			</div>
+			<!-- 土壤盐度 -->
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
+				<div class="itemtitle" style="">土壤盐度</div>
+				<v-chart ref="yanchart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="yanchart" />
+			</div>
+
+			<!-- 灌溉情况 -->
+			<div class="chart" :style="{height:((height-80)/3 - 10)+'px'}" style="padding:0px">
+				<div class="itemtitle" style="">灌溉情况</div>
+				<v-chart ref="guangaichart" :style="{height:(((height-80)/3 - 40 - 15)+'px')}" :option="guangaichart" />
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script>
+	import $ from 'jquery'
+	import config from '/public/config.js'
+	import utils from '/public/utils.js'
+	import api from '/public/api.js'
+	import VChart, {
+		THEME_KEY
+	} from "vue-echarts";
+	import * as echarts from 'echarts';
+
+	export default {
+		components: {
+			VChart
+		},
+		provide: {
+			[THEME_KEY]: "dark"
+		},
+		data() {
+			return {
+				height: $(window).height(),
+				charts: {},
+				timer: null,
+				wendu:(Math.random(100) * 100).toFixed(0),
+				fensu:(Math.random(100) * 100).toFixed(0),
+				shidu:(Math.random(100) * 100).toFixed(0),
+				areas: ['穆家村', '王李村', '曹家湾', '刘家湾', '潘家集', '赵家村'],
+				categorychart: {},
+				yushuichart: {},
+				tempchart: {},
+				shiduchart: {},
+				ligtechart: {},
+				linchart: {},
+				danchart: {},
+				jiachart: {},
+				phchart: {},
+				yanchart: {},
+				guangaichart: {},
+			}
+		},
+		mounted: function() {
+			var that = this;
+			$(window).resize(function() {
+				this.height = $(window).height() - this.titleheight;
+
+				for (var key in that.charts) {
+					that.charts[key].resize();
+				}
+				that.$refs['categorychart'].resize();
+				that.$refs['yushuichart'].resize();
+				that.$refs['tempchart'].resize();
+				that.$refs['shiduchart'].resize();
+				that.$refs['ligtechart'].resize();
+				that.$refs['linchart'].resize();
+				that.$refs['danchart'].resize();
+				that.$refs['jiachart'].resize();
+				that.$refs['phchart'].resize();
+				that.$refs['yanchart'].resize();
+				that.$refs['guangaichart'].resize();
+			});
+
+			this.initcharts();
+
+			//开始定时刷新报表数据
+			this.startRefreshChart();
+		},
+		unmounted: function() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+		methods: {
+			/**
+			 * 定时刷新报表数据
+			 */
+			startRefreshChart: function() {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				var that = this;
+
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
+				var refreshtime = 60 * 1000;
+				config.getConfig().forEach(function(item, index) {
+					if (item.key == 'refreshtime') {
+						refreshtime = item.value;
+					}
+				});
+
+				this.timer = setInterval(function() {
+					that.wendu = (Math.random(100) * 100).toFixed(0);
+					that.fensu = (Math.random(100) * 100).toFixed(0);
+					that.shidu = (Math.random(100) * 100).toFixed(0);
+					//------------
+					// 	this.categorychart = this.initcategorychart();
+					that.categorychart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
+					//------------
+					// 	this.yushuichart = this.inityushuichart();
+					that.yushuichart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.tempchart = this.inittempchart();
+					that.tempchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.shiduchart = this.initshiduchart();
+					that.shiduchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.ligtechart = this.initligtechart();
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+						Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+						.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)];
+					that.ligtechart.series[0].data = values;
+					that.ligtechart.series[1].data = values;
+					//------------
+					// 	this.linchart = this.initlinchart();
+					that.linchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.danchart = this.initdanchart();
+					that.danchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.jiachart = this.initjiachart();
+					that.jiachart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.phchart = this.initphchart();
+					that.phchart.series[0].data = [(Math.random(100) * 14).toFixed(1), (Math.random(100) *
+							14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (
+							Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1)
+					];
+					//------------
+					// 	this.yanchart = this.inityanchart();
+					that.yanchart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(100) *
+							100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+						.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(
+							0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (
+							Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+					];
+					//------------
+					// 	this.guangaichart = this.initguangaichart();
+					that.guangaichart.series[0].data = [(Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0)];
+				}, refreshtime);
+			},
+			initcharts: function() {
+				this.categorychart = this.initcategorychart();
+				this.yushuichart = this.inityushuichart();
+				this.tempchart = this.inittempchart();
+				this.shiduchart = this.initshiduchart();
+				this.ligtechart = this.initligtechart();
+				this.linchart = this.initlinchart();
+				this.danchart = this.initdanchart();
+				this.jiachart = this.initjiachart();
+				this.phchart = this.initphchart();
+				this.yanchart = this.inityanchart();
+				this.guangaichart = this.initguangaichart();
+			},
+			initcategorychart: function() {
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: ['旱地', '水地', '山地', '大棚', '产业园'],
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						type: 'bar',
+						barWidth: '20px',
+						label: {
+							show: true,
+							formatter: '{c}%',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						},
+						itemStyle: {
+							color: function(pama) {
+								var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
+									'#4caff9', '#4adeca', '#0270f2', '#488cf7'
+								];
+								return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: colors[pama.dataIndex % colors.length] + 'ff',
+									},
+									{
+										offset: 1,
+										color: colors[pama.dataIndex % colors.length] + '66',
+									},
+								])
+							},
+							barBorderRadius: 20
+						}
+					}]
+				};
+			},
+			inityushuichart: function() {
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						boundaryGap: false, //
+						data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [120, 200, 150, 80, 70, 110, 140, 140, 140, 140, 140, 140],
+						type: 'line',
+						lineStyle: {
+							normal: {
+								width: 1,
+								color: "#00CAFF", // 线条颜色
+							}
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: '#00CAFF',
+							fontSize: 12,
+							textAlign: 'center',
+						}
+					}]
+				}
+			},
+			inittempchart: function() {
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('温度'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						boundaryGap: false, //
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						type: 'line',
+						lineStyle: {
+							normal: {
+								width: 1,
+								color: "#FF8A26", // 线条颜色
+							}
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						},
+						areaStyle: { //区域填充样式
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#FF8A26ff"
+									},
+									{
+										offset: 1,
+										color: "#FF8A2600"
+									}
+								], false),
+								shadowColor: '#FF8A2688', //阴影颜色
+								shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+							}
+						}
+					}]
+				}
+			},
+			initshiduchart: function() {
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('湿度'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						boundaryGap: false, //
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						type: 'line',
+						lineStyle: {
+							normal: {
+								width: 1,
+								color: "#01AAED", // 线条颜色
+							}
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						},
+						areaStyle: { //区域填充样式
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#01AAEDff"
+									},
+									{
+										offset: 1,
+										color: "#01AAED00"
+									}
+								], false),
+								shadowColor: '#01AAED88', //阴影颜色
+								shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+							}
+						}
+					}]
+				}
+			},
+			initligtechart: function() {
+				var value = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(
+						100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100)
+					.toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)
+				];
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('光照'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: '光照',
+						type: 'bar',
+						barWidth: '20px',
+						barGap: '60%',
+						itemStyle: {
+							color: '#FF5252',
+							borderColor: '#FF5252',
+							borderWidth: 1,
+							borderType: 'solid',
+						},
+						label: {
+							show: true,
+							formatter: '{c}' + '%',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						},
+						zlevel: 2,
+						data: value,
+					},
+					{
+						name: '光照',
+						type: 'pictorialBar',
+						symbolSize: [20, 10],
+						symbolOffset: [0, -5],
+						symbolPosition: 'end',
+						z: 15,
+						color: '#ffc241',
+						zlevel: 2,
+						data: value,
+					}]
+				}
+			},
+			initlinchart: function() {
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('磷含量'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						// name: "含量",
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
+						// type: 'line',
+						// itemStyle:{
+						// 	color:'#6648FF'
+						// }
+						type: 'pictorialBar',
+						itemStyle: {
+							normal: {
+								color: '#6DF95A',
+							},
+						},
+						symbolRepeat: 'fixed',
+						symbolMargin: 4,
+						symbol: 'rect',
+						symbolClip: true,
+						symbolSize: [20, 8],
+						symbolPosition: 'start',
+						symbolOffset: [0, -1],
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						z: 0,
+						zlevel: 8
+					}]
+				}
+			},
+			initdanchart: function() {
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('氮含量'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						// name: "含量",
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
+						// type: 'line',
+						// itemStyle:{
+						// 	color:'#ee6666'
+						// },
+						type: 'pictorialBar',
+						itemStyle: {
+							normal: {
+								color: '#ee6666',
+							},
+						},
+						symbolRepeat: 'fixed',
+						symbolMargin: 4,
+						symbol: 'rect',
+						symbolClip: true,
+						symbolSize: [20, 8],
+						symbolPosition: 'start',
+						symbolOffset: [0, -1],
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						z: 0,
+						zlevel: 8,
+					}]
+				}
+			},
+			initjiachart: function() {
+				return {
+					backgroundColor: '#000000',
+					title: utils.createChartTitle('钾含量'),
+					grid: utils.createChartGaid(null, '20px', "50px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						// name: "含量",
+						// data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0)],
+						// type: 'line',
+						// itemStyle:{
+						// 	color:'#488cf7'
+						// }
+						type: 'pictorialBar',
+						itemStyle: {
+							normal: {
+								color: '#488cf7',
+							},
+						},
+						symbolRepeat: 'fixed',
+						symbolMargin: 4,
+						symbol: 'rect',
+						symbolClip: true,
+						symbolSize: [20, 8],
+						symbolPosition: 'start',
+						symbolOffset: [0, -1],
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						z: 0,
+						zlevel: 8,
+					}]
+				}
+			},
+			initphchart: function() {
+				return {
+					backgroundColor: '#000000',
+					// title:utils.createChartTitle('钾含量'),
+					grid: utils.createChartGaid(null, '20px', "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [(Math.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
+							.random(100) * 14).toFixed(1), (Math.random(100) * 14).toFixed(1), (Math
+							.random(100) * 14).toFixed(1)],
+						type: 'bar',
+						barWidth: '20px',
+						itemStyle: {
+							color: function(pama){
+								if(pama.value > 7){
+									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+											offset: 0,
+											color: '#488cf7ff',
+										},
+										{
+											offset: 1,
+											color: '#488cf7bb',
+										},
+									])
+								}else{
+									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+											offset: 0,
+											color: '#FF5252ff',
+										},
+										{
+											offset: 1,
+											color: '#FF5252bb',
+										},
+									])
+								}
+							},
+							barBorderRadius: 20
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: '#fff',
+							fontSize: 12,
+							textAlign: 'center',
+						}
+					}]
+				};
+			},
+			inityanchart: function() {
+				return {
+					backgroundColor: '#000000',
+					// title:utils.createChartTitle('钾含量'),
+					grid: utils.createChartGaid(null, '20px', "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.areas,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)],
+						type: 'bar',
+						barWidth: '20px',
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: '#FF5722ff',
+								},
+								{
+									offset: 1,
+									color: '#FF5722bb',
+								},
+							]),
+							barBorderRadius: 20
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: '#FF5722',
+							fontSize: 12,
+							textAlign: 'center',
+						}
+					}]
+				};
+			},
+			initguangaichart: function() {
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						boundaryGap: false, //
+						data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [120, 200, 150, 80, 70, 110, 140, 140, 140, 140, 140, 140],
+						type: 'line',
+						itemStyle: {
+							color: '#00FAC1'
+						},
+						label: {
+							show: true,
+							formatter: '{c}',
+							position: 'top',
+							color: '#00FAC1',
+							fontSize: 12,
+							textAlign: 'center',
+						}
+					}]
+				};
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.chart {
+		padding: 10px;
+		overflow: hidden;
+	}
+
+	.itemtitle {
+		background: linear-gradient(to right, #40a55f, #000, #000);
+		height: 35px;
+		line-height: 35px;
+		padding-left: 10px;
+	}
+
+	.name_border {
+		width: 100%;
+		height: 1px;
+		margin: 5px auto;
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
+	}
+
+	.name_v_border {
+		width: 1px;
+		height: 70px;
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
+	}
+</style>

vue/src/views/VisibleView/index.vue

@@ -0,0 +1,863 @@
+<template>
+	<el-row>
+		<el-col :span="6">
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">基本情况</div>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
+					<el-col :span="12">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<football />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{size}}</span>
+									<span style="font-size:20px;margin-left:5px">㎡</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">种植面积</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="12">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<user />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{count}}</span>
+									<span style="font-size:20px;margin-left:5px">户</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">农户数量</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2)/2 - 35)/2+'px'}">
+					<el-col :span="12">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<SetUp />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{category}}</span>
+									<span style="font-size:20px;margin-left:5px">种</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">作物种类</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="12">
+						<div class="flex">
+							<div style="width:60px;text-align: center;line-height: 100px;">
+								<el-icon :size="40" style="">
+									<money />
+								</el-icon>
+							</div>
+							<div class="flex_item" style="text-align: center;">
+								<div style="line-height: 40px;color: #24fda3;">
+									<span style="font-size: 24px;font-weight: bold;">{{cost}}</span>
+									<span style="font-size:20px;margin-left:5px">元</span>
+								</div>
+								<div style="line-height: 40px;color: #fff;font-size: 16px;">
+									<span style="margin-left: 5px;">作物销量</span>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">气象信息</div>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2 - 75)/2)+'px'}">
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;" :style="{}">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<hot-water />
+								</el-icon>
+								<span style="margin-left: 5px;">温度</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{temp}}</span>
+								<span style="font-size:20px;margin-left:5px">℃</span>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<flag />
+								</el-icon>
+								<span style="margin-left: 5px;">风速</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{spedd}}</span>
+								<span style="font-size:20px;margin-left:5px">km/h</span>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<back />
+								</el-icon>
+								<span style="margin-left: 5px;">风向</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{deriction}}</span>
+								<span style="font-size:20px;margin-left:5px"></span>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row :style="{paddingTop:((((height-80)/3 - 40)/2 - 75)/2)+'px'}">
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<umbrella />
+								</el-icon>
+								<span style="margin-left: 5px;">湿度</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{water}}</span>
+								<span style="font-size:20px;margin-left:5px">rh</span>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<sunny />
+								</el-icon>
+								<span style="margin-left: 5px;">光照</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{lint}}</span>
+								<span style="font-size:20px;margin-left:5px">lx</span>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div style="width:80%;margin: 0 auto;">
+							<div style="line-height: 40px;color: #fff;font-size: 16px;">
+								<el-icon :size="18" style="position: relative;top: 3px;">
+									<pouring />
+								</el-icon>
+								<span style="margin-left: 5px;">降雨量</span>
+							</div>
+							<div style="line-height: 40px;color: #24fda3;">
+								<span style="font-size: 24px;font-weight: bold;">{{wend}}</span>
+								<span style="font-size:20px;margin-left:5px">cm</span>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 + 30)+'px',padding:0}">
+				<div class="itemtitle" style="">环境监控</div>
+				<v-chart ref="emvorromntchart" :style="{height:((height/3 - 20 - 15)+'px')}"
+					:option="emvorromntchart" />
+			</div>
+		</el-col>
+		<el-col :span="12">
+			<div class="chart" :style="{height:((height-80)/3 - 30)*2+'px'}">
+				<div id="mapchart" style="position: relative;" :style="{height:(((height-80)/3 - 40)*2)+'px'}"></div>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3+10)+'px'}">
+				<div class="itemtitle flex" style="">
+					<div class="flex_item">物联网设备状况</div>
+					<div style="width: 250px;">
+						<span class="device_status_item">
+							正常({{device.status.ok}})
+						</span>
+						<span class="device_status_item" style="color:#FF8A26">
+							预警({{device.status.alert}})
+						</span>
+						<span class="device_status_item" style="color:#FF5252">
+							异常({{device.status.error}})
+						</span>
+					</div>
+				</div>
+				<div class="devices">
+					<div v-for="(item,index) in device.datas" class="deviceitem">
+						<div class="inner"
+							:class="item.status == '2' ? 'deviceitemalert':(item.status == '3'?'deviceitemerror':'')">
+							<div class="name">{{item.name}}</div>
+							<div class="name_border"></div>
+							<div class="flex">
+								<div class="flex_item">PM2.5：{{item.pm2_5}}</div>
+								<div class="flex_item">PM10：{{item.pm10}}</div>
+							</div>
+							<div class="flex">
+								<div class="flex_item">温度：{{item.temp}}℃</div>
+								<div class="flex_item">湿度：{{item.shidu}}%</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-col>
+		<el-col :span="6">
+			<div class="chart" :style="{}">
+				<div class="itemtitle" style="">视频监控</div>
+				<div style="margin: 10px 0px;margin-bottom: 0;border:1px solid rgba(255,255,255,0.6);border-radius: 5px;">
+					<video :style="{width:'100%',height:((height-80)/3 - 40 - 35 - 20)+'px'}" src="../assets/1.mp4"
+						controls="controls" autoplay="false"></video>
+				</div>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 40)+'px'}">
+				<div class="itemtitle" style="">市场信息</div>
+				<div>
+					<div class="swiper-container" :style="{height:(((height-80)/3 - 40 - 35)+'px')}">
+						<div class="swiper-wrapper" :style="{height:(((height-80)/3 - 40 - 35)+'px')}">
+							<div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
+								<div class="innner">
+									<div class="title">{{item.title}}</div>
+									<div class="flex">
+										<div class="flex_item">时间：{{item.date}}</div>
+										<div class="flex_item">来源：{{item.from_}}</div>
+									</div>
+									<div class="desc">
+										{{item.desc}}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="chart" :style="{height:((height-80)/3 - 20)+'px'}">
+				<div class="itemtitle" style="">作物状况</div>
+				<div>
+					<!-- 展示字符云，各种作物占比 -->
+					<v-chart ref="cropchart" :style="{height:(((height-80)/3 - 20 - 15)+'px')}" :option="cropoption" />
+				</div>
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script>
+	import $ from 'jquery'
+	import config from '/public/config.js'
+	import utils from '/public/utils.js'
+	import api from '/public/api.js'
+	import VChart, {
+		THEME_KEY
+	} from "vue-echarts";
+
+	import * as echarts from 'echarts';
+	import 'echarts-extension-amap';
+
+	import Swiper from 'swiper';
+	import 'swiper/dist/css/swiper.min.css';
+
+	import 'echarts-wordcloud';
+
+	export default {
+		components: {
+			VChart
+		},
+		provide: {
+			[THEME_KEY]: "dark"
+		},
+		data() {
+			return {
+				height: $(window).height(),
+				news: [{
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '中国农业智能装备亮相哥伦比亚农科创新博览会',
+					desc: '人民网里约热内卢4月8日电 (记者吴杰)当地时间4月6日至8日,由华南农业大学牵头组织的中国水果采摘机器人、播种及施肥无人机等智能装备亮相哥伦比亚农业科技国际云博览会,展示了中国精准农业、智慧农业、现代农业智能装备等领域的优势,',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '安徽出台规划助推农业农村现代化',
+					desc: '安徽出台规划助推农业农村现代化作者:李应松 张守营 来源:中国经济导报 字数:839本报讯 李应松 记者张守营报道 日前',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '战疫情、保春耕、促生产,崇明现代农业园区做好春耕备耕',
+					desc: '“东风吹绿草,布谷劝春耕。”春耕农时不等人,当前正处于疫情防控攻坚阶段,也是春耕生产备耕的关键时间节点,崇明现代农业园区以“战疫情、保春耕、促生产”为着力点,抢农时、抓备耕,确保',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}],
+				device: {
+					status: {
+						ok: 11,
+						error: 2,
+						alert: 4
+					},
+					datas: [{
+						name: '设备0012410',
+						status: '1',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '2',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '1',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '3',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '1',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '1',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '1',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}, {
+						name: '设备0012410',
+						status: '2',
+						pm2_5: 11,
+						pm10: 1,
+						tsp: 11,
+						temp: 25,
+						shidu: 30
+					}]
+				},
+				categorys:['玉米', '水稻', '小麦', '大豆', '青稞', '蔬菜', '水果', '花卉', '薯类', '药材', '蚕豆', '油籽', '蔓青', '大芥', '花生',
+					'胡麻', '大麻', '向日葵', '梨', '苹果', '桃', '杏', '核桃', '李子', '樱桃', '草莓', '酸梨', '野杏', '毛桃', '苞瑙', '山樱桃',
+					'沙棘', '草莓'
+				],
+				emvorromntchart: {},
+				cropoption: {},
+				charts: {},
+				swiper: null,
+				timer: null,
+				size: (Math.random(100) * 1000).toFixed(0),
+				count: (Math.random(100) * 1000).toFixed(0),
+				category: (Math.random(100) * 1000).toFixed(0),
+				cost: (Math.random(100) * 1000).toFixed(0),
+				temp: (Math.random(100) * 40).toFixed(0),
+				spedd: (Math.random(100) * 100).toFixed(0),
+				deriction: '东南',
+				water: (Math.random(100) * 50).toFixed(0),
+				lint: (Math.random(100) * 1000).toFixed(0),
+				wend: (Math.random(100) * 1000).toFixed(0),
+			}
+		},
+		mounted: function() {
+			var that = this;
+			$(window).resize(function() {
+				this.height = $(window).height() - this.titleheight;
+
+				for (var key in that.charts) {
+					that.charts[key].resize();
+				}
+				that.$refs['emvorromntchart'].resize();
+				that.$refs['cropchart'].resize();
+			});
+
+			this.loadData();
+
+			this.swiper = new Swiper('.swiper-container', {
+				autoplay: 1000, //可选选项，自动滑动
+				loop: true,
+				direction: 'vertical',
+				slidesPerView: (((this.height - 80) / 3 - 40 - 35)) / 110,
+			})
+
+			//开始定时刷新报表数据
+			this.startRefreshChart();
+		},
+		unmounted: function() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+		methods: {
+			/**
+			 * 定时刷新报表数据
+			 */
+			startRefreshChart: function() {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				var that = this;
+
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
+				var refreshtime = 60 * 1000;
+				config.getConfig().forEach(function(item, index) {
+					if (item.key == 'refreshtime') {
+						refreshtime = item.value;
+					}
+				});
+
+				this.timer = setInterval(function() {
+					that.size = (Math.random(100) * 1000).toFixed(0);
+					that.count = (Math.random(100) * 1000).toFixed(0);
+					that.category = (Math.random(100) * 1000).toFixed(0);
+					that.cost = (Math.random(100) * 1000).toFixed(0);
+					that.temp = (Math.random(100) * 40).toFixed(0);
+					that.spedd = (Math.random(100) * 100).toFixed(0);
+					that.deriction = '东南';
+					that.water = (Math.random(100) * 50).toFixed(0);
+					that.lint = (Math.random(100) * 1000).toFixed(0);
+					that.wend = (Math.random(100) * 1000).toFixed(0);
+					//------------------------------
+
+					that.emvorromntchart.series[0].data = [(Math.random(100) * 1000).toFixed(0), (Math.random(
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0), (Math.random(
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0), (Math.random(
+						100) * 1000).toFixed(0), (Math.random(100) * 1000).toFixed(0)];
+					//------------------------------
+					that.device.status.ok = (Math.random(100) * 1000).toFixed(0);
+					that.device.status.error = (Math.random(100) * 1000).toFixed(0);
+					that.device.status.alert = (Math.random(100) * 1000).toFixed(0);
+					that.device.datas.forEach(function(item, index) {
+						var status = (Math.random(100) * 3);
+						item.status = status % 3 == 0 ? '1' : status % 3 == 1 ? '2' : status % 3 == 2 ?
+							'3' : "1";
+						item.pm2_5 = (Math.random(100) * 100).toFixed(0);
+						item.pm10 = (Math.random(100) * 100).toFixed(0);
+						item.tsp = (Math.random(100) * 100).toFixed(0);
+						item.temp = (Math.random(100) * 100).toFixed(0);
+						item.shidu = (Math.random(100) * 100).toFixed(0);
+					});
+					//------------------------------
+					that.cropoption.series[0].data = [];
+					that.categorys.forEach(function(item, index) {
+						that.cropoption.series[0].data.push({
+							name: item,
+							value: (Math.random(100) * 1000).toFixed(0),
+							textStyle: {
+								color: config.colors[index % config.colors.length]
+							}
+						});
+					})
+
+					that.swiper.slideNext();
+				}, refreshtime);
+			},
+			loadData: function() {
+				var that = this;
+				api.loadMapData(function(res) {
+					if (!res || res.status != 200) {
+						utils.showerror("数据加载失败！");
+						return;
+					}
+					that.initMapChart(res);
+				});
+				
+				this.emvorromntchart = this.initemvorromntchart();
+				this.cropoption = this.initcropoption();
+			},
+			initMapChart: function(res) {
+				var mapchart = this.$echarts.init(document.getElementById('mapchart'));
+				var values = [];
+				for (var i = 0; i < res.data.geoCoordMap.length; i++) {
+					values.push([res.data.geoCoordMap[i][0], res.data.geoCoordMap[i][1]], (Math.random() * 1000)
+						.toFixed(0));
+				}
+
+				var option = {
+					geoCoordMap: res.data.geoCoordMap,
+					title: utils.createChartTitle('产区概览'),
+					amap: {
+						rotateEnable: true,
+						pitchEnable: true,
+						pitch: 45,
+						// rotation: -45,
+						// 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
+						viewMode: '3D',
+						// 高德地图支持的初始化地图配置
+						// 高德地图初始中心经纬度
+						center: [116.436561, 39.897346],
+						// 高德地图初始缩放级别
+						zoom: 9,
+						// 是否开启resize
+						resizeEnable: true,
+						// 自定义地图样式主题
+						mapStyle: 'amap://styles/darkblue',
+						// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
+						renderOnMoving: true,
+						// ECharts 图层的 zIndex 默认 2000
+						// 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
+						echartsLayerZIndex: 2019,
+						// 设置 ECharts 图层是否可交互 默认为 true
+						// 设置为 false 可实现高德地图自身图层交互
+						// 此配置项从 v1.9.0 起开始支持
+						echartsLayerInteractive: true,
+						// 是否启用大数据模式 默认为 false
+						// 此配置项从 v1.9.0 起开始支持
+						largeMode: false
+						// 说明：如果想要添加卫星、路网等图层
+						// 暂时先不要使用layers配置，因为存在Bug
+						// 建议使用amap.add的方式，使用方式参见最下方代码
+					},
+					series: [{
+						type: 'effectScatter',
+						// 使用百度地图坐标系
+						coordinateSystem: 'amap',
+						//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+						// symbol: 'image://http://localhost:3000/src/assets/video.png',
+						symbol: 'pin',
+						// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+						symbolSize: [20, 20],
+						itemStyle: {
+							normal: {
+								color: '#ee6666', //标志颜色
+							}
+						},
+						// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
+						data: values,
+						rippleEffect: {
+							scale: 6,
+							brushType: "stroke"
+						},
+						hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
+					}]
+				}
+
+				// 使用刚指定的配置项和数据显示图表。
+				mapchart.setOption(option);
+
+				// // 获取百度地图实例，使用百度地图自带的控件
+				// var bmap = myChart.getModel().getComponent('bmap').getBMap();
+				// bmap.addControl(new BMap.MapTypeControl());
+
+				// 获取 ECharts 高德地图组件
+				var amapComponent = mapchart.getModel().getComponent('amap');
+				// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
+				var amap = amapComponent.getAMap();
+				// 添加控件
+				amap.addControl(new AMap.Scale());
+				amap.addControl(new AMap.ToolBar());
+				amap.addControl(new AMap.ControlBar());
+				// 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
+				amapComponent.setEChartsLayerInteractive(false);
+
+				var disProvince = new AMap.DistrictLayer.Province({
+					zIndex: 1000,
+					adcode: [110000],
+					depth: 2,
+					styles: {
+						'fill': function(properties) {
+							// properties为可用于做样式映射的字段，包含
+							// NAME_CHN:中文名称
+							// adcode_pro
+							// adcode_cit
+							// adcode
+							// console.log(properties)
+							var adcode = properties.adcode;
+							// var colors = {};
+							// if (!colors[adcode]) {
+							// 	var gb = Math.random() * 155 + 50;
+							// 	colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
+							// }
+							// return colors[adcode];
+							var colors = ['#fac858', '#ee6666', '#91cc75', '#38cafb', '#4caff9', '#4adeca',
+								'#2aa7ee', '#0270f2', '#488cf7'
+							];
+							return colors[adcode % colors.length] + '66';
+
+							// return 'red';
+						},
+						'province-stroke': 'cornflowerblue',
+						'city-stroke': 'white', // 中国地级市边界
+						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
+					}
+				});
+				disProvince.setMap(amap);
+
+				this.charts['mapchart'] = mapchart;
+			},
+			initemvorromntchart:function() {
+				return {
+					backgroundColor:'#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: ['土壤湿度', '降雨量', '二氧化碳', '日照时间'],
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [{
+						name: "含量",
+						data: [120, 200, 150, 80, 70, 110, 140],
+						type: 'bar',
+						barWidth: '20px',
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: '#fac858ff',
+								},
+								{
+									offset: 1,
+									color: '#fac858bb',
+								},
+							]),
+							barBorderRadius: 20
+						}
+					}]
+				}
+			},
+			initcropoption:function() {
+				var datas = [];
+				this.categorys.forEach(function(item, index) {
+					datas.push({
+						name: item,
+						value: (Math.random(100) * 1000).toFixed(0),
+						textStyle: {
+							color: config.colors[index % config.colors.length]
+						}
+					});
+				})
+				return {
+					backgroundColor:'#000000',
+					tooltip: {
+						show: true,
+						position: 'top',
+						textStyle: {
+							fontSize: 14
+						}
+					},
+					grid: {
+						top: '40px'
+					},
+					series: [{
+						type: "wordCloud",
+						// 网格大小，各项之间间距
+						gridSize: 20,
+						// 形状 circle 圆，cardioid  心， diamond 菱形，
+						// triangle-forward 、triangle 三角，star五角星
+						shape: 'circle',
+						// 字体大小范围
+						sizeRange: [12, 30],
+						// 文字旋转角度范围
+						rotationRange: [0, 90],
+						// 旋转步值
+						rotationStep: 90,
+						// 自定义图形
+						// maskImage: maskImage,
+						left: 'center',
+						top: '40px',
+						right: null,
+						bottom: null,
+						// 画布宽
+						width: '90%',
+						// 画布高
+						height: '80%',
+						// 是否渲染超出画布的文字
+						drawOutOfBound: false,
+						data: datas
+					}]
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.chart {
+		padding: 10px;
+		overflow: hidden;
+	}
+
+	.itemtitle {
+		background: linear-gradient(to right, #40a55f, #000, #000);
+		height: 35px;
+		line-height: 35px;
+		padding-left: 10px;
+	}
+
+	.device_status_item {
+		display: inline-block;
+		text-align: center;
+		font-size: 14px;
+		cursor: pointer;
+		width: 33.3%;
+		min-height: 30px;
+		line-height: 30px;
+	}
+
+	.devices {
+		overflow: hidden;
+	}
+
+	.deviceitem {
+		display: inline-block;
+		width: 25%;
+	}
+
+	.deviceitem .inner {
+		width: 80%;
+		margin: 0 auto;
+		background: #f8f8f844;
+		margin-top: 10px;
+		margin-bottom: 5px;
+		padding: 10px;
+		border-radius: 3px;
+		font-size: 12px;
+		line-height: 25px;
+		color: #bbb;
+	}
+
+	.deviceitem .inner .name {
+		text-align: center;
+		height: 30px;
+		line-height: 30px;
+		font-size: 14px;
+		color: #fff;
+	}
+
+	.deviceitem .inner .name_border {
+		width: 100%;
+		height: 1px;
+		margin: 5px auto;
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, rgba(0, 0, 0, 0));
+	}
+
+	.deviceitem .deviceitemalert {
+		background: #FF8A26aa;
+	}
+
+	.deviceitem .deviceitemerror {
+		background: #FF5252aa;
+	}
+
+	.newitem {
+		height: 110px;
+		border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
+		font-size: 14px;
+		line-height: 20px;
+		color: #999;
+		cursor: pointer;
+	}
+
+	.newitem .title {
+		font-size: 16px;
+		line-height: 35px;
+		height: 35px;
+		text-align: left;
+		color: #FF5722;
+	}
+
+	.newitem .desc {
+		height: 40px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		/* // 显示的行 */
+	}
+
+	.newitem:hover {
+		color: #fac858aa;
+	}
+</style>

vue/src/views/VisibleView/market.vue

@@ -0,0 +1,659 @@
+<template>
+	<el-row>
+		<el-col :span="18">
+			<el-row>
+				<el-col :span="12">
+					<!-- 采购需求 -->
+					<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
+						<div class="itemtitle" style="">市场采购需求</div>
+						<v-chart ref="xuqiuchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="xuqiuchart" />
+					</div>
+				</el-col>
+				<el-col :span="12">
+					<!-- 在售产品 -->
+					<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
+						<div class="itemtitle" style="">产品供应排行</div>
+						<v-chart ref="goodschart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="goodschart" />
+					</div>
+				</el-col>
+			</el-row>
+			<div>
+				<!-- 价格走势 -->
+				<div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
+					<div class="itemtitle" style="">价格走势</div>
+					<v-chart ref="costchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="costchart" />
+				</div>
+			</div>
+		</el-col>
+		<el-col :span="6">
+			<!-- 市场资讯 -->
+			<div class="chart" :style="{height:((height-80 - 20) )+'px'}">
+				<div class="itemtitle" style="">市场资讯</div>
+				<div>
+					<div class="swiper-container" :style="{height:(((height-80) - 20  - 45)+'px')}">
+						<div class="swiper-wrapper" :style="{height:(((height-80) - 20 - 45)+'px')}">
+							<div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
+								<div class="innner">
+									<div class="title">{{item.title}}</div>
+									<div class="flex">
+										<div class="flex_item">时间：{{item.date}}</div>
+										<div class="flex_item">来源：{{item.from_}}</div>
+									</div>
+									<div class="desc">
+										{{item.desc}}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script>
+	import $ from 'jquery'
+	import config from '/public/config.js'
+	import utils from '/public/utils.js'
+	import api from '/public/api.js'
+	import VChart, {
+		THEME_KEY
+	} from "vue-echarts";
+	import * as echarts from 'echarts';
+	
+	import Swiper from 'swiper';
+	import 'swiper/dist/css/swiper.min.css';
+
+	export default {
+		components: {
+			VChart
+		},
+		provide: {
+			[THEME_KEY]: "dark"
+		},
+		data() {
+			return {
+				height: $(window).height(),
+				charts: {},
+				timer: null,
+				xuqiuchart: {},
+				goodschart: {},
+				costchart: {},
+				categorys : ['玉米', '水稻', '小麦', '大豆', '青稞'],
+				news: [{
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '中国农业智能装备亮相哥伦比亚农科创新博览会',
+					desc: '人民网里约热内卢4月8日电 (记者吴杰)当地时间4月6日至8日,由华南农业大学牵头组织的中国水果采摘机器人、播种及施肥无人机等智能装备亮相哥伦比亚农业科技国际云博览会,展示了中国精准农业、智慧农业、现代农业智能装备等领域的优势,',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '安徽出台规划助推农业农村现代化',
+					desc: '安徽出台规划助推农业农村现代化作者:李应松 张守营 来源:中国经济导报 字数:839本报讯 李应松 记者张守营报道 日前',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '战疫情、保春耕、促生产,崇明现代农业园区做好春耕备耕',
+					desc: '“东风吹绿草,布谷劝春耕。”春耕农时不等人,当前正处于疫情防控攻坚阶段,也是春耕生产备耕的关键时间节点,崇明现代农业园区以“战疫情、保春耕、促生产”为着力点,抢农时、抓备耕,确保',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}, {
+					id: 1,
+					title: '江苏东海给农业插上“数字化”翅膀',
+					desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
+					date: '2022-04-09 12:11',
+					from_: '百度一下'
+				}],
+				swiper:null
+			}
+		},
+		mounted: function() {
+			var that = this;
+			$(window).resize(function() {
+				this.height = $(window).height() - this.titleheight;
+
+				for (var key in that.charts) {
+					that.charts[key].resize();
+				}
+				that.$refs['xuqiuchart'].resize();
+				that.$refs['goodschart'].resize();
+				that.$refs['costchart'].resize();
+			});
+			
+			this.swiper = new Swiper('.swiper-container', {
+				autoplay: 1000, //可选选项，自动滑动
+				loop: true,
+				direction: 'vertical',
+				slidesPerView: (((this.height - 80) - 35)) / 110,
+			})
+
+			this.initcharts();
+
+			//开始定时刷新报表数据
+			this.startRefreshChart();
+		},
+		unmounted: function() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+		methods: {
+			/**
+			 * 定时刷新报表数据
+			 */
+			startRefreshChart: function() {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				var that = this;
+
+				//获取刷新周期，TODO 配置变动时，此处需自动更新
+				var refreshtime = 60 * 1000;
+				config.getConfig().forEach(function(item, index) {
+					if (item.key == 'refreshtime') {
+						refreshtime = item.value;
+					}
+				});
+
+				this.timer = setInterval(function() {
+					that.swiper.slideNext();
+					
+					//---------------
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)];
+					that.xuqiuchart.series[0].data = values;
+					that.xuqiuchart.series[1].data = values;
+					that.xuqiuchart.series[2].data = values;
+							
+					//---------------
+					var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)];
+					that.goodschart.series[0].data = values;
+					that.goodschart.series[1].data = values;
+					that.goodschart.series[2].data = values;
+							
+					//---------------
+					var dates = [];
+					var start = new Date();
+					start.setDate(start.getDate()-30);
+					for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
+						dates.push(i.format('MM-dd'));
+					}
+					
+					var series = [];
+					var xData = [];
+					that.categorys.forEach(function (item,index){
+						xData.push(item);
+						series.push({
+							name: item,
+							data: [],
+							type: 'line',
+							stack:'1',
+							// smooth:true,
+							lineStyle: {
+								nomal:{
+									width:1,
+									color: config.colors[index%config.colors.length]
+								}
+							},
+							label: {
+								show: true,
+								formatter: '{c}%',
+								position: 'top',
+								color: 'rgba(255,228,59,1)',
+								fontSize: 12,
+								textAlign: 'center',
+							}
+						});
+						for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
+							series[index].data.push((Math.random(100) * 100).toFixed(0));
+						}
+					});		
+					that.costchart.xAxis.data = dates;
+					that.costchart.series = series;
+				}, refreshtime);
+			},
+			initcharts: function() {
+				this.xuqiuchart = this.initxuqiuchart();
+				this.goodschart = this.initgoodschart();
+				this.costchart = this.initcostchart();
+			},
+			initxuqiuchart: function() {
+				var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)];
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.categorys,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [
+					// 	{
+					// 	name: "含量",
+					// 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0)],
+					// 	type: 'bar',
+					// 	barWidth: '20px',
+					// 	label: {
+					// 		show: true,
+					// 		formatter: '{c}%',
+					// 		position: 'top',
+					// 		color: 'rgba(255,228,59,1)',
+					// 		fontSize: 12,
+					// 		textAlign: 'center',
+					// 	},
+					// 	itemStyle: {
+					// 		color: function(pama) {
+					// 			var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
+					// 				'#4caff9', '#4adeca', '#0270f2', '#488cf7'
+					// 			];
+					// 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+					// 					offset: 0,
+					// 					color: colors[pama.dataIndex % colors.length] + 'ff',
+					// 				},
+					// 				{
+					// 					offset: 1,
+					// 					color: colors[pama.dataIndex % colors.length] + '66',
+					// 				},
+					// 			])
+					// 		},
+					// 		barBorderRadius: 20
+					// 	}
+					// },
+					{
+						name: '光照',
+						type: 'bar',
+						barWidth: '20px',
+						barGap: '60%',
+						itemStyle: {
+							color: '#FF5252aa',
+							borderColor: '#FF5252aa',
+							borderWidth: 1,
+							borderType: 'solid',
+						},
+						label: {
+							show: true,
+							formatter: '{c}' + '%',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						},
+						zlevel: 2,
+						data: values,
+					},
+					{
+						name: '光照',
+						type: 'pictorialBar',
+						symbolSize: [20, 10],
+						symbolOffset: [0, -5],
+						symbolPosition: 'end',
+						z: 15,
+						color: '#FF5252',
+						zlevel: 3,
+						data: values,
+					},
+					{
+						name: '光照',
+						type: 'pictorialBar',
+						symbolSize: [20, 10],
+						symbolOffset: [0, 5],
+						symbolPosition: 'start',
+						z: 15,
+						color: '#FF5252',
+						zlevel: 3,
+						data: values,
+					}]
+				};
+			},
+			initgoodschart: function() {
+				var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+							.random(100) * 100).toFixed(0)];
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "20px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						// boundaryGap: false,//
+						data: this.categorys,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: [
+					// 	{
+					// 	name: "含量",
+					// 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
+					// 		.random(100) * 100).toFixed(0)],
+					// 	type: 'bar',
+					// 	barWidth: '20px',
+					// 	label: {
+					// 		show: true,
+					// 		formatter: '{c}%',
+					// 		position: 'top',
+					// 		color: 'rgba(255,228,59,1)',
+					// 		fontSize: 12,
+					// 		textAlign: 'center',
+					// 	},
+					// 	itemStyle: {
+					// 		color: function(pama) {
+					// 			var colors = ['#fac858', '#4adeca', '#0270f2', '#488cf7', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
+					// 				'#4caff9'
+					// 			];
+					// 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+					// 					offset: 0,
+					// 					color: colors[pama.dataIndex % colors.length] + 'ff',
+					// 				},
+					// 				{
+					// 					offset: 1,
+					// 					color: colors[pama.dataIndex % colors.length] + '66',
+					// 				},
+					// 			])
+					// 		},
+					// 		barBorderRadius: 20
+					// 	}
+					// },
+						{
+							name: '光照',
+							type: 'bar',
+							barWidth: '20px',
+							barGap: '60%',
+							itemStyle: {
+								color: '#BAFF7Faa',
+								borderColor: '#BAFF7Faa',
+								borderWidth: 1,
+								borderType: 'solid',
+							},
+							label: {
+								show: true,
+								formatter: '{c}' + '%',
+								position: 'top',
+								color: 'rgba(255,228,59,1)',
+								fontSize: 12,
+								textAlign: 'center',
+							},
+							zlevel: 2,
+							data: values,
+						},
+						{
+							name: '光照',
+							type: 'pictorialBar',
+							symbolSize: [20, 10],
+							symbolOffset: [0, -5],
+							symbolPosition: 'end',
+							z: 15,
+							color: '#BAFF7F',
+							zlevel: 3,
+							data: values,
+						},
+						{
+							name: '光照',
+							type: 'pictorialBar',
+							symbolSize: [20, 10],
+							symbolOffset: [0, 5],
+							symbolPosition: 'start',
+							z: 15,
+							color: '#BAFF7F',
+							zlevel: 3,
+							data: values,
+						}
+					]
+				};
+			},
+			initcostchart: function() {
+				var dates = [];
+				var start = new Date();
+				start.setDate(start.getDate()-30);
+				for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
+					dates.push(i.format('MM-dd'));
+				}
+				
+				var series = [];
+				var xData = [];
+				this.categorys.forEach(function (item,index){
+					xData.push(item);
+					series.push({
+						name: item,
+						data: [],
+						type: 'line',
+						stack:'1',
+						// smooth:true,
+						lineStyle: {
+							nomal:{
+								width:1,
+								color: config.colors[index%config.colors.length]
+							}
+						},
+						label: {
+							show: true,
+							formatter: '{c}%',
+							position: 'top',
+							color: 'rgba(255,228,59,1)',
+							fontSize: 12,
+							textAlign: 'center',
+						}
+					});
+					for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
+						series[index].data.push((Math.random(100) * 100).toFixed(0));
+					}
+				});
+				return {
+					backgroundColor: '#000000',
+					grid: utils.createChartGaid(null, null, "20px", "40px"),
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow',
+						},
+					},
+					legend:{
+						bottom:'0',
+						x:'center',
+						data:xData
+					},
+					xAxis: {
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						axisLabel: {
+							color: utils.getChartXTextColor()
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: false
+						},
+						boundaryGap: false,//
+						data: dates,
+						type: 'category',
+					},
+					yAxis: {
+						axisLabel: {
+							color: utils.getChartYTextColor(),
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: utils.getChartXColor()
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: utils.getChartYColor(),
+								type: 'dashed'
+							},
+						},
+						name: '',
+					},
+					series: series
+				};
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.chart {
+		padding: 10px;
+		overflow: hidden;
+	}
+
+	.itemtitle {
+		background: linear-gradient(to right, #40a55f, #000, #000);
+		height: 35px;
+		line-height: 35px;
+		padding-left: 10px;
+	}
+
+	.name_border {
+		width: 100%;
+		height: 1px;
+		margin: 5px auto;
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
+	}
+
+	.name_v_border {
+		width: 1px;
+		height: 70px;
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
+	}
+	
+	
+	.newitem {
+		height: 110px;
+		border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
+		font-size: 14px;
+		line-height: 20px;
+		color: #999;
+		cursor: pointer;
+	}
+	
+	.newitem .title {
+		font-size: 16px;
+		line-height: 35px;
+		height: 35px;
+		text-align: left;
+		color: #FF5722;
+	}
+	
+	.newitem .desc {
+		height: 40px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		/* // 显示的行 */
+	}
+	
+	.newitem:hover {
+		color: #fac858aa;
+	}
+</style>

vue/src/views/VisibleView/welcome.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="welcome">
-    <div style="width:50%;margin: 0 auto;color:#fff" :style="{marginTop:marginTop+'px'}">
-      <el-progress :percentage="100" status="exception" :show-text="false" :stroke-width="20" :format="format" :indeterminate="true" />
-    </div>
-  </div>
+	<div class="welcome">
+		<div style="width:50%;margin: 0 auto;color:#fff" :style="{marginTop:marginTop+'px'}">
+			<el-progress :percentage="100" status="exception" :show-text="false" :stroke-width="20" :format="format" :indeterminate="true" />
+		</div>
+	</div>
 </template>
 
 <script>
-export default{
-  name: "welcome"
-}
+	import $ from 'jquery'
+	export default {
+		data(){
+			return {
+				marginTop:$(window).height()/2
+			}
+		},
+		mounted:function(){
+			var that = this;
+			setTimeout(function(){
+				that.$emit("loaddingend","")
+			},1000);
+		}
+	}
 </script>
 
-
-<style scoped>
-
-</style>
+<style >
+	.welcome{
+		position:fixed;
+		left: 0;
+		top:0;
+		width:100%;
+		height:100%;
+		background: #000000;
+	}
+</style>

vue/src/views/manager/AI/Charts.vue

@@ -1,6 +1,14 @@
 <script>
 export default {
-  name: "Charts"
+  name: "Charts",
+  methods:{
+
+    requestPython(){
+      this.$request.get('/login').then(res=>{
+        this.$message.success(res.data)
+      })
+    }
+  }
 }
 </script>
 
@@ -8,6 +16,9 @@ export default {
 <div>
   你也可以自己跳转到一个单独用来展示报表的界面，而不是说子界面
   报表界面
+  <el-button @click="requestPython">
+    按钮
+  </el-button>
 </div>
 </template>
 

vue/src/views/manager/Shop/ShopOrders.vue

@@ -1,14 +1,327 @@
-<script>
-export default {
-  name: "ShopOrders"
-}
-</script>
-
 <template>
   <div>
-    店铺订单，这里会有接单显示提醒，
+    <div class="search">
+      <el-input placeholder="请输入关键字查询" style="width: 200px" v-model="username"></el-input>
+      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
+      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
+    </div>
+
+    <div class="operation">
+      <el-button type="primary" plain @click="handleAdd">新增</el-button>
+      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
+    </div>
+
+    <div class="table">
+      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
+        <el-table-column prop="bidPay" label="实付金额"></el-table-column>
+        <el-table-column prop="originPay" label="应付金额"></el-table-column>
+        <el-table-column prop="userId" label="下单用户id"></el-table-column>
+        <el-table-column prop="addressId" label="收货地址id"></el-table-column>
+        <el-table-column prop="timePre" label="预计送达时间"></el-table-column>
+        <el-table-column prop="timeOrder" label="下单时间"></el-table-column>
+        <el-table-column prop="orderState" label="订单状态"></el-table-column>
+        <el-table-column prop="orderRemark" label="订单备注"></el-table-column>
+        <el-table-column prop="transCode" label="交易单号"></el-table-column>
+        <el-table-column prop="orderProductsLists" label="购买清单：商品id，商品名称，商品数量"></el-table-column>
+        <el-table-column prop="storeId" label="购买的店铺"></el-table-column>
+        <el-table-column label="操作" align="center" width="180">
+          <template v-slot="scope">
+            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page="pageNum"
+            :page-sizes="[5, 10, 20]"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog title="订单表" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="实付金额" prop="bitPay">
+          <el-input v-model="form.bitPay" placeholder="实付金额"></el-input>
+        </el-form-item>
+        <el-form-item label="应付金额" prop="originPay">
+          <el-input v-model="form.originPay" placeholder="应付金额"></el-input>
+        </el-form-item>
+        <el-form-item label="下单用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="下单用户id"></el-input>
+        </el-form-item>
+        <el-form-item label="收货地址id" prop="addressId">
+          <el-input v-model="form.addressId" placeholder="收货地址id"></el-input>
+        </el-form-item>
+        <el-form-item label="预计送达时间" prop="timePre">
+          <el-input v-model="form.timePre" placeholder="预计送达时间"></el-input>
+        </el-form-item>
+        <el-form-item label="下单时间" prop="timeOrder">
+          <el-input v-model="form.timeOrder" placeholder="下单时间"></el-input>
+        </el-form-item>
+        <el-form-item label="订单状态" prop="orderState">
+          <el-input v-model="form.orderState" placeholder="订单状态"></el-input>
+        </el-form-item>
+        <el-form-item label="订单备注" prop="orderRemark">
+          <el-input v-model="form.orderRemark" placeholder="订单备注"></el-input>
+        </el-form-item>
+        <el-form-item label="交易单号" prop="transCode">
+          <el-input v-model="form.transCode" placeholder="交易单号"></el-input>
+        </el-form-item>
+        <el-form-item label="购买清单：商品id，商品名称，商品数量" prop="orderProductsLists">
+          <el-input v-model="form.orderProductsLists" placeholder="购买清单：商品id，商品名称，商品数量"></el-input>
+        </el-form-item>
+        <el-form-item label="购买的店铺id" prop="storeId">
+          <el-input v-model="form.storeId" placeholder="购买的店铺"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="info" plain @click="showDetails(scope.row)">查看</el-button>
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+    <el-dialog  :visible.sync="fromProductsVisible" width="70%" :close-on-click-modal="false" destroy-on-close>
+      <el-descriptions title="订单详情" :column="3"  border>
+        <el-descriptions-item label="订单号">{{formProductDetails.transCode}}</el-descriptions-item>
+        <el-descriptions-item label="订单状态">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            订单类型
+          </template>
+          <el-tag type="success">
+            {{formProductDetails.orderState}}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="预计送达时间">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            预计送达时间
+          </template>
+          {{formProductDetails.timePre}}
+        </el-descriptions-item>
+        <el-descriptions-item label="订单下单时间">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            订单下单时间
+          </template>
+          {{formProductDetails.timeOrder}}
+        </el-descriptions-item>
+        <el-descriptions-item label="订单备注">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            订单备注
+          </template>
+          {{formProductDetails.orderRemark}}
+        </el-descriptions-item>
+        <el-descriptions-item label="订单额定金额">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            订单额定金额
+          </template>
+          {{formProductDetails.originPay}}
+        </el-descriptions-item>
+        <el-descriptions-item label="订单实付金额">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            订单实付金额
+          </template>
+          {{formProductDetails.bidPay}}
+        </el-descriptions-item>
+        <el-descriptions-item label="收货地址">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            收货地址
+          </template>
+<!--          {{formProductDetails.address?.address}}-->
+          order表没有连接地址
+        </el-descriptions-item>
+
+        <el-descriptions-item label="收货人电话">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            收货人电话
+          </template>
+          {{formProductDetails.address?.phone}}
+        </el-descriptions-item>
+        <el-descriptions-item label="收货人">
+          <template slot="label">
+            <i class="el-icon-goods"/>
+            收货人
+          </template>
+<!--          {{formProductDetails.address?.recipientName}}-->
+          用户信息待连表查询
+        </el-descriptions-item>
+
+      </el-descriptions >
+      <!--     下单用户详情    -->
+<!--      <el-descriptions title="下单用户详情" :column="3"  border>-->
+<!--        <el-descriptions-item label="用户名">-->
+<!--          <template slot="label">-->
+<!--            <i class="el-icon-goods"/>-->
+<!--            下单用户名-->
+<!--          </template>-->
+<!--          {{formProductDetails.user?.username}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item label="用户昵称">-->
+<!--          <template slot="label">-->
+<!--            <i class="el-icon-goods"/>-->
+<!--            下单用户名-->
+<!--          </template>-->
+<!--          {{formProductDetails.user?.username}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item label="用户联系方式">-->
+<!--          <template slot="label">-->
+<!--            <i class="el-icon-goods"/>-->
+<!--            用户联系方式-->
+<!--          </template>-->
+<!--          {{formProductDetails.user?.phone}}-->
+<!--        </el-descriptions-item>-->
+<!--      </el-descriptions>-->
+      <!--      下单商品  -->
+      <el-table :data="formProductDetails.products" style="margin-top: 5px">
+        <el-table-column prop="name" label="商品名称">
+        </el-table-column>
+        <el-table-column prop="originPay" label="商品原价价格">
+        </el-table-column>
+        <el-table-column prop="avatar" label="图片">
+          <template v-slot="scope">
+            <div>
+              <el-image style="width: 50px; height: 50px" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"/>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </el-dialog>
+
   </div>
 </template>
+<script>
+export default {
+  name: "Orders",
+  data() {
+    return {
+      tableData: [],  // 所有的数据
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      username: null,
+      fromVisible: false,
+      fromProductsVisible: false, // 订单详情
+      form: {},
+      formProductDetails:{},// 当前订单详情
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      rules: {
+      },
+      ids: [],
+    }
+  },
+  created() {
+    this.load(1)
+  },
+  methods: {
+    handleAdd() {   // 新增数据
+      this.form = {}  // 新增数据的时候清空数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    handleEdit(row) {   // 编辑数据
+      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request({
+            url: this.form.id ? '/orders/update' : '/orders/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('保存成功')
+              this.load(1)
+              this.fromVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    del(id) {   // 单个删除
+      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/orders/delete/' + id).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSelectionChange(rows) {   // 当前选中的所有的行数据
+      this.ids = rows.map(v => v.id)
+    },
+    delBatch() {   // 批量删除
+      if (!this.ids.length) {
+        this.$message.warning('请选择数据')
+        return
+      }
+      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/orders/delete/batch', {data: this.ids}).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    load(pageNum) {  // 分页查询
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/orders/selectPage', {
+        params: {
+          storeId:1,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          username: this.username,
+        }
+      }).then(res => {
+        this.tableData = res.data?.list
+        this.total = res.data?.total
+        console.log(res,"shopOrders")
+      })
+    },
+    reset() {
+      this.username = null
+      this.load(1)
+    },
+    handleCurrentChange(pageNum) {
+      this.load(pageNum)
+    },
+    showDetails(row){
+      console.log("showDetails",row)
+      this.fromProductsVisible = true;
+      this.formProductDetails = JSON.parse(JSON.stringify(row));
+    }
+  }
+}
+</script>
 
 <style scoped>
 

vue/src/views/manager/Shop/ShopProducts.vue

@@ -1,17 +1,308 @@
+
+<template>
+  <div>
+    <div class="search">
+      <el-input placeholder="请输入关键字查询" style="width: 200px" v-model="username"></el-input>
+      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
+      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
+    </div>
+
+    <div class="operation">
+      <el-button type="primary" plain @click="handleAdd">新增</el-button>
+      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
+    </div>
+
+    <div class="table">
+      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
+        <el-table-column prop="productState" label="产品状态"  align="center">
+          <template v-slot="scope">
+<!--            点击下架商品    -->
+            <el-tag v-if='scope.row.productState=="SALE" ' size="mini" type="primary" plain >已上架</el-tag>
+            <el-tag v-else='scope.row.productState=="SALE" ' size="mini" type="danger" plain >已下架</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
+        <el-table-column prop="productIcons" label="产品图标" align="center">
+          <template v-slot="scope">
+          <div >
+<!--            style="display: flex; align-items: center"-->
+            <el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.productIcons"
+                      :src="scope.row.productIcons" :preview-src-list="[scope.row.productIcons]"></el-image>
+          </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="productType" label="产品类型" align="center">
+          <template v-slot="scope">
+           <el-tag v-for="item in scope.row.productTypes" class="tag" align="center">
+              {{item.productTypeName}}
+           </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="productBidPrice" label="定价" align="center">
+          <template v-slot="scope">￥{{scope.row.productBidPrice}}</template>
+        </el-table-column>
+        <el-table-column prop="productSellPrice" label="实付价格" align="center">
+          <template v-slot="scope">￥{{scope.row.productSellPrice}}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="180" >
+          <template v-slot="scope">
+            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page="pageNum"
+            :page-sizes="[5, 10, 20]"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog title="" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="产品状态" prop="productState">
+          <el-select v-model="form.productState" placeholder="产品状态">
+            <el-option
+                v-for="item in this.productTypeEnum"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品名称" prop="productName">
+          <el-input v-model="form.productName" placeholder="产品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="产品展示图片" prop="productIcons">
+
+          <template v-slot="scope">
+
+            <el-upload
+                class="avatar-uploader"
+                :action="$baseUrl + '/files/upload'"
+                :headers="{ token: user.token }"
+                list-type="picture"
+                :on-success="handleUploadSuccess"
+            >
+              <el-button type="primary">上传商品图片</el-button>
+            </el-upload>
+
+          </template>
+
+
+        </el-form-item>
+<!--        <el-form-item label="产品类型ids" prop="productTypeIds">-->
+<!--          <el-input v-model="form.productTypeIds" placeholder="产品类型ids">-->
+
+<!--          </el-input>-->
+<!--        </el-form-item>-->
+        <el-form-item label="定价" prop="productBidPrice">
+<!--          <el-input v-model="form.productBidPrice" placeholder="定价"></el-input>-->
+          <el-input-number v-model="form.productBidPrice" :step="1" step-strictly></el-input-number>
+        </el-form-item>
+        <el-form-item label="实付价格" prop="productSellPrice">
+<!--          <el-input v-model="form.productSellPrice" placeholder="实付价格"></el-input>-->
+          <el-input-number v-model="form.productSellPrice" :step="1" step-strictly></el-input-number>
+
+        </el-form-item>
+
+
+        <el-form-item label="商品类型" prop="productType">
+          <el-tag  v-for="item in  form['productTypes']" closable @close="handleClose('productTypes',item)" :disable-transitions="false" class="tag">
+          {{item.productTypeName}}
+          </el-tag>
+          <el-input v-if="visible['productTypeIds']" class="input-new-tag"  v-model="newValueList['productTypeIds']"   @keyup.enter.native ="handleInputConfirm( form['cupSize'],newValueList.cupSize ,'cupSize')" @blur="handleInputConfirm( form['cupSize'],newValueList.cupSize ,'cupSize')">
+          </el-input>
+<!--          <el-button v-else class="button-new-tag" size="small" @click="visible.productTypeIds = true">+ 杯型</el-button>-->
+        </el-form-item>
+
+<!--TODO-->
+        <el-form-item label="添加商品" prop="productTypeIds">
+          <el-select v-model="form.type" placeholder="请选择">
+            <el-option
+                v-for="item in this.productTypeList"
+                :key="item.productTypeName"
+                :label="item.productTypeName"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
 <script>
+import productType from "@/views/manager/ShopManager/ProductType.vue";
+
 export default {
-  name: "ShopProducts"
+  name: "ShopProducts",
+  data() {
+    return {
+      tableData: [],  // 所有的数据
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      username: null,
+      fromVisible: false,
+      form: {},
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      rules: {
+      },
+      ids: [],
+      productTypeEnum:[{id:"SALE", name: "已上架"},{id:"SOLDOUT", name: "已下架"}],// 状态枚举
+      ENUMS_SP:{ONSALE:"SALE",SOLDOUT:"SOLDOUT"},
+      productTypeList:[], // 商品列表
+      visible:[], //可见输入框
+    }
+  },
+  created() {
+    this.load(1)
+  },
+  methods: {
+    handleAdd() {   // 新增数据
+      this.form = {}  // 新增数据的时候清空数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    handleEdit(row) {   // 编辑数据
+      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request({
+            url: this.form.id ? '/product/update' : '/product/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('修改成功')
+              this.load(1)
+              this.fromVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    del(id) {   // 单个删除
+      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/product/delete/' + id).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSelectionChange(rows) {   // 当前选中的所有的行数据
+      this.ids = rows.map(v => v.id)
+    },
+    handleGoodsUpDown(row){
+      console.log(row,"row")
+      row.productState = row.productState== this.ENUMS_SP.ONSALE? this.ENUMS_SP.SOLDOUT:this.ENUMS_SP.ONSALE;
+      // 更新提交 TODO
+      // this.handleUpdate();
+      this.save();
+      this.$message.success("修改成功")
+    },
+
+    delBatch() {   // 批量删除
+      if (!this.ids.length) {
+        this.$message.warning('请选择数据')
+        return
+      }
+      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/product/delete/batch', {data: this.ids}).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    load(pageNum) {  // 分页查询
+      if (pageNum) this.pageNum = pageNum
+      // 获取店铺商品类型加载店铺
+       this.$request.get('/store/getStoreProductTypesById',{
+        params:{
+          shopId : 1,
+        }
+      }).then(res=>{
+        this.productTypeList = res.data;
+        console.log(this.productTypeList)
+       })
+
+      this.$request.get('/product/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          username: this.username,
+        }
+      }).then(res => {
+        this.tableData = res.data?.list
+        this.total = res.data?.total
+        console.log(res,"product")
+      })
+    },
+    reset() {
+      this.username = null
+      this.load(1)
+    },
+    handleCurrentChange(pageNum) {
+      this.load(pageNum)
+    },
+    handleUploadSuccess(res){
+      this.form.productIcons = res.data
+    },
+    handleClose(key ,itemTarget){ //删除一个key
+      this.form[key].splice(this.form[key].indexOf(itemTarget),1)
+    }
+  }
 }
 </script>
 
-<template>
-<div>
-  店铺产品管理
-  这里列出店铺的清单表格对店铺商品进行CRUD
-  比如添加商品，包括商品的类型，商品的清单
-</div>
-</template>
-
 <style scoped>
-
+.tag{
+  margin: 2px 2px ;
+}
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 </style>

vue/src/views/manager/ShopManager/Address.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div class="search">
+      <el-input placeholder="请输入关键字查询" style="width: 200px" v-model="username"></el-input>
+      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
+      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
+    </div>
+
+    <div class="operation">
+      <el-button type="primary" plain @click="handleAdd">新增</el-button>
+      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
+    </div>
+
+    <div class="table">
+      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
+        <el-table-column prop="userId" label="用户id"></el-table-column>
+        <el-table-column prop="address" label="地址"></el-table-column>
+        <el-table-column prop="doorNo" label="门牌号"></el-table-column>
+        <el-table-column prop="phone" label="收货电话"></el-table-column>
+        <el-table-column prop="recipientName" label="收货人姓名"></el-table-column>
+        <el-table-column label="操作" align="center" width="180">
+          <template v-slot="scope">
+            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page="pageNum"
+            :page-sizes="[5, 10, 20]"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog title="用户地址表" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="用户id"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="form.address" placeholder="地址"></el-input>
+        </el-form-item>
+        <el-form-item label="门牌号" prop="doorNo">
+          <el-input v-model="form.doorNo" placeholder="门牌号"></el-input>
+        </el-form-item>
+        <el-form-item label="收货电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="收货电话"></el-input>
+        </el-form-item>
+        <el-form-item label="收货人姓名" prop="recipientName">
+          <el-input v-model="form.recipientName" placeholder="收货人姓名"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
+<script>
+export default {
+  name: "Address",
+  data() {
+    return {
+      tableData: [],  // 所有的数据
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      username: null,
+      fromVisible: false,
+      form: {},
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      rules: {
+      },
+      ids: []
+    }
+  },
+  created() {
+    this.load(1)
+  },
+  methods: {
+    handleAdd() {   // 新增数据
+      this.form = {}  // 新增数据的时候清空数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    handleEdit(row) {   // 编辑数据
+      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request({
+            url: this.form.id ? '/address/update' : '/address/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('保存成功')
+              this.load(1)
+              this.fromVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    del(id) {   // 单个删除
+      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/address/delete/' + id).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSelectionChange(rows) {   // 当前选中的所有的行数据
+      this.ids = rows.map(v => v.id)
+    },
+    delBatch() {   // 批量删除
+      if (!this.ids.length) {
+        this.$message.warning('请选择数据')
+        return
+      }
+      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/address/delete/batch', {data: this.ids}).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    load(pageNum) {  // 分页查询
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/address/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          username: this.username,
+        }
+      }).then(res => {
+        this.tableData = res.data?.list
+        this.total = res.data?.total
+      })
+    },
+    reset() {
+      this.username = null
+      this.load(1)
+    },
+    handleCurrentChange(pageNum) {
+      this.load(pageNum)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/views/manager/ShopManager/Adminstore.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div class="search">
+      <el-input placeholder="请输入关键字查询" style="width: 200px" v-model="username"></el-input>
+      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
+      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
+    </div>
+
+    <div class="operation">
+      <el-button type="primary" plain @click="handleAdd">新增</el-button>
+      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
+    </div>
+
+    <div class="table">
+      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
+        <el-table-column prop="username" label="用户名"></el-table-column>
+        <el-table-column prop="password" label="密码"></el-table-column>
+        <el-table-column prop="name" label="姓名"></el-table-column>
+        <el-table-column prop="avatar" label="头像"></el-table-column>
+        <el-table-column prop="role" label="角色标识"></el-table-column>
+        <el-table-column prop="phone" label="电话"></el-table-column>
+        <el-table-column prop="email" label="邮箱"></el-table-column>
+        <el-table-column prop="address" label="店铺地址id"></el-table-column>
+        <el-table-column label="操作" align="center" width="180">
+          <template v-slot="scope">
+            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page="pageNum"
+            :page-sizes="[5, 10, 20]"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog title="店铺管理员" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" placeholder="用户名"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="form.password" placeholder="密码"></el-input>
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="form.name" placeholder="姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="头像" prop="avatar">
+          <el-input v-model="form.avatar" placeholder="头像"></el-input>
+        </el-form-item>
+        <el-form-item label="角色标识" prop="role">
+          <el-input v-model="form.role" placeholder="角色标识"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="电话"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <el-form-item label="店铺地址id" prop="address">
+          <el-input v-model="form.address" placeholder="店铺地址id"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
+<script>
+export default {
+  name: "Adminstore",
+  data() {
+    return {
+      tableData: [],  // 所有的数据
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      username: null,
+      fromVisible: false,
+      form: {},
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      rules: {
+      },
+      ids: []
+    }
+  },
+  created() {
+    this.load(1)
+  },
+  methods: {
+    handleAdd() {   // 新增数据
+      this.form = {}  // 新增数据的时候清空数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    handleEdit(row) {   // 编辑数据
+      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
+      this.fromVisible = true   // 打开弹窗
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request({
+            url: this.form.id ? '/adminstore/update' : '/adminstore/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('保存成功')
+              this.load(1)
+              this.fromVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    del(id) {   // 单个删除
+      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/adminstore/delete/' + id).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSelectionChange(rows) {   // 当前选中的所有的行数据
+      this.ids = rows.map(v => v.id)
+    },
+    delBatch() {   // 批量删除
+      if (!this.ids.length) {
+        this.$message.warning('请选择数据')
+        return
+      }
+      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
+        this.$request.delete('/adminstore/delete/batch', {data: this.ids}).then(res => {
+          if (res.code === '200') {   // 表示操作成功
+            this.$message.success('操作成功')
+            this.load(1)
+          } else {
+            this.$message.error(res.msg)  // 弹出错误的信息
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    load(pageNum) {  // 分页查询
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/adminstore/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          username: this.username,
+        }
+      }).then(res => {
+        this.tableData = res.data?.list
+        this.total = res.data?.total
+      })
+    },
+    reset() {
+      this.username = null
+      this.load(1)
+    },
+    handleCurrentChange(pageNum) {
+      this.load(pageNum)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/views/manager/ShopManager/Orders.vue

@@ -15,16 +15,17 @@
       <el-table :data="tableData" strip @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center"></el-table-column>
         <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
-        <el-table-column prop="bitPay" label="实付金额"></el-table-column>
+        <el-table-column prop="bidPay" label="实付金额"></el-table-column>
         <el-table-column prop="originPay" label="应付金额"></el-table-column>
-        <el-table-column prop="userId" label="下单用户id"></el-table-column>
-        <el-table-column prop="addressId" label="收货地址id"></el-table-column>
+<!--        <el-table-column prop="userId" label="下单用户id"></el-table-column>-->
+<!--        <el-table-column prop="addressId" label="收货地址id"></el-table-column>-->
         <el-table-column prop="timePre" label="预计送达时间"></el-table-column>
         <el-table-column prop="timeOrder" label="下单时间"></el-table-column>
         <el-table-column prop="orderState" label="订单状态"></el-table-column>
         <el-table-column prop="orderRemark" label="订单备注"></el-table-column>
-        <el-table-column prop="transCode" label="交易单号"></el-table-column>
-        <el-table-column prop="orderTypeId" label="订单类型id"></el-table-column>
+<!--        <el-table-column prop="transCode" label="交易单号"></el-table-column>-->
+        <el-table-column prop="orderProductsLists" label="购买清单：商品id，商品名称，商品数量"></el-table-column>
+<!--        <el-table-column prop="storeId" label="购买的店铺"></el-table-column>-->
         <el-table-column label="操作" align="center" width="180">
           <template v-slot="scope">
             <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
@@ -48,8 +49,8 @@
 
     <el-dialog title="订单表" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
       <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
-        <el-form-item label="实付金额" prop="bitPay">
-          <el-input v-model="form.bitPay" placeholder="实付金额"></el-input>
+        <el-form-item label="实付金额" prop="bidPay">
+          <el-input v-model="form.bidPay" placeholder="实付金额"></el-input>
         </el-form-item>
         <el-form-item label="应付金额" prop="originPay">
           <el-input v-model="form.originPay" placeholder="应付金额"></el-input>
@@ -75,8 +76,11 @@
         <el-form-item label="交易单号" prop="transCode">
           <el-input v-model="form.transCode" placeholder="交易单号"></el-input>
         </el-form-item>
-        <el-form-item label="订单类型id" prop="orderTypeId">
-          <el-input v-model="form.orderTypeId" placeholder="订单类型id"></el-input>
+        <el-form-item label="购买清单：商品id，商品名称，商品数量" prop="orderProductsLists">
+          <el-input v-model="form.orderProductsLists" placeholder="购买清单：商品id，商品名称，商品数量"></el-input>
+        </el-form-item>
+        <el-form-item label="购买的店铺" prop="storeId">
+          <el-input v-model="form.storeId" placeholder="购买的店铺"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -107,7 +111,6 @@ export default {
     }
   },
   created() {
-    console.log("Orders.vue")
     this.load(1)
   },
   methods: {

vue/src/views/manager/ShopManager/Product.vue

@@ -18,7 +18,7 @@
         <el-table-column prop="productState" label="产品状态"></el-table-column>
         <el-table-column prop="productName" label="产品名称"></el-table-column>
         <el-table-column prop="productIcons" label="产品图标url"></el-table-column>
-        <el-table-column prop="productTypeIds" label="产品类型ids"></el-table-column>
+<!--        <el-table-column prop="productTypeIds" label="产品类型ids"></el-table-column>-->
         <el-table-column prop="productBidPrice" label="定价"></el-table-column>
         <el-table-column prop="productSellPrice" label="实付价格"></el-table-column>
         <el-table-column label="操作" align="center" width="180">
@@ -80,6 +80,7 @@ export default {
       tableData: [],  // 所有的数据
       pageNum: 1,   // 当前的页码
       pageSize: 10,  // 每页显示的个数
+      producsTypes:[], // 店铺商铺
       total: 0,
       username: null,
       fromVisible: false,
@@ -156,6 +157,8 @@ export default {
     },
     load(pageNum) {  // 分页查询
       if (pageNum) this.pageNum = pageNum
+
+
       this.$request.get('/product/selectPage', {
         params: {
           pageNum: this.pageNum,

vue/src/views/manager/ShopManager/ProductType.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 export default {
-  name: "Productype",
+  name: "ProductType",
   data() {
     return {
       tableData: [],  // 所有的数据
@@ -86,7 +86,7 @@ export default {
       this.$refs.formRef.validate((valid) => {
         if (valid) {
           this.$request({
-            url: this.form.id ? '/productype/update' : '/productype/add',
+            url: this.form.id ? '/productType/update' : '/productType/add',
             method: this.form.id ? 'PUT' : 'POST',
             data: this.form
           }).then(res => {
@@ -103,7 +103,7 @@ export default {
     },
     del(id) {   // 单个删除
       this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
-        this.$request.delete('/productype/delete/' + id).then(res => {
+        this.$request.delete('/productType/delete/' + id).then(res => {
           if (res.code === '200') {   // 表示操作成功
             this.$message.success('操作成功')
             this.load(1)
@@ -123,7 +123,7 @@ export default {
         return
       }
       this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
-        this.$request.delete('/productype/delete/batch', {data: this.ids}).then(res => {
+        this.$request.delete('/productType/delete/batch', {data: this.ids}).then(res => {
           if (res.code === '200') {   // 表示操作成功
             this.$message.success('操作成功')
             this.load(1)
@@ -136,7 +136,7 @@ export default {
     },
     load(pageNum) {  // 分页查询
       if (pageNum) this.pageNum = pageNum
-      this.$request.get('/productype/selectPage', {
+      this.$request.get('/productType/selectPage', {
         params: {
           pageNum: this.pageNum,
           pageSize: this.pageSize,