This commit is contained in:
weipengfei 2024-06-20 15:44:00 +08:00
parent d7c236debe
commit 93749181c8
10 changed files with 470 additions and 40 deletions

View File

@ -2,5 +2,5 @@ NODE_ENV = 'development'
VITE_NOW_TYPE = 'dist' VITE_NOW_TYPE = 'dist'
# Base API # Base API
# VITE_APP_BASE_URL='http://192.168.1.22:8545' VITE_APP_BASE_URL='http://192.168.1.22:8545'
VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn' # VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn'

View File

@ -54,6 +54,78 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6bc;</span>
<div class="name">结算</div>
<div class="code-name">&amp;#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c0;</span>
<div class="name">结算报表</div>
<div class="code-name">&amp;#xe6c0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c5;</span>
<div class="name">结算单</div>
<div class="code-name">&amp;#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c7;</span>
<div class="name">结算管理</div>
<div class="code-name">&amp;#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c9;</span>
<div class="name">返利规则</div>
<div class="code-name">&amp;#xe6c9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ca;</span>
<div class="name">月结</div>
<div class="code-name">&amp;#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cb;</span>
<div class="name">结算单管理</div>
<div class="code-name">&amp;#xe6cb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cc;</span>
<div class="name">月结管理</div>
<div class="code-name">&amp;#xe6cc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d0;</span>
<div class="name">智慧销售</div>
<div class="code-name">&amp;#xe6d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d2;</span>
<div class="name">智慧销售管理</div>
<div class="code-name">&amp;#xe6d2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dc;</span>
<div class="name">后端商品毛利</div>
<div class="code-name">&amp;#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e1;</span>
<div class="name">成本查询</div>
<div class="code-name">&amp;#xe6e1;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6bd;</span> <span class="icon iconfont">&#xe6bd;</span>
<div class="name">流量</div> <div class="name">流量</div>
@ -242,7 +314,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6b8;</span> <span class="icon iconfont">&#xe6b8;</span>
<div class="name">供货价管理</div> <div class="name">采购价管理</div>
<div class="code-name">&amp;#xe6b8;</div> <div class="code-name">&amp;#xe6b8;</div>
</li> </li>
@ -408,9 +480,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1717554669936') format('woff2'), src: url('iconfont.woff2?t=1718867101197') format('woff2'),
url('iconfont.woff?t=1717554669936') format('woff'), url('iconfont.woff?t=1718867101197') format('woff'),
url('iconfont.ttf?t=1717554669936') format('truetype'); url('iconfont.ttf?t=1718867101197') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -436,6 +508,114 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-RectangleCopy48"></span>
<div class="name">
结算
</div>
<div class="code-name">.icon-RectangleCopy48
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy52"></span>
<div class="name">
结算报表
</div>
<div class="code-name">.icon-RectangleCopy52
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy55"></span>
<div class="name">
结算单
</div>
<div class="code-name">.icon-RectangleCopy55
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy56"></span>
<div class="name">
结算管理
</div>
<div class="code-name">.icon-RectangleCopy56
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy57"></span>
<div class="name">
返利规则
</div>
<div class="code-name">.icon-RectangleCopy57
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy58"></span>
<div class="name">
月结
</div>
<div class="code-name">.icon-RectangleCopy58
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy61"></span>
<div class="name">
结算单管理
</div>
<div class="code-name">.icon-RectangleCopy61
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy62"></span>
<div class="name">
月结管理
</div>
<div class="code-name">.icon-RectangleCopy62
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy63"></span>
<div class="name">
智慧销售
</div>
<div class="code-name">.icon-RectangleCopy63
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy64"></span>
<div class="name">
智慧销售管理
</div>
<div class="code-name">.icon-RectangleCopy64
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy65"></span>
<div class="name">
后端商品毛利
</div>
<div class="code-name">.icon-RectangleCopy65
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy66"></span>
<div class="name">
成本查询
</div>
<div class="code-name">.icon-RectangleCopy66
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-RectangleCopy49"></span> <span class="icon iconfont icon-RectangleCopy49"></span>
<div class="name"> <div class="name">
@ -718,7 +898,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-RectangleCopy13"></span> <span class="icon iconfont icon-RectangleCopy13"></span>
<div class="name"> <div class="name">
供货价管理 采购价管理
</div> </div>
<div class="code-name">.icon-RectangleCopy13 <div class="code-name">.icon-RectangleCopy13
</div> </div>
@ -967,6 +1147,102 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy48"></use>
</svg>
<div class="name">结算</div>
<div class="code-name">#icon-RectangleCopy48</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy52"></use>
</svg>
<div class="name">结算报表</div>
<div class="code-name">#icon-RectangleCopy52</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy55"></use>
</svg>
<div class="name">结算单</div>
<div class="code-name">#icon-RectangleCopy55</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy56"></use>
</svg>
<div class="name">结算管理</div>
<div class="code-name">#icon-RectangleCopy56</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy57"></use>
</svg>
<div class="name">返利规则</div>
<div class="code-name">#icon-RectangleCopy57</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy58"></use>
</svg>
<div class="name">月结</div>
<div class="code-name">#icon-RectangleCopy58</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy61"></use>
</svg>
<div class="name">结算单管理</div>
<div class="code-name">#icon-RectangleCopy61</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy62"></use>
</svg>
<div class="name">月结管理</div>
<div class="code-name">#icon-RectangleCopy62</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy63"></use>
</svg>
<div class="name">智慧销售</div>
<div class="code-name">#icon-RectangleCopy63</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy64"></use>
</svg>
<div class="name">智慧销售管理</div>
<div class="code-name">#icon-RectangleCopy64</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy65"></use>
</svg>
<div class="name">后端商品毛利</div>
<div class="code-name">#icon-RectangleCopy65</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy66"></use>
</svg>
<div class="name">成本查询</div>
<div class="code-name">#icon-RectangleCopy66</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy49"></use> <use xlink:href="#icon-RectangleCopy49"></use>
@ -1219,7 +1495,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy13"></use> <use xlink:href="#icon-RectangleCopy13"></use>
</svg> </svg>
<div class="name">供货价管理</div> <div class="name">采购价管理</div>
<div class="code-name">#icon-RectangleCopy13</div> <div class="code-name">#icon-RectangleCopy13</div>
</li> </li>

