v1.7.1_EBD

README.md

@@ -1,3 +1,5 @@
 # 移动ETA
 1. 图片等静态资源如果要放在oss中请放入 oss://hzchart/static/ETA_mobile/ 目录下。
 2. 测试地址：http://8.136.199.33:8611/tabbar/home
+3. 图标尽量使用svg，将svg图标文件放入assets/svg 目录下，使用时直接用<svg-icon name="文件名"/>
+   如果要修改svg颜色将下载的svg中的fill的value改为currentColor(fill="currentColor"),然后在svg-icon 组件上设置颜色值

package.json

@@ -42,6 +42,7 @@
     "sass": "^1.44.0",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.0",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0"
   }
 }

src/assets/svg/edb-history-tag.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="app">
+<rect width="48" height="48" rx="4" fill="#F2F3FF"/>
+<path id="Vector" d="M23.5 8C32.0608 8 39 14.9392 39 23.5C39 24.6462 38.8752 25.7765 38.6312 26.8766L38.5334 27.2876L36.2203 26.7073C36.4826 25.6676 36.6154 24.5929 36.6154 23.5C36.6154 16.2563 30.7437 10.3846 23.5 10.3846C16.2563 10.3846 10.3846 16.2563 10.3846 23.5C10.3846 30.7437 16.2563 36.6154 23.5 36.6154C26.57 36.6203 29.5435 35.5435 31.8986 33.5742L31.9845 33.5003L22.6662 24.3513L24.3338 22.6479L33.9669 32.1053L35.3945 33.5098L34.5598 34.3603C33.1186 35.8317 31.3977 37.0001 29.4984 37.7968C27.5991 38.5936 25.5597 39.0027 23.5 39C14.9392 39 8 32.0608 8 23.5C8 14.9392 14.9392 8 23.5 8ZM23.5 15.9487C24.6198 15.9485 25.7256 16.1974 26.7374 16.6772C27.7492 17.1571 28.6415 17.856 29.3499 18.7233C30.0582 19.5906 30.5648 20.6046 30.833 21.6918C31.1011 22.779 31.1241 23.9123 30.9003 25.0095L30.8343 25.3036L28.518 24.736C28.7852 23.6506 28.6931 22.5079 28.2557 21.4793C27.8183 20.4507 27.0591 19.5916 26.0921 19.0311C25.125 18.4706 24.0022 18.2388 22.8923 18.3705C21.7823 18.5022 20.745 18.9903 19.9359 19.7616C19.1269 20.5329 18.5899 21.5458 18.4053 22.6482C18.2208 23.7506 18.3988 24.8832 18.9125 25.8759C19.4263 26.8686 20.2481 27.6679 21.2547 28.1539C22.2613 28.6399 23.3983 28.7863 24.4952 28.5713L24.7376 28.518L25.306 30.8335C24.2688 31.0881 23.1894 31.1199 22.1391 30.9266C21.0887 30.7334 20.0913 30.3195 19.2127 29.7124C18.3341 29.1053 17.5943 28.3187 17.042 27.4046C16.4898 26.4905 16.1378 25.4697 16.0091 24.4095C15.8805 23.3493 15.9782 22.2739 16.2958 21.2543C16.6134 20.2346 17.1437 19.294 17.8517 18.4943C18.5596 17.6947 19.4291 17.0544 20.4027 16.6156C21.3764 16.1768 22.432 15.9495 23.5 15.9487Z" fill="#0052D9"/>
+</g>
+</svg>

src/assets/svg/error-circle-filled.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="error-circle-filled">
+<path id="union" d="M30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26802 2 16 2C23.732 2 30 8.26802 30 16ZM17 8.00061H15V19H17V8.00061ZM14.7886 22V24.4H17.1886V22H14.7886Z" fill="#999999"/>
+</g>
+</svg>

src/components/SvgIcon.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  // prefix: {
+  //   type: String,
+  //   default: 'icon'
+  // },
+  name: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#333'
+  },
+  size: {
+    type: String,
+    default: '1em'
+  }
+})
+
+const symbolId = computed(() => `#${props.name}`)
+</script>
+
+<template>
+  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
+    <use :xlink:href="symbolId" :fill="props.color" />
+  </svg>
+</template>

src/main.js

@@ -12,6 +12,10 @@ import {setupStore} from '@/store'
 import VConsole from 'vconsole';
 import vue3TreeOrg from 'vue3-tree-org';
 import "vue3-tree-org/lib/vue3-tree-org.css";
