主诉分类

src/assets/ts/antd.ts

@@ -5,7 +5,8 @@ import {
     Button,
     Radio,
     Modal,
-    Table
+    Table,
+    Select
 } from 'ant-design-vue';
 
 export default function registerGlobComp(app: App) {
@@ -15,4 +16,5 @@ export default function registerGlobComp(app: App) {
         .use(Radio)
         .use(Modal)
         .use(Table)
+        .use(Select)
 }

src/components/body-d-left/twoL.vue

@@ -1,45 +1,54 @@
 <template>
-    <div>
+  <div>
-        <public-title title="主诉分类"/>
+    <public-title title="主诉分类"/>
-        <div class="inner">
+    <div class="inner">
-          <div class="title">
+      <div class="title">
-            <div class="type-time">
+        <div class="type-check">
-              <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
+          <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index"
-            </div>
+                @click="handleSelect(index)">{{ item.name }}</span>
-            <div class="type-all">全部数据</div>
-          </div>
-          <div class="line-chart" ref="chiefChart"></div>
         </div>
+        <div class="type-all">
+          <a-select v-model:value="typesSelect" class="type-select" >
+            <a-select-option value="全部数据">全部数据</a-select-option>
+            <a-select-option value="jack">Jack</a-select-option>
+            <a-select-option value="lucy">Lucy</a-select-option>
+          </a-select>
+        </div>
+      </div>
+      <div class="line-chart" ref="chiefChart"></div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref,onMounted } from 'vue';
+import {ref, onMounted} from 'vue';
 import PublicTitle from "../publicTitle.vue";
 import * as echarts from 'echarts';
 
+const typesSelect = ref('全部数据')
 const typeTime = ref([
   {
-    name:'男',
+    name: '男',
-    value:'man',
+    value: 'man',
-  },{
+  }, {
-    name:'女',
+    name: '女',
-    value:'women',
+    value: 'women',
   },
 ])
 const selectIndex = ref(0)
 const chiefChart = ref<HTMLElement>()
-onMounted(()=>{
+onMounted(() => {
-  let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他'];
+  let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
   let ydata = [120, 200, 150, 80, 70, 110, 130];
-  initChart(xdata,ydata)
+  initChart(xdata, ydata)
 })
-function initChart(xData,ydata){
+
+function initChart(xData, ydata) {
   let myChart = echarts.init(chiefChart.value)
   let options = {
-    grid:{
+    grid: {
       top: '10%',
-      left:'8%',
+      left: '8%',
-      right:'8%',
+      right: '8%',
       bottom: '20%'
     },
     xAxis: {
@@ -47,34 +56,34 @@ function initChart(xData,ydata){
       data: xData,
       axisLabel: {
         color: '#FFFFFF',
-        fontSize:14,
+        fontSize: 14,
       },
     },
     yAxis: {
       type: 'value',
       axisLabel: {
         color: '#FFFFFF',
-        fontSize:14,
+        fontSize: 14,
       },
       splitLine: {
         show: true,
-        lineStyle:{
+        lineStyle: {
-          type:'dashed',
+          type: 'dashed',
-          color:'rgba(217, 231, 255, 0.2)'
+          color: 'rgba(217, 231, 255, 0.2)'
         }
       }
     },
     series: [
       {
-        data:ydata ,
+        data: ydata,
         type: 'bar',
         barWidth: '20%',
-        itemStyle:{
+        itemStyle: {
-          color:new echarts.graphic.LinearGradient(
+          color: new echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [
-                { offset: 0, color: '#008CFF' },
+                {offset: 0, color: '#008CFF'},
-                { offset: 1, color: '#33CBFE' }
+                {offset: 1, color: '#33CBFE'}
               ]
           )
         }
@@ -86,21 +95,106 @@ function initChart(xData,ydata){
     myChart.resize();
   });
 }
+
+function handleSelect(index) {
+  selectIndex.value = index
+}
 </script>
 <style scoped lang="less">
 .inner {
-    height: calc(100% - 40px);
+  height: calc(100% - 40px);
-    .title{
+  .title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    padding: 2% 0;
+
+    .type-check {
+      color: #ffffff;
+      width: 15%;
       display: flex;
-      justify-content: right;
+      justify-content: space-around;
-      .type-all{
+
-        color: #ffffff;
+      span {
+        padding: 0 2%;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      .select {
+        color: #45A2FF;
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 100%;
+          left: 0;
+          bottom: -12px;
+          height: 6px;
+          background: url("../../assets/images/light.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .unSelect {
+        color: #A3A4A4;
       }
     }
-    .line-chart{
+
-      margin: 0 auto;
+    .type-all {
-      width: 96%;
+      width: 18%;
-      height: 80%;
+      color: #ffffff;
+
+      .type-select {
+        width: 94%;
+        color: #008CFF;
+      }
     }
+  }
+  .line-chart {
+    margin: 0 auto;
+    width: 96%;
+    height: 80%;
+  }
+}
+</style>
+<style lang="less">
+.ant-select-dropdown{
+  background-color: #00152b!important;
+  border-right: 1px solid #1b7ef2;
+  border-left: 1px solid #1b7ef2;
+  border-bottom: 1px solid #1b7ef2;
+}
+.ant-select-item{
+  color: #1b7ef2!important;
+}
+//框背景色
+.ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  color: #1b7ef2!important;
+  background-color: transparent!important;
+  border: 1px solid #1b7ef2 !important;
+}
+.ant-select-item-option-selected{
+  color: #ffffff!important;
+}
+// 选中字体颜色
+.ant-select-selection-item{
+  color: #1b7ef2!important;
+}
+.ant-select-item-option-active{
+  background-color:transparent!important;
+}
+.ant-select-item-option-active:hover{
+  background-color: #002e64!important;
+}
+// 箭头颜色
+.ant-select-arrow {
+  color: #1b7ef2 !important;
+}
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+  background-color:#002e64!important;
 }
 </style>

src/components/dialog/Dialog.vue

@@ -1,5 +1,6 @@
 <template>
   <a-modal
+      class="dialog"
       v-model:visible="props.openVis"
       :title="props.title"
       :width="props.width"
@@ -31,6 +32,7 @@
 </script>
 
 <style lang="less">
+.dialog{
   .ant-modal-title{
     position: relative;
     display: flex;
@@ -61,5 +63,5 @@
   .ant-modal-wrap{
     background-color: rgba(0,0,0,0.6);
   }
-
+}
 </style>