From 615f83861e7b913fd5f663f69d7c16b51eefbf10 Mon Sep 17 00:00:00 2001
From: wanglei <1336977847@qq.com>
Date: Mon, 24 Jun 2024 10:31:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=97=A8=E5=BA=97=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppArchives/components/List.vue           |   2 +-
 .../AppMarkRate/components/List.vue           |   3 +-
 .../AppMarkStatic/AppMarkStatic.vue           | 302 ++++++++++++++++++
 3 files changed, 304 insertions(+), 3 deletions(-)
 create mode 100644 project/fengdu/AppOutSource/AppMarkStatic/AppMarkStatic.vue

diff --git a/project/fengdu/AppOutSource/AppArchives/components/List.vue b/project/fengdu/AppOutSource/AppArchives/components/List.vue
index 07a6515b..207ae681 100644
--- a/project/fengdu/AppOutSource/AppArchives/components/List.vue
+++ b/project/fengdu/AppOutSource/AppArchives/components/List.vue
@@ -98,7 +98,7 @@
 
         <el-table-column label="门店评分" slot="mark" align="center">
           <template v-slot="{row}">
-            <el-rate :value="4" disabled></el-rate>
+            <el-rate :value="4" show-score  text-color="#ff9900" disabled></el-rate>
           </template>
         </el-table-column>
 
diff --git a/project/fengdu/AppOutSource/AppMarkRate/components/List.vue b/project/fengdu/AppOutSource/AppMarkRate/components/List.vue
index a54d8675..15f75f1e 100644
--- a/project/fengdu/AppOutSource/AppMarkRate/components/List.vue
+++ b/project/fengdu/AppOutSource/AppMarkRate/components/List.vue
@@ -1,8 +1,7 @@
 <template>
   <ai-list class="app-mark-list">
     <template slot="title">
-      <ai-title title="门店评价" isShowBottomBorder>
-      </ai-title>
+      <ai-title title="门店评价" isShowBottomBorder> </ai-title>
     </template>
     <template slot="content">
       <ai-search-bar class="search-bar">