View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4573174 */ font-family: "iconfont"; /* Project id 4573174 */
src: url('iconfont.woff2?t=1717554669936') format('woff2'), src: url('iconfont.woff2?t=1718867101197') format('woff2'),
url('iconfont.woff?t=1717554669936') format('woff'), url('iconfont.woff?t=1718867101197') format('woff'),
url('iconfont.ttf?t=1717554669936') format('truetype'); url('iconfont.ttf?t=1718867101197') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,54 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-RectangleCopy48:before {
content: "\e6bc";
}
.icon-RectangleCopy52:before {
content: "\e6c0";
}
.icon-RectangleCopy55:before {
content: "\e6c5";
}
.icon-RectangleCopy56:before {
content: "\e6c7";
}
.icon-RectangleCopy57:before {
content: "\e6c9";
}
.icon-RectangleCopy58:before {
content: "\e6ca";
}
.icon-RectangleCopy61:before {
content: "\e6cb";
}
.icon-RectangleCopy62:before {
content: "\e6cc";
}
.icon-RectangleCopy63:before {
content: "\e6d0";
}
.icon-RectangleCopy64:before {
content: "\e6d2";
}
.icon-RectangleCopy65:before {
content: "\e6dc";
}
.icon-RectangleCopy66:before {
content: "\e6e1";
}
.icon-RectangleCopy49:before { .icon-RectangleCopy49:before {
content: "\e6bd"; content: "\e6bd";
} }

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,94 @@
{ {
"id": "4573174", "id": "4573174",
"name": "duo'men'dian", "name": "多门店",
"font_family": "iconfont", "font_family": "iconfont",
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "7551479",
"name": "结算",
"font_class": "RectangleCopy48",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "7551480",
"name": "结算报表",
"font_class": "RectangleCopy52",
"unicode": "e6c0",
"unicode_decimal": 59072
},
{
"icon_id": "7551481",
"name": "结算单",
"font_class": "RectangleCopy55",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "7551482",
"name": "结算管理",
"font_class": "RectangleCopy56",
"unicode": "e6c7",
"unicode_decimal": 59079
},
{
"icon_id": "7551483",
"name": "返利规则",
"font_class": "RectangleCopy57",
"unicode": "e6c9",
"unicode_decimal": 59081
},
{
"icon_id": "7551484",
"name": "月结",
"font_class": "RectangleCopy58",
"unicode": "e6ca",
"unicode_decimal": 59082
},
{
"icon_id": "7551485",
"name": "结算单管理",
"font_class": "RectangleCopy61",
"unicode": "e6cb",
"unicode_decimal": 59083
},
{
"icon_id": "7551488",
"name": "月结管理",
"font_class": "RectangleCopy62",
"unicode": "e6cc",
"unicode_decimal": 59084
},
{
"icon_id": "7552701",
"name": "智慧销售",
"font_class": "RectangleCopy63",
"unicode": "e6d0",
"unicode_decimal": 59088
},
{
"icon_id": "7552703",
"name": "智慧销售管理",
"font_class": "RectangleCopy64",
"unicode": "e6d2",
"unicode_decimal": 59090
},
{
"icon_id": "7553621",
"name": "后端商品毛利",
"font_class": "RectangleCopy65",
"unicode": "e6dc",
"unicode_decimal": 59100
},
{
"icon_id": "7553622",
"name": "成本查询",
"font_class": "RectangleCopy66",
"unicode": "e6e1",
"unicode_decimal": 59105
},
{ {
"icon_id": "7549358", "icon_id": "7549358",
"name": "流量", "name": "流量",
@ -224,7 +308,7 @@
}, },
{ {
"icon_id": "7551349", "icon_id": "7551349",
"name": "供货价管理", "name": "采购价管理",
"font_class": "RectangleCopy13", "font_class": "RectangleCopy13",
"unicode": "e6b8", "unicode": "e6b8",
"unicode_decimal": 59064 "unicode_decimal": 59064

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -13,32 +13,32 @@
<div class="w-[1px] bg-[#ccc] mr-4"></div> <div class="w-[1px] bg-[#ccc] mr-4"></div>
<div class="flex-1 flex"> <div class="flex-1 flex">
<div class="flex-1"> <div class="flex-1">
<div class="text-1xl">{{ rightInfo1[0]?.name }}</div> <div class="text-1xl">{{ rightInfo1[0]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo1[0]?.now_money }}</span></div>
<div class="text-[12px]"> <div class="text-[12px]">
<span class="text-info">: {{rightInfo1[0]?.now_money}}</span> <span class="text-info">: {{rightInfo1[0]?.last_money}}</span>
<span class="text-info ml-2">日环比</span> <span class="text-info ml-2">日环比: </span>
<span class="text-success">{{rightInfo1[0]?.rate}}%</span> <span class="text-success">{{rightInfo1[0]?.rate}}%</span>
</div> </div>
<v-charts style="height: 180px;" :option="rightOption1" :autoresize="true"></v-charts> <v-charts style="height: 160px;margin-bottom: 20px;" :option="rightOption1" :autoresize="true"></v-charts>
<div class="text-1xl">{{ rightInfo1[1]?.name }}</div> <div class="text-1xl">{{ rightInfo2[0]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo2[0]?.now_money }}</span></div>
<div class="text-[12px]"> <div class="text-[12px]">
<span class="text-info">今日: {{rightInfo1[1]?.now_money}}</span> <span class="text-info">上月: {{rightInfo2[0]?.last_money}}</span>
<span class="text-info ml-2">日环比</span> <span class="text-info ml-2">月环比: </span>
<span class="text-success">{{rightInfo1[1]?.rate}}%</span> <span class="text-success">{{rightInfo2[0]?.rate}}%</span>
</div> </div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-1xl">{{ rightInfo2[0]?.name }}</div> <div class="text-1xl">{{ rightInfo1[1]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo1[1]?.now_money }}</span></div>
<div class="text-[12px]"> <div class="text-[12px]">
<span class="text-info">今日: {{rightInfo2[0]?.now_money}}</span> <span class="text-info">昨日: {{rightInfo1[1]?.last_money}}</span>
<span class="text-info ml-2">日环比</span> <span class="text-info ml-2">日环比: </span>
<span class="text-success">{{rightInfo2[0]?.rate}}%</span> <span class="text-success">{{rightInfo1[1]?.rate}}%</span>
</div> </div>
<v-charts style="height: 180px;" :option="rightOption2" :autoresize="true"></v-charts> <v-charts style="height: 160px;margin-bottom: 20px;" :option="rightOption2" :autoresize="true"></v-charts>
<div class="text-1xl">{{ rightInfo2[1]?.name }}</div> <div class="text-1xl">{{ rightInfo2[1]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo2[1]?.now_money }}</span></div>
<div class="text-[12px]"> <div class="text-[12px]">
<span class="text-info">今日: {{rightInfo2[1]?.now_money}}</span> <span class="text-info">上月: {{rightInfo2[1]?.last_money}}</span>
<span class="text-info ml-2">日环比</span> <span class="text-info ml-2">月环比: </span>
<span class="text-success">{{rightInfo2[1]?.rate}}%</span> <span class="text-success">{{rightInfo2[1]?.rate}}%</span>
</div> </div>
</div> </div>
@ -47,7 +47,7 @@
</el-card> </el-card>
<el-card shadow="never" class="mt-4 !border-none"> <el-card shadow="never" class="mt-4 !border-none">
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<span class="text-2xl">用户概况</span> <span class="text-2xl">交易概况</span>
<div class="flex items-center text-sm"> <div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span> <span class="mr-4">时间筛选: </span>
<el-date-picker v-model="startEndTime" type="daterange" range-separator="" start-placeholder="开始日期" <el-date-picker v-model="startEndTime" type="daterange" range-separator="" start-placeholder="开始日期"
@ -55,6 +55,21 @@
<el-button type="primary" class="ml-4" @click="getData">查询</el-button> <el-button type="primary" class="ml-4" @click="getData">查询</el-button>
</div> </div>
</div> </div>
<div class="flex flex-wrap">
<div class="w-1/5 flex mb-6" v-for="(item, index) in visitorOption.series" :key="index">
<div class="mr-2">
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
<iconfont :iconName="iconList[index]" white className="text-6xl" />
</div>
</div>
<div>
<div class="text-info">{{ item.name }}</div>
<div class="text-6xl">{{ item.money }}</div>
<div class="text-info">环比增长: <span :class="item.rate > 0 ? 'text-success' : 'text-danger'">{{
item.rate / 100 }}%</span></div>
</div>
</div>
</div>
<div> <div>
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" /> <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
</div> </div>
@ -273,6 +288,8 @@ const rightOption2: any = reactive(JSON.parse(JSON.stringify(optionModel)))
// //
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1'] const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// , 访, , , , , , 退, 退, 访- // , 访, , , , , , 退, 退, 访-
const iconList = ref(['RectangleCopy58', 'RectangleCopy48', 'RectangleCopy65', 'RectangleCopy62', 'RectangleCopy56', 'RectangleCopy55', 'RectangleCopy57', 'RectangleCopy65']);
const startEndTime = ref(['', '']); const startEndTime = ref(['', '']);
// //
const getData = () => { const getData = () => {
@ -320,7 +337,9 @@ const getData = () => {
type: 'line', type: 'line',
smooth: true, smooth: true,
data: item.value, data: item.value,
name: item.name name: item.name,
money: item.money,
rate: item.rate
} }
}); });
@ -333,4 +352,8 @@ onMounted(() => {
}) })
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.workbench{
color: #444;
}
</style>

View File

@ -257,13 +257,12 @@ const basicList = reactive([
num: 0, num: 0,
}, },
{ // {
name: '微信会员卡激活数', // name: '',
type: 'card_count', // type: 'card_count',
icon: 'RectangleCopy7', // icon: 'RectangleCopy7',
num: 0, // num: 0,
// },
},
]) ])
const startEndTime = ref(['', '']); const startEndTime = ref(['', '']);
// //