言

我們?cè)接戇^(guò)觀測(cè)云如何通過(guò)將內(nèi)置視圖與查看器相聯(lián)結(jié)，實(shí)現(xiàn)更全面的數(shù)據(jù)關(guān)聯(lián)分析。（參見(jiàn)《內(nèi)置視圖聯(lián)動(dòng)查看器，實(shí)現(xiàn)數(shù)據(jù)關(guān)聯(lián)分析》）這里提到的查看器，實(shí)際是一個(gè)功能全面且強(qiáng)大的數(shù)據(jù)查看分析工具。其提供多種搜索和篩選方式，并支持以組合的方式搭配使用獲取最終數(shù)據(jù)結(jié)果。

本文我們將從實(shí)際場(chǎng)景出發(fā)，為您講述如何通過(guò)查看器的搜索與篩選功能，幫助您快速、精準(zhǔn)地檢索數(shù)據(jù)，定位故障問(wèn)題。

觀測(cè)云的查看器可以在基礎(chǔ)設(shè)施、事件、日志、應(yīng)用性能監(jiān)測(cè)、用戶訪問(wèn)監(jiān)測(cè)、CI 可視化、可用性監(jiān)測(cè)、安全巡檢等功能模塊內(nèi)使用。此處，我們以【日志查看器】為場(chǎng)景：

搜索

當(dāng)我們面對(duì)系統(tǒng)采集上來(lái)的雜亂的海量數(shù)據(jù)，在頁(yè)面上方的搜索欄直接進(jìn)行搜索是定位到目標(biāo)數(shù)據(jù)最快捷迅速的方式之一。在觀測(cè)云，【搜索】一般由術(shù)語(yǔ)（可以是單詞或短語(yǔ)）和運(yùn)算符兩部分組成。當(dāng)我們輸入單詞或者短語(yǔ)時(shí)，疊加通配運(yùn)算符（? 表示匹配任意字符， * 匹配 0 或多個(gè)字符），回車即可實(shí)現(xiàn)搜索的動(dòng)作。

具體的示例說(shuō)明如下：