diff --git a/project/fengdu/AppOutSource/AppMarkStatic/AppMarkStatic.vue b/project/fengdu/AppOutSource/AppMarkStatic/AppMarkStatic.vue
new file mode 100644
index 00000000..0590252b
--- /dev/null
+++ b/project/fengdu/AppOutSource/AppMarkStatic/AppMarkStatic.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="app-ark-static">
+    <ai-list>
+      <template #content>
+        <ai-title title="门店概况"></ai-title>
+        <div class="card_list">
+          <div class="card" v-for="(item,index) in cardList" :key="index">
+            <h2>{{ item.label }}</h2>
+            <p class="color1">{{ item.value || 0 }}</p>
+          </div>
+        </div>
+        <div class="flex-row">
+          <div class="left-row flex-col">
+            <ai-title title="6月五星门店（排名不分先后）">
+              <template #rightBtn>
+                <label class="tooltip">默认选择一个网格</label>
+                <el-select placeholder="请选择网格" v-model="form.data" size="small">
+                  <el-option
+                      v-for="item in []"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                  </el-option>
+                </el-select>
+              </template>
+            </ai-title>
+            <ai-table :is-show-pagination="false"
+                      :tableData="tableData"
+                      :col-configs="colConfigs"></ai-table>
+          </div>
+          <div class="right-row flex-col">
+            <ai-title title="网格五星门店数量排名"></ai-title>
+            <div class="bar-chart" ref="chartRef"></div>
+          </div>
+        </div>
+        <ai-title title="统计列表"></ai-title>
+        <ai-search-bar>
+          <template #left>
+            <ai-select
+                v-model="search.applyItemId"
+                @change="(search.current = 1), getList()"
+                placeholder="经营类型"
+                :selectList="[]">
+            </ai-select>
+            <ai-select
+                v-model="search.applyItemId"
+                @change="(search.current = 1), getList()"
+                placeholder="所属网格"
+                :selectList="[]">
+            </ai-select>
+          </template>
+          <template #right>
+            <el-input
+                v-model="search.createUserName"
+                size="small"
+                v-throttle="() => {search.current = 1, getList()}"
+                placeholder="请输入门店名称"
+                clearable
+                @clear="search.current = 1, search.createUserName = '', getList()"
+                suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table
+            :tableData="colConfigs1"
+            :col-configs="colConfigs1"
+            :total="total"
+            :current.sync="search.current"
+            :size.sync="search.size"
+            @getList="getList">
+          <el-table-column
+              label="门店照片"
+              slot="pic"
+              align="left">
+            <template v-slot="{ row }">
+              <img :src="row.picUrl" alt="" v-viewer>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="门店评分" slot="mark" align="center">
+            <template v-slot="{row}">
+              <el-rate :value="4" show-score  text-color="#ff9900" disabled></el-rate>
+            </template>
+          </el-table-column>
+
+        </ai-table>
+      </template>
+    </ai-list>
+  </div>
+</template>
+
+<script>
+let chartInstance = null;
+export default {
+  name: "AppMarkStatic",
+  label: '门店统计',
+  data() {
+    return {
+      data: {},
+      form: {},
+      search:{},
+      cardList: [
+        {
+          label: '门店总数量',
+          value: 122
+        },
+        {
+          label: '总网格数',
+          value: 122
+        },
+        {
+          label: '总网格员',
+          value: 122
+        },
+        {
+          label: '五星门店',
+          value: 122
+        }
+      ],
+      tableData: [],
+      colConfigs: [
+        {prop: '1', label: '门店名称', align: 'center'},
+        {prop: '2', label: '经营类型', align: 'center'},
+        {prop: '3', label: '经营者名称', align: 'center'},
+      ],
+      total: 10,
+      colConfigs1: [
+        {type: "selection"},
+        { slot: 'pic', align: 'center' },
+        { prop: 'integralUserName',  label: '门店名称', align: 'center' },
+        { prop: 'areaName',  label: '经营者姓名', align: 'center' },
+        { prop: 'girdName',  label: '联系电话', align: 'center' },
+        { prop: 'createTime',  label: '录入时间', align: 'center' },
+        { prop: 'createTime',  label: '所属网格', align: 'center' },
+        { prop: 'status',  label: '门店地址', align: 'center'},
+        { prop: 'auditUserName',  label: '经营类型', align: 'center' },
+        {slot:'mark',align: 'center'}
+      ],
+      tableData1: [],
+    }
+  },
+
+  methods: {
+    getList(){
+
+    },
+    resize() {
+      if (chartInstance) {
+        chartInstance.resize()
+      }
+    },
+    initChart() {
+      chartInstance = echarts.init(this.$refs.chartRef)
+      chartInstance.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: '1%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+        },
+        series: [
+          {
+            name: '2012',
+            type: 'bar',
+            itemStyle:{
+              color:'#389FFF'
+            },
+            data: [19325, 23438, 31000, 121594, 134141, 681807]
+          }
+        ]
+      })
+
+      window.addEventListener('resize', this.resize)
+    }
+  },
+
+  mounted() {
+    this.initChart()
+  },
+
+  beforeDestroy() {
+    if (chartInstance) {
+      chartInstance.dispose()
+      chartInstance = null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-ark-static {
+  height: 100%;
+  background: #F3F6F9;
+  overflow: auto;
+
+  .card_list {
+    display: flex;
+
+    .card {
+      flex: 1;
+      height: 96px;
+      background: #F9F9F9;
+      border-radius: 2px;
+      margin-right: 20px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+
+      h2 {
+        color: #888888;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      p {
+        margin-top: 8px;
+        font-size: 24px;
+        font-weight: 600;
+      }
+
+      .color1 {
+        color: #2891FF;
+      }
+
+      .color2 {
+        color: #22AA99;
+      }
+
+      .color3 {
+        color: #F8B425;
+      }
+    }
+
+    .card:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .flex-row {
+    width: 100%;
+    height: 400px;
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    margin-top: 10px;
+
+    .left-row {
+      height: 100%;
+      width: 50%;
+    }
+
+    .right-row {
+      width: 50%;
+      height: 100%;
+      display: flex;
+    }
+
+    .flex-col {
+      flex-direction: column;
+    }
+  }
+
+  .mt-10 {
+    margin-top: 20px;
+  }
+
+  .tooltip {
+    font-size: 18px;
+    color: #D9001B;
+    margin-right: 10px;
+  }
+
+  .h-full {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bar-chart {
+    width: 100%;
+    flex: 1;
+  }
+}
+</style>