+// svg图标组件
+import svgIcon from "@/components/SvgIcon.vue";
+//引入注册脚本
+import 'virtual:svg-icons-register'
 
 
 if(import.meta.env.MODE==='test'){
@@ -26,6 +30,7 @@ reportErr(app)//设置全局错误上报
 registerVant(app)
 RegisterDirective(app)
 setupStore(app)
+app.component('svg-icon', svgIcon)
 app.use(vue3TreeOrg)
 app.use(router)
 app.mount('#app')

src/views/dataEDB/calculate/components/FormulaCalculate.vue

@@ -2,6 +2,7 @@
 import { showToast } from 'vant';
 import {ref} from 'vue'
 import SelectEDB from './SelectEDB.vue'
+import EDBHistory from '@/views/dataEDB/components/EDBHistory.vue'
 
 const letterOpts = [];//字母数据
 function initLetterOpt(){
@@ -17,25 +18,29 @@ const edbList=ref([
         tag:letterOpts[0],
         target:'',
         startDate:'',
-        endDate:''
+        endDate:'',
+        name:''
     },
     {
         tag:letterOpts[1],
         target:'',
         startDate:'',
-        endDate:''
+        endDate:'',
+        name:''
     },
     {
         tag:letterOpts[2],
         target:'',
         startDate:'',
-        endDate:''
+        endDate:'',
+        name:''
     },
     {
         tag:letterOpts[3],
         target:'',
         startDate:'',
-        endDate:''
+        endDate:'',
+        name:''
     }
 ])
 function handleAddEdbList(){
@@ -49,7 +54,8 @@ function handleAddEdbList(){
 		tag: letterOpts[index+1],
 		target: '',
 		start_date: '',
-		end_date: ''
+		end_date: '',
+        name:''
 	};
 	edbList.value.push(item);
 }
@@ -64,8 +70,23 @@ function handleShowSelectEDB(index){
     whichIndex=index
     showSelectEDB.value=true
 }
+function handleConfirmSelectEDB(e){
+    edbList.value[whichIndex].target=e.EdbInfoId
+    edbList.value[whichIndex].startDate=e.StartDate
+    edbList.value[whichIndex].endDate=e.EndDate
+    edbList.value[whichIndex].name=e.EdbName
+}
 
+// 显示指标溯源
+const showEDBHistory=ref(false)
+const edbHistoryId=ref(0)
+function handleShowEDBHistory(item){
+    edbHistoryId.value=item.target
+    showEDBHistory.value=true
+}
 
+// 计算公式
+const formulaVal=ref('')
 
 
 </script>
@@ -80,13 +101,15 @@ function handleShowSelectEDB(index){
                     @click-input="handleShowSelectEDB(index)"
                 >
                     <template #left-icon>
-                        <div class="left-icon"></div>
+                        <div class="left-icon">
+                            <svg-icon name="edb-history-tag" size="24px" v-if="item.target" @click="handleShowEDBHistory(item)"/>
+                        </div>
                     </template>
                     <template #input>
                         <div class="edb-info-box">
-                            <div class="edb-info" v-if="true">
-                                <span class="name">指标名称</span>
-                                <span class="time">2019-11-25至2023-08-23</span>
+                            <div class="edb-info" v-if="item.target">
+                                <span class="name">{{item.name}}</span>
+                                <span class="time">{{item.startDate}}至{{item.endDate}}</span>
                             </div>
                             <span class="placeholder" v-else>请选择指标</span>
                         </div>
@@ -102,23 +125,28 @@ function handleShowSelectEDB(index){
             </div>
         </section>
         <section class="section formula-box">
-            <!-- <van-field 
-                v-model="item.target" 
-                :label="item.tag"
-                is-link
-                readonly
-                input-align="right"
-                placeholder="请选择指标"
+            <van-field  
+                label="计算公式"
+                required
             >
-                <template #left-icon>
-                    <div class="left-icon"></div>
+                <template #input>
+                    <div>
+                    <input class="formula-input" type="text" placeholder="请输入公式" v-model="formulaVal">
+                    <div class="formula-tips">
+                        <p>公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</p>
+                        <p>函数支持：MAX(),MIN(),ln(A),log(a,A)</p>
+                    </div>
+                    </div>
                 </template>
-            </van-field> -->
+            </van-field>
         </section>
     </div>
 
     <!-- 选择指标 -->
-    <SelectEDB v-model:show="showSelectEDB"/>
+    <SelectEDB v-model:show="showSelectEDB" @select="handleConfirmSelectEDB"/>
+
+    <!-- 指标溯源 -->
+    <EDBHistory v-model:show="showEDBHistory" :edbInfoId="edbHistoryId"/>
 </template>
 
 <style lang="scss" scoped>
@@ -168,4 +196,18 @@ function handleShowSelectEDB(index){
     }
 
 }
+.formula-box{
+    .formula-input{
+        display: block;
+        box-sizing: border-box;
+        background-color: $page-bg-grey;
+        padding: 12px 32px;
+        border-radius: 12px;
+        line-height: 1.7;
+    }
+    .formula-tips{
+        font-size: 24px;
+        color: $font-grey_999;
+    }
+}
 </style>

src/views/dataEDB/calculate/components/SelectEDB.vue

@@ -1,6 +1,7 @@
 <script setup>
-import {reactive, ref} from 'vue'
+import {reactive, ref, watch} from 'vue'
 import apiDataEDB from '@/api/dataEDB'
+import { showToast } from 'vant'
 
 const props=defineProps({
     show:{
@@ -8,7 +9,11 @@ const props=defineProps({
         default:false
     },
 })
-const emits=defineEmits(['update:show'])
+const emits=defineEmits(['update:show','select'])
+
+function handleClose(){
+    emits('update:show',false)
+}
 
 const listState=reactive({
     list:[],
@@ -48,7 +53,44 @@ function onSearch(){
     getEDBList()
 }
 
+
 const checked=ref('')
+function handleSave(){
+    let selectItem=null
+    listState.list.forEach(item=>{
+        if(item.EdbInfoId===checked.value){
+            selectItem=item
+        }
+    })
+    if(!selectItem){
+        showToast('请选择指标')
+        return
+    }
+    emits('select',selectItem)
+    handleClose()
+}
+
+watch(
+    ()=>props.show,
+    ()=>{
+        if(props.show){
+            listState.page=1
+            listState.list=[]
+            listState.finished=false
+            checked.value=''
+            searchEDBTxt.value=''
+        }
+    }
+)
+
+
+// 指标详情
+const showEDBInfo=ref(false)
+const edbInfo=ref(null)
+function handleShowEDBInfo(item){
+    edbInfo.value=item
+    showEDBInfo.value=true
+}
 
 </script>
 
@@ -88,7 +130,7 @@ const checked=ref('')
                                 <van-radio :name="item.EdbInfoId">
                                     <div class="con">
                                         <div class="name">{{item.EdbName}}</div>
-                                        
+                                        <svg-icon @click.stop="handleShowEDBInfo(item)" class="icon" name="error-circle-filled" size="16px" color="#999"/>
                                     </div>
                                 </van-radio>
                             </li>
@@ -102,6 +144,50 @@ const checked=ref('')
             </div>
         </div>
     </van-popup>
+    <!-- 指标信息详情 -->
+    <van-popup 
+        v-model:show="showEDBInfo"
+        round
+    >
+        <div class="edb-info-wrap" v-if="edbInfo">
+            <h3 class="van-multi-ellipsis--l2 name">{{edbInfo.EdbName}}</h3>
+            <ul class="info-list">
+                <li class="item">
+                    <span class="label">指标ID：</span>
+                    <span class="con">{{edbInfo.EdbCode}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">频度：</span>
+                    <span class="con">{{edbInfo.Frequency}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">单位：</span>
+                    <span class="con">{{edbInfo.Unit}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">起始时间：</span>
+                    <span class="con">{{edbInfo.StartDate}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">更新日期：</span>
+                    <span class="con">{{edbInfo.LatestDate}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">最新值：</span>
+                    <span class="con">{{edbInfo.LatestValue}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">最近更新：</span>
+                    <span class="con">{{edbInfo.ModifyTime}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">数据来源：</span>
+                    <span class="con">{{edbInfo.SourceName}}</span>
+                </li>
+            </ul>
+            <van-button block type="primary" @click="showEDBInfo=false">知道了</van-button>
+        </div>
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -118,8 +204,15 @@ const checked=ref('')
                 flex: 1;
             }
             .con{
-                padding: 32px 0;
+                padding: 32px 32px 32px 0;
                 border-bottom: 1px solid $border-color;
+                display: flex;
+                .name{
+                    flex: 1;
+                }
+                .icon{
+                    margin-left: 20px;
+                }
             }
         }
     }
@@ -157,5 +250,34 @@ const checked=ref('')
         border-radius: var(--van-radius-max);
     }
 }
+.edb-info-wrap{
+    padding: 48px;
+    width: 80vw;
+    max-width: 500PX;
+    .name{
+        text-align: center;
+        margin-top: 0;
+        font-size: 36px;
+    }
+    .info-list{
+        max-height: 60vh;
+        overflow-y: auto;
+        .item{
+            margin-bottom: 32px;
+            display: flex;
+            .label{
+                width: 50%;
+                flex-shrink: 0;
+            }
+            .con{
+                width: 50%;
+                flex-shrink: 0;
+                color: $font-grey;
+                word-wrap: break-word;
+                word-break: break-all;
+            }
+        }
+    }
+}
 
 </style>

vite.config.js

@@ -4,6 +4,7 @@ import path from "path";
 import Components from "unplugin-vue-components/vite";
 import { VantResolver } from "unplugin-vue-components/resolvers";
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
 
 // https://vitejs.dev/config/
 export default ({ mode }) =>
@@ -14,7 +15,24 @@ export default ({ mode }) =>
       Components({
         resolvers: [VantResolver()],
       }),
-      VueSetupExtend()
+      VueSetupExtend(),
+      createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
+        // 指定symbolId格式
+        symbolId: '[name]',
+        /**
+         * 自定义插入位置
+         * @default: body-last
+         */
+        // inject?: 'body-last' | 'body-first'
+  
+        /**
+         * custom dom id
+         * @default: __svg__icons__dom__
+         */
+        // customDomId: '__svg__icons__dom__'
+      })
     ],
     css: {
       // css预处理器