# 單詞
guance  // 精準(zhǔn)搜索
guanc[e   // 存在特殊字符寫(xiě)法示例（無(wú)需添加\轉(zhuǎn)義）  

# 單詞通配符搜索（出于性能考慮，觀測(cè)云暫不支持前綴 * 寫(xiě)法，若存在通配搜索以下寫(xiě)法均支持）
guance*
gua?ce*  
gua*ce

# 短語(yǔ)（雙引號(hào)括起來(lái)的內(nèi)容我們統(tǒng)稱為短語(yǔ)，此寫(xiě)法下雙引號(hào)的內(nèi)容會(huì)作為一個(gè)整體發(fā)起匹配搜索）
"guance test"  // 查詢?nèi)乃饕侄沃校嬖?"guance test" 內(nèi)容的匹配結(jié)果
"guance 127.0.0.1" // 存在特殊字符時(shí)寫(xiě)法示例

實(shí)際效果如下：

除了我們以上談到的搜索方式，觀測(cè)云還支持您在日志查看器使用 JSON 搜索。這種搜索方式默認(rèn)對(duì)日志查看器內(nèi) message 的內(nèi)容進(jìn)行精確檢索，同時(shí)要求 message 是 JSON 格式，其他格式的日志內(nèi)容不支持該檢索方式。比如我們可以在搜索欄以 @key:value 的格式輸入搜索內(nèi)容。若為多層級(jí) JSON 可用 “.” 承接，即 @key1.key2:value。

需要注意的是，這種搜索方式目前僅支持日志查看器，且僅支持 中國(guó)區(qū) 1（杭州）、中國(guó)區(qū) 3（張家口）以及 中國(guó)區(qū) 4（廣州） 這三個(gè)站點(diǎn)，并且工作空間需要在 2022年6月23日 后創(chuàng)建。

具體的示例說(shuō)明如下：

message 信息如下：
{
    __namespace:tracing,
    cluster_name_k8s:k8s-demo,
    meta:{    
        service:ruoyi-mysql-k8s,
        name:mysql.query,
        resource:select dict_code, dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark 
                from sys_dict_data
 }
}

# 查詢 cluster_name_k8s=k8s-demo
@cluster_name_k8s:k8s-demo     // 精準(zhǔn)匹配
@cluster_name_k8s:k?s*        // 模糊匹配

# 查詢 meta 下 service=ruoyi-mysql-k8s
@meta.service:ruoyi-mysql-k8s   // 精準(zhǔn)匹配
@meta.service:ruoyi?mysql*   // 模糊匹配

篩選

除了上文提到的搜索，在搜索欄輸入篩選條件也是一個(gè)快捷的查詢方式。我們可以針對(duì) 標(biāo)簽/屬性 的格式進(jìn)行篩選，按照 字段 運(yùn)算符 值 順序拼接可得。

字段

字段是篩選條件成立的前提。當(dāng)我們根據(jù)實(shí)際需求添加字段時(shí)，您可以選擇觀測(cè)云默認(rèn)會(huì)列出當(dāng)前時(shí)間范圍內(nèi)的字段的列表，如未找到您可以自定義添加字段。

參見(jiàn) https://docs.guance.com/management/field-management/

運(yùn)算符

運(yùn)算符用于連接字段與值的關(guān)系。我們可以針對(duì)【字符串】或者【數(shù)值】類型字段做篩選過(guò)濾。

• 字符串字段運(yùn)算符：= ≠ wildcard not wildcard exist not exist；
• 數(shù)值字段運(yùn)算符：= ≠ > >= < <= [xx TO xx] exist not exist。

不同運(yùn)算符的說(shuō)明如下：

值

值是篩選條件內(nèi)期望達(dá)成的目標(biāo)值。我們可以將其與 【AND】 或 【OR】 運(yùn)算符組合查詢。

具體的示例說(shuō)明如下：

精確值
key:(value1 AND value2 OR value3)

# 包含模糊匹配    
key:(value1 OR test* OR value3)

# 包含 * 存在      
key:(value1 OR * OR value3)          // 等同于 key:* 
key:(value1 AND *)                  // 等同于 key:value1
key:(value1 AND * OR value3)        // 等同于 key:(value1 OR value3)

我們?cè)诖颂幱玫降?AND/OR/NOT 這一形式在專業(yè)術(shù)語(yǔ)上稱之為布爾運(yùn)算符。我們可以將這類運(yùn)算符與上文所提到的搜索與篩選條件進(jìn)一步組合關(guān)聯(lián)搜索與篩選。

不同運(yùn)算符的說(shuō)明如下：

實(shí)際效果如下：

快捷篩選

除了在搜索欄輸入篩選條件，我們還可以直接使用觀測(cè)云 > 快捷篩選這一功能。在這里，我們可以基于一系列字段進(jìn)行正選&反選、字段值搜索、添加顯示列、查詢值 TOP 5 等操作，從而定位至我們需要的目標(biāo)數(shù)據(jù)。

有關(guān)更多相關(guān)操作說(shuō)明，參見(jiàn) https://docs.guance.com/getting-started/function-details/explorer-search/#quick-filter

結(jié)論

數(shù)據(jù)的雜亂和海量性是業(yè)務(wù)數(shù)據(jù)管理面臨的巨大挑戰(zhàn)。當(dāng)面對(duì)我們的系統(tǒng)采集并保存的大量數(shù)據(jù)，若是能借助精準(zhǔn)有效的搜索或篩選方式進(jìn)行數(shù)據(jù)的過(guò)濾查詢，將使我們的數(shù)據(jù)處理效率事半功倍。未來(lái)，觀測(cè)云也會(huì)探索更多查看器相關(guān)的查詢分析功能，敬請(qǐng)期待！

深入探索CSS動(dòng)畫(huà)的魅力-附帶動(dòng)畫(huà)實(shí)例

**開(kāi)篇：揭秘CSS動(dòng)畫(huà)世界**

