From b9a056cc680ecdaf516c61ef21d538abe0f32163 Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Thu, 18 Jul 2024 14:17:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/homeComponents/agent.vue        | 644 ++++++++++++++++++
 .../src/views/homeComponents/manage.vue       | 644 ++++++++++++++++++
 .../src/views/homeComponents/shopowner.vue    | 644 ++++++++++++++++++
 fuintAdmin_zt/src/views/index.vue             | 626 +----------------
 4 files changed, 1943 insertions(+), 615 deletions(-)
 create mode 100644 fuintAdmin_zt/src/views/homeComponents/agent.vue
 create mode 100644 fuintAdmin_zt/src/views/homeComponents/manage.vue
 create mode 100644 fuintAdmin_zt/src/views/homeComponents/shopowner.vue

diff --git a/fuintAdmin_zt/src/views/homeComponents/agent.vue b/fuintAdmin_zt/src/views/homeComponents/agent.vue
new file mode 100644
index 000000000..1d5a659b1
--- /dev/null
+++ b/fuintAdmin_zt/src/views/homeComponents/agent.vue
@@ -0,0 +1,644 @@
+<template>
+  <div class="app-container">
+    <div class="bannser">
+      <img src="../../assets/images/banner.png" alt="" >
+    </div>
+    <div class="b-bs">
+      <div class="left-box">
+        <div class="san-box">
+          <div>
+            <img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
+            <div class="r-size">合作油站总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
+          <div>
+            <img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
+            <div class="r-size">7日活跃油站汇总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
+          <div>
+            <img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
+            <div class="r-size">本月新增油站数</div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="title_">
+          <div>通知中心</div>
+          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
+        </div>
+        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
+      </div>
+    </div>
+    <div class="b-bs">
+      <div class="left-box-t">
+        <div class="d-s">
+          <div class="h-tt" >数据看板</div>
+          <div class="q-anniu">近一周</div>
+          <div style="margin-right: 40px">
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="getStoreAmount">
+            </el-date-picker>
+          </div>
+          <div style="margin-right: 40px">
+            <el-select v-model="value" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.deptId"
+                :label="item.deptName"
+                :value="item.deptId">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="d-s" style="margin-top: 15px">
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>活跃油站数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>交易金额(万元)/交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>退款金额(元)/退款笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>笔均单价(元)</div>
+            </div>
+            <div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>日均交易额(万元)/日均交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
+          </div>
+        </div>
+        <div class="hui-hang"></div>
+        <div class="d-s" >
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div id="ccc" style="width: 300px;height: 200px; "></div>
+          </div>
+          <div class="h-r-ba"></div>
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div class="d-s" style="justify-content: space-between">
+              <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
+              <div id="ccct" style="width: 300px;height: 200px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box-t">
+        <div class="h-tt" >硬件设备</div>
+        <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
+          <div class="r-img">
+            <img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
+          </div>
+          <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_">
+      <div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
+      <div class="d-s">
+        <div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
+          {{item}}
+        </div>
+        <el-date-picker
+          v-model="value2"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </div>
+      <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
+import {selectChildByDeptId} from "@/api/system/Site/site";
+import {parseTime} from "@/utils/fuint";
+export default {
+
+  data(){
+    return{
+      form: {},
+      timeList:[
+        "今日",
+        "近一周",
+        "近一月",
+        "近一年",
+      ],
+
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      value1: [],
+      value2: [],
+      imagePath: process.env.VUE_APP_SERVER_URL,
+      queryParams:{},
+      // 店铺数量
+      storeTotal:{},
+      // 店铺金额
+      storeAmount:{},
+    }
+  },
+  created() {
+    let nowDate = new Date();
+    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
+    this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
+    this.getStoreTotal()
+    this.selectChildByDeptIdApi()
+    this.getStoreAmount()
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods:{
+    // 查询
+    selectChildByDeptIdApi() {
+      selectChildByDeptId().then(res => {
+        this.options = res.data
+      })
+    },
+    getStoreTotal(){
+      storeTotalIndex().then(res => {
+        this.storeTotal = res.data
+      })
+    },
+    getStoreAmount(){
+      storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
+        this.storeAmount = res.data
+      })
+    },
+    initChart() {
+      const chart = echarts.init(document.getElementById('ccc'))
+      const chart1 = echarts.init(document.getElementById('cccc'))
+      const chart2= echarts.init(document.getElementById('ccct'))
+      const chart3= echarts.init(document.getElementById('ctct'))
+
+
+      const option = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option1 = {
+        color: [
+          '#3B6ADE',
+          '#409eff',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option2 = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option3 = {
+        color: ['#FF9655', '#0DC291', '#409EFF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+
+        legend: {
+          data: ['交易金额', '交易笔数', '活跃油站数']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '00:00',
+              '02:00',
+              '04:00',
+              '06:00',
+              '08:00',
+              '10:00',
+              '12:00',
+              '14:00',
+              '16:00',
+              '18:00',
+              '20:00',
+              '22:00'
+            ],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '金额(元)',
+
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} '
+            }
+          },
+          {
+            type: 'value',
+            name: '笔数',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value}'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '活跃油站数',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            barWidth: 13,
+            itemStyle: {
+              normal: {
+                //这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
+                barBorderRadius: [50, 50, 0, 0]
+              }
+            },
+            data: [
+              30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
+            ]
+          },
+
+          {
+            name: '交易金额',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
+          },
+          {
+            name: '交易笔数',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
+          }
+        ],
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '3%',
+          containLabel: true
+        }
+
+      };
+
+      chart.setOption(option)
+      chart1.setOption(option1)
+      chart2.setOption(option2)
+      chart3.setOption(option3)
+
+
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+.app-container{
+  width: 100%;
+  height: 100%;
+  /* height: 100vh; */
+  background: #f4f5f9;
+}
+.d-s{
+  display: flex;
+  align-items: center;
+}
+.bannser{
+  width: 100%;
+  height: 230px;
+  border-radius: 8px;
+  overflow: hidden;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+
+}
+.b-bs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left-box{
+  width: 73%;
+  background: #FFFFFF;
+  border-radius: 10px 10px 10px 10px;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.left-box-t{
+  width: 73%;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+
+}
+.right-box{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.right-box-t{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.san-box{
+  width: 360px;
+  height: 150px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
+  margin: 15px 0px;
+  margin-right: 15px;
+  box-sizing: border-box;
+  padding: 20px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.r-title{
+  font-weight: bold;
+  font-size: 42px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.r-size{
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.title_{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.hang_{
+  width: 100%;
+  white-space: nowrap;   //不换行
+  overflow: hidden;       //超出部分隐藏
+  text-overflow: ellipsis;    //文本溢出显示省略号
+  font-size: 14px;
+  color: #777777;
+  margin: 14px auto;
+}
+.h-tt{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  margin-right: 40px;
+}
+.q-anniu{
+  width: 80px;
+  height: 26px;
+  background: #FF9655;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.k-box{
+  width: 215px;
+  height: 68px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #e1e0e0;
+  box-sizing: border-box;
+  padding: 10px;
+  margin-right: 10px;
+}
+.num-size{
+  font-weight: bold;
+  font-size: 24px;
+  color: #555555;
+}
+.sian{
+  width: 6px;
+  height: 6px;
+  background: #2BBCFF;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.hui-hang{
+  width: 100%;
+  height: 5px;
+  background: #F4F5F9;
+  margin: 15px auto;
+}
+.h-r-ba{
+  height: 170px;
+  margin: 0px 50px;
+  width: 5px;
+  background: #f4f5f9;
+}
+.r-img{
+  width: 84px;
+  height: 70px;
+  margin-right: 20px;
+}
+.bottom_{
+  width: 100%;
+  border-radius: 10px;
+  background:  #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  margin-top: 20px;
+}
+.anniu-h{
+  width: 80px;
+  height: 26px;
+  background: #FAFAFA;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #DDDDDD;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #777777;
+  margin-right: 20px;
+}
+.anniu-act{
+  background: #FF9655 !important;
+  border: 1px solid #FF9655 !important;
+  color: #fff;
+
+}
+</style>
diff --git a/fuintAdmin_zt/src/views/homeComponents/manage.vue b/fuintAdmin_zt/src/views/homeComponents/manage.vue
new file mode 100644
index 000000000..1d5a659b1
--- /dev/null
+++ b/fuintAdmin_zt/src/views/homeComponents/manage.vue
@@ -0,0 +1,644 @@
+<template>
+  <div class="app-container">
+    <div class="bannser">
+      <img src="../../assets/images/banner.png" alt="" >
+    </div>
+    <div class="b-bs">
+      <div class="left-box">
+        <div class="san-box">
+          <div>
+            <img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
+            <div class="r-size">合作油站总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
+          <div>
+            <img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
+            <div class="r-size">7日活跃油站汇总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
+          <div>
+            <img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
+            <div class="r-size">本月新增油站数</div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="title_">
+          <div>通知中心</div>
+          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
+        </div>
+        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
+      </div>
+    </div>
+    <div class="b-bs">
+      <div class="left-box-t">
+        <div class="d-s">
+          <div class="h-tt" >数据看板</div>
+          <div class="q-anniu">近一周</div>
+          <div style="margin-right: 40px">
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="getStoreAmount">
+            </el-date-picker>
+          </div>
+          <div style="margin-right: 40px">
+            <el-select v-model="value" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.deptId"
+                :label="item.deptName"
+                :value="item.deptId">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="d-s" style="margin-top: 15px">
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>活跃油站数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>交易金额(万元)/交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>退款金额(元)/退款笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>笔均单价(元)</div>
+            </div>
+            <div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>日均交易额(万元)/日均交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
+          </div>
+        </div>
+        <div class="hui-hang"></div>
+        <div class="d-s" >
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div id="ccc" style="width: 300px;height: 200px; "></div>
+          </div>
+          <div class="h-r-ba"></div>
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div class="d-s" style="justify-content: space-between">
+              <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
+              <div id="ccct" style="width: 300px;height: 200px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box-t">
+        <div class="h-tt" >硬件设备</div>
+        <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
+          <div class="r-img">
+            <img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
+          </div>
+          <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_">
+      <div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
+      <div class="d-s">
+        <div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
+          {{item}}
+        </div>
+        <el-date-picker
+          v-model="value2"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </div>
+      <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
+import {selectChildByDeptId} from "@/api/system/Site/site";
+import {parseTime} from "@/utils/fuint";
+export default {
+
+  data(){
+    return{
+      form: {},
+      timeList:[
+        "今日",
+        "近一周",
+        "近一月",
+        "近一年",
+      ],
+
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      value1: [],
+      value2: [],
+      imagePath: process.env.VUE_APP_SERVER_URL,
+      queryParams:{},
+      // 店铺数量
+      storeTotal:{},
+      // 店铺金额
+      storeAmount:{},
+    }
+  },
+  created() {
+    let nowDate = new Date();
+    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
+    this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
+    this.getStoreTotal()
+    this.selectChildByDeptIdApi()
+    this.getStoreAmount()
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods:{
+    // 查询
+    selectChildByDeptIdApi() {
+      selectChildByDeptId().then(res => {
+        this.options = res.data
+      })
+    },
+    getStoreTotal(){
+      storeTotalIndex().then(res => {
+        this.storeTotal = res.data
+      })
+    },
+    getStoreAmount(){
+      storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
+        this.storeAmount = res.data
+      })
+    },
+    initChart() {
+      const chart = echarts.init(document.getElementById('ccc'))
+      const chart1 = echarts.init(document.getElementById('cccc'))
+      const chart2= echarts.init(document.getElementById('ccct'))
+      const chart3= echarts.init(document.getElementById('ctct'))
+
+
+      const option = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option1 = {
+        color: [
+          '#3B6ADE',
+          '#409eff',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option2 = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option3 = {
+        color: ['#FF9655', '#0DC291', '#409EFF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+
+        legend: {
+          data: ['交易金额', '交易笔数', '活跃油站数']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '00:00',
+              '02:00',
+              '04:00',
+              '06:00',
+              '08:00',
+              '10:00',
+              '12:00',
+              '14:00',
+              '16:00',
+              '18:00',
+              '20:00',
+              '22:00'
+            ],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '金额(元)',
+
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} '
+            }
+          },
+          {
+            type: 'value',
+            name: '笔数',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value}'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '活跃油站数',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            barWidth: 13,
+            itemStyle: {
+              normal: {
+                //这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
+                barBorderRadius: [50, 50, 0, 0]
+              }
+            },
+            data: [
+              30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
+            ]
+          },
+
+          {
+            name: '交易金额',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
+          },
+          {
+            name: '交易笔数',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
+          }
+        ],
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '3%',
+          containLabel: true
+        }
+
+      };
+
+      chart.setOption(option)
+      chart1.setOption(option1)
+      chart2.setOption(option2)
+      chart3.setOption(option3)
+
+
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+.app-container{
+  width: 100%;
+  height: 100%;
+  /* height: 100vh; */
+  background: #f4f5f9;
+}
+.d-s{
+  display: flex;
+  align-items: center;
+}
+.bannser{
+  width: 100%;
+  height: 230px;
+  border-radius: 8px;
+  overflow: hidden;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+
+}
+.b-bs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left-box{
+  width: 73%;
+  background: #FFFFFF;
+  border-radius: 10px 10px 10px 10px;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.left-box-t{
+  width: 73%;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+
+}
+.right-box{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.right-box-t{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.san-box{
+  width: 360px;
+  height: 150px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
+  margin: 15px 0px;
+  margin-right: 15px;
+  box-sizing: border-box;
+  padding: 20px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.r-title{
+  font-weight: bold;
+  font-size: 42px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.r-size{
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.title_{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.hang_{
+  width: 100%;
+  white-space: nowrap;   //不换行
+  overflow: hidden;       //超出部分隐藏
+  text-overflow: ellipsis;    //文本溢出显示省略号
+  font-size: 14px;
+  color: #777777;
+  margin: 14px auto;
+}
+.h-tt{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  margin-right: 40px;
+}
+.q-anniu{
+  width: 80px;
+  height: 26px;
+  background: #FF9655;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.k-box{
+  width: 215px;
+  height: 68px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #e1e0e0;
+  box-sizing: border-box;
+  padding: 10px;
+  margin-right: 10px;
+}
+.num-size{
+  font-weight: bold;
+  font-size: 24px;
+  color: #555555;
+}
+.sian{
+  width: 6px;
+  height: 6px;
+  background: #2BBCFF;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.hui-hang{
+  width: 100%;
+  height: 5px;
+  background: #F4F5F9;
+  margin: 15px auto;
+}
+.h-r-ba{
+  height: 170px;
+  margin: 0px 50px;
+  width: 5px;
+  background: #f4f5f9;
+}
+.r-img{
+  width: 84px;
+  height: 70px;
+  margin-right: 20px;
+}
+.bottom_{
+  width: 100%;
+  border-radius: 10px;
+  background:  #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  margin-top: 20px;
+}
+.anniu-h{
+  width: 80px;
+  height: 26px;
+  background: #FAFAFA;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #DDDDDD;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #777777;
+  margin-right: 20px;
+}
+.anniu-act{
+  background: #FF9655 !important;
+  border: 1px solid #FF9655 !important;
+  color: #fff;
+
+}
+</style>
diff --git a/fuintAdmin_zt/src/views/homeComponents/shopowner.vue b/fuintAdmin_zt/src/views/homeComponents/shopowner.vue
new file mode 100644
index 000000000..1d5a659b1
--- /dev/null
+++ b/fuintAdmin_zt/src/views/homeComponents/shopowner.vue
@@ -0,0 +1,644 @@
+<template>
+  <div class="app-container">
+    <div class="bannser">
+      <img src="../../assets/images/banner.png" alt="" >
+    </div>
+    <div class="b-bs">
+      <div class="left-box">
+        <div class="san-box">
+          <div>
+            <img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
+            <div class="r-size">合作油站总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
+          <div>
+            <img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
+            <div class="r-size">7日活跃油站汇总数</div>
+          </div>
+        </div>
+        <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
+          <div>
+            <img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
+          </div>
+          <div>
+            <div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
+            <div class="r-size">本月新增油站数</div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="title_">
+          <div>通知中心</div>
+          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
+        </div>
+        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
+      </div>
+    </div>
+    <div class="b-bs">
+      <div class="left-box-t">
+        <div class="d-s">
+          <div class="h-tt" >数据看板</div>
+          <div class="q-anniu">近一周</div>
+          <div style="margin-right: 40px">
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="getStoreAmount">
+            </el-date-picker>
+          </div>
+          <div style="margin-right: 40px">
+            <el-select v-model="value" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.deptId"
+                :label="item.deptName"
+                :value="item.deptId">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="d-s" style="margin-top: 15px">
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>活跃油站数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>交易金额(万元)/交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>退款金额(元)/退款笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>笔均单价(元)</div>
+            </div>
+            <div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
+          </div>
+          <div class="k-box">
+            <div class="d-s" style="font-size: 12px;color: #999999;">
+              <div class="sian"></div>
+              <div>日均交易额(万元)/日均交易笔数</div>
+            </div>
+            <div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
+          </div>
+        </div>
+        <div class="hui-hang"></div>
+        <div class="d-s" >
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div id="ccc" style="width: 300px;height: 200px; "></div>
+          </div>
+          <div class="h-r-ba"></div>
+          <div>
+            <div class="h-tt" >活跃油站</div>
+            <div class="d-s" style="justify-content: space-between">
+              <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
+              <div id="ccct" style="width: 300px;height: 200px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box-t">
+        <div class="h-tt" >硬件设备</div>
+        <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
+          <div class="r-img">
+            <img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">
+          </div>
+          <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_">
+      <div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
+      <div class="d-s">
+        <div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
+          {{item}}
+        </div>
+        <el-date-picker
+          v-model="value2"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </div>
+      <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
+import {selectChildByDeptId} from "@/api/system/Site/site";
+import {parseTime} from "@/utils/fuint";
+export default {
+
+  data(){
+    return{
+      form: {},
+      timeList:[
+        "今日",
+        "近一周",
+        "近一月",
+        "近一年",
+      ],
+
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      value1: [],
+      value2: [],
+      imagePath: process.env.VUE_APP_SERVER_URL,
+      queryParams:{},
+      // 店铺数量
+      storeTotal:{},
+      // 店铺金额
+      storeAmount:{},
+    }
+  },
+  created() {
+    let nowDate = new Date();
+    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
+    this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
+    this.getStoreTotal()
+    this.selectChildByDeptIdApi()
+    this.getStoreAmount()
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods:{
+    // 查询
+    selectChildByDeptIdApi() {
+      selectChildByDeptId().then(res => {
+        this.options = res.data
+      })
+    },
+    getStoreTotal(){
+      storeTotalIndex().then(res => {
+        this.storeTotal = res.data
+      })
+    },
+    getStoreAmount(){
+      storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
+        this.storeAmount = res.data
+      })
+    },
+    initChart() {
+      const chart = echarts.init(document.getElementById('ccc'))
+      const chart1 = echarts.init(document.getElementById('cccc'))
+      const chart2= echarts.init(document.getElementById('ccct'))
+      const chart3= echarts.init(document.getElementById('ctct'))
+
+
+      const option = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option1 = {
+        color: [
+          '#3B6ADE',
+          '#409eff',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option2 = {
+        color: [
+          '#0DC291',
+          '#FFB519',
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 28, name: '28%' },
+              { value: 72, name: '72%' },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      const option3 = {
+        color: ['#FF9655', '#0DC291', '#409EFF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+
+        legend: {
+          data: ['交易金额', '交易笔数', '活跃油站数']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '00:00',
+              '02:00',
+              '04:00',
+              '06:00',
+              '08:00',
+              '10:00',
+              '12:00',
+              '14:00',
+              '16:00',
+              '18:00',
+              '20:00',
+              '22:00'
+            ],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '金额(元)',
+
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} '
+            }
+          },
+          {
+            type: 'value',
+            name: '笔数',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value}'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '活跃油站数',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            barWidth: 13,
+            itemStyle: {
+              normal: {
+                //这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
+                barBorderRadius: [50, 50, 0, 0]
+              }
+            },
+            data: [
+              30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
+            ]
+          },
+
+          {
+            name: '交易金额',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
+          },
+          {
+            name: '交易笔数',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
+          }
+        ],
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '3%',
+          containLabel: true
+        }
+
+      };
+
+      chart.setOption(option)
+      chart1.setOption(option1)
+      chart2.setOption(option2)
+      chart3.setOption(option3)
+
+
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+.app-container{
+  width: 100%;
+  height: 100%;
+  /* height: 100vh; */
+  background: #f4f5f9;
+}
+.d-s{
+  display: flex;
+  align-items: center;
+}
+.bannser{
+  width: 100%;
+  height: 230px;
+  border-radius: 8px;
+  overflow: hidden;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+
+}
+.b-bs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left-box{
+  width: 73%;
+  background: #FFFFFF;
+  border-radius: 10px 10px 10px 10px;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.left-box-t{
+  width: 73%;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+
+}
+.right-box{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.right-box-t{
+  width: 25%;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.san-box{
+  width: 360px;
+  height: 150px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
+  margin: 15px 0px;
+  margin-right: 15px;
+  box-sizing: border-box;
+  padding: 20px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.r-title{
+  font-weight: bold;
+  font-size: 42px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.r-size{
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.title_{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.hang_{
+  width: 100%;
+  white-space: nowrap;   //不换行
+  overflow: hidden;       //超出部分隐藏
+  text-overflow: ellipsis;    //文本溢出显示省略号
+  font-size: 14px;
+  color: #777777;
+  margin: 14px auto;
+}
+.h-tt{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  margin-right: 40px;
+}
+.q-anniu{
+  width: 80px;
+  height: 26px;
+  background: #FF9655;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.k-box{
+  width: 215px;
+  height: 68px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #e1e0e0;
+  box-sizing: border-box;
+  padding: 10px;
+  margin-right: 10px;
+}
+.num-size{
+  font-weight: bold;
+  font-size: 24px;
+  color: #555555;
+}
+.sian{
+  width: 6px;
+  height: 6px;
+  background: #2BBCFF;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.hui-hang{
+  width: 100%;
+  height: 5px;
+  background: #F4F5F9;
+  margin: 15px auto;
+}
+.h-r-ba{
+  height: 170px;
+  margin: 0px 50px;
+  width: 5px;
+  background: #f4f5f9;
+}
+.r-img{
+  width: 84px;
+  height: 70px;
+  margin-right: 20px;
+}
+.bottom_{
+  width: 100%;
+  border-radius: 10px;
+  background:  #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  margin-top: 20px;
+}
+.anniu-h{
+  width: 80px;
+  height: 26px;
+  background: #FAFAFA;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #DDDDDD;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #777777;
+  margin-right: 20px;
+}
+.anniu-act{
+  background: #FF9655 !important;
+  border: 1px solid #FF9655 !important;
+  color: #fff;
+
+}
+</style>
diff --git a/fuintAdmin_zt/src/views/index.vue b/fuintAdmin_zt/src/views/index.vue
index b92068e3d..36a1e3bc4 100644
--- a/fuintAdmin_zt/src/views/index.vue
+++ b/fuintAdmin_zt/src/views/index.vue
@@ -1,445 +1,29 @@
 <template>
-  <div class="app-container">
-    <div class="bannser">
-      <img src="./../assets/images/banner.png" alt="" >
-    </div>
-    <div class="b-bs">
-      <div class="left-box">
-        <div class="san-box">
-          <div>
-            <img src="./../assets/images/l-one.png" style="width: 80px;height: 80px">
-          </div>
-          <div>
-            <div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
-            <div class="r-size">合作油站总数</div>
-          </div>
-        </div>
-        <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
-          <div>
-            <img src="./../assets/images/l-two.png" style="width: 80px;height: 80px">
-          </div>
-          <div>
-            <div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
-            <div class="r-size">7日活跃油站汇总数</div>
-          </div>
-        </div>
-        <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
-          <div>
-            <img src="./../assets/images/l-three.png" style="width: 80px;height: 80px">
-          </div>
-          <div>
-            <div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
-            <div class="r-size">本月新增油站数</div>
-          </div>
-        </div>
-      </div>
-      <div class="right-box">
-        <div class="title_">
-          <div>通知中心</div>
-          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
-        </div>
-        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
-      </div>
-    </div>
-    <div class="b-bs">
-      <div class="left-box-t">
-        <div class="d-s">
-          <div class="h-tt" >数据看板</div>
-          <div class="q-anniu">近一周</div>
-          <div style="margin-right: 40px">
-            <el-date-picker
-              v-model="value1"
-              type="datetimerange"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              @change="getStoreAmount">
-            </el-date-picker>
-          </div>
-          <div style="margin-right: 40px">
-            <el-select v-model="value" clearable placeholder="请选择">
-              <el-option
-                v-for="item in options"
-                :key="item.deptId"
-                :label="item.deptName"
-                :value="item.deptId">
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="d-s" style="margin-top: 15px">
-          <div class="k-box">
-            <div class="d-s" style="font-size: 12px;color: #999999;">
-              <div class="sian"></div>
-              <div>活跃油站数</div>
-            </div>
-            <div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
-          </div>
-          <div class="k-box">
-            <div class="d-s" style="font-size: 12px;color: #999999;">
-              <div class="sian"></div>
-              <div>交易金额(万元)/交易笔数</div>
-            </div>
-            <div class="num-size">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</div>
-          </div>
-          <div class="k-box">
-            <div class="d-s" style="font-size: 12px;color: #999999;">
-              <div class="sian"></div>
-              <div>退款金额(元)/退款笔数</div>
-            </div>
-            <div class="num-size">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</div>
-          </div>
-          <div class="k-box">
-            <div class="d-s" style="font-size: 12px;color: #999999;">
-              <div class="sian"></div>
-              <div>笔均单价(元)</div>
-            </div>
-            <div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
-          </div>
-          <div class="k-box">
-            <div class="d-s" style="font-size: 12px;color: #999999;">
-              <div class="sian"></div>
-              <div>日均交易额(万元)/日均交易笔数</div>
-            </div>
-            <div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
-          </div>
-        </div>
-        <div class="hui-hang"></div>
-        <div class="d-s" >
-          <div>
-            <div class="h-tt" >活跃油站</div>
-            <div id="ccc" style="width: 300px;height: 200px; "></div>
-          </div>
-          <div class="h-r-ba"></div>
-          <div>
-            <div class="h-tt" >活跃油站</div>
-            <div class="d-s" style="justify-content: space-between">
-              <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
-              <div id="ccct" style="width: 300px;height: 200px;"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="right-box-t">
-        <div class="h-tt" >硬件设备</div>
-        <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in 3" :key="index" >
-          <div class="r-img">
-            <img src="./../assets/images/pcin.png" style="width: 84px;height: 70px">
-          </div>
-          <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>
-        </div>
-      </div>
-    </div>
-    <div class="bottom_">
-      <div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
-      <div class="d-s">
-       <div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
-         {{item}}
-       </div>
-        <el-date-picker
-          v-model="value2"
-          type="datetimerange"
-          range-separator="至"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </div>
-        <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
-
-    </div>
-
+  <div class="">
+    <agent v-if="power == 1"></agent>
+    <manage v-if="power == 2"></manage>
+    <shopowner v-if="power == 3"></shopowner>
   </div>
 </template>
 
 <script>
-import echarts from "echarts";
-import {storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
-import {selectChildByDeptId} from "@/api/system/Site/site";
-import {parseTime} from "@/utils/fuint";
+import agent from "@/views/homeComponents/agent.vue";
+import manage from "@/views/homeComponents/manage.vue"
+import shopowner from "@/views/homeComponents/shopowner.vue"
 export default {
-
   data(){
     return{
-      form: {},
-      timeList:[
-        "今日",
-        "近一周",
-        "近一月",
-        "近一年",
-      ],
-
-      options: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      value: '',
-      value1: [],
-      value2: [],
-      imagePath: process.env.VUE_APP_SERVER_URL,
-      queryParams:{},
-      // 店铺数量
-      storeTotal:{},
-      // 店铺金额
-      storeAmount:{},
+      power:1
     }
   },
   created() {
-    let nowDate = new Date();
-    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
-    this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
-    this.getStoreTotal()
-    this.selectChildByDeptIdApi()
-    this.getStoreAmount()
   },
   mounted() {
-    this.initChart()
+  },
+  components:{
+    agent,manage,shopowner
   },
   methods:{
-    // 查询
-    selectChildByDeptIdApi() {
-      selectChildByDeptId().then(res => {
-        this.options = res.data
-      })
-    },
-    getStoreTotal(){
-      storeTotalIndex().then(res => {
-        this.storeTotal = res.data
-      })
-    },
-    getStoreAmount(){
-      storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
-        this.storeAmount = res.data
-      })
-    },
-    initChart() {
-      const chart = echarts.init(document.getElementById('ccc'))
-      const chart1 = echarts.init(document.getElementById('cccc'))
-      const chart2= echarts.init(document.getElementById('ccct'))
-      const chart3= echarts.init(document.getElementById('ctct'))
-
-
-      const option = {
-        color: [
-          '#0DC291',
-          '#FFB519',
-        ],
-        tooltip: {
-          trigger: 'item'
-        },
-
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: '80%',
-            data: [
-              { value: 28, name: '28%' },
-              { value: 72, name: '72%' },
-
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      };
-      const option1 = {
-        color: [
-          '#3B6ADE',
-          '#409eff',
-        ],
-        tooltip: {
-          trigger: 'item'
-        },
-
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: '80%',
-            data: [
-              { value: 28, name: '28%' },
-              { value: 72, name: '72%' },
-
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      };
-      const option2 = {
-        color: [
-          '#0DC291',
-          '#FFB519',
-        ],
-        tooltip: {
-          trigger: 'item'
-        },
-
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: '80%',
-            data: [
-              { value: 28, name: '28%' },
-              { value: 72, name: '72%' },
-
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      };
-      const option3 = {
-        color: ['#FF9655', '#0DC291', '#409EFF'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#999'
-            }
-          }
-        },
-
-        legend: {
-          data: ['交易金额', '交易笔数', '活跃油站数']
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: [
-              '00:00',
-              '02:00',
-              '04:00',
-              '06:00',
-              '08:00',
-              '10:00',
-              '12:00',
-              '14:00',
-              '16:00',
-              '18:00',
-              '20:00',
-              '22:00'
-            ],
-            axisPointer: {
-              type: 'shadow'
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '金额(元)',
-
-            min: 0,
-            max: 250,
-            interval: 50,
-            axisLabel: {
-              formatter: '{value} '
-            }
-          },
-          {
-            type: 'value',
-            name: '笔数',
-            min: 0,
-            max: 25,
-            interval: 5,
-            axisLabel: {
-              formatter: '{value}'
-            }
-          }
-        ],
-        series: [
-          {
-            name: '活跃油站数',
-            type: 'bar',
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' ml';
-              }
-            },
-            barWidth: 13,
-            itemStyle: {
-              normal: {
-                //这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
-                barBorderRadius: [50, 50, 0, 0]
-              }
-            },
-            data: [
-              30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
-            ]
-          },
-
-          {
-            name: '交易金额',
-            type: 'line',
-            yAxisIndex: 1,
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' °C';
-              }
-            },
-            data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
-          },
-          {
-            name: '交易笔数',
-            type: 'line',
-            yAxisIndex: 1,
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' °C';
-              }
-            },
-            data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
-          }
-        ],
-        grid: {
-          left: '1%',
-          right: '1%',
-          bottom: '3%',
-          containLabel: true
-        }
-
-      };
-
-      chart.setOption(option)
-      chart1.setOption(option1)
-      chart2.setOption(option2)
-      chart3.setOption(option3)
-
-
-    }
-
   }
 
 }
@@ -450,195 +34,7 @@ export default {
 .app-container{
   width: 100%;
   height: 100%;
-  /* height: 100vh; */
   background: #f4f5f9;
 }
-.d-s{
-  display: flex;
-  align-items: center;
-}
-.bannser{
-  width: 100%;
-  height: 230px;
-  border-radius: 8px;
-  overflow: hidden;
-  img{
-    width: 100%;
-    height: 100%;
-  }
 
-}
-.b-bs{
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-.left-box{
-  width: 73%;
-  background: #FFFFFF;
-  border-radius: 10px 10px 10px 10px;
-  border: 1px solid #FFFFFF;
-  height: 192px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 15px;
-}
-.left-box-t{
-  width: 73%;
-  box-sizing: border-box;
-  padding: 15px;
-  border-radius: 8px;
-  background: #fff;
-  border: 1px solid #FFFFFF;
-  height: 380px;
-
-}
-.right-box{
-  width: 25%;
-  border-radius: 8px;
-  background: #fff;
-  border: 1px solid #FFFFFF;
-  height: 192px;
-  box-sizing: border-box;
-  padding: 15px;
-}
-.right-box-t{
-  width: 25%;
-  border-radius: 8px;
-  background: #fff;
-  border: 1px solid #FFFFFF;
-  height: 380px;
-  box-sizing: border-box;
-  padding: 15px;
-}
-.san-box{
-  width: 360px;
-  height: 150px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
-  margin: 15px 0px;
-  margin-right: 15px;
-  box-sizing: border-box;
-  padding: 20px 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.r-title{
-  font-weight: bold;
-  font-size: 42px;
-  color: #FFFFFF;
-  text-align: center;
-}
-.r-size{
-  font-size: 14px;
-  color: #FFFFFF;
-}
-.title_{
-  font-size: 16px;
-  color: #333333;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-.hang_{
-  width: 100%;
-  white-space: nowrap;   //不换行
-  overflow: hidden;       //超出部分隐藏
-  text-overflow: ellipsis;    //文本溢出显示省略号
-  font-size: 14px;
-  color: #777777;
-  margin: 14px auto;
-}
-.h-tt{
-  font-size: 16px;
-  color: #333333;
-  font-weight: bold;
-  margin-right: 40px;
-}
-.q-anniu{
-  width: 80px;
-  height: 26px;
-  background: #FF9655;
-  border-radius: 4px 4px 4px 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  cursor: pointer;
-  margin-right: 20px;
-}
-
-.k-box{
-  width: 215px;
-  height: 68px;
-  background: #FFFFFF;
-  border-radius: 8px;
-  border: 1px solid #e1e0e0;
-  box-sizing: border-box;
-  padding: 10px;
-  margin-right: 10px;
-}
-.num-size{
-  font-weight: bold;
-  font-size: 24px;
-  color: #555555;
-}
-.sian{
-  width: 6px;
-  height: 6px;
-  background: #2BBCFF;
-  border-radius: 50%;
-  margin-right: 5px;
-}
-.hui-hang{
-  width: 100%;
-  height: 5px;
-  background: #F4F5F9;
-  margin: 15px auto;
-}
-.h-r-ba{
-  height: 170px;
-  margin: 0px 50px;
-  width: 5px;
-  background: #f4f5f9;
-}
-.r-img{
-  width: 84px;
-  height: 70px;
-  margin-right: 20px;
-}
-.bottom_{
-  width: 100%;
-  border-radius: 10px;
-  background:  #fff;
-  box-sizing: border-box;
-  padding: 20px;
-  margin-top: 20px;
-}
-.anniu-h{
-  width: 80px;
-  height: 26px;
-  background: #FAFAFA;
-  border-radius: 4px 4px 4px 4px;
-  border: 1px solid #DDDDDD;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #777777;
-  margin-right: 20px;
-}
-.anniu-act{
-  background: #FF9655 !important;
-  border: 1px solid #FF9655 !important;
-  color: #fff;
-
-}
 </style>