CSS動(dòng)畫(huà)作為現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分，賦予了網(wǎng)頁(yè)前所未有的生動(dòng)性和互動(dòng)性。從微妙的過(guò)渡效果到炫酷的視覺(jué)特效，CSS動(dòng)畫(huà)以其高效、易用的特點(diǎn)吸引了無(wú)數(shù)前端開(kāi)發(fā)者。在這篇深度解析文章中，我們將一起走進(jìn)CSS動(dòng)畫(huà)的世界，從基礎(chǔ)知識(shí)到高級(jí)技巧，通過(guò)一系列詳盡的實(shí)例，揭示CSS動(dòng)畫(huà)背后的秘密及其在實(shí)際項(xiàng)目中的應(yīng)用場(chǎng)景。

---

### **一、CSS動(dòng)畫(huà)基礎(chǔ)概念與關(guān)鍵幀動(dòng)畫(huà)(Keyframes)**

**標(biāo)題：** 掌握@keyframes規(guī)則，構(gòu)建動(dòng)畫(huà)流程

CSS動(dòng)畫(huà)的核心在于`@keyframes`規(guī)則，它允許開(kāi)發(fā)者定義動(dòng)畫(huà)序列中的不同關(guān)鍵幀狀態(tài)。例如，創(chuàng)建一個(gè)元素從左到右移動(dòng)的簡(jiǎn)單動(dòng)畫(huà)：

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

@keyframes moveRight {

0% { left: 0; }

100% { left: calc(100% - 50px); }

}

.animatedElement {

position: relative;

width: 50px;

height: 50px;

background-color: red;

animation: moveRight 2s ease infinite;

}

</style>

</head>

<body>

<div class="animatedElement"></div>

</body>

</html>

```

在這個(gè)例子中，我們定義了一個(gè)名為`moveRight`的動(dòng)畫(huà)，使其在2秒內(nèi)從屏幕左側(cè)移動(dòng)到右側(cè)。通過(guò)`animation`屬性將此動(dòng)畫(huà)應(yīng)用于`.animatedElement`類。

---

### **二、CSS動(dòng)畫(huà)屬性詳解與應(yīng)用**

**標(biāo)題：** 理解動(dòng)畫(huà)屬性，掌控動(dòng)畫(huà)生命周期

CSS動(dòng)畫(huà)由一系列可控制屬性組成，包括但不限于：

- `animation-name`: 定義使用的@keyframes名稱；

- `animation-duration`: 設(shè)置動(dòng)畫(huà)完成一個(gè)周期所需的時(shí)間；

- `animation-timing-function`: 控制動(dòng)畫(huà)速度曲線（如ease、linear、ease-in-out）；

- `animation-delay`: 動(dòng)畫(huà)開(kāi)始前的延遲時(shí)間；

- `animation-iteration-count`: 動(dòng)畫(huà)重復(fù)次數(shù)（如無(wú)限循環(huán)使用`infinite`）；

- `animation-direction`: 控制動(dòng)畫(huà)是否反向播放；

- `animation-fill-mode`: 定義動(dòng)畫(huà)在執(zhí)行前后元素的狀態(tài)。

---

### **三、CSS動(dòng)畫(huà)進(jìn)階：疊加與合成模式**

**標(biāo)題：** 探索層疊與合成，實(shí)現(xiàn)復(fù)雜動(dòng)畫(huà)效果

CSS動(dòng)畫(huà)可以疊加和組合，利用`animation-play-state`屬性暫停或恢復(fù)動(dòng)畫(huà)，結(jié)合`animation-composite`屬性來(lái)處理多個(gè)動(dòng)畫(huà)間的堆疊順序與效果：

```html

<style>

.combinedAnimation {

/* 假設(shè)已有兩個(gè)動(dòng)畫(huà)定義 */

animation: moveRight 2s ease, fadeInOut 1s linear;

animation-fill-mode: both;

}

/* 針對(duì)某個(gè)事件，例如懸停時(shí)暫停所有動(dòng)畫(huà) */

.combinedAnimation:hover {

animation-play-state: paused;

}

</style>

```

---

### **四、CSS動(dòng)畫(huà)與JavaScript聯(lián)動(dòng)**

**標(biāo)題：** 使用JavaScript操控CSS動(dòng)畫(huà)，增強(qiáng)交互性

盡管CSS動(dòng)畫(huà)本身具備豐富的特性，但結(jié)合JavaScript可以實(shí)現(xiàn)更靈活的動(dòng)態(tài)控制。下面是一個(gè)簡(jiǎn)單的示例，通過(guò)JavaScript觸發(fā)CSS動(dòng)畫(huà)：

```html

<div id="animateOnHover" class="hiddenContent">Hover me!</div>

<style>

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.hiddenContent {

opacity: 0;

animation-duration: 1s;

animation-fill-mode: both;

}

.visibleContent {

animation-name: fadeIn;

}

</style>

<script>

const animateOnHover=document.getElementById('animateOnHover');

animateOnHover.addEventListener('mouseover', ()=> {

animateOnHover.classList.add('visibleContent');

});

animateOnHover.addEventListener('mouseout', ()=> {

animateOnHover.classList.remove('visibleContent');

});

</script>

```

---

**五、響應(yīng)式與無(wú)障礙CSS動(dòng)畫(huà)**

**標(biāo)題：** 考慮不同設(shè)備與用戶需求，打造包容性動(dòng)畫(huà)

在設(shè)計(jì)CSS動(dòng)畫(huà)時(shí)，務(wù)必考慮響應(yīng)式布局與無(wú)障礙訪問(wèn)。確保動(dòng)畫(huà)在不同尺寸的屏幕上適配良好，并針對(duì)視障用戶提供替代內(nèi)容或禁用動(dòng)畫(huà)。

---

**結(jié)語(yǔ)：**

深入挖掘CSS動(dòng)畫(huà)技術(shù)，不僅能創(chuàng)造出美輪美奐的用戶體驗(yàn)，更能展現(xiàn)前端開(kāi)發(fā)者細(xì)膩的藝術(shù)觸覺(jué)與卓越的技術(shù)實(shí)力。實(shí)踐這些動(dòng)畫(huà)實(shí)例，不斷拓展想象空間，讓網(wǎng)頁(yè)設(shè)計(jì)充滿生命力，從而引領(lǐng)用戶在瀏覽過(guò)程中享受無(wú)與倫比的互動(dòng)樂(lè)趣。隨著瀏覽器技術(shù)的不斷發(fā)展，CSS動(dòng)畫(huà)的未來(lái)充滿了無(wú)限可能，讓我們共同期待并創(chuàng)造更多的精彩瞬間。

手把手教你打造Vue3城市選擇器：深度解析聯(lián)動(dòng)組件封裝全過(guò)程

在Web開(kāi)發(fā)中，城市選擇器作為常見(jiàn)的交互組件，常用于用戶填寫(xiě)地址信息、篩選地理位置等場(chǎng)景。本文將手把手帶你利用Vue3框架，從零開(kāi)始打造一個(gè)功能完備、性能優(yōu)越的城市選擇器，深入解析其聯(lián)動(dòng)組件封裝的全過(guò)程。讓我們一同領(lǐng)略Vue3的強(qiáng)大魅力，提升實(shí)戰(zhàn)技能。

## 一、項(xiàng)目初始化與依賴安裝

1. 創(chuàng)建Vue3項(xiàng)目

bash
vue create vue-city-selector

選擇默認(rèn)的Vue3配置或自定義配置。

2. 安裝所需依賴

bash
npm install vue@next element-plus axios

## 二、基礎(chǔ)架構(gòu)設(shè)計(jì)

1. 目錄結(jié)構(gòu)規(guī)劃

在`src/components`目錄下創(chuàng)建以下文件夾和文件：

- `CitySelector`: 組件主目錄

- `index.vue`: 主組件

- `CityList.vue`: 城市列表子組件

- `Province.vue`: 省份選擇子組件

- `City.vue`: 城市選擇子組件

- `District.vue`: 區(qū)縣選擇子組件

2. 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

typescript
interface CityModel {
  provinceId: string;
  provinceName: string;
  cityId: string;
  cityName: string;
  districtId: string;
  districtName: string;
}

## 三、數(shù)據(jù)獲取與處理

1. 獲取城市數(shù)據(jù)

typescript
import axios from 'axios';

const CITY_API='https://your-api-url-to-get-cities';

export async function fetchCities() {
  const response=await axios.get(CITY_API);
  return response.data;
}

在`src/api`目錄下創(chuàng)建`city.ts`文件，使用axios獲取城市數(shù)據(jù)：

2. 數(shù)據(jù)預(yù)處理

typescript
import { CityModel } from '../types';

export function preprocessCityData(cityData: any[]): CityModel[] {
  // 實(shí)現(xiàn)數(shù)據(jù)預(yù)處理邏輯，將原始數(shù)據(jù)轉(zhuǎn)化為CityModel數(shù)組
}

## 四、組件開(kāi)發(fā)

###

1. Province.vue

####

模板

html
<template>
  <el-select v-model="provinceId" @change="onProvinceChange">
    <el-option
      v-for="province in provinces"
      :key="province.id"
      :label="province.name"
      :value="province.id"
    />
  </el-select>
</template>

####

腳本

typescript
import { defineComponent, ref } from 'vue';
import { fetchCities, preprocessCityData } from '@/api/city';
import { ProvinceModel } from '@/types';

export default defineComponent({
  props: {
    initialProvinceId: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const provinceId=ref(props.initialProvinceId);

    const provinces=ref<ProvinceModel[]>([]);

    // 在組件掛載時(shí)獲取省份數(shù)據(jù)并預(yù)處理
    async function fetchAndProcessProvinces() {
      const rawCityData=await fetchCities();
      const processedData=preprocessCityData(rawCityData);
      provinces.value=processedData.map((city)=> ({
        id: city.provinceId,
        name: city.provinceName,
      }));
    }

    fetchAndProcessProvinces();

    function onProvinceChange(newId: string) {
      provinceId.value=newId;
      // 觸發(fā)事件，傳遞新選中的省份ID給父組件
      emit('province-change', newId);
    }

    return {
      provinceId,
      provinces,
      onProvinceChange,
    };
  },
});

###

2. City.vue & District.vue

這兩個(gè)組件的實(shí)現(xiàn)方式與`Province.vue`類似，只需調(diào)整模板中的標(biāo)簽名稱和屬性，以及處理對(duì)應(yīng)層級(jí)的數(shù)據(jù)即可。

###

3. CityList.vue

####

模板

html
<template>
  <div>
    <Province :initialProvinceId="provinceId" @province-change="onProvinceChange" />
    <City :provinceId="provinceId" />
    <District :provinceId="provinceId" :cityId="cityId" />
  </div>
</template>

####

腳本

typescript
import { defineComponent, ref } from 'vue';
import Province from './Province.vue';
import City from './City.vue';
import District from './District.vue';

export default defineComponent({
  setup() {
    const provinceId=ref('');
    const cityId=ref('');

    function onProvinceChange(newId: string) {
      provinceId.value=newId;
    }

    return {
      provinceId,
      cityId,
      onProvinceChange,
    };
  },
  components: {
    Province,
    City,
    District,
  },
});

###

4. index.vue

####

模板

html
<template>
  <CityList />
</template>

<script lang="ts">
import CityList from './CityList.vue';

export default {
  components: {
    CityList,
  },
};
</script>

至此，我們已經(jīng)完成了Vue3城市選擇器的開(kāi)發(fā)工作。通過(guò)合理劃分組件、封裝聯(lián)動(dòng)邏輯，實(shí)現(xiàn)了省份、城市、區(qū)縣的聯(lián)動(dòng)選擇功能。接下來(lái)，可以根據(jù)實(shí)際需求對(duì)組件進(jìn)行樣式定制、添加更多交互效果等優(yōu)化工作，進(jìn)一步提升用戶體驗(yàn)。

本文詳細(xì)展示了如何利用Vue3從零開(kāi)始構(gòu)建一個(gè)城市選擇器組件，涵蓋了項(xiàng)目初始化、基礎(chǔ)架構(gòu)設(shè)計(jì)、數(shù)據(jù)獲取與處理、組件開(kāi)發(fā)等關(guān)鍵步驟，旨在幫助開(kāi)發(fā)者深入理解Vue3組件化開(kāi)發(fā)理念，提升實(shí)戰(zhàn)能力。希望對(duì)你在實(shí)際工作中開(kāi)發(fā)類似功能組件有所幫助。